The NextWeb
ArchitectEvangelist
@gkanel,http://blogs.msdn.com/gkanel
gekanell@microsoft.com
George Kanellopoulos
What is HTML5?
What is HTML5?
A draft specification from the W3C
over 1100 pages
Adds new elements
(canvas, video, audio, inline SVG…)
Ch...
Chuck Norris doesn’t follow W3C
Standards. Chuck Norris IS a W3C
Standard.
W3C
The Map of HTML5
Specification Status
First Public
Working
Draft
Working
Draft
Candidate
Recommen-
dation
Proposed
Recommen-
dation
Recomme...
The Map of HTML5
First Public
Working Draft
Working Draft Last Call
Candidate
Recommen-
dation
Recommen-
dation
Dive into HTML5
New Markup Elements
Article, Section,Nav
Aside, Hgroup, Header,
Footer
Figure, Figcaption
Address
<Canvas>
<Audio>
<Video>...
HTML5 Markup Elements
demo
Video can be composited with anything else on the page
HTML content, images, SVG graphics
IE9: Hardware accelerated, GPU-b...
HTML5 <video> Format Support
Ogg Theora H.264 VP8 (WebM)
No 9.0
Using VP8 Codec
installed by Chrome
3.5 No 4.0
3.0
Windows...
Converting Videos
Expression Media
Encoder 4 Pro
Transcoding Project
Output Format: MP4
VLC Media Player
(free download)
M...
<video>
http://www.youtube.com/watch?v=RfMSxf6P_AM
demo
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You co...
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support the HTML5 canvas, sorry.
</canvas>
<script ty...
<canvas>
http://www.thekillersmusic.com/HTML5
demo
ModernizrFeature Detection JavaScriptlibrary
HTML5 or CSS3 features.
Feature missing: Modernizr creates Fallback.
jQuery J...
Basic Shapes
Paths
Text
Transforms
Painting, Filling, Color
Scripting
Styling
Gradients, Patterns
SVG
Scalable Vector Graphics
Create and draw 2D vector graphics using XML
Vector images are composed of shapes instead of pixe...
<SVG>
http://en.wikipedia.org/wiki/United_states_of_america
demo
Complete CSS 2.1 support
Selectors
Border Radius
Backgrounds
Color & Opacity
WOFF Fonts
Box Shadow
2D Transforms
CSS
div.top {
background-color: rgba(0, 0, 0, 0.5);
}
div.bottom {
background-color: hlsa(0, 0%, 0%, 0.5);
}
CSS3 Colors & Opa...
Selectively style page based on properties of the
media
CSS3 Media Queries
<link href="DoNotDisplay.css" rel="stylesheet"
...
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt ...
<CSS>
http://www.nevermindthebullets.com/
demo
addEventListener
GetElementByClassName
New Array Methods
indexOf, lastIndexOf, forEach,
every
Enhanced Object Model
define...
<ECMA Script 262>
http://www.visitnmc.com/
demo
one more thing...
geolocation
Geolocation
Allows websites to
discover your
geographical location
“Find nearest coffee
shops and display on
Bing Maps.”
U...
Geolocation
function getLocation() {
if (navigator.getlocation != undefined) {
navigator.getlocation.getCurrentPosition(ca...
Geolocation
demo
http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html
http://merged.ca/iphone/html5-geolocation
More Demos
demo
Conclusion
HTML5 a Solution to Homogenize Mobile Space?
Users mostly still decide Pro App
Added Interactivity
Faster Start-Up
More Ne...
HTML5 or Plug-In based RIA?
Today, Browsers should not
require a Plug-In to play
Multimedia Content.
Today, Line-of-Busine...
Resources
W3C
HTML5 Working Group
HTML5 Test Suite
Conformance Results
Microsoft
IE Blog
IE Test Drive
IE Test Center
HTML...
What about the other Specs?
http://html5labs.interoperabilitybridges.com
IndexedDB:
W3C draft Web specification for the
st...
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Wordcamp Thessaloniki 2011 The Nextweb

1,009

Published on

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,009
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wordcamp Thessaloniki 2011 The Nextweb

  1. 1. The NextWeb ArchitectEvangelist @gkanel,http://blogs.msdn.com/gkanel gekanell@microsoft.com George Kanellopoulos
  2. 2. What is HTML5?
  3. 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. 4. Chuck Norris doesn’t follow W3C Standards. Chuck Norris IS a W3C Standard. W3C
  5. 5. The Map of HTML5
  6. 6. Specification Status First Public Working Draft Working Draft Candidate Recommen- dation Proposed Recommen- dation Recommen- dation 2014 http://www.w3.org/2011/02/htmlwg-pr.html Last call (feature complete) Call to implement HTML5 Today
  7. 7. The Map of HTML5 First Public Working Draft Working Draft Last Call Candidate Recommen- dation Recommen- dation
  8. 8. Dive into HTML5
  9. 9. New Markup Elements Article, Section,Nav Aside, Hgroup, Header, Footer Figure, Figcaption Address <Canvas> <Audio> <Video> HTML5 Markup <divid=mainContent> <article> …articletext…
  10. 10. HTML5 Markup Elements demo
  11. 11. 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– ifpresent starts playing as soon as it’s ready controls–if present displays controls preload– ifpresent 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> HTML5 <video>
  12. 12. HTML5 <video> Format Support Ogg Theora H.264 VP8 (WebM) No 9.0 Using VP8 Codec installed by Chrome 3.5 No 4.0 3.0 Windows Media Player HTML5 Extension for Chrome on Win7] 6.0 No 3.1 Google announced a WebM plugin for Safari 10.50 No 10.60 http://en.wikipedia.org/wiki/HTML5_video
  13. 13. Converting Videos Expression Media Encoder 4 Pro Transcoding Project Output Format: MP4 VLC Media Player (free download) Media  Convert/Save Video: H.264 +AAC (MP4)” “Video: VP8 +Vorbis (Webm)”
  14. 14. <video> http://www.youtube.com/watch?v=RfMSxf6P_AM demo
  15. 15. <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> 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
  16. 16. <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> 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
  17. 17. <canvas> http://www.thekillersmusic.com/HTML5 demo
  18. 18. ModernizrFeature Detection JavaScriptlibrary 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. Ai2CanvasExport Adobe Illustrator Vectorand Bitmap Artwork directly to HTML5 Canvas. Provides Drawing, Animation and Coding Options such asEvents HTML5 Tools & Frameworks
  19. 19. Basic Shapes Paths Text Transforms Painting, Filling, Color Scripting Styling Gradients, Patterns SVG
  20. 20. 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, linkingand views 2 <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>
  21. 21. <SVG> http://en.wikipedia.org/wiki/United_states_of_america demo
  22. 22. Complete CSS 2.1 support Selectors Border Radius Backgrounds Color & Opacity WOFF Fonts Box Shadow 2D Transforms CSS
  23. 23. div.top { background-color: rgba(0, 0, 0, 0.5); } div.bottom { background-color: hlsa(0, 0%, 0%, 0.5); } 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
  24. 24. Selectively style page based on properties of the media CSS3 Media Queries <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" />
  25. 25. <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> 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
  26. 26. <CSS> http://www.nevermindthebullets.com/ demo
  27. 27. 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 DOM/ECMA Script 262
  28. 28. <ECMA Script 262> http://www.visitnmc.com/ demo
  29. 29. one more thing...
  30. 30. geolocation
  31. 31. Geolocation Allows websites to discover your geographical location “Find nearest coffee shops and display on Bing Maps.” User consent is required Geolocation supported in IE9! Helping you answer the question, “Where am I?”
  32. 32. Geolocation 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; } Example
  33. 33. Geolocation demo http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html http://merged.ca/iphone/html5-geolocation
  34. 34. More Demos demo
  35. 35. Conclusion
  36. 36. HTML5 a Solution to Homogenize Mobile Space? Users mostly still decide Pro App Added Interactivity Faster Start-Up More Network Independent Mobile: HTML5 or App? Interation Intense Data Intense
  37. 37. HTML5 or Plug-In based RIA? Today, Browsers should not require a Plug-In to play Multimedia Content. Today, Line-of-Business Applications with lots of Logic are very hard to write in JavaScript. Plug-In based
  38. 38. Resources W3C HTML5 Working Group HTML5 Test Suite Conformance Results Microsoft IE Blog IE Test Drive IE Test Center HTML5 Gallery
  39. 39. 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.
  40. 40. © 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×