Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

html5 an introduction

2,979 views

Published on

A html5 introduction for medianet vlaanderen

Published in: Technology
  • Be the first to comment

html5 an introduction

  1. 1. html5medianet vlaanderen VRT-medialab 1
  2. 2. no specs
  3. 3. “In three yearstime, desktops willbe irrelevant” 7
  4. 4. no jihad
  5. 5. ˜html5 in 5 minutes 13
  6. 6. <!-- HTML 4.01 / XHTML doctype andmeta --><!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="nl">
  7. 7. <!-- HTML5 doctype and meta --><!DOCTYPE html><html lang=nl><head> <meta charset=utf-8>
  8. 8. <!-- #haml --> !!! 5 %html{:lang => "nl"} %head %meta{:charset => "utf-8"}tutorial
  9. 9. <!-- HTML 4.01 / XHTML typeattributes --><link rel="stylesheet" type="text/css"href="style.css">
  10. 10. <!-- HTML5 type attributes --><link rel="stylesheet" href="style.css">
  11. 11. <!-- HTML 4.01 / XHTML --><script type="text/javascript"src="application.js"></script><!-- HTML5 --><script src="application.js"></script>
  12. 12. <!-- HTML 4.01 / XHTML Mandatorysolidus (/>) --><img src="EddyVanHalen.jpg"alt="Eddie!" />
  13. 13. <!-- HTML5 Optional solidus (/>) --><img src="EddyVanHalen.jpg"alt="Eddie!">
  14. 14. <!-- HTML5 Simplified syntax -->• !DOCTYPE• Character encoding• type attributes• Optional solidus (/>)
  15. 15. <!-- HTML5 links on steroids --><a href="/programs/deSlimsteMens/"> <h1>De Slimste mens</h1> <p>met Hendrik Dacquin</p></a>
  16. 16. But who can read this? 24
  17. 17. Compatible 100% 25
  18. 18. http://ishtml5readyyet.com/
  19. 19. Incompatible Compatible Compatible 46% Incompatible 54%source 28
  20. 20. 46% of the pie is eatenHTML5 incompatible browsers HTML5 compatible browsers FF < 3.5 7% chrome IE6 26% 16% IE8 FF 3.5+ 47% 46% IE7 Safari 3+ 29% Opera 24% 4% 29
  21. 21. source
  22. 22. <!-- HTML5 input elements --><input type="email" placeholder="Jouw E-mail adres" ><input type="search" autofocus>
  23. 23. <!-- HTML5 input elements --><input
