Mobile-Web-App

Thursday, March 15, 2012

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>

Nokia Maps for mobile web

Visit m.maps.nokia.com with your device to try Nokia Maps for mobile web.

supported device -

Mobile Devices:
- iOS 4.3+ (mobile Safari)
- Android 2.2, 2.3
- Blackberry 6.0+ (experimental)
Desktop:
- Safari
- Chrome

What’s inside?
- Voice guidance for walk navigation
- Fast, easy to use maps for exploring neighbourhoods and more
- Loads of useful information for discovering places nearby and far away
- Opinions and reviews from others to help you get a feel for a place
- Highlights and tips from popular travel guides
- Image galleries so you can enjoy a visual preview of a place
- Easy place sharing through SMS, Facebook, Twitter or email
- Clear and accurate walking and driving routes
- “Save your Favourites” feature so you can take places with you
- View your position on the map to explore what's nearby

Details: http://betalabs.nokia.com/apps/nokia-maps-for-mobile-web

Nokia Maps for mobile web on Android tablet