Mobile-Web-App

Wednesday, March 21, 2012

Detect click event on svg objects

In this example, svg_clicked() function is added as click event listener for the svg objects. You can try how the event triggered inside a object fill with "none"(svg_rect), and fill with color(svg_circle), and also what happen when you click on the overlap area of you objects.

<!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 id="svg_background" x="0" y="0" width="400" height="300" stroke="black" stroke-width="1" fill="white" />
 
 <circle id="svg_circle" cx="200" cy="200" r="100" stroke="blue" stroke-width="5" fill="green"/> 
 <rect id="svg_rect" x="50" y="50" width="100" height="100" stroke="red" stroke-width="5" fill="none"/>
</svg>

<script>
document.getElementById("svg_background").addEventListener("click", svg_clicked, false);
document.getElementById("svg_circle").addEventListener("click", svg_clicked, false);
document.getElementById("svg_rect").addEventListener("click", svg_clicked, false);
  
function svg_clicked(event)
{
 alert(event.target.id +" clicked");
}
</script>

</body>
</html>

Beginning Mobile Application Development in the Cloud

Learn how to build apps for mobile devices on Cloud platforms

The marketplace for apps is ever expanding, increasing the potential to make money. With this guide, you'll learn how to build cross-platform applications for mobile devices that are supported by the power of Cloud-based services such as Amazon Web Services. An introduction to Cloud-based applications explains how to use HTML5 to create cross-platform mobile apps and then use Cloud services to enhance those apps. You'll learn how to build your first app with HTML5 and set it up in the Cloud, while also discovering how to use jQuery to your advantage.

Highlights the skills and knowledge you need to create successful apps for mobile devices with HTML5
Takes you through the steps for building web applications for the iPhone and Android
Details how to enhance your app through faster launching, touch vs. click, storage capabilities, and a cache
Looks at how best to use JSON, FourSquare, jQuery, AJAX, and more
Shares tips for creating hybrid apps that run natively

If you're interested in having your application be one of the 200,000+ apps featured in the iPhone store or the 50,000+ in the Android store, then you need this book.

Tuesday, March 20, 2012

HTML5 svg: text

<!doctype html>

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

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

<svg width="600" height="200">
 <rect x="0" y="0" width="600" height="200" stroke="black" stroke-width="1" fill="white" />
 
 <text 
  x="10" y="50" 
  style="font-family: sans-serif"
  font-weight="bold"
  stroke="black"
  stroke-width="2"
  fill="#f00"
  font-size="30px">Mobile-Web-App: HTML5 svg Text</text> 
 
</svg>


</body>
</html>

Monday, March 19, 2012

HTML5 svg: path

We can define path in HTML5 svg. Here is a example:

where:

d stand for data
M: moveto
L: lineto
Q: quadratic curve
Z: close path

<!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" />

 <def>
 <path d="M50, 50
    L100, 50
    L100, 100
    L50, 100 Z" id="path1" fill="green"></path> 
 </def>
 
 <use xlink:href="#path1" 
   fill="none" 
   stroke="#ff0000" 
   stroke-linejoin="round"
   stroke-width="5px"/>
  
 <path d="M100, 150
    L350, 150
    L350, 250
    L100, 250" id="path2" fill="blue" stroke="#000000" stroke-width="10px"></path> 
    
 <path d="M200, 0
    L200, 50
    Q250, 50, 300, 100
    Q350, 100, 350, 0 Z"
    fill="red" stroke="#000000" stroke-width="5px"></path>

</svg>

</body>
</html>

Saturday, March 17, 2012

FREE eBook: “Mobile Design and Development” by Brian Fling for free online

Read “Mobile Design and Development: Practical concepts and techniques for creating mobile sites and web apps” by Brian Fling for free online. Mobile devices outnumber desktop and laptop computers three to one worldwide, yet little information is available for designing and developing mobile applications.

Description
Mobile Design and Development fills that void with practical guidelines, standards, techniques, and best practices for building mobile products from start to finish. With this book, you’ll learn basic design and development principles for all mobile devices and platforms.

Contents

A Brief History of Mobile
The Mobile Ecosystem
Why Mobile?
Designing for Context
Developing a Mobile Strategy
Types of Mobile Applications
Mobile Information Architecture
Mobile Design
Mobile Web Apps Versus Native Applications
Mobile 2.0
Mobile Web Development
iPhone Web Apps
Adapting to Devices
Making Money in Mobile
Supporting Devices
The Future of Mobile

Link: http://mobiledesign.org/Home

Friday, March 16, 2012

HTML5 svg: pattern

<!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>
  <pattern id="mypattern1" x="0" y="0" width="30" height="30" viewBox="0 0 30 30" patternUnits="userSpaceOnUse">
   <circle cx="15" cy="15" r="12" stroke="blue" stroke-width="3" fill="yellow"/>
  </pattern>
  
  <pattern id="mypattern2" x="0" y="0" width="48" height="48" viewBox="0 0 48 48" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="48" height="48" xlink:href="Mobile-Web-App.png" ></image>
  </pattern>  
 </defs>
 
 <rect x="10" y="10" width="290" height="50" stroke="black" fill="url(#mypattern1)"/>
 <rect x="10" y="80" width="290" height="200" stroke="black" fill="url(#mypattern2)"/> 

</svg>

</body>
</html>

HTML5 svg: radialGradient vs 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> 
  
  <radialGradient id="radialgradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
   <stop offset="0%" style="stop-color:rgb(255,0,0)"/>
   <stop offset="100%" style="stop-color:rgb(0,0,255)"/>
      </radialGradient>
 </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(#radialgradient)"/>
</svg>

</body>
</html>

Related: - HTML5 svg: LinearGradient - Horizontal vs Vertical