Thadomal IEEE-HTML5-Workshop
Download as PPT, PDF0 likes1,001 views
1. The document summarizes HTML5, including its history, key features like semantics, multimedia, forms, and offline capabilities. 2. HTML5 aims to simplify development with new semantic elements, easier form handling, and making audio/video native elements. 3. The geolocation API allows websites to detect a user's location with permission, and features like the app cache and local storage enable offline use of web apps.
Thadomal IEEE-HTML5-Workshop
- 2. 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 )
- 3. HTML5 – A Brief History HTML5 Browser Support HTML5 Features/Demos/HandsOn The Road Ahead
- 4. WHAT : Next generation HTML WHO : WHATG, W3C, IETF WHEN : 2004, 2008, July 2014 All vendors support it ! (Is that true?)
- 5. Semantics Graphics Multimedia Device Access Offline Connectivity Performance/Integration CSS3
- 6. Keep it simple (Example doctype) Structural meaning Richer Set of Tags Eliminated Several Tags too
- 7. <header> <nav> <section> <article> <footer> <aside>
- 8. 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.
- 9. Input Types email phone url date, datetime, month, week, time, datetime-local) color search number and range
- 10. <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” />
- 11. Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org
- 12. Canvas API SVG WebGL CSS3 3D
- 13. 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.
- 14. Audio and video are first class citizens in the HTML5 web A plug-in free world
- 15. Simple tags : <video>, <audio> Even Simpler usage: <video src=“demo.mp4”></video> <audio src=“song.mp3”></audio> Control via APIs Play Pause Stop
- 16. Different browsers support different containers and Audio/Video formats. Containers : H264 and Ogg Codecs: Audio : AAC, MP3, Vorbis Video: H264, VP8, Thedora
- 17. 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>
- 18. Currently - Geolocation API Coming soon Audio/Video input access to microphones and cameras Local data such as contacts & events, and even tilt orientation.
- 19. 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.
- 20. n avigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true}); function showCurrentLocation(position){ //position.coords.latitude //position.coords.longitude; }
- 21. 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.
- 22. Allows local storage of application data on the device. 5MB per domain. Key component to Offline usage. Types of Storage options:
- 23. S imple API for storing values in easily retrievable JavaScript objects which persist across page loads window.localStorage getItem(key) setItem(key,value)
- 24. 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 (); };
- 25. 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.
- 26. 3 Steps to implementing AppCache Define manifest CACHE + NETWORK + FALLBACK Reference manifest Specify right manifest MIME Type in Server Demo
- 27. Performance & Integration Web Workers , XMLHttpRequest 2 CONNECTIVITY : WEB SOCKETS CSS3 IndexedDB
- 28. Indic Mobile Conference application Mobile Web application Works well with Webkit browsers Lets go !
- 29. Drag and Drop Content Editable Audio / Video CSS 3
- 30. 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
- 32. 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
- 33. Q & A romin.k.irani @ gmail.com iRomin
Editor's Notes
- #5: IE9 Beta has started supporting some parts HTML5 Guiding Principles: Compatibility : Utility : Interoperability: Universal Access : Languages support, Abilities Simplicity : Simpler DOCTYPE, Meta Tags. Plugin Free paradigm : Flash
- #8: New Elements that bring structure to your documents. These elements are based on studies conducted looking at the markups from thousands of sites. E.g. Most people have a “nav” class to indicate navigation, so why not have a “nav” tag.
- #10: Normal form elements are still available like checkbox, text, button, radiobutton, password, textarea
- #11: Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
- #12: Mention that browsers render it differently. For e.g. in the Safari Mobile browser, if the input type is phone, then only a numeric keypad is shown.
- #14: Previously possible with Flash, VML, Silverlight Very complex to do in JavaScript without plugins (for example, rounded corners or diagonal lines) Provide native drawing functionality on the Web Completely integrated into HTML5 documents (part of DOM) Can be styled with CSS Can be controlled with JavaScript
- #16: <Video> element dissection Supports fallback Autoplay Preload Controls Poster Height and Width Src
- #21: navigator.geolocation getCurrentPosition watchPosition Both the methods take same parameters success function error function options
- #23: Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
- #24: Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
- #25: Allows application to store data locally on the device. Good for speeding up applications, avoiding repeated server side calls and also to provide different views locally.
- #26: Native applicatons have a big advantage of being installed on the device and available if network is not possible. Yes – not all functionality can be available but the user can use the application. Mobile applications if they want to be touted as good as native apps must support offline availability.
- #27: navigator.on/off events are only supported by few browsers : Firefox, Opera, IE
- #28: Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch. More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before. data between client and server more efficiently than ever before.