More Related Content Similar to HTML5 for Web Designers (20) HTML5 for Web Designers2. 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.
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
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)
82. <VIDEO>
Flash
<video width="400" height="360" src="vid.mp4">
97. GOT CANDY?
http://www.flickr.com/photos/53552950@N00/2379078919
125. CSS GRADIENTS
Complex :(
Generators :)
http://gradients.glrzad.com/
http://www.westciv.com/tools/gradients/
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>
151. if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
//error
}
function success(position)
{
//position.coords.latitude
//position.coords.longitude
}
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/