HTML5: What’s Around theBend? For Dept. of VA (http://http://vaww.itwd.va.gov/) Raj Lal
Raj Lal• Web Developer Evangelist• Active Member of W3C• Author of multiple books  – Web Widgets  – Smartphone Web  – Rich...
Agenda         3
WHAT IS HTML5?                 4
What is HTML5?• A set of Web technologies:  – Semantics  – ARIA  – CSS3  – Web APIs                               5
HTML5 SEMANTICS                  6
What Are HTML5 Semantics ?Semantics are 30 new HTML elementswhich describe the content of the page                        ...
Semantics•   Structural elements•   Figure, audio and video•   Canvas and SVG•   Obsolete elements                        ...
Structural Elements•   header•   nav•   section•   article•   footer                      9
Figure<figure><img src=“monalisa.jpeg"><figcaption>Artist: Leonardo da Vinci</figcaption></figure>                        ...
Audio<audio controls><source src=music.ogg type=audio/ogg><source src=music.mp3 type=audio/mp3><!-- fallback content: -->D...
Video<video controls><source src=vid.webm type=video/webm><source src=vid.mp4 type=video/mp4><!-- fallback content: --><!–...
Canvas<canvas id=“cnv"width="200" height="100"style="border:1px solid #c3c3c3;"></canvas><script>var c=document.getElement...
SVG<svg id="svgElement"width="800px" height="600px"viewBox="0 0 800 600"><rect x="0" y="0" width="100%" height="100%" rx="...
Obsolete Elements  <acronym>         <font>  <applet>          <frame>  <basefont>        <frameset>  <big>             <n...
HTML5 AND ARIA: ACCESSIBILITY                  16
Accessibility• HTML5 Accessibility API, ARIA• How ARIA works• Developing an accessible website                            ...
ARIA = Accessible Rich InternetApplication• ARIA is a part of HTML5• ARIA uses HTML and CSS Tags• ARIA makes Web content a...
ARIA is a set of attributes• Roles• States• Properties                              19
ARIA Role            20
ARIA Role• Landmark Roles – Where am I?  – Main, content, navigation, banner• Structural Roles – What’s this?  – Files, di...
ARIA States• Dynamic properties• Global states• Widget states                       22
ARIA Properties• Relatively static properties                                 23
How ARIA Works                         Roles   States Properties AssistiveTechnology                                 ARIAV...
Accessible HTML5 Home Page                 <header role="banner">                 <nav role="navigation">                 ...
Progressive Enhancement                          26
HTML5 AND CSS3:ADAPTIVE WEBSITES                    27
HTML5 and CSS3• Adaptive website for Mobile• Advanced Styles• Animations                                28
Layout Detection                   29
Layout Detection• Media-queries enable style sheets tailored for  different width, height, and color                      ...
Media Queries: Layout Detection<link rel="stylesheet" href="default.css" media="screen" /><link rel="stylesheet" href="han...
Media Queries: Layout DetectionHandheld   Default screen             Wider screen            http://www.lancs.ac.uk/      ...
Media Queries: Layout DetectionjQuery.mediaqueriesThe script adds basic Media Query-Support (min-width and max-width in px...
Layout Media Query for device-aspect-ratio@media screen and (device-aspect-ratio: 16/9)@media screen and (device-aspect-ra...
OrientationMedia Query for Orientation*@media screen and (orientation:portrait) {  /* Portrait styles */}@media screen and...
ViewportViewable area on the screen<meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1">    ...
CSS3 Advanced Styles• Background  background-image: url(img_one.png),url(img_two.png);• Border Radius  border-radius:25px;...
CSS3 Advanced Styles• Font-face    <style>    @font-face    {    font-family: mycustomfont;    src: url(‘customfont.ttf), ...
CSS3 Advanced Styles• Opacity   img {opacity:0.4;}       Original         Opacity:40%                                     ...
CSS3 Animation• Transitions:  – Animation for change in state of element• Transformations:  – Changing the element size, p...
CSS3 Animation: Transitionsvar elem = document.getElementById(transitionelement); elem.addEventListener(click, function lo...
CSS3 Animation: Transformations  • translate()   transform: rotate(30deg);  • rotate()  • scale()  • skew()  • matrix()   ...
HTML5 AND WEB APIS                     43
Advanced Web APIs•   Geolocation•   Local storage•   Application cache•   Web workers•   File API•   Web Audio            ...
Example: Geolocation <script>if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }function...
HTML5: PRESENT AND FUTURE                            46
47
HTML5 and Browser Compatibility                                  48
How to Use JS Library• Modernizr  <script src="modernizr-1.7.js“/>  Modernizr.canvas ? "Canvas" : “No canvas";            ...
How to Use: JS LibrariesModernizrCanvas           SVG             Cross Window MsgAudio            InlineSVG       Web Wor...
How to Use: CSS3• Prefix     -moz-     -ms-     -o-     -webkit-                   51
How to Use: CSS3 Styles     .style     {     -moz-border-radius: 1em;     -ms-border-radius: 1em;     -o-border-radius: 1e...
The Future of HTML5                      53
Resources•   HTML5 RESOURCES: http://www.html5rocks.com•   HTML5 READINESS: http://html5readiness.com/•   BROWSER COMPATIB...
Webinar Evaluation Survey• Copy and paste the course evaluation link into  your browser:    http://vaww.itwd.va.gov/webina...
Próxima SlideShare
Cargando en…5
×

Html5 Whats around the bend

2.343 visualizaciones

Publicado el

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

Html5 Whats around the bend

  1. 1. HTML5: What’s Around theBend? For Dept. of VA (http://http://vaww.itwd.va.gov/) 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
  16. 16. HTML5 AND ARIA: ACCESSIBILITY 16
  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
  27. 27. HTML5 AND CSS3:ADAPTIVE WEBSITES 27
  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 http://www.lancs.ac.uk/ 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(){ elem.style.left = ‘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
  54. 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. 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

×