Mobile-Web-App

Saturday, February 4, 2012

Titanium Studio

Titanium Studio is an Eclipse-based IDE built on the patent-pending development technology acquired from Aptana™. Use Titanium Studio to rapidly build, test and deploy mobile, desktop and web applications. Take advantage of new functionality like code completion, Git integration and a full-featured editor. Manage Titanium projects, test your mobile apps in the simulator or on device, automate app packaging and much more … all from within the new Titanium Studio.

Develop, test, and deploy your mobile app in a single environment
Eclipse-based IDE for mobile and web development
Support for HTML5, CSS3, JavaScript, Ruby, Rails, PHP, and Python

Link: http://www.appcelerator.com/products/titanium-studio/

Related: Appcelerator Titanium Smartphone App Development Cookbook

Aptana Studio 3

Aptana Studio 3 is a professional, open source development tool for the open web. Support Windows, Mac OS X and Linux.

Develop and test your entire web application using a single environment, Aptana Studio 3. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.

web site: http://www.aptana.com/

Friday, February 3, 2012

Unicode 6.1 released

Unicode Standard 6.1.0 released, continuing Unicode's long-term commitment to support the full diversity of languages around the world. This latest version adds characters to support additional languages of China, other Asian countries, and Africa. It also addresses educational needs in the Arabic-speaking world. A total of 732 new characters have been added. For full details, see http://www.unicode.org/versions/Unicode6.1.0/.

Source: http://unicode-inc.blogspot.com/2012/01/announcing-unicode-standard-version-61.html

jQuery Mobile and canvas, with drawing

Example:

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile - canvas</title>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script>
$(document).ready(function () {
 var canvasWidth = $("#canvas").width();
 var canvasHeight = $("#canvas").height();

 var canvas = $("#canvas").get(0);
 var context = canvas.getContext("2d");
 drawRects(context);
 
});

function drawRects(c){
 c.lineWidth = 20;
 
 //default color
 c.fillRect(20, 10, 30, 130);
 
 //Rect in red
 c.fillStyle = "#FF0000";
 c.fillRect(70, 10, 30, 130);

 //Rect fill gradient
 //source and destination (x,y) coordinates for the gradient:
 //- createLinearGradient(srcX, srcY, destX, destY)
 gradient = c.createLinearGradient(100, 10, 130, 140);
 gradient.addColorStop(0,"blue");  //start from blue
 gradient.addColorStop(1,"green"); //end to green
 c.fillStyle = gradient;
 c.fillRect(120, 10, 30, 130);
 
 gradient2 = c.createLinearGradient(170, 10, 300, 140);
 gradient2.addColorStop(0,"red");  //start from red
 gradient2.addColorStop(1,"blue"); //end to blue
 c.fillStyle = gradient2;
 c.fillRect(170, 10, 130, 130);

}
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>Mobile-Web-App</h3>
</div>

<div data-role="content">
<h1>jQuery Mobile - canvas</h1>
<canvas id="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Compare to: HTML5 Canvas - fillRect(), with solid color/LinearGradient

jQuery Mobile and canvas

Example of jQuery Mobile and canvas.

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile - canvas</title>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script>
$(document).ready(function () {
 var canvasWidth = $("#canvas").width();
 var canvasHeight = $("#canvas").height();

 alert("Canvas Size: " + canvasWidth.toString() + " X " + canvasHeight.toString());
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>Mobile-Web-App</h3>
</div>

<div data-role="content">
<h1>jQuery Mobile - canvas</h1>
<canvas id="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

next: jQuery Mobile and canvas, with drawing

Thursday, February 2, 2012

jQuery Mobile - $(document).ready()

$(document).ready(handle) Specify a function (handle) to execute as soon as the DOM is loaded.

Example of using $(document).ready() in jQuery Mobile.

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile .ready()</title>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script>
$(document).ready(function () {
alert("Page Ready");
});
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>jQuery Mobile .ready()</h3>
</div>

<div data-role="content">
<h1>$(document).ready(handle)</h1>
<p>Specify a function to execute when the DOM is fully loaded.</p>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Generate QR code using Google Chart Tools

QR codes are a popular type of two-dimensional barcode. They are also known as hardlinks or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example URL, contact information, a telephone number, even a poem! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones.

Google Chart Tools: Infographics provide API to generate QR Code easily.

It's a example to create QR Code using Google Chart Tools, and display on canvas.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: create QR code</title>
<script type="text/javascript">

var canvas;
var context;

function loadcanvas(){

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
}

function enter() {
 
 var QRprefix = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=";
 var userenter = document.getElementById("textin").value;
 
 var QRimage = new Image;
 QRimage.src = QRprefix + userenter;
 
 QRimage.addEventListener("load",
    function(){
     context.drawImage(QRimage, 0, 0);
    } ,
    false);

}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: create QR code</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="200" height="200">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input id="textin" type="text" />
<input type="button" value="Generate QR Code" onClick="enter()" />
</form>
</body>
</html>