building mobile web applications using html5 & css3
DESCRIPTION
Building Mobile Web Applications Using HTML5 & CSS3 . 5 Week Training Course August 7 - Sept. 4, 2012 Instructors Tom Cornyn & Pankil Patel Presented By South Bay Mobile User Group. Week 1 Class Overview. South Bay Mobile User Group. Class Application Projects. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/1.jpg)
Building Mobile Web Applications Using
HTML5 & CSS3 5 Week Training CourseAugust 7 - Sept. 4, 2012
InstructorsTom Cornyn & Pankil Patel
Presented By South Bay Mobile User Group
![Page 2: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/2.jpg)
Week 1Class Overview
South Bay Mobile User Group
![Page 3: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/3.jpg)
Class Application Projects• Convert a standard website into a mobile compatible website
• Build a weather application that utilizes animation
South Bay Mobile User Group
![Page 4: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/4.jpg)
New HTML Elements
• <section>• <nav>• <header>• <canvas>• <video>• <audio>
South Bay Mobile User Group
![Page 5: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/5.jpg)
• What's new in HTML5, CSS3, and Javascript for mobile development
• You will learn how to style mobile apps that respond to a mobile device's vertical and horizontal orientation
• Mobile browser DOM API
• The mobile viewport
• ReST APIs
• Make AJAX calls
• Create basic animations (HTML5 Canvas API)
South Bay Mobile User Group
![Page 6: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/6.jpg)
Orientation Detection
South Bay Mobile User Group
![Page 7: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/7.jpg)
Geolocation
South Bay Mobile User Group
![Page 8: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/8.jpg)
Web SQL Database
South Bay Mobile User Group
![Page 9: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/9.jpg)
Form Field Types
South Bay Mobile User Group
![Page 10: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/10.jpg)
HTML5 Video and Audio
South Bay Mobile User Group
![Page 11: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/11.jpg)
Week 2Agenda
Building Mobile Web Applications Using
HTML5 & CSS3
South Bay Mobile User Group
![Page 12: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/12.jpg)
The Viewport Meta Tag
• Device-width
• User-scale• Device-height
South Bay Mobile User Group
![Page 13: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/13.jpg)
Device Emulators
• Android SDK• XCode for OSX• iPod Touch
South Bay Mobile User Group
![Page 14: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/14.jpg)
Full-Screen (iOS standalone) Mode
• Adding a home screen icon
• The Mobile Bookmark Bubble JavaScript widget
• The hiding the chrome of the Safari mobile browser
South Bay Mobile User Group
![Page 15: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/15.jpg)
CSS Resets
South Bay Mobile User Group
• How they work• What they do
![Page 16: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/16.jpg)
The Orientationchange Event
• How to bind to it • What to do with it
South Bay Mobile User Group
![Page 17: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/17.jpg)
Week 3Agenda
Building Mobile Web Applications Using
HTML5 & CSS3
South Bay Mobile User Group
![Page 18: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/18.jpg)
South Bay Mobile User Group
• Using form fields in mobile apps• How to build mobile library-independent, jpeg-based
animation for a mobile weather web app (noaa.socktan.com)
• Optimizing page load timeso Checklist for client-side optimizationo Correct load sequence ordering
• Content delivery networks, cloud services.• How to turn RSS feeds into content-rich,
asynchronous mobile web apps for fun and for profit.• Outline asynchronous http (XHR) requests and
JavaScript DOM insertions using Twitter, et cetera.
![Page 19: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/19.jpg)
Week 4Instructor - Pankil Patel
Building Mobile Web Applications Using
HTML5 & CSS3
South Bay Mobile User Group
![Page 20: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/20.jpg)
Agenda
• Web Storageo Offline Web Applicationso Local Storage/Session Storageo Web SQLo Indexed DB
• Geo Location
South Bay Mobile User Group
![Page 21: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/21.jpg)
Offline Web Applications
• Overview• Application Cache Events• Demo• Sample Websites
South Bay Mobile User Group
![Page 22: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/22.jpg)
Offline Web Applications: Overview
• Browsers supporting Offline web storage
South Bay Mobile User Group
![Page 23: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/23.jpg)
Offline Web Applications: Overview
HTML file
Cache Manifest file which contains- Files to cache- Exclusions- Fallback
References
• How it works
User browses
South Bay Mobile User Group
![Page 24: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/24.jpg)
Offline Web Applications: Overview
• What gets cachedo Master Entrieso The manifesto Explicit Entrieso Fallback Entries
South Bay Mobile User Group
![Page 25: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/25.jpg)
Application Cache EventsIf the browser visits a web page, has NOT seen the web page before and as a result does not recognize the manifest file, the following events will ensue.Checking Event - occurs when the browser visits a web page and reads the manifest attribute on the <html> element.
Downloading Event - if the browser has never come across this manifest file before, it will download all the resources given in the manifest file.
Progress Event - contains information of how many files have been downloaded and how many files are left to be downloaded.
Cached Event - occurs once all the files have been downloaded and the offline web application is equipped to be used offline.
If the browser has visited the web page before and recognizes the manifest file the following events will ensue.Noupdate Event - this will take place if the cache manifest has not changed.
Downloading Event - if the cache manifest has changed the resources the file will be downloaded again.
Progress Event - this contains information of how many files have been downloaded and how many files are left to be downloaded.
Updateready Event - after the re-downloading is complete, this event is triggered, indicating that the new offline version is ready to be used.
South Bay Mobile User Group
![Page 26: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/26.jpg)
Demo
South Bay Mobile User Group
![Page 27: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/27.jpg)
Sample Websites & API LinksSample Websites• Microsoft Kids Story Book
o http://bit.ly/PHum3r
API Links• Safari Developer Center
o http://bit.ly/OADt6M
South Bay Mobile User Group
![Page 28: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/28.jpg)
Local Storage & Session Storage
• Overview• API• Demo• Sample Websites
South Bay Mobile User Group
![Page 29: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/29.jpg)
Local & Session Storage Overview
• Browsers supporting local & session storage
South Bay Mobile User Group
![Page 30: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/30.jpg)
Local & Session Storage Overview
• Limitations of Cookieso 4KB per cookieo Sent with every HTTP request
• Local/Session Storageo Simple API to get/set key/value pairo Size of 5MB/domain, some browsers allow 10MBo Local storage available to all browser windows, data available
when browser is closed and reopened.o Session storage available to a particular browser window
South Bay Mobile User Group
![Page 31: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/31.jpg)
Local & Session Storage APIinterface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any value);
deleter void removeItem(in DOMString key);
void clear();
};
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
};
South Bay Mobile User Group
![Page 32: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/32.jpg)
Demo
South Bay Mobile User Group
![Page 33: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/33.jpg)
Sample Websites & Links
• Contacts Applicationo http://bit.ly/d2qV6h
• Chrome storageo http://bit.ly/MXxRoT
South Bay Mobile User Group
![Page 34: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/34.jpg)
Web SQL
• Overview• API• Demo• Sample Websites
South Bay Mobile User Group
![Page 35: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/35.jpg)
Web SQL Overview
• Browsers supporting Web SQL
South Bay Mobile User Group
![Page 36: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/36.jpg)
Web SQL Overview
• Web SQL dBs can be used on client-side• The specification is based around SQLite
(3.1.19)• http://www.w3.org/TR/webdatabase/• At any given time only one version of the
database can exist.
South Bay Mobile User Group
![Page 37: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/37.jpg)
API – Asynchronous DBinterface Database {
void transaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);
void readTransaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);
readonly attribute DOMString version;
void changeVersion(in DOMString oldVersion, in DOMString newVersion, in optional SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);
};
[Callback=FunctionOnly , NoInterfaceObject]
interface SQLVoidCallback {
void handleEvent();
};
[Callback=FunctionOnly , NoInterfaceObject]
interface SQLTransactionCallback {
void handleEvent(in SQLTransaction transaction);
};
[Callback=FunctionOnly , NoInterfaceObject]
interface SQLTransactionErrorCallback {
void handleEvent(in SQLError error);
};
South Bay Mobile User Group
![Page 38: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/38.jpg)
API – Execute SQLtypedef sequence<any> ObjectArray;
interface SQLTransaction {
void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementCallback {
void handleEvent(in SQLTransaction transaction, in SQLResultSet resultSet);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementErrorCallback {
boolean handleEvent(in SQLTransaction transaction, in SQLError error);
};
South Bay Mobile User Group
![Page 39: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/39.jpg)
Demo
South Bay Mobile User Group
![Page 40: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/40.jpg)
Sample Website
• Transaction Rollback testo http://bit.ly/b9CiAz
• Add/Update Web SQL entrieso http://bit.ly/O09nbP
South Bay Mobile User Group
![Page 41: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/41.jpg)
Indexed DB
• Overview
• API
• Demo
• Sample Websites
South Bay Mobile User Group
![Page 42: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/42.jpg)
Indexed DB - Overview
• Browsers supporting Indexed DB
South Bay Mobile User Group
![Page 43: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/43.jpg)
Indexed DB – Overview
• Provides in-order retrieval of keys
• Efficient searching over values
• Storage of duplicate values for a key
• Uses transactional databases to store keys and their corresponding values(one or more per key)
• http://www.w3.org/TR/IndexedDB/
• http://mzl.la/RdDamY
South Bay Mobile User Group
![Page 44: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/44.jpg)
Indexed DB – Asynchronous APIIDBCursor - iterates over object stores and indexes.IDBDatabase - represents a connection to a database. It's the only way to get a transaction on the database.IDBFactory - provides access to a database.IDBEnvironment - provides access to a client-side database. It is implemented by window objects.IDBIndex - provides access to the metadata of an index.IDBObjectStore - represents an object store.IDBOpenDBRequest - represents a request to open a database.IDBRequest - provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.IDBTransaction - represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.IDBVersionChangeEvent - indicates that the version of the database has changed.
South Bay Mobile User Group
![Page 45: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/45.jpg)
Demo
South Bay Mobile User Group
![Page 46: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/46.jpg)
Sample Websites
• API Exampleso http://bit.ly/SNhnlv
• Microsofto http://ie.microsoft.com/testdrive/HTML5/Cookbook/
South Bay Mobile User Group
![Page 47: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/47.jpg)
Geolocation
• Overview
• API
• Demo
• Sample Websites
South Bay Mobile User Group
![Page 48: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/48.jpg)
Geolocation – Overview
• Browsers supporting Geolocation
South Bay Mobile User Group
![Page 49: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/49.jpg)
Geolocation - Overview
• API that provides scripted access to geographical location information associated with the hosting device
• API is agnostic of the underlying source of the information
• Sources can be IP address, RFID, Wi-Fi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input
• No guarantee is given that the API returns the device's actual location
![Page 50: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/50.jpg)
Geolocation API[NoInterfaceObject]
interface Geolocation {
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
long watchPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
void clearWatch(long watchId);
};
callback PositionCallback = void (Position position);
callback PositionErrorCallback = void (PositionError positionError);
South Bay Mobile User Group
![Page 51: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/51.jpg)
Demo
• http://www.e-radiance.com/html5/geolocation.html
South Bay Mobile User Group
![Page 52: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/52.jpg)
Sample Websites
• Microsofto http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html
• Googleo https://google-developers.appspot.com/maps/documentation/jav
ascript/examples/map-geolocation
![Page 53: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/53.jpg)
Good to know sites
• HTML5o Mozilla Dev. Network: http://mzl.la/SOfTpLo IE Test Drive: http://bit.ly/9CbjcEo Html5 Demos: http://bit.ly/cVRHk5o Html5 Test: http://html5test.com/o CSS3 Test: http://css3test.com/o Markup Validation Service: http://validator.w3.org/
![Page 54: Building Mobile Web Applications Using HTML5 & CSS3](https://reader035.vdocuments.net/reader035/viewer/2022062520/5681637c550346895dd45a8a/html5/thumbnails/54.jpg)
Questions