This document discusses HTML5 and its new features such as offline/storage capabilities, real-time communication, file/hardware access, improved semantics and markup, graphics and multimedia capabilities using canvas and video elements, CSS3 features like animations, transforms and transitions, and 3D graphics using WebGL. It provides examples of how to use these new features and highlights browsers that support them. The document concludes by discussing what may come next such as CSS regions and shaders, and how Adobe products are supporting HTML5.

1. HTML5 HOTNESS
@PaulTrani

2. Paul Trani
@paultrani ptrani@adobe.com
• 15 years design experience
• 4 year old at heart
@PaulTrani

3. Designer or Developer?
@PaulTrani

4. @PaulTrani

5. Timeline of Web Technologies
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009
@PaulTrani

6. @PaulTrani

7. {
• HTML5
• CSS3
• JavaScript
@PaulTrani

8. HTML 5
@PaulTrani

9. HTML 5
Of ine / Storage
Realtime / Communication
File / Hardware Access
Semantics & Markup
Graphics / Multimedia
CSS3
@PaulTrani

10. Markup
@PaulTrani

11. h"p://joshduck.com/periodic-­‐table.html
@PaulTrani

12. Video
<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play();
@PaulTrani

13. h"p://www.beautyo:heweb.com/firework
@PaulTrani

14. CSS3
@PaulTrani

15. @PaulTrani

16. CSS Animation
@-webkit-keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
.box2{
-webkit-animation:movingbox 5s in nite;
}
As of November 2011, this works in all Webkit browsers, Firefox 5+ and IE10
@PaulTrani

17. CSS Transforms
#socialposters li img {
-moz-box-shadow:0 3px 10px #888;
-webkit-box-shadow:0 3px 10px #888;
-webkit-transform: rotateY(30deg);
-webkit-transition-property: transform;
-webkit-transition-duration: 0.5s;
}
2D
transforms
are
available
in
all
current
browsers
including
IE9.
3D
transforms
are
in
Safari,
Chrome
and
Firefox.
@PaulTrani

18. CSS Transitions
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Available
in
all
browsers
except
Internet
Explorer
older
than
version
10.
@PaulTrani

19. h"p://www.saNne.org/research/webkit/snowleopard/snowstack.html
@PaulTrani

20. Canvas
@PaulTrani

21. Canvas
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext =
document.getElementById("canvas").getContext("2d");
canvasContext. llRect(250, 25, 150, 100);
</script>
@PaulTrani

22. h"p://www.endlessmural.com
@PaulTrani

23. h"p://www.spielzeugz.de/html5/sNcky-­‐thing/
@PaulTrani

24. h"p://cra:ymind.com/factory/html5video/CanvasVideo.html
@PaulTrani

25. @PaulTrani

26. 3D
@PaulTrani

27. WebGL
• WebGL (Web-based Graphics Library) extends the capability
of the JavaScript to allow it to generate interactive 3D
graphics within any compatible web browser.
@PaulTrani

28. WebGL
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: 0xff * Math.random() << 8 } ) );
}
var material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
var geom = new THREE.Cube( 200, 200, 200, 1, 1, 1, materials);
primitive = new THREE.Mesh(geom, material);
scene.addObject( primitive );
@PaulTrani

29. h"p://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_escher.html
@PaulTrani

30. h"p://www.chromeexperiments.com/webgl
@PaulTrani

31. What’s Next
@PaulTrani

32. Adobe Edge
@PaulTrani

33.  CSS Regions
 CSS Shaders
@PaulTrani

34. Adobe fonts via TypeKit
WebKit in CS5 apps
HTML5 support in the Open Source Media Framework
EDGE Contributing to WebKit
HTML5 slideshows on Photoshop.com
HTML5 content in digital publications
Contributing to JQuery Mobile
support for Firebug, Safari 5, and more to BrowserLab
WALLABY
HTML5-tagged (non-Flash) video in Dreamweaver
MUSE
HTML5 video publishing to the Scene7 hosted service
@PaulTrani

35. Thank You
• Slides
posted
at
www.paultrani.com
• Flexible
Web
Design
www.flexiblewebbook.com
• Stunning
CSS3
www.stunningcss3.com
• www.w3.org/Style/CSS/current-­‐work
• www.caniuse.com
@PaulTrani