Html5 Whats around the bend

  • Published on

  • View

  • Download

Embed Size (px)


Presentation for Department of Veteran Affairs Learn the essentials of HTML5 HTML5 Semantics Accessibility and ARIA CSS3 Styles and Animations Advanced Web APIs How to adapt your website for N-screens TV, PC, Mobile and Tablets


  • 1. HTML5: Whats Around theBend? For Dept. of VA (http:// Raj Lal

2. Raj Lal Web Developer Evangelist Active Member of W3C Author of multiple books Web Widgets Smartphone Web Rich Internet Applications Decade of experience working on Web2 3. Agenda 3 4. WHAT IS HTML5? 4 5. What is HTML5? A set of Web technologies: Semantics ARIA CSS3 Web APIs 5 6. HTML5 SEMANTICS6 7. What Are HTML5 Semantics ?Semantics are 30 new HTML elementswhich describe the content of the page 7 8. Semantics Structural elements Figure, audio and video Canvas and SVG Obsolete elements8 9. Structural Elements header nav section article footer9 10. FigureArtist: Leonardo da Vinci10 11. AudioDownload Ogg orMP3 formats.11 12. Video12 13. Canvas 13 14. SVG 14 15. Obsolete Elements

  • 15 16. HTML5 AND ARIA: ACCESSIBILITY16 17. Accessibility HTML5 Accessibility API, ARIA How ARIA works Developing an accessible website 17 18. ARIA = Accessible Rich InternetApplication ARIA is a part of HTML5 ARIA uses HTML and CSS Tags ARIA makes Web content accessible toassistive technologies Most of ARIA is embedded in JS libraries 18 19. ARIA is a set of attributes Roles States Properties19 20. ARIA Role20 21. ARIA Role Landmark Roles Where am I? Main, content, navigation, banner Structural Roles Whats this? Files, directory Interface Widget Roles Slider, calendar, etc.21 22. ARIA States Dynamic properties Global states Widget states 22 23. ARIA Properties Relatively static properties 23 24. How ARIA Works Roles States Properties AssistiveTechnology ARIAVoiceOverPlatform HTMLWindows Eye Accessibility APIs Mac OSX Accessibility ProtocolLinux IAccessible2 Windows MSAA24 25. Accessible HTML5 Home Page Accessible HTML5HTML525 26. Progressive Enhancement26 27. HTML5 AND CSS3:ADAPTIVE WEBSITES27 28. HTML5 and CSS3 Adaptive website for Mobile Advanced Styles Animations28 29. Layout Detection 29 30. Layout Detection Media-queries enable style sheets tailored fordifferent width, height, and color 30 31. Media Queries: Layout Detection@media screen and (min-width: 400px) and (max-width: 700px){}31 32. Media Queries: Layout DetectionHandheld Default screen Wider screen 33. Media Queries: Layout DetectionjQuery.mediaqueriesThe script adds basic Media Query-Support (min-width and max-width in px units ) to all browsers 45 46. HTML5: PRESENT AND FUTURE46 47. 47 48. HTML5 and Browser Compatibility48 49. How to Use JS Library Modernizr