Mobile-Web-App

jQuery Mobile: Up and Running

2012-03-07T12:55:00.000-08:00

Would you like to build one mobile web application that works on iPad and Kindle Fire as well as iPhone and Android smartphones? This introductory guide to jQuery Mobile shows you how. Through a series of hands-on exercises, you’ll learn the best ways to use this framework’s many interface components to build customizable, multiplatform apps. You don’t need any programming skills or previous experience with jQuery to get started.

By the time you finish this book, you’ll know how to create responsive, Ajax-based interfaces that work on a variety of smartphones and tablets, using jQuery Mobile and semantic HTML5 code.

Understand how jQuery Mobile works with HTML5, CSS3, and JavaScript
Work with UI components to format content and create forms, lists, navbars, and buttons
Create dynamic content with JavaScript, Ajax, and the jQuery core framework
Customize your entire user interface with themes and CSS3
Enable users to install your app from the browser and work with it offline
Distribute through app stores by packaging your creation as a native app

About the Author

Maximiliano Firtman, @firt, is a developer focused on mobile and HTML5 development. He is a trainer in mobile technologies and founder of ITMaster Professional Training. He is the author of many books, including Programming the Mobile Web (O'Reilly). He has spoken at international conferences such as OSCON, Velocity, Breaking Development, GOTO Europe, Campus Party, QCon, and Adobe en Vivo.

He has been an Adobe Community Professional since 2011 and a Nokia Developer Champion since 2006, and he has developed many mobile-related projects, such as MobileHTML5.org, MobileTinyURL.com, and iWebInspector.com. He maintains a mobile web development blog at MobileXweb.com.

He is an expert in native and HTML5 web development, including iOS, Android, PhoneGap, and jQuery technologies.

Sencha Touch 2 - a high-performance HTML5 mobile application framework

2012-03-07T02:35:00.003-08:00

HTML5 has become the most important advance in application development in the last decade. Sencha Touch 2, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch 2 is the only framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more.

Web Site: http://www.sencha.com/

Sencha Touch 2 Launch from Sencha on Vimeo.

Sencha Touch 2, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch 2 is the only framework that enables developers to build fast and impressive app that work on iOS, Android, BlackBerry, Kindle Fire, and more.

Learn more at http://sencha.com/touch

jQuery Mobile 1.1.0 RC1 released

2012-03-06T13:15:00.002-08:00

The first jQuery Mobile 1.1.0 RC1 released. This release has been a real labor of love, with hundreds of commits and tons of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board.

Try it now! http://jquerymobile.com/demos/1.1.0-rc.1/

Implement slide effect using jQuery UI

2012-03-05T09:26:00.001-08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI - Slide Effect</title>
 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">

$(function() {
 $("#button").click(function() {
  var options = {}; //no options
  $("#object").effect("slide", options, "normal", callback);
 });
 
 function callback() {
  //It will be called after the effect is completed
 };
});
 
</script>
</head>
<body>
<div id="object">
<h1>Mobile-Web-App: jQuery UI - Slide Effect</h1>
<img src="http://goo.gl/BlQEX"></img>
</div> 
 
<button id="button">Slide Effect</button>
</body>
</html>

Implement bounce effect using jQuery UI

2012-03-04T12:43:00.001-08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI - Bounce Effect</title>
 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">

$(function() {
 $("#bouncebutton").click(function() {
  var options = {}; //no options
  $("#bounceobject").effect("bounce", options, "normal", callback);
 });
 
 function callback() {
  //It will be called after the effect is completed
 };
});
 
</script>
</head>
<body>
<div id="bounceobject">
<h1>Mobile-Web-App: jQuery UI - Bounce Effect</h1>
<img src="http://goo.gl/BlQEX"></img>
</div> 
 
<button id="bouncebutton">Bounce Effect</button>
</body>
</html>

jQuery UI - Dialog

2012-03-03T09:52:00.002-08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI Dialog</title>

 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script>
 $(function() {
  $("#mydialog").dialog();
 });
</script>

</head>
<body>
<h1>Mobile-Web-App: jQuery UI Dialog</h1>

<div id="mydialog" title="Mobile-Web-App">
 <p>Hello! It's a jQuery UI Dialog</p>
 <img src="http://goo.gl/BlQEX"></img>
</div>

</body>
</html>

jQuery UI - datepicker

2012-03-02T15:34:00.004-08:00

Example of jQuery UI datepicker:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI Datepicker</title>
 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">
function onloaded(){
 $("#datepicker").datepicker();
}

$(function() {
 $("#readdate").click(function() {
  var date = $("#datepicker").datepicker( "getDate" );
  alert(date); 
 });
});
</script>
</head>
<body onload="onloaded();">
<h1>Mobile-Web-App: jQuery UI Datepicker</h1>

<p>Datepicker: <input type="text" id="datepicker"></p>
<button id="readdate">Read Date</button>
</body>
</html>

jQuery UI: Button

2012-03-02T15:12:00.002-08:00

Example of jQuery UI Button:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI Button</title>

 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script>
 $(function() {
  $( "#mybutton" ).click(function() {
   alert("Button Clicked");
  });
 });
</script>
</head>
<body>
<h1>Mobile-Web-App: jQuery UI Button</h1>

<button id="mybutton">My Button</button>
</body>
</html>

Implement Resizable object using jQuery UI

2012-03-02T11:20:00.002-08:00

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI resizable</title>

 <title>jQuery UI Resizable</title>

 <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">
function onloaded(){
 $( "#resizable" ).resizable();
}


</script>
</head>
<body onload="onloaded();">
<h1>Mobile-Web-App: jQuery UI resizable</h1>
 
<div>
<img id="resizable" src="Mobile-Web-App.png"></img>
</div>

</body>
</html>

Pro jQuery

2012-03-02T08:45:00.000-08:00

jQuery is one of the most popular and powerful JavaScript libraries available today. It's widely used to create rich user experiences and to simplify website and application development. It is the tool of choice for web developers everywhere and sets the standard for simplicity, flexibility and extensibility.

In Pro jQuery, seasoned author Adam Freeman explains how to get the most from jQuery by focusing on the features you need for your project. He starts with the nuts and bolts and shows you everything through to advanced features, going in depth to give you the knowledge you need. Getting the most from jQuery is essential to truly mastering web development.

What you’ll learn

Understand the capabilities of jQuery and why it is special
Use the core of jQuery to enrich HTML, including tables, forms and data displays
Use jQuery UI to create rich and fluid user experiences
Use rich interactions such as drag and drop, sortable data and touch sensitivity
Use jQuery Mobile to create touch-enabled interfaces for mobile devices and tablets
Extend jQuery by creating custom plugins and widgets

Each topic is covered clearly and concisely, and is packed with the details you'll need to learn to be truly effective with jQuery. The most important features are given a no-nonsense, in-depth treatment, and chapters contain examples that demonstrate both the power and the subtlety of jQuery.

Who this book is for

This book is for working developers who want to learn about jQuery in detail. Quick refreshers of HTML and CSS are given to help you get up to speed, but a good working knowledge of the basics is assumed.

Putting jQuery In Context
HTML Primer
CSS Primer
JavaScript Primer
The jQuery Basics
Managing the Element Selection
Manipulating the DOM
Manipulatng the Elements
Working with Events
Using jQuery Effects
Refractoring the Example: Part I
Using Data Templates
Working with Forms
Using Ajax: Part I
Using Ajax: Part II
Refractoring the Example: Part II
Setting Up jQuery UI
Using the Button, Progress Bar, and Slider Widgets
Using the Autocomplete and Accordion Widgets
Using the Tabs Widget
Using the Datepicker Widget
Using the Dialog Widget
Using the Drag & Drop Interactions
Using the Other Interactions
Refactoring the Example: Part III
Getting Started with jQuery Mobile
Pages and Navigation
Dialogs, Themes, and Layouts
Buttons and Collapsible Blocks
Using jQuery Mobile Forms
jQuery Mobile Lists
Refactoring the Mobile Example: Part IV
Using the jQuery Utility Methods
The jQuery UI Effects & CSS Framework
Using Deferred Objects

About the Author

Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and training for his first competitive triathlon.

Developing apps with Qt, featuring the Nokia 808 PureView

2012-02-28T05:35:00.000-08:00

Executives from National Geographic, Pikchur, and 10tons discuss how easy it has been to use Qt in the development of their latest apps for Nokia's smartphones. Combining that ease of development, with Nokia's top-of-the-line hardware, global brand recognition, and distribution in more than 190 countries worldwide with Nokia Store, developers can reach more users, in more places, everyday. This video features the stunning new Nokia 808 PureView. See how easy it is to develop for Nokia with Qt: http://www.developer.nokia.com/Develop/Qt/

Implement draggable object using jQuery UI

2012-02-28T04:54:00.003-08:00

Example to implement draggable object using jQuery UI:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: jQuery UI draggable</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>

<script type="text/javascript">
function onloaded(){
 $( "#draggable" ).draggable();
}


</script>
</head>
<body onload="onloaded();">
<h1>Mobile-Web-App: jQuery UI draggable</h1>
 
<img id = "draggable" src="Mobile-Web-App.png"></img>
</body>
</html>

HTML5 Camera

2012-02-27T06:48:00.003-08:00

Example of using HTML5 Camera.

Example of HTML5 Camera run on Opera Mobile web browser on Android tablet.

<!DOCTYPE html>
<head>
<title>Mobile-Web-App: Camera</title>
</head>
<html>
<body>
<h1>Mobile-Web-App: Camera</h1>
<p id="vstatus"></p>
<video id="myvideo" autoplay></video>

<script type="text/javascript">
var myVideo = document.getElementById("myvideo");
var vStatus = document.getElementById("vstatus");

if(navigator.getUserMedia) {
 navigator.getUserMedia("video", successCallback, errorCallback);
} else {
 vStatus.textContent = "Your browser not support Camera!";
}

function successCallback( stream ) {
 myVideo.src = stream;
}

function errorCallback( error ) {
 vStatus.textContent = "Error: " + error.code + " !";
}

</script>
</body>
</html>

Opera Mobile for Android now support HTML5 Camera

2012-02-27T06:41:00.003-08:00

What's in updated version (12.0) of Opera Mobile web browser for Android:

Added:
Support for more than 9 speed dials
WebGL support
HTML5 Camera (Android 2.1+)
HTML5 Device Orientation
HTML5 parser (Ragnarök)
Android Beam support (NFC)
Added Flash support on Android 4.0.3
RTL text support in UI
Turkish translation
Improved:
Keyboard support
Scrolling on high pixel devices (Galaxy Nexus)
Closing of tabs
SSL connection speed
Tab session restore
Find in page UI
Upgraded:
Presto core (2.10.254)

Hello Dart!

2012-02-27T03:33:00.005-08:00

- Install and start DartEditor

- Click File -> New Application in Eclipse menu

- Enter Name(and also Directory) of your Dart application, check Application Type of Web, and click Finish.

- A dummy Hello World! of Dart will be generated. Click the Run (green arrow) button to start the Dart application. The Hello World! Dart application will be loaded in build-in Chromium with Dart VM.

Remark: if you cannot run the application or cannot generate Javascript because of:
error while loading shared libraries: libcrypto.so.0.9.8: cannot open shared object file: No such file or directory

You have to install libssl0.9.8. Refer to the article: Cannot launch Dart application - error while loading shared libraries: libcrypto.so.0.9.8

Cannot launch Dart application - error while loading shared libraries: libcrypto.so.0.9.8

2012-02-27T02:52:00.002-08:00

If you try "Hello World!" for Dart in DartEditor, and face the error:
error while loading shared libraries: libcrypto.so.0.9.8: cannot open shared object file: No such file or directory

You can try to install libssl0.9.8 using the command in Terminal:
$ sudo apt-get install libssl0.9.8:i386

My test platform: Ubuntu 11.10

Dart Editor

2012-02-26T23:44:00.002-08:00

Dart Editor is a lightweight, open-source editor based on Eclipse components. In addition to editing Dart programs, you can use Dart Editor to invoke the Dart-to-JavaScript compiler and launch Dart-based web apps.

Follow the tutorial to install and use Dart Editor on Linux.

These instructions are also available for:

After installed, switch to the Dart installation directory, and run DartEditor.

About Facebook JavaScript SDK

2012-02-26T10:47:00.004-08:00

The JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs. Further, it provides a mechanism for rendering of the XFBML versions of our Social Plugins, and a way for Canvas pages to communicate with Facebook.

reference: http://developers.facebook.com/docs/reference/javascript/

EPUBReader : Read ePub just in Firefox

2012-02-25T10:25:00.001-08:00

EPUBReader is a Firefox addon which lets you read ePub-files just in the browser. You don't need to install additional software!

If you click on a link to an ePub-file, you are normally prompted by the Firefox "save as" dialog. With EPUBReader installed, the ePub-file is downloaded, processed and directly displayed ready to read.

It runs on every operating system Firefox does (Windows, MacOS X, Linux).

Website: http://www.epubread.com/

Watch EPUBReader in action: Watch how it looks like reading an ePub-file with the Firefox add-on EPUBReader.

Last year at Mobile World Congress

2012-02-24T12:10:00.000-08:00

SynWrite Editor: A free source code editor

2012-02-24T06:49:00.003-08:00

SynWrite is a free source code editor and notepad replacement for Microsoft Windows Operating Systems.

Web site: http://www.uvviewsoft.com/synwrite/index.html

Features

Syntax highlighting for lots of languages
Fully customizable highlightings
Code folding, determined text ranges may be collapsed
Tree structure view for source code
Autocompletion
Source code templates
Clipboard history panel
Search, replace with regular expressions
Search, replace in multiple files
External tools (capture of console output, errors navigation)
Strings extraction feature
Zen Coding (HTML + CSS + XSL high speed coding engine)
Customizable hotkeys
"Sync-Edit" feature allows to edit identical identifiers (see image)
Portable mode
Live spell checking
Plugin support for file manager "Total Commander"
Multilingual user interface
Bookmarks
Export to RTF/HTML with syntax highlighting
and more...

Tech preview of Chromium with Dart VM

2012-02-24T01:29:00.002-08:00

Chromium with the Dart VM for Linux and Mac is now available. his technology preview allows you to run your Dart programs directly on the Dart VM in Chromium and avoid a separate compilation step.

This release of Chromium with Dart VM integration is a technology preview, and should not be used for day-to-day browsing. After more testing and developer feedback, it will be eventually included the Dart VM in Chrome.

Link: http://www.dartlang.org/dartium/

Important: This browser is a technical preview, and it might have security and stability issues. Do not use Dartium as your primary browser!

Related: DART: new programming language for web applications

DART: new programming language for web applications

2012-02-24T01:24:00.002-08:00

Dart is a new class-based programming language for creating structured web applications. Developed with the goals of simplicity, efficiency, and scalability, the Dart language combines powerful new language features with familiar language constructs into a clear, readable syntax.

Web Site: http://www.dartlang.org/

Related:
- Tech preview of Chromium with Dart VM

Display Map on webpage to track location

2012-02-23T23:31:00.001-08:00

In the previous article "Display Map of current location", we load current map of current using window.navigator.geolocation.getCurrentPosition() when page loaded. That means the map show the location when page load only, will not update when the user(or device) moved. We are going to replace it with window.navigator.geolocation.watchPosition() to get repeated position updates, to track the updated location.

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Web-App: geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style>#mapcanvas { height: 360px; width: 100%}</style>

<script type="text/javascript">

if (window.navigator.geolocation) {
 window.navigator.geolocation.watchPosition(
  successCallback, errorCallback);
} else {
 alert("!!!Browser doesn't support Geolocation API.");
}

function successCallback(position){
 loadmap();
 var mylatitude = position.coords.latitude;
 var mylongitude = position.coords.longitude;
 document.getElementById("latitude").innerHTML
  = "latitude: " + mylatitude;
 document.getElementById("longitude").innerHTML
  = "longitude: " + mylongitude;
 document.getElementById("accuracy").innerHTML
  = "accuracy: " + position.coords.accuracy;
 loadmap(mylatitude, mylongitude);
}

function errorCallback(error) {
 alert(error);
}

var map;

function loadmap(mylat, mylong){
 var options = {
  zoom: 15,
  center: new google.maps.LatLng(mylat, mylong),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  };
  
 map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body>
<h1>Mobile-Web-App: geolocation</h1>
<div id="mapcanvas"></div>
<div>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="accuracy"></p>
</div>
</body>
</html>

BlackBerry Tablet Simulator

2012-02-23T09:23:00.001-08:00

To install and configure the BlackBerry Tablet Simulator:

Before you begin, download and install a VMware Player and the BlackBerry Tablet Simulator.

To download a VMware Player for Windows , visit https://www.vmware.com/tryvmware/?p=player&lp=1 .
To download a VMware Player for Mac, visit https://www.vmware.com/vmwarestore/fusion-for-mac .
To download the BlackBerry Tablet Simulator, visit developer.blackberry.com/android/tool.

Navigate to the location where you saved the simulator, and select the installation file:
- For a Windows environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-Win-nnnnnnnnnnnn.exe
- For a Linux environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-Linux-nnnnnnnnnnnn.bin
- For a Mac environment: BlackBerryPlayBookSimulator-Installer-1.0.9-nnnn-macosx-nnnnnnnnnnnn.zip
where nnnn and nnnnnnnnnnnn are the identifier for the release.
Follow the installation instructions for the simulator.
Launch VMware Player or VMware Fusion.
On the VMware Player screen, click Open a Virtual Machine.
On the Open a Virtual Machine screen, navigate to the folder where you installed the simulator. Select theBlackBerryPlayBookSimulator.vmx file.
Click OK.
By default, the development mode is enabled on the BlackBerry Tablet Simulator.

After you finish:

You should take a snapshot of the virtual machine so that you can return the virtual machine to a known stable state if necessary. To learn how to take a snapshot, view the online help in VMware Player.

To load applications in the simulator, you must obtain the IP address of the simulator. Each time the BlackBerry Tablet Simulator starts, VMware Player assigns it an IP address. You must provide this address to the deployment tool of your choice to load your application in the simulator. To display the IP address, the simulator must be in development mode. You can view the simulator's IP address by clicking the icon to the right of the clock on the status bar.

For optimal performance, you should set the number of cores per CPU of the VMware Player to 2.

know more: https://bdsc.webapps.blackberry.com/android/documentation/whitelisting_your_playbook_1873334_11.html

Mobile-Web-App

jQuery Mobile: Up and Running

About the Author

Sencha Touch 2 - a high-performance HTML5 mobile application framework

jQuery Mobile 1.1.0 RC1 released

Implement slide effect using jQuery UI

Implement bounce effect using jQuery UI

jQuery UI - Dialog

jQuery UI - datepicker

jQuery UI: Button

Implement Resizable object using jQuery UI

Pro jQuery

What you’ll learn

Who this book is for

Table of Contents

About the Author

Developing apps with Qt, featuring the Nokia 808 PureView

Implement draggable object using jQuery UI

HTML5 Camera

Opera Mobile for Android now support HTML5 Camera

Hello Dart!

Cannot launch Dart application - error while loading shared libraries: libcrypto.so.0.9.8

Dart Editor

About Facebook JavaScript SDK

EPUBReader : Read ePub just in Firefox

Last year at Mobile World Congress

SynWrite Editor: A free source code editor

Tech preview of Chromium with Dart VM

DART: new programming language for web applications

Display Map on webpage to track location

BlackBerry Tablet Simulator