#127

Get More Refcardz! Visit [Link]

CONTENTS INCLUDE:
n n

Whats New in JPA 2.0 JDBC Properties Access Mode Mappings Shared Cache Additional API and more...

Getting Started with SenchaCon: JPA 2.0 The Ultimate HTML5 Dev Event
By Mike Keith

SenchaCon is the go-to developer conference for the HTML5 and Sencha communities, including 3 days of technical sessions, an all-day hackathon and a rockin party each night. Youll find deep technical content on Sencha technologies, including Sencha Touch, Ext JS and Sencha Architect as well as JavaScript, HTML5, Server-Side and Cloud technologies.

Join us in Orlando from July 1619, 2013

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

WHaTS InCLuded
65+ conference sessions presented by top speakers from around the world Opening keynote with major announcements and product previews An all-day hackathon with awesome prizes for the top 3 teams 4 Parties! Including welcome reception, beer crawl, SenchaCon party & hackathon beer bash Breakfast, lunch, snacks and discounts to Disney theme parks

Getting Started with JPA 2.0

Access to the Sencha team and product engineers

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Register now at [Link]

DZone, Inc.
|

[Link]

#186
Get More Refcardz! Visit [Link]

Sponsored By:

CONTENTS INCLUDE: Basics: What is a Viewport Mobile URLs High Resolutions Support Mobile Icons Touch Events Offline Support... and more!

HTML5 Mobile Development

By: Max Firtman
Device-Width Values When using width=device-width as the viewports width, the final width that well have available may be (measured in CSS pixels):

The HTML5 umbrella covers a vast range of specifications, APIs, techniques, and design approaches to web development. Several of these technologies are intended to help developers build web applications optimized for mobile devices. Not all platforms support the same features in the same way, however. Moreover, specific hardware differences often require special treatment beyond the W3C spec, no matter how the platform implements the spec. This Refcard is intended to bring you up to speed, and help you jump head-first into mobile HTML5 development. The card first covers the most important HTML5 mobile technologies, including key variations by platform and device, then offers a cream-of-the-crop selection from the vast ecosystem of tools, frameworks, and communities that have sprung up to support mobile HTML5 development. The card assumes basic knowledge of core web development technologies (JavaScript, HTML, CSS).

Option
320

