Mobile-Web-App

Thursday, March 15, 2012

HTML5 svg: LinearGradient

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg LinearGradient</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>

<svg width="400" height="300">
 <rect x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />

 <defs>
  <LinearGradient id="horizontallineargradient"  x1="0%" y1="0%" x2="100%" y2="0%">
   <stop offset="0%" stop-color="#0ff"></stop>
   <stop offset="100%" stop-color="#f00"></stop>
  </LinearGradient> 
 
  <LinearGradient id="verticallineargradient"  x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" stop-color="red"></stop>
   <stop offset="100%" stop-color="blue"></stop>
  </LinearGradient>
 </defs>
 
 <rect x="10" y="10" width="290" height="50" stroke="black" fill="url(#horizontallineargradient)"/> 
 <rect x="10" y="80" width="290" height="200" stroke="black" fill="url(#verticallineargradient)"/>
</svg>

</body>
</html>

HTML5 svg: reuse group

We can define groups of svg elements using <defs>. Then re-use the defined groups using <use>.

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>

<svg width="400" height="300">
 <rect x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />

 <defs>
  <g id="svggroup">
   <rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="5" fill="none"/>
   <circle cx="50" cy="50" r="50" stroke="blue" stroke-width="5" fill="none"/>
  </g>
 </defs>
 
 <use xlink:href="#svggroup"/>
 <use xlink:href="#svggroup" transform="translate(100, 100) rotate(-10) scale(1.5)"/> 
 
</svg>

</body>
</html>

HTML5 svg, group with transform

Example:

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>

<svg width="400" height="300">
 <rect x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />

 <g id="svggroup" transform="translate(100, 100) rotate(-10) scale(1.5)">
  <rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="5" fill="none"/>
  <circle cx="50" cy="50" r="50" stroke="blue" stroke-width="5" fill="none"/>
 </g>
</svg>

</body>
</html>

Create and link external svg image from HTML5

Last article demonstrate how to Embed Scalable Vector Graphics(svg) in HTML5. svg image can be place as separated file, and link from HTML5.

To create a seperated svg file using normal text editor, add the name space in svg file. mysvg.svg

<svg width="400" height="300" 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="50" y="50" width="300" height="200" stroke="red" stroke-width="5" fill="#00f" />
<rect x="100" y="100" width="200" height="100" stroke="green" stroke-width="5" fill="#555" />
<rect x="25" y="25" width="50" height="50" stroke="#000" stroke-width="5" fill="none"/>
<rect x="75" y="75" width="50" height="50" stroke="#fff" stroke-width="5" fill="none"/>
</svg>

To link to external svg file using <img> as normal.

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>
<p>Link svg from external file.</p>
<img src="mysvg.svg"></img>

</body>
</html>

Wednesday, March 14, 2012

Embed Scalable Vector Graphics(svg) in HTML5

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 svg</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 Scalable Vector Graphics (svg)</h1>

<svg width="400" height="300">
<rect x="50" y="50" width="300" height="200" stroke="red" stroke-width="5" fill="#00f" />
<rect x="100" y="100" width="200" height="100" stroke="green" stroke-width="5" fill="#555" />
<rect x="25" y="25" width="50" height="50" stroke="#000" stroke-width="5" fill="none"/>
<rect x="75" y="75" width="50" height="50" stroke="#fff" stroke-width="5" fill="none"/>
</svg>

</body>
</html>

The jqMobi and jqUi official 1.0 released

jqMobi is a lightweight query selector library for mobile devices. It comes with over 60 api calls and jQuery compatible syntax.
jqUi is the only Ui/UX framework to work great cross platform. It fully embraces android 2.2+ (including 3.x) and offer features like fixed headers/footers, scrolling and widgets.

The official 1.0 release for jqMobi and jqUi

Tuesday, March 13, 2012

HTML5 fieldset and legend

<fieldset> group related elements and draws a box around.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 fieldset and legend</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 fieldset and legend</h1>
<form>
<fieldset>
<legend>HTML5 fieldset and legend</legend>
<p><input type="range" max="10" min="0" value="5"/></P>
<p><button>Button</button></p>
<p><button>Button</button></p>
</fieldset>
</form>

</body>
</html>