Html5 Whats around the bend

2.340 Aufrufe

Veröffentlicht am

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

2 Kommentare
1 Gefällt mir
Keine Downloads
Aufrufe insgesamt
Auf SlideShare
Aus Einbettungen
Anzahl an Einbettungen
Gefällt mir
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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.
  • 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.
  • 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
  • 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.
  • 30 NEW HTML5 Elements All presentation elements are obsolete in HTML5, <center>, <font> No more frames
  • All presentation elements are obsolete
  • 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
  • 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.
  • 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.
  • 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.
  • 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
  • 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
  • Focus on how ARIA and HTML5 work together to make ACCESSIBLE HTML5
  • 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
  • Brief discussion of how HTML5 evolved, what it’s intended to be, and where the standard is today.
  • 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.
  • 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)?
  • 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.
  • Html5 Whats around the bend

    1. 1. HTML5: What’s Around theBend? For Dept. of VA (http:// Raj Lal
    2. 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. 3. Agenda 3
    4. 4. WHAT IS HTML5? 4
    5. 5. What is HTML5?• A set of Web technologies: – Semantics – ARIA – CSS3 – Web APIs 5
    6. 6. HTML5 SEMANTICS 6
    7. 7. What Are HTML5 Semantics ?Semantics are 30 new HTML elementswhich describe the content of the page 7
    8. 8. Semantics• Structural elements• Figure, audio and video• Canvas and SVG• Obsolete elements 8
    9. 9. Structural Elements• header• nav• section• article• footer 9
    10. 10. Figure<figure><img src=“monalisa.jpeg"><figcaption>Artist: Leonardo da Vinci</figcaption></figure> 10
    11. 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. 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. 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. 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. 15. Obsolete Elements <acronym> <font> <applet> <frame> <basefont> <frameset> <big> <noframes> <center> <strike> <dir> <tt> 15
    17. 17. Accessibility• HTML5 Accessibility API, ARIA• How ARIA works• Developing an accessible website 17
    18. 18. ARIA = Accessible Rich InternetApplication• 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. 19. ARIA is a set of attributes• Roles• States• Properties 19
    20. 20. ARIA Role 20
    21. 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. 22. ARIA States• Dynamic properties• Global states• Widget states 22
    23. 23. ARIA Properties• Relatively static properties 23
    24. 24. How ARIA Works Roles States Properties AssistiveTechnology ARIAVoiceOver Platform HTMLWindows Eye Accessibility APIs Mac OSX Accessibility Protocol Linux IAccessible2 Windows MSAA 24
    25. 25. Accessible HTML5 Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 HTML5 25
    26. 26. Progressive Enhancement 26
    28. 28. HTML5 and CSS3• Adaptive website for Mobile• Advanced Styles• Animations 28
    29. 29. Layout Detection 29
    30. 30. Layout Detection• Media-queries enable style sheets tailored for different width, height, and color 30
    31. 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. 32. Media Queries: Layout DetectionHandheld Default screen Wider screen 32
    33. 33. Media Queries: Layout DetectionjQuery.mediaqueriesThe 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. 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. 35. OrientationMedia Query for Orientation*@media screen and (orientation:portrait) { /* Portrait styles */}@media screen and (orientation:landscape) { /* Landscape styles */}*DeviceOrientation Events specification at W3C 35
    36. 36. ViewportViewable area on the screen<meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1"> 36
    37. 37. CSS3 Advanced Styles• Background background-image: url(img_one.png),url(img_two.png);• Border Radius border-radius:25px; 37
    38. 38. CSS3 Advanced Styles• Font-face <style> @font-face { font-family: mycustomfont; src: url(‘customfont.ttf), } 38
    39. 39. CSS3 Advanced Styles• Opacity img {opacity:0.4;} Original Opacity:40% 39
    40. 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. 41. CSS3 Animation: Transitionsvar elem = document.getElementById(transitionelement); elem.addEventListener(click, function loop(){ = ‘100px;}, false);#transitionelement{transition: opacity 1s ease;} 41
    42. 42. CSS3 Animation: Transformations • translate() transform: rotate(30deg); • rotate() • scale() • skew() • matrix() 42
    43. 43. HTML5 AND WEB APIS 43
    44. 44. Advanced Web APIs• Geolocation• Local storage• Application cache• Web workers• File API• Web Audio 44
    45. 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. 46. HTML5: PRESENT AND FUTURE 46
    47. 47. 47
    48. 48. HTML5 and Browser Compatibility 48
    49. 49. How to Use JS Library• Modernizr <script src="modernizr-1.7.js“/> Modernizr.canvas ? "Canvas" : “No canvas"; 49
    50. 50. How to Use: JS LibrariesModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage 50
    51. 51. How to Use: CSS3• Prefix  -moz-  -ms-  -o-  -webkit- 51
    52. 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. 53. The Future of HTML5 53
    55. 55. Webinar Evaluation Survey• Copy and paste the course evaluation link into your browser:• Click “Respond to Survey”• Select HTML5: What’s Around the Bend 55