html5 webinar - mind storm software
DESCRIPTION
A 1hr webinar conducted to introduce students to HTML5.TRANSCRIPT
1
HTML5 – A Brief History HTML5 Browser Support HTML5 Features/DemosThe Road Ahead
Agenda2
WHAT : Next generation HTML WHO : WHATG, W3C, IETF WHEN : 2004, 2008, May 2011, 2014 All vendors support it ! (Is that true?) A lot of stuff – you can use today!
A Brief History3
Widespread Support is increasing with every browser
release IE included For older browsers, polyfills can fill the gap Use tools like http://caniuse.com ,
http://html5test.com, Modernizr
Browser Support4
HTML5 Features5
Keep it simple (Example doctype) Structural meaning Richer Set of Tags Eliminated Several Tags too Microdata
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
<!DOCTYPE html>
HTML4/XHTML• HTML 4.01 Strict• HTML 4.01
Transitional• HTML 4.01 Frameset• XHTML 1.0 Strict• XHTML 1.0
Transitional• XHTML 1.0 Frameset• XHTML 1.1
Simplified DOCTYPE7
HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset=utf-8>
Simplified Character Set8
<header> <nav> <section> <article> <footer> <aside>
Semantics9
Aims to make development and usage of forms easier. No Javascript required.
Input Types email phone url date, datetime, month, week, time,
datetime-local) color search number and range
Forms10
Forms
Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
11
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.
12
Audio and video are first class citizens in the HTML5 web
A plug-in free world
13
Simple tags : <video>, <audio> Even Simpler usage:
<video src=“demo.mp4”></video><audio src=“song.mp3”></audio>
Control via APIsPlayPauseStop
14
Device Access
Geolocation API Drag and Drop Filesystem API Speech Input Device orientation (accelerometer) Webcam (bar code, QR code scanning) Audio devices (speech input) Local data such as contacts & events
15
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.
Geolocation API16
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.
Offline & Storage17
Storage API
Allows local storage of application data 5MB – 10MB per domain Key component to offline usage Types of Storage options:
18
Other HTML5 features
Performance & Integration : Web Workers
Connectivity : WebSockets IndexedDB ContentEditable Cross Document Messaging Browser History Management
19
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
State of HTML5 – Recommendation
20
W3C : http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks: http://www.html5rocks.com
Mark Pilgrim : http://diveintohtml5.org Remy Sharp : http://html5demos.com HTML5 Tech Spec : http://developers.whatwg.org
Modernizr : http://www.modernizr.com/ Caniuse : http://www.caniuse.com HTML5Test : http://www.html5test.com https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-browser-Polyfills
References21
Q & A [email protected] http://www.mindstormsoftware.com Twitter : @iRomin Upcoming 2-Day HTML5 Hands On
Workshop from Mind Storm Software in Mumbai
Write me an email !
Thank You22