Values
The most common value on smartphones including iPhone, Windows Phone, Android (medium screen sizes < 4") Large screen Android smartphones (< 5"), such as Galaxy SIII & SIV Phablets (>5"), such as Galaxy Note Small tablets Large tables

360 400 600 768

BASICS: WHAT IS A VIEWPORT?

A viewport allows us to normalize different devices to get the best sizes for a mobile website or webapp and to avoid initial zooming. All platforms support viewport definitions through <meta> tags:
<meta name=viewport content={comma-separated options}>

Even on high-resolution screens, such as Retina displays, you will always get a width in CSS pixels with a value of 320. Therefore, the available width for the canvas is the same for all devices. Landscape viewport Safari for iPhone will not use the available space on the viewport on landscape and it will zoom in the content. To avoid this behavior we can use the code on [Link]

The most useful version is:

<meta name=viewport content=width=device-width>

MOBILE URLS
Using standard hyperlinks we can communicate with the operating system. Remember to encode in URL format any parameter that you might pass through.

Viewport options
Option
width

Values
Width of the virtual viewport that the browser will expose to our website in CSS pixels or the constant device-width Height of the virtual viewport that the browser will expose to our website in CSS pixels or the constant device-width no/yes Float value (1=no zoom) Float value Float value Integer value (70 to 400) in DPI or one of the following constants: device-dpi, high-dpi, medium-dpi, low-dpi. Not available on Safari for iOS

Calls and messaging

To initiate a call, [Link]

<a href=[Link] us</a>

height

user-scalable initial-scale

HTML5 Mobile Development

minimum-scale maximum-scale target-densitydpi

Viewport Through CSS Internet Explorer since v10 also supports @viewport on CSS:
@-ms-viewport { width: device-width; }

Thinking Mobile? Think Sencha.

Sencha Touch Bundle is everything you need to design and develop cross-platform, mobile apps.
Try Sencha Touch Bundle free for 30 days! [Link]/touch-bundle

On Windows 8, including tablets, IE can work in snap state. We can define the viewport only when in this mode:
@media screen and (max-width: 400px) { @-ms-viewport { width: 320px; } }

DZone, Inc.

[Link]

HTML5 Mobile Development

To initiate an SMS, [Link] The body might be ignored by some platforms.

<a href=[Link] us SMS</a>

Using scalar solutions

Using these techniques, our content will render properly on all kinds of screen densities without image quality loss: SVG: Scalable Vector Graphics We can use SVG as an external document or as inline using the new <svg> element Font face We can use font files for iconography in conjunction with CSS3 Font face. Look at [Link] and [Link] CSS3 Use CSS3 for effects, gradients, rounded corners and backgrounds

To initiate a mail compose, [Link] iOS supports HTML on the body.

<a href=[Link] us SMS</a>

To initiate a Facetime call on iOS, facetime:{number/user}

<a href=facetime:myuser>Call us with Facetime</a>

Providing alternate bitmap files

To initiate a Skype call, skype:{user}?call

<a href=skype:myuser?call>Call us with Skype</a>

When working with bitmap files (JPEG, GIF, PNG), we can provide different versions of the same file for different resolution. Be careful about the final size for high-resolution devices. Using background images and media queries If bitmap images are defined using background images on CSS, we can provide alternate versions using the extension (prefixed) device-pixel-ratio. For devices with a pixel ratio of 2 or more:
/* Low resolution version */ #picture { background-image: url(picture_low.png); } /* High resolution version with different prefixes */ @media screen and (min--moz-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2) { #picture { background-image: url(picture_hi.png); background-size: 100%; } }

To tweet through the native Twitter app, twitter://post?message={message}

<a href=twitter://post?Hello>Tweet</a>

Maps and Navigation

To open the Maps app on Android and iOS < 6, [Link] com?q={query}
<a href=[Link] Map</ a>

To initiate a navigation on Android and iOS < 6, [Link] ddr={point1}&daddr={point2}

<a href=[Link] &daddr=Pier+39>Navigate to Pier 39</a>

Using image-set On Safari for iOS from version 6 we can use the -webkit-image-set function to provide different images from CSS:
background-image: -webkit-image-set( url(picture_low.png) 1x, url(picture_hi.png) 2x );

To open the Maps app on iOS >=6, [Link]

<a href=[Link] Map</a>

To initiate a navigation on iOS >= 6, [Link] &daddr={point2}

<a href=[Link] &daddr=Pier+39>Navigate to Pier 39</a>

Using JavaScript We can query the [Link] property. If its undefined, we can guess a low-resolution device; if its a numeric value we can use it to change the image being loaded.
var pixelRatio = [Link] || 1; if (pixelRatio >= 2) { [Link](#image1).src = picture_hi.png; }

Apple Stores

To open iTunes, AppStore or iBookStore on iOS, generate the link from [Link]

To remove automatic linking

<meta name=format-detection content=telephone=no> <meta name=x-rim-auto-match content=none forua=true>

MOBILE ICONS
We need to provide different icons for the tab or title area and for the home screen when the user adds an icon to it. Different platforms and devices support different icon sizes.

HIGH RESOLUTION SUPPORT

Devices with a high-resolution display (as in Retina iOS devices) will use a multiplier for all your dimensions, known as the device pixel ratio. Therefore, if you draw a 100 pixels element it will measure 100 device pixels on a device with an average screen density, it will be rendered as 200 device pixels on a high resolution device such as iPhone 5, and a 300 device pixels on a ultra high resolution device, such as Samsung Galaxy SIV. Thanks to the device pixel ratio, our design will look the same in inches on every device, regardless of the screen density.

Window and tab icons

<link rel=icon href=icon_32.png> <!-- For IE, we need an icon in ICO format --> <link rel=shortcut icon href=[Link]>

DZone, Inc.

[Link]

HTML5 Mobile Development

Home screen icons

<-- iPad icons --> <link rel=apple-touch-icon href=icons/[Link] sizes=72x72> <link rel=apple-touch-icon href=icons/[Link] sizes=144x144> <!-- iPhone and iPod touch icons --> <link rel=apple-touch-icon href=icons/[Link] sizes=57x57> <link rel=apple-touch-icon href=icons/[Link] sizes=114x114>

Startup images When the webapp is opened from the Home Screen, we can define a startup image that acts as the image while the webapp is being loaded:
<link rel=apple-touch-startup-image href=[Link]>

The image has to be full screen size and because there are several resolutions (iPhone 3GS, iPhone 4S, iPhone 5, iPad Mini, iPad 2) we can use media queries to provide different versions. For iPhone 5 and latest iPods touch we can use:
<link rel=apple-touch-startup-image href=[Link] media=only screen and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)>

Other platformssuch as Android, BlackBerry and Symbiansupport the apple-touch-icon link with non-standard sizes. Nokia Symbian also supports:
<link rel=nokia-touch-icon href=icons/[Link]>

Precomposed icons By default, Apple will add shadow, rounded corners and 3D shine effects to the icons, as in the following image: To avoid some of these effects we can use the alternate version
<link rel=apple-touch-icon-precomposed href=icons/[Link] sizes=72x72>

We can also provide portrait and landscape versions for iPads using orientation: landscape and orientation: portrait in the media attribute.

Opening links

While in a webapp, all the links are opened in Safari (new window). To open a link and replace the current HTML in our app context, we can use JavaScript as in:
<a href=# onclick=[Link]=[Link]>Go</a>

Windows 8 Start Screen Tile

Internet Explorer 10 on Windows 8 supports a "Pin to the Start Screen" feature. We can define the background color and the icon to be used in the Start Screen using:
<meta name=msapplication-TileImage content=icons/[Link]> <meta name=msapplication-TileColor content=#FFFF00>

Mozilla open webapps

On Firefox for desktop and mobile, including Firefox OS, we can install a webapp using a manifest JSON file and a JavaScript API. The manifest file looks like:
{ name: My HTML5 App, description: This is the description of the app, launch_path: /[Link], icons: { 128: /img/[Link] // >=128 is mandatory }, default_locale: en }

Updating a badge notification The Start Screen Tile may be updated frequently defining an XML URL through:
<meta name=msapplication-badge content=frequency=1440;polling-uri={xml-url}>

The XML will look like:

<?xml version=1.0 ?> <badge value=30></badge>

To initiate the webapp installation we can use the Apps API:

var r = [Link](/[Link]); [Link] = function() { alert(App installed) } [Link] = function() { alert(App installed) }

UPGRADE TO WEBAPP
A webapp is a hosted website that can be installed with a home screen icon and once installed it works full-screen outside of the browser and it might have some kind of super powers in terms of permissions and support.

TOUCH EVENTS
Mouse events (such as click) are not always suitable for mobile devices for different reasons, including: a) A delay of 300ms before firing the event handler. b) They dont support multitouch. c) The clickable area using a finger is not always just one pixel.

iOS Home Screen webapps

On iPhone and iPad we can create webapps using a meta tag and usually adding the apple-touch-icon link:
<meta name=apple-mobile-web-app-capable content=yes>

Apple Touch Events

Once added to the Home Screen, a page with the meta tag will open in full screen mode. We can customize the status bar appearance through one of the possible options on this meta tag:
<meta name=apple-mobile-web-app-status-bar-style content={black/default/black-translucent}>

Safari on iOS created the touch events, a series of 4 events that we can detect on any DOM element. Most of the other mobile browsers (excluding IE) support this specification. The events available are: touchstart touchend touchmove touchcancel

DZone, Inc.

[Link]

HTML5 Mobile Development

All the events can be attached using addEventListener or through HTML DOM properties, such as ontouchstart. Every event receives through the first argument a touches collection. This collection includes each of the current available touches as a Touch object where we can get coordinates (such as pageX):
[Link](touchstart, function(event) { var touches = [Link]; var quantity = [Link]; var firstTouch = touches[0]; var coordinates = { x: [Link], y: [Link] } }, false);

Step 2: Define the [Link]

CACHE MANIFEST # This is a comment line # We define first the files that need to be downloaded # The HTML file is always included in the package CACHE: styles/[Link] scripts/[Link] images/[Link] # If we want the app to access some resources on the web # We can define specific URLs or a pattern, such as * NETWORK *

Gesture API Compatible only with Safari on iOS, we can use gesture events to detect two-fingers rotate and pinch gestures:
[Link](gesturechange, function(event) { var currentRotation = [Link]; var currentScale = [Link]; }, false);

Step 3: Detect events client-side

Through the object [Link] we can detect several events over the process, such as downloading, cached, noupdate, and updateready.
[Link](cached, function() { alert(The package was installed); } , false);

W3C Touch Events

W3C has standardized Apple Touch Events with the additions of touchenter and touchleave for dragging purposes. Firefox and BlackBerry smartphones and tablets are using this spec. The Gesture API is not included.

How Application Cache works

Microsoft Pointer Events

If the webapp was installed (cached event) then the next time the user accesses it, it will always be loaded from the cached version, even if the user has a connection. If there is a connection available, the browser will download the manifest file and it will compare byte-by-byte with the stored version. If it is the same, the noupdate event will be fired; if the manifest has changed, then the whole package will be discarded from the cache and downloaded again from the server firing the updateready event. It's important to understand that when an update is available, the user is still seeing the old version as it was loaded from the cache, so the next reload or access will use the updated resources.

Microsoft is using another approach through Pointer events (also to be standardized in the W3C). Pointer events inherit from mouse events; therefore instead of receiving a collection of touches we receive one call per touch only with the information of the current point. Pointer events include support for touch, mouse, and styles; the most useful available events are pointerdown, pointerup, pointercancel, pointermove, pointerover, pointerout. In IE10, these events are prefixed with MS; for example: mspointerup.
[Link](mspointerdown, function(event) { var coordinates = { x: [Link], y: [Link] } }, false);

CLIENT-SIDE STORAGE
Whether we are online or offline we can store information on the users device using some of the client-side storage APIs, including localStorage, Web SQL Storage, IndexedDB and FileSystem API. Limits vary per platform, but usually localStorage gives us safely at least 5Mb per origin (protocol+domain+port combination). On some platforms such as iOS, we can overpass the 5Mb limit with the users permission usually up to 50Mb.

Gesture API Microsoft also supports a Gesture API for more complex touch interaction detection, including: msgesturehold msgesturetap msgesturestart msgestureend msgesturechange msinertiastart

HYBRID/NATIVE WEBAPP
With HTML5 we can create native webapps, also known as hybrid apps, and distribute them through Application Stores. These platforms require packaging all the resources, and sometimes compiling and signing processes. The most important platforms to create native webapps are:

OFFLINE SUPPORT
Most mobile browsers support offline access through the Application Cache API. This API allows us to define a package that the browser will install for future access.

Distribution
Name
WebWorks

Step 1: Define the manifest file

<!DOCTYPE html> <html manifest=[Link]>

Platforms
BlackBerry 5.x-7.x BlackBerry PlayBook BlackBerry 10 Windows 8 Nokia Series 40

Compatible Stores
BlackBerry AppWorld

Windows 8 Store HTML5 apps Nokia S40 webapps

Microsoft Windows Store Nokia Store

DZone, Inc.

[Link]

HTML5 Mobile Development

Name
Symbian webapps Mozilla Open Web Apps

Platforms
Symbian Firefox OS Android Desktop Desktop Chrome OS Android (future) iOS Android BlackBerry Windows Phone Bada / Tizen Symbian

Compatible Stores
Nokia Store Mozilla Marketplace

EMULATORS
These are the available emulators and simulators per platforms (source: [Link]

Chrome Packaged Apps Apache Cordova / Adobe PhoneGap

Chrome Store

Platform
iOS

Host Platforms
Mac Windows, Linux, Mac Windows 8 Pro Windows 8 Pro Windows, Linux, Mac

Where to get it for free

Search for Xcode on Mac App Store [Link] com/sdk Visual Studio 2012 Express for Windows Phone Visual Studio 2012 Express for Windows 8 [Link] com/devzone/ develop/ simulator/ [Link] sites/developers/ resources/ [Link] [Link] en-US/firefox/addon/firefoxos-simulator/ [Link] [Link]/Develop/ Series_40/

Apple AppStore Google Play Store BlackBerry AppWorld Microsoft Windows Phone Store Nokia Store

Android Windows Phone Windows 8 Tablet

The native HTML5 webapp should be distributed through an application store for free or for a fee. To do that, we need to register as publishers in the stores and pay the publisher fee as defined in the next table:

BlackBerry 10

store
Apple AppStore Google Play Store Amazon AppStore for Android BlackBerry AppWorld Windows 8 Store Windows Phone Store Nokia Store

publisher fee
USD 99 per year USD 25 Free Free Varies USD 99 per year EUR 1

url
[Link]/ ios/program [Link]/apps/ publish [Link]. com/apps/apps [Link]. com/isvportal [Link]/ StorePortals [Link]. com [Link]

BlackBerry 6/7

Windows

Firefox OS

Windows, Linux, Mac

Nokia S40

Windows

REMOTE DEBUGGING
Support for remote debugging for HTML, CSS and JavaScript:

Browser
Safari for iOS

Host Browser
Safari for Mac Google Chrome Windows, Mac or Linux Firefox Windows, Mac or Linux Any Webkit-based desktop browser Opera for Windows, Mac or Linux

Connection Method
USB cable with the device USB cable with the device and ADB tools (Android Debug Bridge) TCP via IP Address (same Wi-Fi network) TCP via IP Address (same Wi-Fi network) TCP via IP Address (same Wi-Fi network)

MOBILE BROWSERS
These are the available mobile browsers by platform:
Google Chrome on Android Firefox on Android and Firefox OS BlackBerry 7 and 10 Browser Opera Mobile for Android or Symbian

Platform
iOS Android

Default Browser
Safari (WebKit) Android Browser (WebKit)

Other Browsers
Opera Mini, Google Chrome (Web View) Google Chrome (4.0+), Firefox, Opera Mini, Opera Mobile, Opera (WebKit), UC Browser, Dolphin Opera Mini (for old smartphones) Nokia Xpress (experimental) Opera Mobile, Opera Mini

HTML5 APIS
These APIs might not be available on all the browsers and platforms. Check [Link] or [Link] for compatibility tables. Geolocation
[Link]( function(position) { var lat = [Link]; var lon = [Link]; }, function () { alert(Error locating your device); } );

BlackBerry Windows Phone Symbian Firefox OS Kindle Fire (Android) Nokia S40 Other

BlackBerry Browser (WebKit) Internet Explorer Nokia Browser (WebKit) Firefox Amazon Silk Nokia Xpress Browser

Opera Mini

Jasmine, Dolfin,NetFront, UC Web, webOS Browser (now Iris)

Accelerometer, Magnetometer & Gyroscope We can read current acceleration in 3 axes measured in m/s2 including gravity or excluding it on some devices only:
[Link](devicemotion, function(event) { var acceleration = [Link]; // acceleration.x, acceleration.y, acceleration.z }, false);

DZone, Inc.

[Link]

HTML5 Mobile Development

We can also read current device orientation as alpha (direction according to the compass), beta (angle of the tilt front-to-back) and gamma (angle of the tilt left-to-right). All angles are measured in degrees.
[Link](devicemotion, function(event) { var acceleration = [Link]; // acceleration.x, acceleration.y, acceleration.z }, false);

<input type=file accept=image/* capture=camera> <input type=file accept=audio/* capture=microphone> <input type=file accept=video/* capture=camcorder>

Reading the camera as <video> input:

var video = [Link](video); var URL = [Link] || [Link]; var getUserMedia = [Link] || [Link] || [Link]; var video = [Link](player); if (getUserMedia) { getUserMedia({audio:true, video:true}, function(stream){ [Link]=[Link](stream); [Link](); }); }

Battery
var var var var var battery = [Link] || [Link]; level = [Link] * 100; charging = [Link]; chargingTimeFully = [Link]; dischargingTimeEmpty = [Link];

// Events available [Link](levelchange, handler, false); [Link](chargingchange, handler, false); [Link](chargingtimechange, handler, false); [Link](dischargingtimechange, handler, false);

RESOURCES
HTML5 documentation: [Link] Can I Use Compatibility Tables: [Link] HTML5 Compatibility Tables: [Link] HTML5 Rocks for Mobile: [Link]/mobile HTML5 demos: [Link] Emulators and Simulators: [Link] HTML5 Test: [Link] HTML5 Developer Scorecard: [Link]

Vibration
// One time vibration for 0.5 seconds [Link](500); // Vibration pattern (vibration/pause) [Link]([500, 500, 1000, 600,100]);

Media capture Using HTML forms to capture media:

ABOUT THE AUTHOR

Max Firtman is a developer, consultant, and speaker, and international expert on mobile and web 2.0. Max has written two books with OReilly (Programming the Mobile Web and jQuery Mobile: Up and Running), is a certified Nokia and BlackBerry trainer, and regularly speaks at conferences around the world. He has founded several companies, taught at several universities, and maintains several major mobile HTML5 resource sites, including mobile HTML5 compatibility tables ([Link] org/) and media queries test sites ([Link]

RECOMMENDED BOOK
Author and mobile development expert Maximiliano Firtman shows you how to develop a standard app core that you can extend to work with specific devices. This updated edition covers many recent advances in mobile development, including responsive web design techniques, offline storage, mobile design patterns, and new mobile browsers, platforms, and hardware APIs.

Buy Here

Browse our collection of over 150 Free Cheat Sheets

Upcoming Refcardz

Free PDF
DZone, Inc. 150 Preston Executive Dr. Suite 201 Cary, NC 27513 DZone communities deliver over 6 million pages each month to more than 3.3 million software developers, architects and decision makers. DZone offers something for everyone, including news, tutorials, cheat sheets, blogs, feature articles, source code and more. "DZone is a developer's dream", says PC Magazine.
Copyright 2013 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

C++ CSS3 OpenLayers Regex

888.678.0399 919.678.0300 refcardz@[Link] Sponsorship Opportunities sales@[Link] $7.95 Refcardz Feedback Welcome

Version 1.0