soft-shake.ch - Introduction to HTML5
0 likes1,816 views
The document is a presentation by Sascha P. Corti on HTML5, discussing its features, elements, and the evolution from HTML4. Key highlights include new markup elements like <canvas>, <video>, and <audio>, as well as support for modern CSS3 features like media queries and @font-face. It also touches on browser compatibilities and the role of Internet Explorer in HTML5 adoption.
More Related Content
Similar to soft-shake.ch - Introduction to HTML5 (20)
![[workshop] The Revolutionary WebRTC](https://cdn.slidesharecdn.com/ss_thumbnails/therevolutionarywebrtc-161216083417-thumbnail.jpg?width=560&fit=bounds)
soft-shake.ch - Introduction to HTML5
- 1. cocktail d’expérience informatiques Genève 3 & 4 octobre 2011 Seconde édition soft-shake.ch Auteur Sascha P. CORTI Track Microsoft Session HTML5 An Introduction
- 3. HTML5 An Introduction Sascha P Corti . Developer Evangelist, Microsoft Switzerland [email protected] | blog | twitter
- 5. 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
- 6. HTML5 Markup <div id=mainContent> New Markup Elements Article, Section, Nav Aside, Hgroup, Header, Footer Figure, Figcaption Address <article> <Canvas> <Audio> …article text… <Video>
- 7. The Map of HTML5
- 8. W3C HTML WG Chair Sam Ruby (IBM) Paul Cotton (Microsoft) www.w3.org/html/wg Maciej Stachowiak (Apple) 40 Member Organizations, 411 Participants, 280 Invited Experts 16 people from Microsoft Teams 8 Publications HTML5 HTML Canvas 2D Context HTML: The Markup HTML5 diffs from HTML4 Polyglot Markup Meetings over IRC, Phone, Face-to-face Recommendations produced under Royalty-Free basis
- 9. 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) http://www.w3.org/2011/02/htmlwg-pr.html
- 10. The Map of HTML5 http://www.w3.org/News/2011 Candidate First Public Recommen- Working Draft Last Call Recommen- Working Draft dation dation
- 11. HTML5: “Same Mark-Up” 9 http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
- 12. Dive into HTML5
- 13. 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>
- 14. 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 (Xiph.org QuickTime 3.1 WebM plugin for Safari Components) 10.50 No 10.60 http://en.wikipedia.org/wiki/HTML5_video
- 15. 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)”
- 17. 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>
- 18. demo <canvas> http://www.thekillersmusic.com/HTML5
- 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> 1
- 20. 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)
- 21. 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>
- 23. 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
- 24. Internet Explorer & HTML5
- 25. 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.
- 26. Internet Explorer: Two Flavors IE 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
- 27. “Chakra” JavaScript Engine JSZap: Compressing JavaScript Source Code Foreground (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
- 28. 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
- 29. Internet Explorer 9 Pinned Site http://www.nevermindthebullets.com/
- 30. Conclusion
- 31. 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 Interation Data Intense Intense
- 32. HTML5 or Plug-In based RIA? Plug-In based Today, Browsers should not Today, Line-of-Business require a Plug-In to play Applications with lots of Multimedia Content. Logic are very hard to write in JavaScript.
- 33. Resources W3C Microsoft HTML5 Working Group IE Blog HTML5 T Suite est IE T Drive est Conformance Results IE T Center est HTML5 Gallery
- 34. © 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.