Word camp nextweb
1 like•1,504 views
This document provides an introduction to HTML5. It describes HTML5 as a draft specification from the W3C that is over 1100 pages and is not yet complete, as it continues to evolve. It adds new elements like canvas, video, audio, and inline SVG, and changes or removes some older elements and attributes. The document outlines the status and roadmap for the HTML5 specification. It also provides examples and demonstrations of new HTML5 features like video, audio, canvas, and geolocation.
![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](https://image.slidesharecdn.com/wordcampnextweb-110608021415-phpapp01/85/Word-camp-nextweb-11-320.jpg)
![Geolocation
Example
function 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;
}](https://image.slidesharecdn.com/wordcampnextweb-110608021415-phpapp01/85/Word-camp-nextweb-31-320.jpg)
Word camp nextweb
- 1. HTML5 An Introduction George Kanellopoulos Architect Evangelist @gkanel, http://blogs.msdn.com/gkanel [email protected]
- 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
- 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>
- 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)”
- 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. SVG Basic Shapes Paths Text Transforms Painting, Filling, Color Scripting Styling Gradients, 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
- 21. CSS Complete CSS 2.1 support Selectors Border Radius Backgrounds Color & Opacity WOFF Fonts Box Shadow 2D 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 elements div.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>
- 26. DOM/ECMA Script 262 addEventListener GetElementByClassName New Array Methods indexOf, lastIndexOf, forEach, every Enhanced Object Model defineProperty,create, getPrototypeOf Computational Methods string.Trim, toISOString, data.parse, date.now, bind
- 27. demo <ECMA Script 262> http://www.visitnmc.com/
- 29. geolocation
- 30. Geolocation Helping you answer the question, “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. Geolocation Example function 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; }
- 33. demo More 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 Interation Data Intense Intense
- 36. 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.
- 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.