1 / 54

Building Mobile Web Applications Using HTML5 & CSS3

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.

jayme-holloway
Download Presentation

Building Mobile Web Applications Using HTML5 & CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Mobile Web Applications Using HTML5 & CSS3 5 Week Training CourseAugust 7 - Sept. 4, 2012InstructorsTom Cornyn & Pankil Patel Presented By South Bay Mobile User Group

  2. Week 1Class Overview South Bay Mobile User Group

  3. Class Application Projects • Convert a standard website into a mobile compatible website • Build a weather application that utilizes animation South Bay Mobile User Group

  4. New HTML Elements • <section> • <nav> • <header> • <canvas> • <video> • <audio> South Bay Mobile User Group

  5. 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

  6. Orientation Detection South Bay Mobile User Group

  7. Geolocation South Bay Mobile User Group

  8. Web SQL Database South Bay Mobile User Group

  9. Form Field Types South Bay Mobile User Group

  10. HTML5 Video and Audio South Bay Mobile User Group

  11. Building Mobile Web Applications Using HTML5 & CSS3 Week 2Agenda South Bay Mobile User Group

  12. The Viewport Meta Tag • Device-width • User-scale • Device-height South Bay Mobile User Group

  13. Device Emulators • Android SDK • XCode for OSX • iPod Touch South Bay Mobile User Group

  14. 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

  15. CSS Resets • How they work • What they do South Bay Mobile User Group

  16. The Orientationchange Event • How to bind to it • What to do with it South Bay Mobile User Group

  17. Building Mobile Web Applications Using HTML5 & CSS3 Week 3Agenda South Bay Mobile User Group

  18. 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 • Checklist for client-side optimization • 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

  19. Building Mobile Web Applications Using HTML5 & CSS3 Week 4 Instructor - Pankil Patel pankilpatel@e-radiance.com South Bay Mobile User Group

  20. Agenda • Web Storage • Offline Web Applications • Local Storage/Session Storage • Web SQL • Indexed DB • Geo Location South Bay Mobile User Group

  21. Offline Web Applications Overview Application Cache Events Demo Sample Websites South Bay Mobile User Group

  22. Offline Web Applications: Overview Browsers supporting Offline web storage South Bay Mobile User Group

  23. Offline Web Applications: Overview • How it works HTML file User browses References • Cache Manifest file which contains • Files to cache • Exclusions • Fallback South Bay Mobile User Group

  24. Offline Web Applications: Overview • What gets cached • Master Entries • The manifest • Explicit Entries • Fallback Entries South Bay Mobile User Group

  25. 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

  26. Demo South Bay Mobile User Group

  27. Sample Websites & API Links Sample Websites • Microsoft Kids Story Book • http://bit.ly/PHum3r API Links • Safari Developer Center • http://bit.ly/OADt6M South Bay Mobile User Group

  28. Local Storage & Session Storage Overview API Demo Sample Websites South Bay Mobile User Group

  29. Local & Session Storage Overview Browsers supporting local & session storage South Bay Mobile User Group

  30. Local & Session Storage Overview • Limitations of Cookies • 4KB per cookie • Sent with every HTTP request • Local/Session Storage • Simple API to get/set key/value pair • Size of 5MB/domain, some browsers allow 10MB • Local storage available to all browser windows, data available when browser is closed and reopened. • Session storage available to a particular browser window South Bay Mobile User Group

  31. 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

  32. Demo South Bay Mobile User Group

  33. Sample Websites & Links • Contacts Application • http://bit.ly/d2qV6h • Chrome storage • http://bit.ly/MXxRoT South Bay Mobile User Group

  34. Web SQL Overview API Demo Sample Websites South Bay Mobile User Group

  35. Web SQL Overview Browsers supporting Web SQL South Bay Mobile User Group

  36. 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

  37. 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

  38. 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

  39. Demo South Bay Mobile User Group

  40. Sample Website • Transaction Rollback test • http://bit.ly/b9CiAz • Add/Update Web SQL entries • http://bit.ly/O09nbP South Bay Mobile User Group

  41. Indexed DB Overview API Demo Sample Websites South Bay Mobile User Group

  42. Indexed DB - Overview Browsers supporting Indexed DB South Bay Mobile User Group

  43. 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

  44. 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

  45. Demo South Bay Mobile User Group

  46. Sample Websites • API Examples • http://bit.ly/SNhnlv • Microsoft • http://ie.microsoft.com/testdrive/HTML5/Cookbook/ South Bay Mobile User Group

  47. Geolocation Overview API Demo Sample Websites South Bay Mobile User Group

  48. Geolocation – Overview Browsers supporting Geolocation South Bay Mobile User Group

  49. 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

  50. 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

More Related