- Introduction to HTML5


Published on

Sascha Corti

With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”.

This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide - Introduction to HTML5

  1. 1. cocktail d’expérience informatiques Genève 3 & 4 octobre 2011 Seconde édition soft-shake.chAuteur Sascha P. CORTI Track MicrosoftSession HTML5 An Introduction
  2. 2. HTML5An IntroductionSascha P Corti .Developer Evangelist, Microsoft | blog | twitter
  3. 3. What is HTML5?
  4. 4. HTML5… Is a draft specification from the W3C with over 1100 (printed) 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
  5. 5. HTML5 Markup <div id=mainContent>New Markup Elements Article, Section, Nav Aside, Hgroup, Header, Footer Figure, Figcaption Address <article><Canvas><Audio> …article text…<Video>
  6. 6. The Map of HTML5
  7. 7. W3C HTML WGChair Sam Ruby (IBM) Paul Cotton (Microsoft) Maciej Stachowiak (Apple)40 Member Organizations, 411 Participants, 280 Invited Experts 16 people from Microsoft Teams8 Publications HTML5 HTML Canvas 2D Context HTML: The Markup HTML5 diffs from HTML4 Polyglot MarkupMeetings over IRC, Phone, Face-to-faceRecommendations produced under Royalty-Free basis
  8. 8. Specification Status May 2011 2014 HTML5 Today First Public Candidate Proposed Working Recommen- Working Recommen- Recommen- Draft dation Draft dation dation Last call Call to (feature implement complete)
  9. 9. The Map of HTML5 Candidate First Public Recommen- Working Draft Last Call Recommen- Working Draft dation dation
  10. 10. HTML5: “Same Mark-Up” 9
  11. 11. Dive into HTML5
  12. 12. 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>
  13. 13. HTML5 <video> Format Support Ogg Theora H.264 VP8 (WebM) Using Codec installed Manual Install by Chrome / 9.0 (OpenCodecs) WebM Components for IE9 (Preview) No 3.5 4.0 (Removed at 11) Windows Media Player 3.0 HTML5 Extension for 6.0 Chrome in Win7 Manual Install Google announced a ( QuickTime 3.1 WebM plugin for Safari Components) 10.50 No 10.60
  14. 14. 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)”
  15. 15. demo<video>
  16. 16. 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>
  17. 17. demo<canvas>
  18. 18. 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=""> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg> 1
  19. 19. 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" /> Maxdesign: CSS3 Media Queries (SlideShare)
  20. 20. 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>
  21. 21. demo<CSS>
  22. 22. 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
  23. 23. Internet Explorer & HTML5
  24. 24. What about the other Specs? 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.
  25. 25. Internet Explorer: Two FlavorsIE 10: Platform Preview IE9: Stable Release Frequent Releases (8 weeks) Full Browser Side-by-Side installation No Side-by-Side Only Chakra & Trident Site Mode & Developer Tools
  26. 26. “Chakra” JavaScript Engine JSZap: Compressing JavaScript Source CodeForeground (UI Thread) Source ByteCode Machine Parser Interpreter Code Generator Instructions Core #1 Exec Loop Background Thread Background Native Compiler Code Core #2 PDC 2010 Sessions: Unlocking JavaScript Opportunity with Internet Explorer 9 Inside Internet Explorer Performance 25
  27. 27. IE9 “Pinned Site” Brand Browser in your Site’s Colors & Logo Disable 3rd Party Add-Ons Integrate in Windows 7 Taskbar Add custom Menus Show Dynamic Overlay Icons
  28. 28. Internet Explorer 9Pinned Site
  29. 29. Conclusion
  30. 30. 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
  31. 31. 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.
  32. 32. Resources W3C Microsoft HTML5 Working Group IE Blog HTML5 T Suite est IE T Drive est Conformance Results IE T Center est HTML5 Gallery
  33. 33. © 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.