Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Practical HTML5
Maurice de Beijer
Who am I?
•
•
•
•
•
•
•
•

Maurice de Beijer
The Problem Solver
Microsoft Integration MVP
DevelopMentor instructor
Twitter...
What are we going to cover?
•
•
•
•
•
•

Polyfills
Semantic elements
WebSockets
Drag/Drop
Graphics
Storing data in the bro...
Polyfills
• Not every browser supports every HTML5 feature
– Especially true with old browsers
• Many missing features can...
HTML5 Semantic elements
• New HTML5 elements
– <nav>
– <section>
– <header>
– <footer>
– <article>
– <aside>

5
HTML5 Semantic elements
• How about support?

6
HTML5 Semantic elements
• Why use them?
– Searchability
– Accessibility
• Neither really makes sense
– Search engines don’...
HTML5 Semantic elements
• The new HTML5 input elements
– <input type="email"/>
– <input type="number"/>
– <input type="url...
HTML5 Semantic elements
• Other more useful HTML5 elements
– <video>
– <audio>
– <meter>
– <progress>
– <time>

9
WebSockets
• A bi-directional socket connection
– Between a web browser and the web server
• The server can push updates t...
WebSockets
• How about support?

11
WebSockets
• Suffers from lack of infrastructure support
– Routers and firewalls can cause issues
• The API is low level
–...
Drag and Drop
• Drag and drop can be a very intuitive user interaction
– Often seen as more fun by users
• Very common int...
Drag and Drop
How about support?

14
Drag and Drop
• Use jQuery UI instead of the HTML5 capabilities
– Use jQuery UI Touch Punch for touch support
– Add -ms-to...
Graphics
• Rich graphics are common in modern applications
– Interactive graphics
– Charts
• Often generated on the client...
Comparison of Canvas and SVG
Canvas

SVG

Pixel-based (canvas is essentially an image
element with a drawing API)

Object ...
SVG
• How about support?

18
Canvas
• How about support?

19
Graphics
• Use a library to make the API easier
– Don’t worry about Canvas versus SVG
• jqPlot is great for charts
– It us...
Storing data in the browser

21
IndexedDB
• How about support?

22
LocalStorage
• How about support?

23
Storing data in the browser
• LocalStorage is well supported
– Except in very old versions of IE
• IndexedDB is much more ...
Conclusion
• There is lots of goodness in HTML5
– But not everything is as useful
• Some of the API’s are hard to use
– Bu...
Questions

?
The presentation and source code will be available
http://msmvps.com/blogs/theproblemsolver/

26
Upcoming SlideShare
Loading in …5
×

Practical HTML5

4,155 views

Published on

Using HTML5 features in everyday applications today

Published in: Technology, Art & Photos
  • Be the first to comment

Practical HTML5

  1. 1. Practical HTML5 Maurice de Beijer
  2. 2. Who am I? • • • • • • • • Maurice de Beijer The Problem Solver Microsoft Integration MVP DevelopMentor instructor Twitter: @mauricedb Blog: http://msmvps.com/blogs/theproblemsolver/ Web: http://www.HTML5Support.nl E-mail: mauricedb@develop.com 2
  3. 3. What are we going to cover? • • • • • • Polyfills Semantic elements WebSockets Drag/Drop Graphics Storing data in the browser • Demos at: http://bit.ly/lph5 3
  4. 4. Polyfills • Not every browser supports every HTML5 feature – Especially true with old browsers • Many missing features can be added using a polyfill – Offers the standard API – Often done in JavaScript – JavaScript is slow in older browsers  • A few good lists to check – Modernizr HTML5 Cross Browser Polyfills – HTML5 please 4
  5. 5. HTML5 Semantic elements • New HTML5 elements – <nav> – <section> – <header> – <footer> – <article> – <aside> 5
  6. 6. HTML5 Semantic elements • How about support? 6
  7. 7. HTML5 Semantic elements • Why use them? – Searchability – Accessibility • Neither really makes sense – Search engines don’t really care – Use WAI-ARIA for accessibility support • Make sure to add support in older versions of IE – Modernizr – Html5Shiv 7
  8. 8. HTML5 Semantic elements • The new HTML5 input elements – <input type="email"/> – <input type="number"/> – <input type="url"/> – <input type="date"/> – <input type="datetime"/> – <input type="month"/> – <input type="week"/> – ….. • Support is not very good, only really useful on mobile devices 8
  9. 9. HTML5 Semantic elements • Other more useful HTML5 elements – <video> – <audio> – <meter> – <progress> – <time> 9
  10. 10. WebSockets • A bi-directional socket connection – Between a web browser and the web server • The server can push updates to the browser – Refreshing the browser to see updates is so 2012  • Not just for games and chat applications – Any application where you want fast updates – Decrease the chance of concurrency issues 10
  11. 11. WebSockets • How about support? 11
  12. 12. WebSockets • Suffers from lack of infrastructure support – Routers and firewalls can cause issues • The API is low level – Messages are just simple objects – You might need to retransmit missed messages • Use ASP.NET SignalR – Uses WebSockets if possible – Otherwise it uses fallbacks like Comet – Supports scale out scenarios – Uses a very simple API • Using Node.js? – Use Socket.IO instead 12
  13. 13. Drag and Drop • Drag and drop can be a very intuitive user interaction – Often seen as more fun by users • Very common interaction on tablets – But works equally well with a mouse • HTML5 supports drag and drop – Including dragging from the file system 13
  14. 14. Drag and Drop How about support? 14
  15. 15. Drag and Drop • Use jQuery UI instead of the HTML5 capabilities – Use jQuery UI Touch Punch for touch support – Add -ms-touch-action: none in CSS for Windows 8 15
  16. 16. Graphics • Rich graphics are common in modern applications – Interactive graphics – Charts • Often generated on the client – Not just images downloaded from the server • Two basic options – Scalable Vector Graphics – Canvas 16
  17. 17. Comparison of Canvas and SVG Canvas SVG Pixel-based (canvas is essentially an image element with a drawing API) Object Model-based (SVG elements are similar to HTML elements) Single HTML element similar to <img> in behavior Multiple graphical elements which become part of the Document Object Model (DOM) Visual presentation created and modified programmatically through script Visual presentation created with markup and modified by CSS or programmatically through script Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinates API does not support accessibility; markupbased techniques must be used in addition to canvas Event model/user interaction is object-based at the level of primitive graphic elements— lines, rectangles, paths SVG markup and object model directly supports accessibility 17
  18. 18. SVG • How about support? 18
  19. 19. Canvas • How about support? 19
  20. 20. Graphics • Use a library to make the API easier – Don’t worry about Canvas versus SVG • jqPlot is great for charts – It uses canvas – Includes exCanvas for IE 7/8 support • Raphaël is a great choice for general graphics – It uses SVG – Uses VML for IE 7/8 support 20
  21. 21. Storing data in the browser 21
  22. 22. IndexedDB • How about support? 22
  23. 23. LocalStorage • How about support? 23
  24. 24. Storing data in the browser • LocalStorage is well supported – Except in very old versions of IE • IndexedDB is much more powerful – But the API is hard to use • Lawnchair is easy to use – Abstracts the underlying data storage – Can use LocalStorage, IndexedDB or other storage • db.js makes IndexedDB easy to use – But requires a polyfill in old browsers 24
  25. 25. Conclusion • There is lots of goodness in HTML5 – But not everything is as useful • Some of the API’s are hard to use – But there are good libraries to make things easier • Think about supporting older browsers – Use polyfills where needed 25
  26. 26. Questions ? The presentation and source code will be available http://msmvps.com/blogs/theproblemsolver/ 26

×