0
HTML5An IntroductionGeorge KanellopoulosArchitect Evangelist@gkanel, http://blogs.msdn.com/gkanelgekanell@microsoft.com
What is HTML5?
What is HTML5?    A draft specification from the W3C    over 1100 pages    Adds new elements    (canvas, video, audio, inl...
The Map of HTML5
Specification Status                                                      2014                 HTML5                 Today...
The Map of HTML5                                             Candidate First Public                                       ...
Dive into HTML5
HTML5 Markup                           <div id=mainContent>New Markup Elements  Article, Section, Nav  Aside, Hgroup, Head...
demoHTML5 Markup Elements
HTML5 <video>  Video can be composited with anything else on the page     HTML content, images, SVG graphics     IE9: Hard...
HTML5 <video> Format Support   Ogg Theora            H.264                 VP8 (WebM)                                     ...
Converting Videos       Expression Media        VLC Media Player       Encoder 4 Pro           (free download) Transcoding...
demo<video>http://www.youtube.com/watch?v=RfMSxf6P_AM
HTML5 <audio>  Industry-standard MP3 and AAC audio  Fully scriptable via the DOM  Attributes     src – specifies the locat...
HTML5 <canvas>  A block element that allows  developers to draw 2d graphics  using JavaScript.     Methods for drawing inc...
demo<canvas>http://www.thekillersmusic.com/HTML5
HTML5 Tools & Frameworks Modernizr Feature Detection JavaScript library    HTML5 or CSS3 features.    Feature missing: Mod...
SVGBasic ShapesPathsTextTransformsPainting, Filling, ColorScriptingStylingGradients, Patterns
Scalable Vector Graphics  Create and draw 2D vector graphics using XML      Vector images are composed of shapes instead o...
demo<SVG>http://en.wikipedia.org/wiki/United_states_of_america
CSSComplete CSS 2.1 supportSelectorsBorder RadiusBackgroundsColor & OpacityWOFF FontsBox Shadow2D Transforms
CSS3 Colors & Opacity  CSS3 Color     Alpha color with rgba() and hsla() color functions     Transparency control with the...
CSS3 Media Queries  Selectively style page based on properties of the  media<link href="DoNotDisplay.css" rel="stylesheet"...
New: @font-face & WOFF Fonts  No longer limited to the “web safe” font list!  Web Open Font Format allows you to package a...
demo<CSS>http://www.nevermindthebullets.com/
DOM/ECMA Script 262addEventListenerGetElementByClassNameNew Array Methods  indexOf, lastIndexOf, forEach,  everyEnhanced O...
demo<ECMA Script 262>http://www.visitnmc.com/
one more thing...
geolocation
GeolocationHelping you answer thequestion, “Where am I?” Allows websites to discover your geographical location     “Find ...
GeolocationExamplefunction getLocation() {  if (navigator.getlocation != undefined) {navigator.getlocation.getCurrentPosit...
demoGeolocationhttp://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.htmlhttp://merged.ca/iphone/html5-geolocation
demoMore Demos
Conclusion
Mobile: HTML5 or App? HTML5 a Solution to Homogenize Mobile Space? Users mostly still decide Pro App   Added Interactivity...
HTML5 or Plug-In based RIA?                                            Plug-In basedToday, Browsers should not   Today, Li...
Resources W3C                    Microsoft  HTML5 Working Group     IE Blog  HTML5 T Suite         est              IE T D...
What about the other Specs?http://html5labs.interoperabilitybridges.com                                               Inde...
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Word camp nextweb

900

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
900
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Word camp nextweb"

  1. 1. HTML5An IntroductionGeorge KanellopoulosArchitect Evangelist@gkanel, http://blogs.msdn.com/gkanelgekanell@microsoft.com
  2. 2. What is HTML5?
  3. 3. What is HTML5? A draft specification from the W3C over 1100 pages Adds new elements (canvas, video, audio, inline SVG…) Changes and removes some older elements and attributes (center, font…) Is NOT done yet! Keeps evolving. Is NOT (only) a Marketing Message
  4. 4. The Map of HTML5
  5. 5. Specification Status 2014 HTML5 Today First Public Candidate Proposed Working Recommen- Working Recommen- Recommen- Draft dation Draft dation dation Last call Call to (feature implement complete)http://www.w3.org/2011/02/htmlwg-pr.html
  6. 6. The Map of HTML5 Candidate First Public Recommen- Working Draft Last Call Recommen-Working Draft dation dation
  7. 7. Dive into HTML5
  8. 8. HTML5 Markup <div id=mainContent>New Markup Elements Article, Section, Nav Aside, Hgroup, Header, Footer Figure, Figcaption Address <article><Canvas><Audio> …article text…<Video>
  9. 9. demoHTML5 Markup Elements
  10. 10. HTML5 <video> Video can be composited with anything else on the page HTML content, images, SVG graphics IE9: Hardware accelerated, GPU-based decoding Attributes src – specifies the location to pull the source file autoplay – if present starts playing as soon as it’s ready controls – if present displays controls preload – if present loads source at page load loop – if present loops back to the beginning of the video height & width – specifies the height & width of the player<video src="video.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --></video>
  11. 11. HTML5 <video> Format Support Ogg Theora H.264 VP8 (WebM) Using VP8 Codec No 9.0 installed by Chrome 3.5 No 4.0 Windows Media Player 3.0 HTML5 Extension for 6.0 Chrome on Win7] Google announced a No 3.1 WebM plugin for Safari 10.50 No 10.60 http://en.wikipedia.org/wiki/HTML5_video
  12. 12. Converting Videos Expression Media VLC Media Player Encoder 4 Pro (free download) Transcoding Project Media  Convert/Save Output Format: MP4 Video: H.264 + AAC (MP4)” “Video: VP8 + Vorbis (Webm)”
  13. 13. demo<video>http://www.youtube.com/watch?v=RfMSxf6P_AM
  14. 14. HTML5 <audio> Industry-standard MP3 and AAC audio Fully scriptable via the DOM Attributes src – specifies the location to pull the source file autoplay – if present starts playing as soon as it’s ready controls – if present displays controls preload – if present loads source at page load<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></audio>
  15. 15. HTML5 <canvas> A block element that allows developers to draw 2d graphics using JavaScript. Methods for drawing include: paths, boxes, circles, text and rasterized images<canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support the HTML5 canvas, sorry.</canvas><script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);</script>
  16. 16. demo<canvas>http://www.thekillersmusic.com/HTML5
  17. 17. HTML5 Tools & Frameworks Modernizr Feature Detection JavaScript library HTML5 or CSS3 features. Feature missing: Modernizr creates Fallback. jQuery JavaScript library for DOM Manipulation Event Handling, Animation, Document Traversing. Supported in Visual Studio. Easel.js JavaScript Library for building Canvas-Based Apps. Example: Pirates Love Daisies. includes concepts such as sprites, graphics, sparkles and game semantics. Ai2Canvas Export Adobe Illustrator Vector and Bitmap Artwork directly to HTML5 Canvas. Provides Drawing, Animation and Coding Options such as Events
  18. 18. SVGBasic ShapesPathsTextTransformsPainting, Filling, ColorScriptingStylingGradients, Patterns
  19. 19. Scalable Vector Graphics Create and draw 2D vector graphics using XML Vector images are composed of shapes instead of pixels Based on the SVG 1.1 2nd Edition Full specification Support for Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg> 2
  20. 20. demo<SVG>http://en.wikipedia.org/wiki/United_states_of_america
  21. 21. CSSComplete CSS 2.1 supportSelectorsBorder RadiusBackgroundsColor & OpacityWOFF FontsBox Shadow2D Transforms
  22. 22. CSS3 Colors & Opacity CSS3 Color Alpha color with rgba() and hsla() color functions Transparency control with the opacity property CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elementsdiv.top { background-color: rgba(0, 0, 0, 0.5);}div.bottom { background-color: hlsa(0, 0%, 0%, 0.5);}
  23. 23. CSS3 Media Queries Selectively style page based on properties of the media<link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type="text/css" /><link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /><link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max-width: 1300px)" type="text/css" />
  24. 24. New: @font-face & WOFF Fonts No longer limited to the “web safe” font list! Web Open Font Format allows you to package and deliver fonts as needed, per site Designed for web use with the @font-face declaration A simple repackaging of OpenType or TrueType font data From the W3C Fonts Working Group<style type="text/css"> @font-face { font-family:MyFontName; src: url(FontFile.woff); }</style><div style="font: 24pt MyFontName, sans-serif;"> This will render using the font in FontFile.woff</div>
  25. 25. demo<CSS>http://www.nevermindthebullets.com/
  26. 26. DOM/ECMA Script 262addEventListenerGetElementByClassNameNew Array Methods indexOf, lastIndexOf, forEach, everyEnhanced Object Model defineProperty,create, getPrototypeOfComputational Methods string.Trim, toISOString, data.parse, date.now, bind
  27. 27. demo<ECMA Script 262>http://www.visitnmc.com/
  28. 28. one more thing...
  29. 29. geolocation
  30. 30. GeolocationHelping you answer thequestion, “Where am I?” Allows websites to discover your geographical location “Find nearest coffee shops and display on Bing Maps.” User consent is required Geolocation supported in IE9!
  31. 31. GeolocationExamplefunction getLocation() { if (navigator.getlocation != undefined) {navigator.getlocation.getCurrentPosition(callBack); }}function callBack(position) { var accuracy = position.coords[accuracy]; var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
  32. 32. demoGeolocationhttp://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.htmlhttp://merged.ca/iphone/html5-geolocation
  33. 33. demoMore Demos
  34. 34. Conclusion
  35. 35. Mobile: HTML5 or App? HTML5 a Solution to Homogenize Mobile Space? Users mostly still decide Pro App Added Interactivity Faster Start-Up More Network Independent InterationData IntenseIntense
  36. 36. HTML5 or Plug-In based RIA? Plug-In basedToday, Browsers should not Today, Line-of-Businessrequire a Plug-In to play Applications with lots ofMultimedia Content. Logic are very hard to write in JavaScript.
  37. 37. Resources W3C Microsoft HTML5 Working Group IE Blog HTML5 T Suite est IE T Drive est Conformance Results IE T Center est HTML5 Gallery
  38. 38. What about the other Specs?http://html5labs.interoperabilitybridges.com IndexedDB: W3C draft Web specification for the storage of large amounts of structured data in the browser, using indexes that allow for high performance searches on this data. WebSockets: Technology designed to simplify much of the complexity around bi- directional, full-duplex communications channels, over a single Transmission ControlProtocol (TCP) socket. Implemented in web browsers, web servers as well as used by any client or server application.
  39. 39. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×