Word camp nextweb

  • 868 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
868
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
26
Comments
0
Likes
1

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. HTML5An IntroductionGeorge KanellopoulosArchitect Evangelist@gkanel, http://blogs.msdn.com/gkanelgekanell@microsoft.com
  • 2. What is HTML5?
  • 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. The Map of HTML5
  • 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. The Map of HTML5 Candidate First Public Recommen- Working Draft Last Call Recommen-Working Draft dation dation
  • 7. Dive into HTML5
  • 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. demoHTML5 Markup Elements
  • 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. 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. 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. demo<video>http://www.youtube.com/watch?v=RfMSxf6P_AM
  • 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. 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. demo<canvas>http://www.thekillersmusic.com/HTML5
  • 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. SVGBasic ShapesPathsTextTransformsPainting, Filling, ColorScriptingStylingGradients, Patterns
  • 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. demo<SVG>http://en.wikipedia.org/wiki/United_states_of_america
  • 21. CSSComplete CSS 2.1 supportSelectorsBorder RadiusBackgroundsColor & OpacityWOFF FontsBox Shadow2D Transforms
  • 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. 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. 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. demo<CSS>http://www.nevermindthebullets.com/
  • 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. demo<ECMA Script 262>http://www.visitnmc.com/
  • 28. one more thing...
  • 29. geolocation
  • 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. 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. demoGeolocationhttp://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.htmlhttp://merged.ca/iphone/html5-geolocation
  • 33. demoMore Demos
  • 34. Conclusion
  • 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. 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. 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. 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. © 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.