Date post: | 08-May-2015 |
Category: |
Technology |
Upload: | romin-irani |
View: | 2,788 times |
Download: | 0 times |
Name : Romin Irani Official Title : Principal Architect @ Xoriant Unofficial Title : Jack Of All Trades Vital Stats :
Mobile Applications Cloud Web APIs
Writer & Reviewer for various publications from Wrox, O’Reilly & Addison Wesley
Freelance writer covering Web 2.0 APIs at ProgrammableWeb (http://programmableweb.com)
HTML5 – A Brief History HTML5 Browser Support HTML5 Features/Demos/HandsOnThe Road Ahead
WHAT : Next generation HTML WHO : WHATG, W3C, IETF WHEN : 2004, 2008, July 2014 All vendors support it ! (Is that true?)
SemanticsGraphicsMultimediaDevice AccessOfflineConnectivityPerformance/IntegrationCSS3
Keep it simple (Example doctype) Structural meaning Richer Set of Tags Eliminated Several Tags too
<header> <nav> <section> <article> <footer> <aside>
Aims to make development and usage of forms easier.
13 New Types introduced for user input. Additional attributes like : placeholder, required, autofocus.
Coding for validations is made easier. Support varies across browsers but is
compatible.
Input Types email phone url date, datetime, month, week, time, datetime-
local) color search number and range
<input type=“email” placeholder=“Enter email address” required autofocus/>
<input type=“phone”/><input type=“search” placeholder=“Type
your search here”/><input type=“url” /><input type=“date” />
Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
Canvas API SVG WebGL CSS3 3D
2D Drawing API Functions : line, arcs, rectangle, fills Allows styling via CSS Allows control via Javascript Can be used for:
Charts, Animation, Images and other complex rendering.
Audio and video are first class citizens in the HTML5 web
A plug-in free world
Simple tags : <video>, <audio> Even Simpler usage:
<video src=“demo.mp4”></video><audio src=“song.mp3”></audio>
Control via APIs Play Pause Stop
Different browsers support different containers and Audio/Video formats.
Containers : H264 and Ogg Codecs:
Audio : AAC, MP3, Vorbis Video: H264, VP8, Thedora
Need to provide more than 1 format. Browser will play the one that it supports. This situation is not likely to change. <video controls>
<source src="mov1.ogg" type="video/ogg" /> <source src="mov2.mp4" type="video/mp4" /></video>
Currently - Geolocation API Coming soon
◦ Audio/Video input access to microphones and cameras
◦ Local data such as contacts & events, and even tilt orientation.
Determine where the device is. Find it right in the browser.
Useful for providing location based services.
User should be allowed to opt in.
API allows for both : one time location and continuous location.
navigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler,{enableHighAccuracy: true});
function showCurrentLocation(position){ //position.coords.latitude
//position.coords.longitude;}
Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
Allows local storage of application data on the device.
5MB per domain.
Key component to Offline usage.
Types of Storage options:
Simple API for storing values in easily retrievable JavaScript objects which persist across page loads
window.localStorage
getItem(key)
setItem(key,value)
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 data); deleter void removeItem(in DOMString key); void clear();
};
Network is not available all the time.
The application must be available even if the server is done.
Application Cache to the rescue.
Stores the specified resources (HTML,CSS,JS) on the client.
Combine Application Cache with Offline Storage to provide availability.
3 Steps to implementing AppCache
Define manifest
CACHE + NETWORK + FALLBACK
Reference manifest
Specify right manifest MIME Type in Server
Demo
Performance & Integration Web Workers , XMLHttpRequest 2
CONNECTIVITY : WEB SOCKETS CSS3 IndexedDB
Indic Mobile Conference application Mobile Web application Works well with Webkit browsers Lets go !
Drag and Drop Content Editable Audio / Video CSS 3
Differing browser support & behaviour Use sites like HTML5Test.com,
CanIUse.com to understand Browser support for HTML5
Fallback behaviour is important Great time to get started today! Be prepared for changes All vendors are supporting it
W3C : http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks: http://www.html5rocks.comMark Pilgrim : http://diveintohtml5.orgRemy Sharp : http://html5demos.com HTML5 Tech Spec : http://developers.whatwg.org
Modernizr : http://www.modernizr.com/Caniuse : http://www.caniuse.comHTML5Test : http://www.html5test.com https://github.com/Modernizr/
Modernizr/wiki/HTML5-Cross-browser-Polyfills
Q & A
romin.k.irani@
gmail.com
iRomin