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.

Transcript

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
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
19. CSS JS HTML
20. Styling Behavior Markup
21. December 1997 HTML 4.0 was published
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
36. October 2006 W3C works with WHATWG
37. October 2007 Apple iPhone was released
39. January 2008 HTML5 working draft
40. October 2008 The first Android device was released
41. April 2010 Apple iPad was released
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
58. Small, multi-resolution screens
60. Content is King
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 years
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> </ul>
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”>
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 Bro
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 Bro
128. :after element h1:after { content: ‘&#10084;’; color: red; } Yo Bro
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.
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
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