HTML 5 & The Modern Web
•
2 likes•850 views
This document discusses the importance of HTML 5 and the open web. It provides an overview of HTML 5 and its capabilities including new semantic elements, offline storage, device access, connectivity improvements, multimedia support, 3D graphics, performance enhancements and styling. It also covers threats to the open web like walled gardens, privacy issues and legislation. The document compares native apps to HTML 5 and discusses where HTML 5 is currently in terms of adoption. It outlines the future of HTML 5, JavaScript and related web technologies.
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Similar to HTML 5 & The Modern Web
Similar to HTML 5 & The Modern Web (20)
More from Jumping Bean
More from Jumping Bean (15)
Recently uploaded
Recently uploaded (20)
HTML 5 & The Modern Web
- 1. and the modern web
- 2. About Me Mark Clarke Work @ Jumping Bean As a solutions engineer Social Media • Twitter - @mxc4 • G+ • LinkedIn
- 3. What is this talk about? • Why HTML 5 & the open web is important • Overview of HTML 5, • Where is HTML 5 headed
- 4. Who/What is Mozilla? • Mission • “[Mozilla's] mission is to promote openness, innovation & opportunity on the Web.” • 10 Principles - which anyone should find compelling • Supports the “open web” • Lots of stuff about freedom and privacy but how will this be achieved? • 06 - The effectiveness of the Internet as a public resource depends upon interoperability (protocols, data formats, content), innovation and decentralized participation worldwide.
- 5. What is the Open Web? • Three things according to Tantek Celik: • Publish content and applications on the web in open standards, • Code and implement the web standards that content/apps depend on, • Access and use content/code/web- apps/implementations
- 6. Threats to the Open Web • Walled gardens e.g. Apple, Android, Facebook, • App stores, • Privacy, • Limits on choice/control • Government Agencies – collecting information indiscriminately, • Government Legislation - restriction on the Internet. Banning sites, content . Counter “Cyber Terrorism”, “Cyber harassment” etc, • Industry • Copyright, Intellectual Property – stifle competition, • Make it harder to launch your product/service • Why are these strategies successful? • They got the money, • Because they address some real issues, • People trade openness/control for convenience • What is the challenge to HTML 5 and us?
- 7. Native versus HTML 5 • Benefits of App stores • enable software discovery, • Curation of content can be useful, • Native has more access to hardware and 1st class support on the device, • Do more and look better, • Better integration - Notifications, Launcher icons etc, • Performance – Native apps are faster, access to GPU acceleration & mutli- threading • Monetization – easier to make money • Developers – Tool? Less “fragmentation” • Native platforms can add features faster, • Is HTML 5 up to the challenge?
- 8. HTML 5 • HTML 5 – became a “recommendation” in October 2014, • Work has begun on HTML 5.1, • From developer point of view >HTML 4.1 is an evolving standard, • Site like “caniuse.com” help to understand what's mainstream and whats coming next,
- 9. Where is HTML 5 today? Somewhere here I think. Image courtesy Wikipedia
- 10. HTML 5 Technology Classes Semantics New tags, microformats, microdata Offline & Storage App cache, Local Storage, IndexedDB, File API Device Access Geolocation api, access to cameras, local data eg contacts Connectivity More efficient connectivity. Web sockets, Sever events Multimedia Audio and video first class HTML 5 support 3D, Graphics & Effects SVG, WebGL, CSS3, Canvas Performance & Integration Web workers & XMLHttpRequest2 CSS 3 Styling, Web Open Font Format, typographic flexibility
- 11. HTML Semantic Elements • <head> • <nav> • <section> • <article> • <aside> • <figcaption> • <figure> • <footer>
- 12. Off-line Storage • APIs impose • Single origin constraint • Quotas, • Synchronous/Asynchronous modes, • Pros/Con of each • Local Storage -replaces cookies • Web SQL • Deprecated • IndexedDB • FileSystem API
- 13. Device Access • Browsers on mobile devices prevented from accessing most functionality • Geolocation, • Device orientation, • Device motion, • Touch events • ?
- 14. Connectivity • Web sockets • Chat, • Push notifications, • Server Sent Events • Register to receive notifications from server
- 15. Multimedia • Video element • Support UI controls, • JavaScript API, • No more plugins! • Hampered by video coding formats, • Can apply on-the-fly SVG filters • WebRTC • Real time communications, • Can make voip calls from your web site! • Camera API
- 16. 3D Graphics & Effects • SVG • Embedded XML, • Vector based, • Indexable, • Canvas • 2D drawing canvas, • Great for simple games • WebGL • OpenGL for the Web, • 3D games/effects • CSS • 3D and 2D effects, • Access to GPU
- 17. Performance & Integration • Web workers, • XMLHTTPRequest2, • History API, • Online/Offline events, • Drag & Drop
- 18. Styling • Linear & radial Gradients, • Rounded borders, • Border images, • Animation & transitions, • Background styling, • New layouts • Multi-column, • Flex box, • Typography improvements • Media queries
- 19. JavaScript • Separate standard setting body and process, • Massive increases in JavaScript engine performance: • V8 – Google Chrome, • TraceMonkey – Firefox • Nirto -Safari 4 • Lots of attempts to fix JavaScript • CoffeeScript, • Dart, • TypeScript
- 20. The Future? • JavaScript evolving rapidly: • EcmaScript 6 – scheduled for release mind 2015, • EcmaScript 7 – work already begun, • Experimental Technologies: • asm.js – subset of JavaScript. No variables with mixed types. Produces highly optimised JavaScript byte code, • Runs in all browsers, • Speed about 2x slower than comparable Java, C# code and getting faster, • Banana Bread Demo,
- 21. The Future? • HTML 5.1 • Browser companies pushing new experimental features • Mozilla's Aurora • Web components • Reusable,custom widgets, • Shadow DOM, • Firefox OS – Built for HTML 5!
- 22. Questions? • Mark Clarke • Twitter - @mxc4 • G+ • LinkedIn • Jumping BeanTraining & D ev