$30 off During Our Annual Pro Sale. View Details »

Future Friendly HTML5

Mike King
November 16, 2013

Future Friendly HTML5

The latest version of HTML brings incredible features to the browser, but like all things, with great power comes great responsibility. Learn how to harness the new capabilities in HTML5 & CSS3 responsibly by progressively enhancing your websites with new elements, multimedia, advanced graphics, and animations.

By the end of this course you will have a solid understanding of the new capabilities within HTML & CSS and know how to think and design in a `future-friendly` way.

Mike King

November 16, 2013

Other Decks in Design


  1. Future Friendly HTML @micjamking

  2. Introductions

  3. What we’ll be discussing The Web: Past, Present, & Future

    What is HTML5? Progressive Enhancement
  4. What we’ll be doing Writing Code!

  5. #doworkson

  6. The Web: Past, Present, & Future

  7. The Web’s History *This guy has nothing to do with

    the web’s history
  8. March 1989 Tim Berners-Lee invented the world wide web

  9. *This Guy has everything to do with the web’s history

  10. 1990-1991 Tim Berners-Lee did work

  11. None
  12. October 1994 Browser Wars & The W3C was formed

  13. vs.

  14. #hotmess

  15. May 1995 Brendan Eich Created JavaScript...

  16. ...in 10 days!

  17. JavaScript ≠ Java

  18. December 1996 CSS 1.0 was published


  20. Styling Behavior Markup

  21. December 1997 HTML 4.0 was published

  22. None
  23. December 2000 XHTML 1.0 was published

  24. HTML = <H1> XHTML = <h1>

  25. May 2001 XHTML 2.0

  26. The death of HTML progression

  27. June 2004 WHATWG Formed

  28. “Web Hypertext Application Technology Working Group”

  29. Goal #1 Create a better HTML spec focusing on the

    “new web” a.k.a. Web 2.0
  30. Goal #2 Be backwards compatible a.k.a. Progressive Enhancement

  31. Goal #3 Add new features to HTML that previously required

    proprietary technologies
  32. #flashmustdie

  33. April 2005 Jesse James Garret coins the term “AJAX”

  34. April 2005 Adobe purchases Macromedia & adds Flash to the

    Creative Suite
  35. None
  36. October 2006 W3C works with WHATWG

  37. October 2007 Apple iPhone was released

  38. None
  39. January 2008 HTML5 working draft

  40. October 2008 The first Android device was released

  41. April 2010 Apple iPad was released

  42. None
  43. March 2011 Most major web browsers implement some HTML5 support

  44. *

  45. “How do you know whether an app is written in

    HTML5” “Open it in IE, if it doesn’t work, it’s HTML5”
  46. November 2011 Adobe kills Flash Player for mobile

  47. January 2012 WHATWG officially drops “5” from HTML5 spec...

  48. ...why? Because HTML is a “living” standard.

  49. The Present Web

  50. W3C hopes to release a stable “HTML5” standard by the

    end of 2014
  51. We build for the majority.

  52. Everyone has a mouse, but we “consider” mobile input

  53. Everyone has broadband internet

  54. pixel here = pixel there

  55. The New Defaults

  56. Touch Interactions

  57. None
  58. Small, multi-resolution screens

  59. None
  60. Content is King

  61. None
  62. Over 2.4 billion people have access to the internet (⅓

    of world population) http://www.internetworldstats.com/stats.htm
  63. Over 1.2 billion people access the web from their mobile

    devices. (½ of all people with internet access) http://www.digitalbuzzblog.com/wp-content/uploads/2012/07/the-rise-of-mobile-infographic1.png
  64. Global mobile traffic now accounts for 17% of all Internet

    traffic. (28% in U.S.) http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2013
  65. Android reached one billion devices in July 2013. PC’s reached

    one billion in September 2009 http://www.asymco.com/2013/09/06/third-to-a-billion/
  66. Future of the Web

  67. Moore’s Law Over history, computer processing speed/power doubles every 2

  68. Over the next decade, internet bandwidth will likely become 57

    times faster, while computers will become 100 times more powerful. http://www.nngroup.com/articles/mobile-sites-vs-apps-strategy-shift/
  69. Mobile industry will go from six billion connections today to

    more than 12 billion by 2020 http://allthingsd.com/20111010/mobile-devices-seen-doubling-by-2020-as-non-phones-dominate-wireless- airwaves/
  70. More People More Devices More Data

  71. What is HTML5?

  72. ...(good question)... ...it’s complicated.

  73. “Hyper Trendy Marketing Lingo” ... version 5

  74. W3C spec definition “Improves markup for documents”

  75. W3C spec definition “Introduces markup and API’s for emerging idioms”

  76. “[HTML5] is now basically being used to mean anything Web-standards

    related” – Ian Hickson http://blog.whatwg.org/html-is-the-new-html5
  77. HTML5 is... HTML, the 5th revision CSS, the 3rd revision

    New JavaScript API’s
  78. HTML5 is... ...the whole web standards model

  79. HTML5 is... ...still HTML 4.0 / XHTML 1.0 compatible

  80. HTML, the 5th revision

  81. Simplified DOCTYPE

  82. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  83. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  84. <!DOCTYPE html>

  85. Simplified character set

  86. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

  87. <meta http-equiv=”Content-Type” content=”text/html; charset=”UTF-8”>

  88. <meta charset=”UTF-8”>

  89. Simplified resource links

  90. <link type=”text/css” rel=”stylesheet” href=”file.css”> <script type=”text/javascript” src=”file.js”></script>

  91. <link type=”text/css” rel=”stylesheet” href=”file.css”> <script type=”text/javascript” src=”file.js”></script>

  92. <link rel=”stylesheet” href=”file.css”> <script src=”file.js”></script>

  93. New Semantic Tags

  94. <div class=”header”> <h1>My Fancy Website</h1> </div> <div class=”main”> <p>Yup, this

    is it!</p> </div> <div class=”sidebar”> <p>Some tangent...</p> </div> <div class=”footer”> <p>by Yours Truly</p> </div>
  95. <header> <h1>My Fancy Website</h1> </header> <section> <p>Yup, this is it!</p>

    </section> <aside> <p>Some tangent...</p> </aside> <footer> <p>by Yours Truly</p> </footer>
  96. <ul class=”nav”> <li><a href=””>...</a></li> <li><a href=””>...</a></li> <li><a href=””>...</a></li> <li><a href=””>...</a></li>

  97. <nav> <ul> <li><a href=””>...</a></li> <li><a href=””>...</a></li> <li><a href=””>...</a></li> <li><a href=””>...</a></li>

    </ul> </nav>
  98. <div class=”blog-post”> <h2>Cheese sandwiches</h2> <p>MY cat loves cheese sandwiches</p> <p>Published

    on 3:30pm on October 8th, 2004 by Yours Truly</p> </div>
  99. <article> <header> <h2>Cheese sandwiches</h2> </header> <p>MY cat loves cheese sandwiches</p>

    <footer>Published on <time datetime=”2005-10-08T15:30” pubdate>3:30pm on October 8th, 2004</time> by Yours Truly</footer> </article>
  100. <div class=”image”> <img src=”...”> <p>My image caption</p> </div>

  101. <figure> <img src=”...”> <figcaption> <p>My image caption</p> </figcaption> </figure>

  102. New tags for web apps

  103. <menu> <command> <datalist> <details> <summary>

  104. New input types (forms)

  105. <input type=”text” value=”yo@dude.com”> <input type=”text” value=”http://dude.com”> <input type=”text” value=”11/16/2013”> <input

    type=”text” value=”12:00p”> <input type=”text” value=”Blue”> <input type=”text” value=”555-555-5555”>
  106. <input type=”email” value=”yo@dude.com”> <input type=”url” value=”http://dude.com”> <input type=”date” value=”11/16/2013”> <input

    type=”time” value=”12:00p”> <input type=”color” value=”Blue”> <input type=”tel” value=”555-555-5555”>
  107. None
  108. New multimedia tags

  109. Audio <audio controls autoplay loop muted preload=”auto”> <source src=”myaudio.ogg” type=”audio/ogg”>

    <source src=”myaudio.mp3” type=”audio/mp3”> <!-- Fallback content, such as flash o_O --> </audio>
  110. Video <video controls autoplay loop muted preload=”auto” poster=”myvideobackground.jpg” height=”250” width=”

    300”> <source src=”myvideo.webm” type=”video/webm”> <source src=”myvideo.mp4” type=”video/mp4”> <!-- Fallback content, such as flash o_O --> </video>
  111. Inline SVG <svg xmlns=”http://www.w3.org/2000/svg”> <circle id=”greencircle” cx=”50” cy=”50” r=”50” fill=”green”

    /> </svg> External SVG <img src=”green-circle.svg” height=”64” alt=”green circle”>
  112. Canvas <canvas id=”mycanvas” width=”500” height=”500”> Sorry, your browser doesn’t support

    canvas </canvas>
  113. CSS, the 3rd revision

  114. Element Design

  115. Border Radius border-radius: 10px;

  116. Box Shadow border-shadow: 1px 1px 0px blue;

  117. Transitions transition: all 2.5s ease;

  118. Transforms transform: rotate(45deg);

  119. Typography

  120. Yo Bro Text Shadow text-shadow: 1px 1px 0px blue; Yo

  121. Web Fonts @font-face { font-family: ’Lobster’; src: url(Lobster.otf); } h1

    { font-family: ‘Lobster’; } Yo Bro
  122. Backgrounds

  123. Multiple Backgrounds background: url(image-1.jpg) left top no-repeat, url(image-2.jpg) right top

    no-repeat; Image-1.jpg Image-2.jpg
  124. Background sizing background: url(image-1.jpg) no-repeat; background-size: 100%;

  125. Background gradients background-image: linear-gradient(left, black, green);

  126. Pseudo Elements

  127. :before element h1:before { content: ‘&#10084;’; color: orange; } Yo

  128. :after element h1:after { content: ‘&#10084;’; color: red; } Yo

  129. “Flexbox” Layout

  130. Normal layout .container { display: block; height: 100px; } .left

    { background: green; width: 500px; } .right { background: blue; } .left .right
  131. Flexbox layout .container { display: box; height: 100px; } .left

    { background: green; width: 500px; } .right { background: blue; flex: 1; } .left .right
  132. Media Queries

  133. Media Queries /* Small Screens */ @media all (max-width: 480px){

    /* Mobile device with max width of 480px */ } /* Medium screens */ @media all (max-width: 768px){ /* Mobile device with max width of 768px */ }
  134. Animations

  135. Animations @keyframes spin{ 0% { transform: rotate(0deg); } 100% {

    transform: rotate(360deg); } } animation: spin 5s ease infinite;
  136. Vendor Prefixes

  137. Vendor Prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);

    transform: rotate(45deg);
  138. New JavaScript API’s

  139. Local Storage window.localStorage.setItem(‘name’, ‘Bob’); var name = window.localStorage.getItem(‘name’);

  140. History API link.addEventListener(‘click’, function(event){ event.preventDefault(); history.pushState({url: this.href}, null, this. href);

    gotToPage(this.href); }); window.addEventListener(‘popstate’, function(event){ goToPage(event.state.url); });
  141. WebSocket var socket = new WebSocket(‘ws://html5rocks. websocket.org/echo’); socket.onopen = function(event)

    { socket.send(‘Hello, WebSocket’); }; socket.onmessage = function(event){ alert(event.data); } socket.onclose = function(event){ alert(‘closed’); }
  142. Drag and Drop function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);

    } function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById (data)); }
  143. Geolocation if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(function (position){ var latlang = new google.maps.LatLng(position.

    coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latlng, map: map}); map.setCenter(latlng); }, errorHandler); }
  144. Device Orientation window.addEventListener(‘deviceorientation’, function(event){ var a = event.alpha; var b

    = event.beta; var g = event.gamma; }, false);
  145. Selectors API var wally = document.getElementsById(‘wally’); var friends = document.getElementsByClassName

    (‘friend’); var wallyDivs = document.getElementsByTagName(‘div’); var friendsInFooter = document.querySelectorAll (‘footer .friend’);
  146. Audio / Video <!-- HTML --> <audio id=”audio” src=”sound.mp3” controls></audio>

    <video id=”video” src=”movie.mp4” controls></video> // JavaScript document.getElementById(‘audio’).muted = false; document.getElementById(‘video’).play();
  147. Canvas (2D & 3D with WebGL) http://diveintohtml5.info/canvas.html

  148. Progressive Enhancement

  149. Start with a baseline experience and build out from there.

  150. None
  151. Browser Support

  152. HTML5 Shiv <!-- [if IE]> <script src=”http://html5shiv.googlecode. com/svn/trunk/html5.js”> </script> <![endif]-->

  153. Modernizr

  154. Can I Use

  155. Autoprefixer: https://github. com/ai/autoprefixer

  156. Future Friendly

  157. By anticipating what’s next, we can react to today’s concerns

    but also build long-term value for people and businesses.
  158. Future Friendly

  159. Mobile First

  160. Designing for mobile first not only prepares you for the

    explosive growth and opportunities in this space, it forces you to focus and enables you to innovate.
  161. Responsive Design

  162. Fluid layouts, Flexible Images, & Media Queries that adapt to

    multiple screen sizes
  163. None
  164. Accessibility

  165. Make sure that your web pages and apps are available

    to everyone, including people with disabilities.
  166. A11Y Project

  167. Exercise

  168. Things We Left on The Moon http://css3exp.com/code/view/ Codepen Demo http://cdpn.io/p/5d0f4104717186abef7d39c0cad375cc

  169. Resources

  170. HTML5 Boilerplate - http://html5boilerplate.com/ HTML5 Rocks - http://www.html5rocks.com/en/ A Book

    Apart - http://www.abookapart.com/ Dive into HTML5 - http://diveintohtml5.info/ Future Friendly - http://futurefriend.ly/ Media Queries - http://mediaqueri.es/ CSS3Please - http://css3please.com/ Modernizr - http://modernizr.com/ Can I Use - http://caniuse.com/ Codepen - http://codepen.io/ Dochub - http://dochub.io/
  171. Questions?

  172. @micjamking http://goo.gl/pDG06g