A Look at the Future of HTML5

Tim Wright
Tim WrightProfessional Human
A look at the future of HTML5

        Living at the edge of the Web
                            Future of Web Design 2011, New York




                                     Tim Wright, @csskarma
Tuesday, November 8, 2011
Some crap about me.




                                         Blog at csskarma.com

                                      Tweet from @csskarma

                            Write for Smashing Mag & SitePoint

Tuesday, November 8, 2011
Woah there fella




Tuesday, November 8, 2011
http://ishtml5readyyet.com
Tuesday, November 8, 2011
What is the future?



                            Structural elements?




Tuesday, November 8, 2011
What is the future?



                            Form elements/validation?




Tuesday, November 8, 2011
What is the future?



                            History API?




Tuesday, November 8, 2011
What we’ll talk about
                                         Improved UX
                                3D interactive graphics
                            Some awesome device stuff.




                                         Let’s get started

Tuesday, November 8, 2011
Web Workers

                             at the edge




Tuesday, November 8, 2011
Web Workers
                            Improved JavaScript Threading


                              Main JS thread



                            Secondary JS thread


Tuesday, November 8, 2011
Web Workers
                                                                  Adding a worker

                in main JS file

                var	
  worker	
  =	
  new	
  Worker('worker_script.js');

                worker.onmessage	
  =	
  function(e){

                      //	
  do	
  some	
  stuff	
  when	
  the	
  worker	
  sends	
  a	
  message

                }




Tuesday, November 8, 2011
Web Workers
                                                           Adding a worker

                in worker_script.js

                //post	
  your	
  message	
  to	
  the	
  requesting	
  client

                postMessage(‘hello	
  world’);




Tuesday, November 8, 2011
Web Workers
                             What’s it get ya?




Tuesday, November 8, 2011
Web Workers
                                  Security




Tuesday, November 8, 2011
Web Workers
                                       Support

        Opera 10.6+
        Chrome 3+
        Firefox 4 +
        Safari 4.0+
        Internet Explorer 10 ?




Tuesday, November 8, 2011
WebGL

                            at the Cutting Edge




Tuesday, November 8, 2011
WebGL
                            <canvas>

      OpenGL ES 2.0
      Gaming
      Music Videos
      Data Visualizations




Tuesday, November 8, 2011
WebGL
                               My intro to WebGL



                            “WebGL is a beast”
                                - James Williams, WebGL guy.




Tuesday, November 8, 2011
WebGL
                                                Drawing triangles

        Describing shapes to the GPU
        Texture, colour color, shades, lighting, etc.




Tuesday, November 8, 2011
WebGL
                               Let’s look at some awesomeness

                            http://helloracer.com/webgl/




Tuesday, November 8, 2011
Tuesday, November 8, 2011
WebGL
                            Don’t worry, we have libraries


        three.js              Full WebGL , SVG & Canvas support

        PhiloGL               Best documentation




Tuesday, November 8, 2011
WebGL
                                 Support (as of Oct. 16)

        Opera 12+
        Chrome 9 +
        Firefox 4 +
        Safari 5.1+ on Leopard, Snow Leopard or Lion
        Internet Explorer 10 ?




Tuesday, November 8, 2011
WebGL
                            What is our WebGL future?


        A ton of terrible games...
        and some cool ones.

        ... oh really?




Tuesday, November 8, 2011
Device API
                                  (Web API)


                            At the Bleeding Edge




Tuesday, November 8, 2011
Device API
                                      Who’s working on it?



        Mozilla & W3C

                                         Since 2009
                  Since July/August




Tuesday, November 8, 2011
Device API
        Camera                         Gallery
        Contacts            Network connection

        App Launcher                File system
        Battery
         Vibration



Tuesday, November 8, 2011
Web API
        Accelerometer
        Apps




