HTML5 Webinar - Mind Storm Software
•Als PPT, PDF herunterladen•
0 gefällt mir•759 views
A 1hr webinar conducted to introduce students to HTML5.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie HTML5 Webinar - Mind Storm Software
Ähnlich wie HTML5 Webinar - Mind Storm Software (20)
Mehr von Romin Irani
Mehr von Romin Irani (9)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
HTML5 Webinar - Mind Storm Software
- 1. 1
- 2. Agenda 2 HTML5 – A Brief History HTML5 Browser Support HTML5 Features/Demos The Road Ahead
- 3. A Brief History 3 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!
- 4. Browser Support 4 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
- 6. 6 Keep it simple (Example doctype) Structural meaning Richer Set of Tags Eliminated Several Tags too Microdata
- 7. Simplified DOCTYPE 7 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 <!DOCTYPE html>
- 8. Simplified Character Set 8 HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML5 <meta charset=utf-8>
- 9. Semantics 9 <header> <nav> <section> <article> <footer> <aside>
- 10. Forms 10 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
- 11. Forms 11 Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
- 12. 12 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.
- 13. 13 Audio and video are first class citizens in the HTML5 web A plug-in free world
- 14. 14 Simple tags : <video>, <audio> Even Simpler usage: <video src=“demo.mp4”></video> <audio src=“song.mp3”></audio> Control via APIs Play Pause Stop
- 15. Device Access 15 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
- 16. Geolocation API 16 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.
- 17. Offline & Storage 17 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.
- 18. Storage API 18 Allows local storage of application data 5MB – 10MB per domain Key component to offline usage Types of Storage options:
- 19. Other HTML5 features 19 Performance & Integration : Web Workers Connectivity : WebSockets IndexedDB ContentEditable Cross Document Messaging Browser History Management
- 20. State of HTML5 – Recommendation 20 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
- 21. References 21 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-browse
- 22. Thank You 22 Q&A romin.irani@mindstormsoftware.com http://www.mindstormsoftware.com Twitter : @iRomin Upcoming 2-Day HTML5 Hands On Workshop from Mind Storm Software in Mumbai Write me an email !