Practical html5
Download as PPTX, PDF•1 like•1,860 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document discusses various HTML5 features for building modern web applications, including polyfills, semantic elements, data binding, WebSockets, drag and drop, graphics, and local storage. It provides overviews of the features and considerations for support in older browsers. Libraries are recommended to make APIs easier to use, such as Knockout for data binding, jQuery UI and SignalR for drag and drop and WebSockets, and Lawnchair and db.js for local storage. While not all HTML5 features are equally useful, with polyfills many can be supported in older browsers.
Practical html5
- 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: [email protected]
- 3. What we aren’t going to cover But I would really like to! Asynchronous Module Definition/RequireJS TypeScript CSS3 LESS/SASS Tooling But I will in my Modern Web Development session at the TechDays
- 4. What are we going to cover Polyfills Semantic elements Databinding & templates WebSockets Drag/Drop Graphics Storing data in the browser
- 5. The demo application Multiple concurent users Business rules that need to be enforced Use charts for reporting Support multiple devices Desktop Tablet with touch Support old versions of Internet Explorer 10 to 20% of users use Internet Explorer 8 http://bit.ly/DotNed
- 6. 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
- 7. HTML5 Semantic elements New HTML5 elements <nav> <section> <header> <footer> <article> <aside>
- 8. HTML5 Semantic elements How about support?
- 9. 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
- 11. Databinding & templates Construct HTML snippets using JavaScript or jQuery Is tedious as best Use a richer application library Backbone Knockout Ember ... Choosing one is a matter of taste Checkout TodoMVC for a comparison with a to do app My choice is Knockout
- 13. 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
- 14. WebSockets How about support?
- 15. 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
- 16. WebSockets
- 17. 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
- 18. Drag and Drop How about support?
- 19. 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
- 20. Drag and Drop
- 21. 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
- 22. Comparison of Canvas and SVG Canvas SVG Pixel-based (canvas is essentially an image Object Model-based (SVG elements are element with a drawing API) similar to HTML elements) Single HTML element similar to <img> in Multiple graphical elements which become behavior part of the Document Object Model (DOM) Visual presentation created with markup and Visual presentation created and modified modified by CSS or programmatically through programmatically through script script Event model/user interaction is coarse—at Event model/user interaction is object-based the canvas element only; interactions must be at the level of primitive graphic elements— manually programmed from mouse lines, rectangles, paths coordinates API does not support accessibility; markup- SVG markup and object model directly based techniques must be used in addition to supports accessibility canvas
- 23. SVG How about support?
- 24. Canvas How about support?
- 25. 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
- 26. Graphics
- 27. Storing data in the browser Lots of data changes only infrequently Don’t waste time by loading it every time HTTP caching can help But is less flexible HTML5 has two mechanisms for local storage LocalStorage is a simple dictionary IndexedDB is a document database Web SQL is also an option but has been deprecated
- 28. IndexedDB How about support?
- 29. LocalStorage How about support?
- 30. Web SQL Database How about support?
- 31. 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
- 32. Storing data in the browser
- 33. 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 support with older browsers Use polyfills where needed Download the demo code