HTML5 for Web Designers
•
4 likes•759 views
These are the slides I used for a workshop/presentation about HTML5 and related techniques to build web and mobile applications. The session was about half theoretical and half practical. The audience consisted of students wanting to get up to speed with new HTML5/CSS3 related techniques in web development.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to HTML5 for Web Designers
Similar to HTML5 for Web Designers (20)
Recently uploaded
Recently uploaded (20)
HTML5 for Web Designers
- 1. hi
- 2. These are the slides I used for a three hour presentation/workshop about HTML5 and other modern techniques that can be used to build web apps.
- 4. LET’S CONNECT • http://www.linkedin.com/in/jorishens • @goodbytes on Twitter • http://www.goodbytes.be
- 5. THE 10 YEAR TECH CYCLE
- 11. image credit: couldn’t verify
- 13. 1991: HTML 1994: HTML 2 1996: CSS1 + Javascript 1997: HTML4 1998: CSS 2 2000: XHTML 1
- 14. DESKTOPS 800px * 600px
- 15. WEB DESIGN IN 1997 A.K.A. MY FIRST WEBSITE
- 16. LIFE WAS GREAT! no spam, no facebook, ICQ and 800px of safe canvas!
- 17. <TABLES>
- 18. <font color=”red”> yuk </font>
- 19. CSS !
- 21. 2002: Tableless Web Design <TABLES>
- 22. 2005 AJAX
- 23. 1 - click on link 2 - AJAX call to like.php server 3 - php updates the db and responds 4 - js catches response and updates UI
- 24. NO PAGE REFRESH
- 25. WEB DESIGN UNTIL ... 2007
- 29. MOBILE ACCESS
- 31. GPS+COMPASS
- 36. CAMERA
- 37. CAMERA
- 38. OFFLINE DATA
- 40. GOING NATIVE?
- 43. ★ APP STORE REVENUE
- 44. ★ APP STORE REVENUE ★ HARDWARE ACCESS
- 52. MORE COMPLEX
- 55. READY IN
- 56. 2022
- 57. 2022
- 58. = “require at least two browsers to completely pass [HTML 5 test suites]”
- 59. JUNE 2011 CSS2.1 is now a W3C recommendation (after 13 years)
- 60. NEW SEMANTIC TAGS
- 61. <!DOCTYPE html>
- 66. OLD BROWSERS?
- 68. PROBLEM I don’t know <header>, <footer>, ... I’ll just make it inline
- 69. SOLUTION
- 71. IE6, 7, 8 OLD BROWSERS?
- 73. GEOLOCATION?
- 78. OFFLINE DATA?
- 80. FORMS
- 82. <VIDEO> Flash <video width="400" height="360" src="vid.mp4">
- 83. <AUDIO>
- 84. <CANVAS>
- 91. <CANVAS>+<VIDEO> = lolcatz http://html5demos.com/video-canvas
- 95. WEB SOCKETS
- 96. “REAL TIME” vs “POLLING”
- 97. GOT CANDY? http://www.flickr.com/photos/53552950@N00/2379078919
- 99. ★ GOOGLE DOCS
- 100. ★ GOOGLE DOCS ★ LIVE CHAT
- 101. ★ GOOGLE DOCS ★ LIVE CHAT ★ GAMES
- 102. ★ GOOGLE DOCS ★ LIVE CHAT ★ GAMES ★ ...
- 107. CSS3 AND OTHER HIPSTER TECHNIQUES
- 108. PHOTOSHOP
- 109. PHOTOSHOP
- 110. SPEC NOT FINAL YET -moz- -webkit- -o- -ms-
- 112. DO IT FUTURE PROOF
- 113. OR GO PREFIX FREE
- 114. border-image
- 122. CSS ANIMATIONS
- 123. CSS ANIMATIONS http://leaverou.github.com/animatable/
- 124. CSS GRADIENTS
- 125. CSS GRADIENTS Complex :( Generators :) http://gradients.glrzad.com/ http://www.westciv.com/tools/gradients/
- 126. TYPOGRAPHY
- 127. @font-face • fontsquirrel.com, google fonts, typekit, ...
- 128. ICON FONTS .icon:before {content:'e048';} http://somerandomdude.com/work/iconic/
- 129. SVG
- 131. SVG • Scalable Vector Graphics • not new • resolution-independant • XML • http://www.w3schools.com/svg/default.asp <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
- 132. SVG((Scalable(Vector(Graphics) h*p://www.drawasCckman.com/ h*p://www.w3schools.com/svg/default.asp
- 134. EXAMPLES
- 138. LET’S BUILD A SIMPLE APP
- 140. GET LOCATION GET TOILETS ANIMATE LOGO GET CLOSEST RESULT SHOW RESULT RESTART ON LOGO CLICK
- 141. ALREADY DONE
- 142. ALREADY DONE
- 143. APPLE SPECIFIC SETTINGS
- 144. APP ICONS
- 145. STARTUP SCREEN
- 146. STARTUP SCREEN
- 147. GO FULLSCREEN
- 148. HTML/CSS/JS ONLY
- 150. GEOLOCATION
- 151. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { //error } function success(position) { //position.coords.latitude //position.coords.longitude }
- 152. OPEN DATA API
- 154. CSS3 TRANSITIONS + ANIMATIONS
- 155. FRAMEWORKS
- 156. FRAMEWORKS
- 157. FRAMEWORKS
- 158. FRAMEWORKS
- 159. FRAMEWORKS
- 160. WHERE DO I GO FROM HERE?
- 161. EXPERIMENT
- 163. http://ro.me
- 164. Q&A
- 165. HTML5 • new semantic tags • JavaScript API’s • already here • more than just html
- 166. CSS3 • less Photoshop • scalable • lightweight (mobile!) • design in the browser • watch out for vendor prefixes
- 167. SOURCES • http://bit.ly/5BqHuj • http://www.pakzilla.com/2012/01/01/a-reference-to-html-5-tags/ • http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation • http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/ • http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
- 168. SOURCES / CSS3 • http://www.css3.info • http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow • http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with- css3/ • http://designshack.co.uk/articles/css/10-amazing-examples-of-innovative-css3-animation • http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/ • http://www.1stwebdesigner.com/development/50-awesome-css3-animations/
- 169. SOURCES / MOBILE APPS • http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/ • http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/ SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002051-CH1- SW1 • http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app • http://lanyrd.com/2011/bd11/sccwh/ • http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/