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.
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
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!