• Save
HTML5 Hotness
Upcoming SlideShare
Loading in...5
×
 

HTML5 Hotness

on

  • 3,979 views

Exploring everything that's hot w

Exploring everything that's hot w

Statistics

Views

Total Views
3,979
Views on SlideShare
1,313
Embed Views
2,666

Actions

Likes
4
Downloads
0
Comments
0

6 Embeds 2,666

http://www.paultrani.com 2425
http://adobemasterclass.com 173
http://paultrani.com 65
http://www.paultrani.com.sixxs.org 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Hotness HTML5 Hotness Presentation Transcript

  • HTML5 HOTNESS @PaulTrani
  • Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart @PaulTrani
  • Designer or Developer? @PaulTrani
  • @PaulTrani
  • Timeline of Web Technologies1991  HTML1994  HTML 21996  CSS 1 + JavaScript1997  HTML 41998  CSS 22000  XHTML 12002  Tableless Web Design2005  AJAX2009  @PaulTrani
  • @PaulTrani
  • { •  HTML5 •  CSS3 •  JavaScript @PaulTrani
  • HTML 5 @PaulTrani
  • HTML 5Of ine / StorageRealtime / CommunicationFile / Hardware AccessSemantics & MarkupGraphics / MultimediaCSS3 @PaulTrani
  • Markup @PaulTrani
  • h"p://joshduck.com/periodic-­‐table.html     @PaulTrani
  • Video<video id="video" src="movie.webm" autoplay controls></video>document.getElementById("video").play(); @PaulTrani
  • 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:movingbox 5s in nite;}As of November 2011, this works in all Webkit browsers, Firefox 5+ and IE10 @PaulTrani
  • 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
  • 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
  • h"p://www.saNne.org/research/webkit/snowleopard/snowstack.html     @PaulTrani
  • Canvas @PaulTrani
  • 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
  • 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
  • @PaulTrani
  • 3D @PaulTrani
  • 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
  • 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
  • h"p://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_escher.html     @PaulTrani
  • 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 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
  • 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