Tuesday, November 8, 2011
April. 2011                                    Device API




     <input	
  type=”file”	
  accept=”	
  image/*”	
  capture=”camera”	
  id=”capture”>
                                      audio/*
                                      video/*

                                                             http://dev.w3.org/2009/dap/camera/
Tuesday, November 8, 2011
April. 2011         Device API




                              http://dev.w3.org/2009/dap/camera/
Tuesday, November 8, 2011
Oct. 2011                                                 Device API




                       navigator.contacts.find([‘name’,‘emails’],	
  callback,
                               {	
  filter:	
  ‘Bob’,	
  multiple:	
  true	
  });

                                                                         http://dev.w3.org/2009/dap/contacts/
Tuesday, November 8, 2011
Oct. 2011           Device API




                             http://dev.w3.org/2009/dap/contacts/
Tuesday, November 8, 2011
Oct. 2011                                              Device API




                            var battery = new BatteryStatusEventSource();




                                                     http://www.w3.org/TR/2011/WD-­‐battery-­‐status-­‐20110915/
Tuesday, November 8, 2011
Device API
                            The challenges in API design.




Tuesday, November 8, 2011
Device API
                            The challenges in API design.




Tuesday, November 8, 2011
Device API



                            When can we have it?




                                                   Boot	
  to	
  Gecko
Tuesday, November 8, 2011
Device API
                              Getting involved.



        wiki.mozilla.org/WebAPI




                                           Boot	
  to	
  Gecko
Tuesday, November 8, 2011
Further reading
                                               on Web Workers
                            developer.mozilla.org/en/Using_web_workers


                                                       on WebGL
                                    dev.opera.com/articles/tags/webgl


                                             on the Device API
                                      https://wiki.mozilla.org/WebAPI

                                          https://dev.w3.org/2009/dap



Tuesday, November 8, 2011
“If you never
           question the status
           quo, you will never
            make progress”
Tuesday, November 8, 2011
Questions?




Tuesday, November 8, 2011
Thanks!
                            Email: timwright@csskarma.com
                                        Twitter: @csskarma
                                 Slides: csskarma.com/fowd

                                                   Credit
                                                  Font: Stag
                                  Vectors: The Noun Project

Tuesday, November 8, 2011
1 of 41

More Related Content

What's hot(9)

The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
Maurício Linhares1.1K views
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Alek Davis800 views
Java days Lviv 2015Java days Lviv 2015
Java days Lviv 2015
Alex Theedom632 views
Twitter streamingapi rubymongodbv2Twitter streamingapi rubymongodbv2
Twitter streamingapi rubymongodbv2
Jeff Linwood676 views
Tim stone.html5.rjug.20110316Tim stone.html5.rjug.20110316
Tim stone.html5.rjug.20110316
Richmond Java User's Group314 views
Metaprogramming  JavaScriptMetaprogramming  JavaScript
Metaprogramming JavaScript
danwrong43.6K views

Viewers also liked(20)

IP Crammer Presentation 2015IP Crammer Presentation 2015
IP Crammer Presentation 2015
Fuulido Narrative781 views
Abd_El_Wahed_Sayed_Abd_el_Wahed 21Abd_El_Wahed_Sayed_Abd_el_Wahed 21
Abd_El_Wahed_Sayed_Abd_el_Wahed 21
Abdelwahed Sayed389 views
AsertiAserti
Aserti
melyarmas1.4K views
Crowdsourcing, innovacion abiertaCrowdsourcing, innovacion abierta
Crowdsourcing, innovacion abierta
JCI Gualeguaychú1.9K views
Cáncer de esófago - TratamientoCáncer de esófago - Tratamiento
Cáncer de esófago - Tratamiento
asociaciongastrocba1.5K views
Doc1Doc1
Doc1
Munim Laskar255 views
GPC Manejo paciente con DispepsiaGPC Manejo paciente con Dispepsia
GPC Manejo paciente con Dispepsia
Marta Puig-Soler2.4K views
MCEMCE
MCE
jecs20821 views
Jesús, maestroJesús, maestro
Jesús, maestro
Fundación para el Desarrollo de la Consciencia5.6K views
Intelligent Manufacturing  - A Smart ChoiceIntelligent Manufacturing  - A Smart Choice
Intelligent Manufacturing - A Smart Choice
Sunil Wadhwa -MIE, EPLM (IIMC)7.7K views
Camilon comilónCamilon comilón
Camilon comilón
Maddy8895.8K views

Similar to A Look at the Future of HTML5(20)

WebGL FundamentalsWebGL Fundamentals
WebGL Fundamentals
Sencha4.1K views
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
StarTech Conference1.2K views
GrokeGroke
Groke
Janne Kuuskeri478 views
JavaSE - The road forwardJavaSE - The road forward
JavaSE - The road forward
eug3n_cojocaru640 views
Node at artsyNode at artsy
Node at artsy
Craig Spaeth2.3K views
iPhone Python love affairiPhone Python love affair
iPhone Python love affair
Anna Callahan1.6K views
Scaling atlassian os v4Scaling atlassian os v4
Scaling atlassian os v4
Soren Harner478 views
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah933 views
2011 The Year of Web apps2011 The Year of Web apps
2011 The Year of Web apps
JungHyuk Kwon811 views
Community Code: XeroCommunity Code: Xero
Community Code: Xero
Sencha1.1K views
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex Developers
Ryan Stewart3.1K views
Introducing Ext GWT 3.0Introducing Ext GWT 3.0
Introducing Ext GWT 3.0
Sencha3.9K views

More from Tim Wright(18)

An Introduction to HTTP/2An Introduction to HTTP/2
An Introduction to HTTP/2
Tim Wright350 views
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
Tim Wright2K views
Environmental Design Vol. 2Environmental Design Vol. 2
Environmental Design Vol. 2
Tim Wright1.1K views
Environmental Design on The WebEnvironmental Design on The Web
Environmental Design on The Web
Tim Wright4.4K views
Form designForm design
Form design
Tim Wright9.1K views
Color & TypographyColor & Typography
Color & Typography
Tim Wright4.1K views
Design processDesign process
Design process
Tim Wright1.6K views
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright2.3K views
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
Tim Wright1.7K views
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
Tim Wright3.8K views

Recently uploaded(20)

A Look at the Future of HTML5

  • 1. A look at the future of HTML5 Living at the edge of the Web Future of Web Design 2011, New York Tim Wright, @csskarma Tuesday, November 8, 2011
  • 2. Some crap about me. Blog at csskarma.com Tweet from @csskarma Write for Smashing Mag & SitePoint Tuesday, November 8, 2011
  • 3. Woah there fella Tuesday, November 8, 2011
  • 5. What is the future? Structural elements? Tuesday, November 8, 2011
  • 6. What is the future? Form elements/validation? Tuesday, November 8, 2011
  • 7. What is the future? History API? Tuesday, November 8, 2011
  • 8. What we’ll talk about Improved UX 3D interactive graphics Some awesome device stuff. Let’s get started Tuesday, November 8, 2011
  • 9. Web Workers at the edge Tuesday, November 8, 2011
  • 10. Web Workers Improved JavaScript Threading Main JS thread Secondary JS thread Tuesday, November 8, 2011
  • 11. Web Workers Adding a worker in main JS file var  worker  =  new  Worker('worker_script.js'); worker.onmessage  =  function(e){ //  do  some  stuff  when  the  worker  sends  a  message } Tuesday, November 8, 2011
  • 12. Web Workers Adding a worker in worker_script.js //post  your  message  to  the  requesting  client postMessage(‘hello  world’); Tuesday, November 8, 2011
  • 13. Web Workers What’s it get ya? Tuesday, November 8, 2011
  • 14. Web Workers Security Tuesday, November 8, 2011
  • 15. Web Workers Support Opera 10.6+ Chrome 3+ Firefox 4 + Safari 4.0+ Internet Explorer 10 ? Tuesday, November 8, 2011
  • 16. WebGL at the Cutting Edge Tuesday, November 8, 2011
  • 17. WebGL <canvas> OpenGL ES 2.0 Gaming Music Videos Data Visualizations Tuesday, November 8, 2011
  • 18. WebGL My intro to WebGL “WebGL is a beast” - James Williams, WebGL guy. Tuesday, November 8, 2011
  • 19. WebGL Drawing triangles Describing shapes to the GPU Texture, colour color, shades, lighting, etc. Tuesday, November 8, 2011
  • 20. WebGL Let’s look at some awesomeness http://helloracer.com/webgl/ Tuesday, November 8, 2011
  • 22. WebGL Don’t worry, we have libraries three.js Full WebGL , SVG & Canvas support PhiloGL Best documentation Tuesday, November 8, 2011
  • 23. WebGL Support (as of Oct. 16) Opera 12+ Chrome 9 + Firefox 4 + Safari 5.1+ on Leopard, Snow Leopard or Lion Internet Explorer 10 ? Tuesday, November 8, 2011
  • 24. WebGL What is our WebGL future? A ton of terrible games... and some cool ones. ... oh really? Tuesday, November 8, 2011
  • 25. Device API (Web API) At the Bleeding Edge Tuesday, November 8, 2011
  • 26. Device API Who’s working on it? Mozilla & W3C Since 2009 Since July/August Tuesday, November 8, 2011
  • 27. Device API Camera Gallery Contacts Network connection App Launcher File system Battery Vibration Tuesday, November 8, 2011
  • 28. Web API Accelerometer Apps Tuesday, November 8, 2011
  • 29. April. 2011 Device API <input  type=”file”  accept=”  image/*”  capture=”camera”  id=”capture”> audio/* video/* http://dev.w3.org/2009/dap/camera/ Tuesday, November 8, 2011
  • 30. April. 2011 Device API http://dev.w3.org/2009/dap/camera/ Tuesday, November 8, 2011
  • 31. Oct. 2011 Device API navigator.contacts.find([‘name’,‘emails’],  callback, {  filter:  ‘Bob’,  multiple:  true  }); http://dev.w3.org/2009/dap/contacts/ Tuesday, November 8, 2011
  • 32. Oct. 2011 Device API http://dev.w3.org/2009/dap/contacts/ Tuesday, November 8, 2011
  • 33. Oct. 2011 Device API var battery = new BatteryStatusEventSource(); http://www.w3.org/TR/2011/WD-­‐battery-­‐status-­‐20110915/ Tuesday, November 8, 2011
  • 34. Device API The challenges in API design. Tuesday, November 8, 2011
  • 35. Device API The challenges in API design. Tuesday, November 8, 2011
  • 36. Device API When can we have it? Boot  to  Gecko Tuesday, November 8, 2011
  • 37. Device API Getting involved. wiki.mozilla.org/WebAPI Boot  to  Gecko Tuesday, November 8, 2011
  • 38. Further reading on Web Workers developer.mozilla.org/en/Using_web_workers on WebGL dev.opera.com/articles/tags/webgl on the Device API https://wiki.mozilla.org/WebAPI https://dev.w3.org/2009/dap Tuesday, November 8, 2011
  • 39. “If you never question the status quo, you will never make progress” Tuesday, November 8, 2011
  • 41. Thanks! Email: timwright@csskarma.com Twitter: @csskarma Slides: csskarma.com/fowd Credit Font: Stag Vectors: The Noun Project Tuesday, November 8, 2011