![= “require at least two
browsers to completely
pass [HTML 5 test suites]”](https://image.slidesharecdn.com/html5-130201034107-phpapp01/85/HTML5-for-Web-Designers-58-320.jpg)
![= “require at least two
browsers to completely
pass [HTML 5 test suites]”](https://image.slidesharecdn.com/html5-130201034107-phpapp01/75/HTML5-for-Web-Designers-58-2048.jpg)
Uploaded byGoodbytes
HTML5 for Web Designers
The document is a presentation on HTML5 and modern web application development techniques, highlighting the evolution of web technology from the 1960s to 2022. It discusses advancements such as mobile access, semantic web tags, CSS3, SVG, and APIs, alongside various frameworks and tools for building applications. The presentation also emphasizes the importance of experimentation and staying updated with new technologies in web design.
More Related Content
Similar to HTML5 for Web Designers
HTML5 for Web Designers
- 1.
- 2. These are theslides 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 TECHCYCLE
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. image credit: couldn’tverify
- 12.
- 13. 1991: HTML 1994: HTML2 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.
- 18. <font color=”red”> yuk </font>
- 19.
- 21. 2002: Tableless WebDesign <TABLES>
- 22.
- 23. 1 - clickon link 2 - AJAX call to like.php server 3 - php updates the db and responds 4 - js catches response and updates UI
- 24.
- 25.
- 27.
- 28.
- 29.
- 31.
- 34.
- 35.
- 36.
- 37.
- 38.
- 40.
- 41.
- 43. ★ APP STOREREVENUE
- 44. ★ APP STOREREVENUE ★ HARDWARE ACCESS
- 45.
- 51.
- 52.
- 53.
- 55.
- 56.
- 57.
- 58. = “require atleast 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.
- 62.
- 66.
- 67.
- 68. PROBLEM I don’t know<header>, <footer>, ... I’ll just make it inline
- 69.
- 70.
- 71. IE6, 7, 8 OLDBROWSERS?
- 73.
- 78.
- 80.
- 82. <VIDEO> Flash <video width="400" height="360" src="vid.mp4">
- 83.
- 84.
- 85.
- 87.
- 89.
- 91. <CANVAS>+<VIDEO> = lolcatz http://html5demos.com/video-canvas
- 92.
- 93.
- 94.
- 95.
- 96. “REAL TIME” vs “POLLING”
- 97. GOT CANDY? http://www.flickr.com/photos/53552950@N00/2379078919
- 99.
- 100. ★ GOOGLE DOCS ★LIVE CHAT
- 101. ★ GOOGLE DOCS ★LIVE CHAT ★ GAMES
- 102. ★ GOOGLE DOCS ★LIVE CHAT ★ GAMES ★ ...
- 107. CSS3 AND OTHER HIPSTERTECHNIQUES
- 108.
- 109.
- 110. SPEC NOT FINALYET -moz- -webkit- -o- -ms-
- 112. DO IT FUTUREPROOF
- 113. OR GO PREFIXFREE
- 114.
- 115.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123. CSS ANIMATIONS http://leaverou.github.com/animatable/
- 124.
- 125. CSS GRADIENTS Complex :( Generators :) http://gradients.glrzad.com/ http://www.westciv.com/tools/gradients/
- 126.
- 127. @font-face • fontsquirrel.com, googlefonts, typekit, ...
- 128. ICON FONTS .icon:before {content:'e048';} http://somerandomdude.com/work/iconic/
- 129.
- 130.
- 131. SVG • Scalable VectorGraphics • 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.
- 135.
- 136.
- 137.
- 138.
- 140. GET LOCATION GET TOILETS ANIMATELOGO GET CLOSEST RESULT SHOW RESULT RESTART ON LOGO CLICK
- 141.
- 142.
- 143. APPLE SPECIFIC SETTINGS
- 144.
- 145.
- 146.
- 147.
- 148. HTML/CSS/JS ONLY
- 149.
- 150.
- 151. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { //error } function success(position) { //position.coords.latitude //position.coords.longitude }
- 152.
- 154. CSS3 TRANSITIONS + ANIMATIONS
- 155.
- 156.
- 157.
- 158.
- 159.
- 160. WHERE DO IGO FROM HERE?
- 161.
- 162.
- 163.
- 164.
- 165. HTML5 • new semantictags • 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/