Developing with HTML5
-
Upload
ray-wong -
Category
Technology
-
view
373 -
download
0
description
Transcript of Developing with HTML5
![Page 1: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/1.jpg)
Building Web Applications with HTML5
![Page 2: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/2.jpg)
What is HTML5?HTML5 is the new standard of markup language for structuring and presenting content for the World Wide Web.
It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.
HTML5 is also a potential candidate for cross-platform mobile applications
World Wide Web Consortium Web Hypertext Application Technology Working Group
(WHATWG).
![Page 3: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/3.jpg)
History of HTML
1991 HTML 1.01995 HTML 2.01997 HTML 3.21999 HTML 4.012000 XHTML 1.02008 HTML5 (First Draft)
![Page 4: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/4.jpg)
HTML5 Roadmap
2011 Last Call2012 Candidate RecommendationIn July 2012, WHATWG and W3C decided on a degree of separation. W3C will continue the HTML5 specification work, focusing on a single definitive standard, which is considered as a "snapshot" by WHATWG. The WHATWG organization will continue its work with HTML5 as a "Living Standard". The concept of a living standard is that it is never complete and is always being updated and improved. New features can be added but functionality will not be removed
2014 Stable Release2016 HTML 5.12022 Rumoured Completion
![Page 5: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/5.jpg)
![Page 6: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/6.jpg)
![Page 7: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/7.jpg)
![Page 9: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/9.jpg)
![Page 10: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/10.jpg)
![Page 11: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/11.jpg)
HTML5 Feature Areas
![Page 12: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/12.jpg)
![Page 13: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/13.jpg)
• Border Radius• Gradients• Web Fonts• Media Queries• Transitions & Transformations• Web Fonts• Opacity• Shadow
![Page 14: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/14.jpg)
![Page 15: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/15.jpg)
![Page 16: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/16.jpg)
![Page 17: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/17.jpg)
![Page 18: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/18.jpg)
![Page 19: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/19.jpg)
• Browsers cache data in an Application Cache
• HTML5 allows online and offline detection
![Page 20: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/20.jpg)
• Cross Document messaging• XMLHttpRequest Level 2• Server-sent Events• Web Sockets• CORS
Connectivity Features
• New W3C API and IETF protocol for low latency real-time, bi-directional connections
• Easily add social networking components (Chat, etc.) and real-time data to static pages
Web Sockets
![Page 21: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/21.jpg)
Developing with HTML5
![Page 22: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/22.jpg)
JS Frameworks CSS Frameworks
![Page 23: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/23.jpg)
Persistence Layer
Development Stack Transition
UI
UI Framework
Messaging Layer
Backend Framework
Persistence Framework
![Page 24: Developing with HTML5](https://reader033.fdocuments.us/reader033/viewer/2022060110/555b1acdd8b42aa9738b4d1d/html5/thumbnails/24.jpg)
Why Change?• UI Limitations & Bugs• Flexibility in layout, content manipulation, design• Rapid Development
o Faster application deploymento Reduce coding timeo Inbuilt debugging tools
• Ride on HTML5 advancementso Performanceo Interactivity
• Improve users efficiencyo Better UI componentso Push-notifications / feedbackso Form auto-complete, History, Bookmarks
• Adopting the latest Technology