type="search"> for search boxes<input
type="number"> for spinboxes<input
type="range"> for sliders<input
type="color"> for color pickers<input
type="tel"> for telephone numbers<input
type="url"> for web addresses<input
type="email"> for email addresses<input
type="date"> for calendar date pickers<input
type="month"> for months<input
type="week"> for weeks<input
type="time"> for timestamps<input
type="datetime"> for precise, absolute date+time stamps
  24. 24. <!-- HTML5 sectioning elements -->
  25. 25. <!-- HTML5 sectioning elements --><header> - <footer> - <nav>
  26. 26. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>
  27. 27. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…
  28. 28. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…→ Semantic alternatives to divs in HTML 4.01
  29. 29. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…→ Semantic alternatives to divs in HTML 4.01
  30. 30. <!-- HTML5 new inline elements -->
  31. 31. <!-- HTML5 new inline elements --><mark>
  32. 32. <!-- HTML5 new inline elements --><mark><time>
  33. 33. <!-- HTML5 new inline elements --><mark><time>…
  34. 34. <!-- HTML5 new inline elements --><mark><time>…→ Semantic alternatives to spans in HTML 4.01
  35. 35. <!-- HTML5 new inline elements --><mark><time>…→ Semantic alternatives to spans in HTML 4.01
  36. 36. <!-- HTML5 interactive elements --><details> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis diegraag prima ballerina wil worden.</p></details>
  37. 37. <!-- HTML5 interactive elements --><details open> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis diegraag prima ballerina wil worden.</p></details>
  38. 38. <!-- Modernizr -->Modernizr is a small JavaScriptlibrary that detects theavailability of CSS3 and HTML5
  39. 39. ˜ html5 ~=HTML + JS api + CSS3 39
  40. 40. ˜ HTML1.Semantics(New tags, Link Relations, Microdata)2.Accessibility(ARIA roles)3.Web Forms 2.0(Input Fields)4.Multimedia(Audio Tag, Video Tag)5.2D and 3D Drawing(Canvas, WebGL, SVG) 40
  41. 41. ˜ HTML1.Semantics(New tags, Link Relations, Microdata)2.Accessibility(ARIA roles)3.Web Forms 2.0(Input Fields)4.Multimedia(Audio Tag, Video Tag)5.2D and 3D Drawing(Canvas, WebGL, SVG) 41
  42. 42. ˜ JS api1.Client Side Storage(Web SQL Database, App Cache, Web Storage)2.Realtime Communication(Web Sockets, Worker Workers)3.Richer Experiences(Notifications, Drag and Drop API)4.Geolocation 42
  43. 43. ˜ JS api1.Client Side Storage(Web SQL Database, App Cache, Web Storage)2.Realtime Communication(Web Sockets, Worker Workers)3.Richer Experiences(Notifications, Drag and Drop API)4.Geolocation 43
  44. 44. ˜ CSS31.Typography2.Visuals3.Transitions, transforms and animations 44
  45. 45. ˜ CSS31.Typography2.Visuals3.Transitions, transforms and animations 45
  46. 46. ˜ 1. multimedia46
  47. 47. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay></audio>
  48. 48. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay loop></audio>
  49. 49. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay loopcontrols></audio>
  50. 50. <!-- HTML5 audio --><audio src="lamaSounds.mp3" id="player"autoplay loop ></audio><buttononclick="document.getElementById(player).play()">Play</button>
  51. 51. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay looppreload="none"></audio>
  52. 52. <!-- HTML5 audio formats --><audio controls> <source src="lamaSounds.ogg"> <source src="lamaSounds.mp3"></audio>
  53. 53. <!-- HTML5 audio fail back --><audio controls> <source src="lamaSounds.ogg" type="audio/ogg"> <source src="lamaSounds.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=lamaSounds.mp3"> <param name="movie" value="player.swf?soundFile=lamaSounds.mp3"> </object> <p>Een lama babbelt (maar u hoort dit niet)</p></audio>
  54. 54. <!-- HTML5 video --><video src="lamaTheMovie.mp4" controlswidth="360" height="240"></video>
  55. 55. <!-- HTML5 video to be continued---
  56. 56. http://people.mozilla.com/~prouget/demos/
  57. 57. ˜2. 2D and 3D Drawing 57
  58. 58. canvas• 2D and 3D drawing platform within the browser• Uses nothing more than JavaScript and HTML – no plugins• Created by Apple for dashboard widgets• Now part of the W3C spec
  59. 59. <!-- HTML5 canvas -->
  60. 60. source
  61. 61. source
  62. 62. source
  63. 63. source: http://localhost:8080/GwtQuake.html
  64. 64. canvas versus SVG• Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn• SVG is a vector system • Elements to be drawn are separate DOM objects. They can be manipulated individually • not a part of HTML5
  65. 65. ˜3. real time communication 67
  66. 66. web sockets• Ajax - Timeout requests• Comet - long polling• Flash XMLSocket• HTML5 web sockets
  67. 67. possible uses• Realtime data - (charts, stocks, sports)• Presence• Collaboration• Notifications
  68. 68. web sockets• Part of html5• Bi-directional communication between browser and server• Works with proxies/firewalls• low complexity, low latency
  69. 69. web sockets• uses its own protocol (ws://)• different headers• Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
  70. 70. <!-- HTML5 web sockets -->
  71. 71. browser support• Chrome and WebKit support now• Firefox 4.0 (released yesterday)• Internet Explorer (partial support in IE 9)• Fallback to Long polling
  72. 72. ˜ 4. CSS376
  73. 73. CSS3• rgba / hsla • rounded corners• gradients • transitions• shadows • transforms• multiple • animation! backgrounds• text strokes • @font-face 77
  74. 74. <!-- CSS3 rgba -->div { background-color: rgb(255,0,0)}div { background-color:rgba(255,0,0,0.5);}
  75. 75. <!-- CSS3 fonts -->@font-face {        font-family: MyFontFamily;        src: url(Bebas.eot?) format(eot),             url(Bebas.woff) format(woff),             url(Bebas.ttf)  format(truetype),             url(Bebas.svg) format(svg);}h1 { font-family: bebas, sans-serif; }
  76. 76. <!-- CSS3 border radius/gradient -->border-radius: 5px;background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3475c4), color-stop(1, #3475c4) );
  77. 77. Browser PrefixesFirefox: -moz-border-radiusSafari: -webkit-border-radiusOpera: -o-border-radiusIE: -ms-border-radius
  78. 78. better design tools
  79. 79. better design tools t e x t s t r o k e s rounded corners transitions transforms
  80. 80. better design toolsrgba / hsla t e x t s t r o k e sgradients rounded cornersshadows transitionsmultiple backgrounds transforms @font-face
  81. 81. questions?• @studiomuscle• hendrik.dacquin@vrtmedialab.be 85
  82. 82. resources• http://apirocks.com/html5/ html5.html#slide1• http://html5doctor.com• http://html5demos.com/• http://diveintohtml5.org/• http://validator.nu/?doc=http:// blog.whatwg.org/whats-next-in-html- episode-• http://html5watch.tumblr.com/• http://dev.w3.org/html5/html-author/• http://people.mozilla.com/~prouget/ demos/ 86
  83. 83. demos• http://9elements.com/io/ projects/html5/canvas/• http://html5demos.com/drag• http://bradshawenterprises.com/ tests/formdemo.php• http://hummingbirdstats.com• http://pusherapp.com• http://speckyboy.com/ 2010/04/23/html5-video- libraries-toolkits-and-players/ 87

×