Html5 Whats around the bend
Download as PPT, PDF2 likes2,542 views
The document discusses HTML5, highlighting its new semantics, accessibility features through ARIA, and CSS3 enhancements for adaptive web design. It covers structural elements, multimedia integration, and advanced web APIs like geolocation and local storage. Additionally, it addresses browser compatibility and the future of HTML5 along with resources for further learning.
Html5 Whats around the bend
- 1. HTML5: What’s Around the Bend? For Dept. of VA (http://http://vaww.itwd.va.gov/) 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 Web 2
- 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 SEMANTICS 6
- 7. What Are HTML5 Semantics ? Semantics are 30 new HTML elements which describe the content of the page 7
- 8. Semantics • Structural elements • Figure, audio and video • Canvas and SVG • Obsolete elements 8
- 9. Structural Elements • header • nav • section • article • footer 9
- 10. Figure <figure> <img src=“monalisa.jpeg"> <figcaption> Artist: Leonardo da Vinci </figcaption> </figure> 10
- 11. Audio <audio controls> <source src=music.ogg type=audio/ogg> <source src=music.mp3 type=audio/mp3> <!-- fallback content: --> Download <a href=music.ogg>Ogg</a> or <a href=music.mp3>MP3</a> formats. </audio> 11
- 12. Video <video controls> <source src=vid.webm type=video/webm> <source src=vid.mp4 type=video/mp4> <!-- fallback content: --> <!– flash video --> </video> 12
- 13. Canvas <canvas id=“cnv" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script> var c=document.getElementById(“cnv"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> 13
- 14. SVG <svg id="svgElement" width="800px" height="600px" viewBox="0 0 800 600"> <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" style="fill: white; stroke: black;" /> <circle id="circle0" cx="40" cy="40" r="40" style="fill: orange; stroke: black; stroke-width: 1;" /> </svg> 14
- 15. Obsolete Elements <acronym> <font> <applet> <frame> <basefont> <frameset> <big> <noframes> <center> <strike> <dir> <tt> 15
- 16. HTML5 AND ARIA: ACCESSIBILITY 16
- 17. Accessibility • HTML5 Accessibility API, ARIA • How ARIA works • Developing an accessible website 17
- 18. ARIA = Accessible Rich Internet Application • ARIA is a part of HTML5 • ARIA uses HTML and CSS Tags • ARIA makes Web content accessible to assistive technologies • Most of ARIA is embedded in JS libraries 18
- 19. ARIA is a set of attributes • Roles • States • Properties 19
- 20. ARIA Role 20
- 21. ARIA Role • Landmark Roles – Where am I? – Main, content, navigation, banner • Structural Roles – What’s 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 Assistive Technology ARIA VoiceOver Platform HTML Windows Eye Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA 24
- 25. Accessible HTML5 Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 HTML5 25
- 26. Progressive Enhancement 26
- 27. HTML5 AND CSS3: ADAPTIVE WEBSITES 27
- 28. HTML5 and CSS3 • Adaptive website for Mobile • Advanced Styles • Animations 28
- 29. Layout Detection 29
- 30. Layout Detection • Media-queries enable style sheets tailored for different width, height, and color 30
- 31. Media Queries: Layout Detection <link rel="stylesheet" href="default.css" media="screen" /> <link rel="stylesheet" href="handheld.css" media="only screen and (max-width: 480px), handheld" /> <link rel="stylesheet" href="wider.css" media="only screen and (min-width: 1200px)" /> @media screen and (min-width: 400px) and (max-width: 700px) {} 31
- 32. Media Queries: Layout Detection Handheld Default screen Wider screen http://www.lancs.ac.uk/ 32
- 33. Media Queries: Layout Detection jQuery.mediaqueries The script adds basic Media Query-Support (min- width and max-width in px units ) to all browsers <script src="jquery.mediaqueries.js“></script> 33
- 34. Layout Media Query for device-aspect-ratio @media screen and (device-aspect-ratio: 16/9) @media screen and (device-aspect-ratio: 32/18) @media screen and (device-aspect-ratio: 1280/720) @media screen and (device-aspect-ratio: 2560/1440) 34
- 35. Orientation Media Query for Orientation* @media screen and (orientation:portrait) { /* Portrait styles */ } @media screen and (orientation:landscape) { /* Landscape styles */ } *DeviceOrientation Events specification at W3C 35
- 36. Viewport Viewable area on the screen <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 36
- 37. CSS3 Advanced Styles • Background background-image: url(img_one.png),url(img_two.png); • Border Radius border-radius:25px; 37
- 38. CSS3 Advanced Styles • Font-face <style> @font-face { font-family: mycustomfont; src: url(‘customfont.ttf'), } 38
- 39. CSS3 Advanced Styles • Opacity img {opacity:0.4;} Original Opacity:40% 39
- 40. CSS3 Animation • Transitions: – Animation for change in state of element • Transformations: – Changing the element size, position or angle • Key frame animation – Support color animation, etc. 40
- 41. CSS3 Animation: Transitions var elem = document.getElementById('transitionelement'); elem.addEventListener('click', function loop() { elem.style.left = ‘100px';}, false); #transitionelement { transition: opacity 1s ease; } 41
- 42. CSS3 Animation: Transformations • translate() transform: rotate(30deg); • rotate() • scale() • skew() • matrix() 42
- 43. HTML5 AND WEB APIS 43
- 44. Advanced Web APIs • Geolocation • Local storage • Application cache • Web workers • File API • Web Audio 44
- 45. Example: Geolocation <script> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } function showPosition(position) { var myLatitude = position.coords.latitude; var myLongitude = position.coords.longitude; } </script> 45
- 46. HTML5: PRESENT AND FUTURE 46
- 47. 47
- 48. HTML5 and Browser Compatibility 48
- 49. How to Use JS Library • Modernizr <script src="modernizr-1.7.js“/> Modernizr.canvas ? "Canvas" : “No canvas"; 49
- 50. How to Use: JS Libraries Modernizr Canvas SVG Cross Window Msg Audio InlineSVG Web Workers Video WebGL Web SQL database Animation Websockets Touch Transformation Geolocation Drag and Drop Local Storage 50
- 51. How to Use: CSS3 • Prefix -moz- -ms- -o- -webkit- 51
- 52. How to Use: CSS3 Styles .style { -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 52
- 53. The Future of HTML5 53
- 54. Resources • HTML5 RESOURCES: http://www.html5rocks.com • HTML5 READINESS: http://html5readiness.com/ • BROWSER COMPATIBILITY: http://caniuse.com/ • MOBILE TEMPLATES: http://html5boilerplate.com/ • CSS3: http://www.w3schools.com/css3/ • ARIA: http://dev.w3.org/html5/markup/aria/aria.html • WEB APIs SUPPORT: http://www.modernizr.com 54
- 55. Webinar Evaluation Survey • Copy and paste the course evaluation link into your browser: http://vaww.itwd.va.gov/webinar • Click “Respond to Survey” • Select HTML5: What’s Around the Bend 55
Editor's Notes
- #2: Kurt: Hello, my name is Kurt Lenz. Welcome everyone, to today’s webinar, HTML5: What’s around the Bend. We are very happy you could join us for this webinar offered by VA ITWD. I am delighted to be joined by our presenter today, Raj Lal. You’ll be hearing from him in just a few minutes.
- #3: Kurt: Now I’d like to introduce our presenter today, Raj Lal. Raj Lal is an internationally recognized digital product leader and an active member of the W3C Accessibility group, where he is helping design standards for a web which is accessible to all. He is passionate about HTML5, RIA, Mobile technologies, and has authored multiple books on Desktop, Web, Mobile and Rich Internet applications. He is a distinguished Nokia engineer and has presented world wide on HTML5 and Mobile technologies.
- #4: Raj: During this session, we will cover the basics of what HTML5 means and where the HTML5 standard is today. We’ll see What’s new with HTML5, the new Semantics and Tags available to use on a web page. We will see how HTML5 works to support 508 accessibility conformance, and talk about Accessibility APIs also called ARIA available in HTML5 and how to use them on the web page effectively. We will see advanced options available in CSS3 which allows you to create a website which can be used for multiple devices. Finally, we’ll look into advanced features available in HTML5 through Web APIs . We will then see what the future of HTML5 looks like, and we’ll share some resources to help you stay informed about the ever-evolving standard. What is HTML5 Semantics Accessibility Adaptive HTML5 CSS3 and Animations Advanced APIs The future of HTML5
- #6: Overview of how these things work together to make up the HTML5 standard. HTML5 is a set of standard recommendations being developed by W3C (world wide web consortium) and is also an umbrella term used for a set of technologies Foremost HTML5 is a set of New HTML elements which can be used on a web page. Next is Accessibility APIs HTML5 also features a set of Accessibility APIS called ARIA which allows you to create a web page which is accessible to people with disabilities. Third important pillar of HTML5 technology is CSS3, The next version of Cascading stylesheet which allows a lot of advanced functionalities like transparency, shapes, animations and adaptability of websites. The last part of HTML5 is Web APIs , These are JavaScript based APIs which gives you very power functionalities like offline caching, Geo location, Performance and so on.
- #8: 30 NEW HTML5 Elements All presentation elements are obsolete in HTML5, <center>, <font> No more frames
- #16: All presentation elements are obsolete
- #18: Lets talk about Accessibility now. What we need here is To know who is our user, what kind of challenges they have and what are the assistive technology they are using to access a web page. I will talk about the Accessibility APIs (ARIA) which is used by the Assistive technology to access a webpage and How it Works Finally I will show How to implement Those Accessibility APIs in the web page
- #20: ARIA uses a set of roles, states and properties to expose your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
- #21: ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT. Participants can download a handout with a list of the role types and role names commonly used in ARIA.
- #22: ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT. Participants can download a handout with a list of the role types and role names commonly used in ARIA.
- #23: ARIA state is a dynamic property of an HTML element which represents data associated with the object but do not affect the essential nature of the element. There are two types of ARIA states, Global and Widget state Participants can download a handout of commonly used ARIA states from the Handouts section of Live Meeting
- #24: ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element. This will make the input field required in the form for Accessible devices. Now let see How ARIA works
- #26: Focus on how ARIA and HTML5 work together to make ACCESSIBLE HTML5
- #27: Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All presentation elements in CSS Load JavaScript after the page is loaded
- #48: Brief discussion of how HTML5 evolved, what it’s intended to be, and where the standard is today.
- #49: Discussion of browser compatibility issues. Point out that on this web site, each spoke on the wheel is clickable and takes the user to information on the feature. Features include but are not limited to: audio, flexbox layout, geolocation, canvas, drag and drop, query selector, etc.
- #54: Discussion of how HTML5 is expected to affect web and application development into the future. What appears to be changing quickly; what needed changes look like they’ll take longer (either in evolution or adoption)?
- #56: Joanne: Thank you for attending our webinar today, HTML5: What’s around the Bend . We hope you found it useful and informative—and we hope you’ll come back for more ITWD webinars, as well as exploring all the training opportunities available to you in the TMS. Before you sign off, we need some feedback so we can continue to improve and meet your needs with these webinars. There is a Course Evaluation link on this slide. You can write it down, or you can download a copy of this PPT file from the Handouts section in the upper right of your LiveMeeting window and click the live link inside the PPT. You can also select the icon resembling the yellow notepad, also in the upper right of your LiveMeeting window. When the notepad pops up, you will be able to copy the URL from the shared notes and paste it into your browser. Once you have navigated to the correct page, click “Respond to Survey.” Select the title of today’s presentation: “HTML5: What’s around the Bend” from the drop-down menu. Then complete the survey and submit your response. Please take a couple minutes to complete this now.