Your SlideShare is downloading. ×
soft-shake.ch - Introduction to HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

soft-shake.ch - Introduction to HTML5

1,954
views

Published on

Sascha Corti …

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.

http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html

Published in: Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,954
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. HTML5An IntroductionSascha P Corti .Developer Evangelist, Microsoft Switzerlandsascha.corti@microsoft.com | blog | twitter
  • 3. What is HTML5?
  • 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. 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. The Map of HTML5
  • 7. W3C HTML WGChair 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 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. 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
  • 9. The Map of HTML5http://www.w3.org/News/2011 Candidate First Public Recommen- Working Draft Last Call Recommen- Working Draft dation dation
  • 10. HTML5: “Same Mark-Up” 9http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
  • 11. Dive into HTML5
  • 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. 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
  • 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. demo<video>http://www.youtube.com/watch?v=RfMSxf6P_AM
  • 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. demo<canvas>http://www.thekillersmusic.com/HTML5
  • 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="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
  • 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. 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. demo<CSS>http://www.nevermindthebullets.com/
  • 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. Internet Explorer & HTML5
  • 24. 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.
  • 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. “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. 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. Internet Explorer 9Pinned Sitehttp://www.nevermindthebullets.com/
  • 29. Conclusion
  • 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. 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. 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. © 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.

×