Pankil Presentation
Download
Report
Transcript Pankil Presentation
Building Mobile Web
Applications Using
HTML5 & CSS3
5 Week Training Course
August 7 - Sept. 4, 2012
InstructorsTom Cornyn & Pankil Patel
Presented By South Bay Mobile User
Group
Week 1
Class Overview
South Bay Mobile User Group
Class Application Projects
•
•
Convert a standard website into a mobile compatible website
Build a weather application that utilizes animation
South Bay Mobile User Group
New HTML Elements
•
•
•
•
•
•
<section>
<nav>
<header>
<canvas>
<video>
<audio>
South Bay Mobile User Group
•
•
•
•
•
•
•
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
Orientation Detection
South Bay Mobile User Group
Geolocation
South Bay Mobile User Group
Web SQL Database
South Bay Mobile User Group
Form Field Types
South Bay Mobile User Group
HTML5 Video and Audio
South Bay Mobile User Group
Building Mobile Web
Applications Using
HTML5 & CSS3
Week 2Agenda
South Bay Mobile User Group
The Viewport Meta Tag
•
Device-width
•
•
User-scale
Device-height
South Bay Mobile User Group
Device Emulators
•
•
•
Android SDK
XCode for OSX
iPod Touch
South Bay Mobile User Group
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
CSS Resets
•
•
How they work
What they do
South Bay Mobile User Group
The Orientationchange Event
•
•
How to bind to it
What to do with it
South Bay Mobile User Group
Building Mobile Web
Applications Using
HTML5 & CSS3
Week 3Agenda
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 times
o Checklist for client-side optimization
o 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.
South Bay Mobile User Group
Building Mobile Web
Applications Using
HTML5 & CSS3
Week 4
Instructor - Pankil Patel
[email protected]
South Bay Mobile User Group
Agenda
• Web Storage
o
o
o
o
Offline Web Applications
Local Storage/Session Storage
Web SQL
Indexed DB
• Geo Location
South Bay Mobile User Group
Offline Web Applications
• Overview
• Application Cache Events
• Demo
• Sample Websites
South Bay Mobile User Group
Offline Web Applications: Overview
• Browsers supporting Offline web storage
South Bay Mobile User Group
Offline Web Applications: Overview
• How it works
HTML file
References
Cache Manifest file which
contains
- Files to cache
- Exclusions
- Fallback
South Bay Mobile User Group
Offline Web Applications: Overview
• What gets cached
o
o
o
o
Master Entries
The manifest
Explicit Entries
Fallback Entries
South Bay Mobile User Group
Application Cache Events
If 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
Demo
South Bay Mobile User Group
Sample Websites & API Links
Sample 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
Local Storage & Session Storage
• Overview
• API
• Demo
• Sample Websites
South Bay Mobile User Group
Local & Session Storage Overview
• Browsers supporting local & session storage
South Bay Mobile User Group
Local & Session Storage Overview
•
•
Limitations of Cookies
o 4KB per cookie
o Sent with every HTTP request
Local/Session Storage
o Simple API to get/set key/value pair
o Size of 5MB/domain, some browsers allow 10MB
o 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
Local & Session Storage API
interface 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
Demo
South Bay Mobile User Group
Sample Websites & Links
•
Contacts Application
o http://bit.ly/d2qV6h
•
Chrome storage
o http://bit.ly/MXxRoT
South Bay Mobile User Group
Web SQL
• Overview
• API
• Demo
• Sample Websites
South Bay Mobile User Group
Web SQL Overview
• Browsers supporting Web SQL
South Bay Mobile User Group
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
API – Asynchronous DB
interface 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
API – Execute SQL
typedef 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
Demo
South Bay Mobile User Group
Sample Website
• Transaction Rollback test
o http://bit.ly/b9CiAz
• Add/Update Web SQL entries
o http://bit.ly/O09nbP
South Bay Mobile User Group
Indexed DB
•
•
•
•
Overview
API
Demo
Sample Websites
South Bay Mobile User Group
Indexed DB - Overview
•
Browsers supporting Indexed DB
South Bay Mobile User Group
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
Indexed DB – Asynchronous API
IDBCursor - 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
Demo
South Bay Mobile User Group
Sample Websites
•
•
API Examples
o http://bit.ly/SNhnlv
Microsoft
o http://ie.microsoft.com/testdrive/HTML5/Cookbook/
South Bay Mobile User Group
Geolocation
•
•
•
•
Overview
API
Demo
Sample Websites
South Bay Mobile User Group
Geolocation – Overview
•
Browsers supporting Geolocation
South Bay Mobile User Group
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
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
Demo
•
http://www.e-radiance.com/html5/geolocation.html
South Bay Mobile User Group
Sample Websites
•
•
Microsoft
o http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html
Google
o https://googledevelopers.appspot.com/maps/documentation/javascript/exampl
es/map-geolocation
Good to know sites
• HTML5
o
o
o
o
o
o
Mozilla Dev. Network: http://mzl.la/SOfTpL
IE Test Drive: http://bit.ly/9CbjcE
Html5 Demos: http://bit.ly/cVRHk5
Html5 Test: http://html5test.com/
CSS3 Test: http://css3test.com/
Markup Validation Service: http://validator.w3.org/
Questions