HTML5 HOTNESS                @PaulTrani
Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart                           @PaulTr...
Designer or Developer?                         @PaulTrani
@PaulTrani
Timeline of Web Technologies1991    HTML1994    HTML 21996    CSS 1 + JavaScript1997    HTML 41998    CSS 22000    XHTML 1...
@PaulTrani
{ •    HTML5 •    CSS3 •    JavaScript                   @PaulTrani
HTML 5         @PaulTrani
HTML 5Of ine / StorageRealtime / CommunicationFile / Hardware AccessSemantics & MarkupGraphics / MultimediaCSS3           ...
Markup         @PaulTrani
h"p://joshduck.com/periodic-­‐table.html	  	                                                     @PaulTrani
Video<video id="video" src="movie.webm" autoplay controls></video>document.getElementById("video").play();                ...
h"p://www.beautyo:heweb.com/firework	  	                                                @PaulTrani
CSS3       @PaulTrani
@PaulTrani
CSS Animation@-webkit-keyframes movingbox{   0%{left:90%;}   50%{left:10%;}   100%{left:90%;}}.box2{   -webkit-animation:m...
CSS Transforms#socialposters li img {   -moz-box-shadow:0 3px 10px #888;   -webkit-box-shadow:0 3px 10px #888;   -webkit-t...
CSS Transitions#id_of_element {    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-t...
h"p://www.saNne.org/research/webkit/snowleopard/snowstack.html	  	                                                        ...
Canvas         @PaulTrani
Canvas<canvas id="canvas" width="838" height="220"></canvas>  <script>    var canvasContext =  document.getElementById("ca...
h"p://www.endlessmural.com	  	                                       @PaulTrani
h"p://www.spielzeugz.de/html5/sNcky-­‐thing/	  	                                                         @PaulTrani
h"p://cra:ymind.com/factory/html5video/CanvasVideo.html	  	                                                               ...
@PaulTrani
3D     @PaulTrani
WebGL•  WebGL (Web-based Graphics Library) extends the capability   of the JavaScript to allow it to generate interactive ...
WebGLcamera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 );camera.position.z = 1000;scene = new...
h"p://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_escher.html	  	                                         ...
h"p://www.chromeexperiments.com/webgl	  	                                                  @PaulTrani
What’s Next              @PaulTrani
Adobe Edge             @PaulTrani
  CSS Regions	  CSS Shaders	                    @PaulTrani
Adobe fonts via TypeKit                                                  WebKit in CS5 apps    HTML5 support in the Open S...
Thank You•    Slides	  posted	  at	  www.paultrani.com	  	  •    Flexible	  Web	  Design	  www.flexiblewebbook.com	  •    S...
Upcoming SlideShare
Loading in …5
×

HTML5 Hotness

4,028 views

Published on

Exploring everything that's hot w

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,028
On SlideShare
0
From Embeds
0
Number of Embeds
2,692
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 Hotness

  1. 1. HTML5 HOTNESS @PaulTrani
  2. 2. Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart @PaulTrani
  3. 3. Designer or Developer? @PaulTrani
  4. 4. @PaulTrani
  5. 5. Timeline of Web Technologies1991  HTML1994  HTML 21996  CSS 1 + JavaScript1997  HTML 41998  CSS 22000  XHTML 12002  Tableless Web Design2005  AJAX2009  @PaulTrani
  6. 6. @PaulTrani
  7. 7. { •  HTML5 •  CSS3 •  JavaScript @PaulTrani
  8. 8. HTML 5 @PaulTrani
  9. 9. HTML 5Of ine / StorageRealtime / CommunicationFile / Hardware AccessSemantics & MarkupGraphics / MultimediaCSS3 @PaulTrani
  10. 10. Markup @PaulTrani
  11. 11. h"p://joshduck.com/periodic-­‐table.html     @PaulTrani
  12. 12. Video<video id="video" src="movie.webm" autoplay controls></video>document.getElementById("video").play(); @PaulTrani
  13. 13. h"p://www.beautyo:heweb.com/firework     @PaulTrani
  14. 14. CSS3 @PaulTrani
  15. 15. @PaulTrani
  16. 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. 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. 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. 19. h"p://www.saNne.org/research/webkit/snowleopard/snowstack.html     @PaulTrani
  20. 20. Canvas @PaulTrani
  21. 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. 22. h"p://www.endlessmural.com     @PaulTrani
  23. 23. h"p://www.spielzeugz.de/html5/sNcky-­‐thing/     @PaulTrani
  24. 24. h"p://cra:ymind.com/factory/html5video/CanvasVideo.html     @PaulTrani
  25. 25. @PaulTrani
  26. 26. 3D @PaulTrani
  27. 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. 28. WebGLcamera = 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. 29. h"p://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_escher.html     @PaulTrani
  30. 30. h"p://www.chromeexperiments.com/webgl     @PaulTrani
  31. 31. What’s Next @PaulTrani
  32. 32. Adobe Edge @PaulTrani
  33. 33.   CSS Regions   CSS Shaders @PaulTrani
  34. 34. Adobe fonts via TypeKit WebKit in CS5 apps HTML5 support in the Open Source Media Framework EDGE Contributing to WebKitHTML5 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. 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

×