SlideShare a Scribd company logo
1 of 39
Download to read offline
HTML5
An Introduction
George Kanellopoulos
Architect Evangelist
@gkanel, http://blogs.msdn.com/gkanel
gekanell@microsoft.com
What is HTML5?
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
The Map of HTML5
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
The Map of HTML5




                                             Candidate
 First Public                                            Recommen-
                Working Draft   Last Call   Recommen-
Working Draft                                              dation
                                              dation
Dive into HTML5
HTML5 Markup                           <div id=mainContent>

New Markup Elements
  Article, Section, Nav
  Aside, Hgroup, Header,
  Footer
  Figure, Figcaption
  Address
                           <article>

<Canvas>
<Audio>                            …article text…
<Video>
demo
HTML5 Markup Elements
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>
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
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)”
demo
<video>
http://www.youtube.com/watch?v=RfMSxf6P_AM
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>
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>
demo
<canvas>
http://www.thekillersmusic.com/HTML5
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
SVG
Basic Shapes
Paths
Text
Transforms
Painting, Filling, Color
Scripting
Styling
Gradients, Patterns
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
demo
<SVG>
http://en.wikipedia.org/wiki/United_states_of_america
CSS
Complete CSS 2.1 support
Selectors
Border Radius
Backgrounds
Color & Opacity
WOFF Fonts
Box Shadow
2D Transforms
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);
}
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" />
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>
demo
<CSS>
http://www.nevermindthebullets.com/
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
demo
<ECMA Script 262>
http://www.visitnmc.com/
one more thing...
geolocation
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!
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;
}
demo
Geolocation
http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html
http://merged.ca/iphone/html5-geolocation
demo
More Demos
Conclusion
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
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.
Resources
 W3C                    Microsoft
  HTML5 Working Group     IE Blog
  HTML5 T Suite
         est              IE T Drive
                              est
  Conformance Results     IE T Center
                              est
                          HTML5 Gallery
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.
© 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.

More Related Content

What's hot

HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushPeter Lubbers
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Aaron Gustafson
 
Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Aaron Gustafson
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Aaron Gustafson
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Gil Fink
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Patrick Lauke
 
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Peter Moskovits
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]Aaron Gustafson
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5Todd Anglin
 

What's hot (19)

HTML5: The Next Internet Goldrush
HTML5: The Next Internet GoldrushHTML5: The Next Internet Goldrush
HTML5: The Next Internet Goldrush
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]
 
Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
 
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
Extending JMS to Web Devices over HTML5 WebSockets - JavaOne 2011
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]HTML5 & CSS3 Workshop [FoWD NYC 2011]
HTML5 & CSS3 Workshop [FoWD NYC 2011]
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 

Viewers also liked (6)

Un bello-ejemplo-diapositivas
Un bello-ejemplo-diapositivasUn bello-ejemplo-diapositivas
Un bello-ejemplo-diapositivas
 
Word camp microsoft web platform
Word camp microsoft web platformWord camp microsoft web platform
Word camp microsoft web platform
 
Un bello-ejemplo-diapositivas
Un bello-ejemplo-diapositivasUn bello-ejemplo-diapositivas
Un bello-ejemplo-diapositivas
 
Inspire 1
Inspire 1Inspire 1
Inspire 1
 
Apas
ApasApas
Apas
 
Gerasimos tsiamalos
Gerasimos tsiamalosGerasimos tsiamalos
Gerasimos tsiamalos
 

Similar to Word camp nextweb

WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive SummaryGilad Khen
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 WorkshopDavid Manock
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentationvs4vijay
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Karambir Singh Nain
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 

Similar to Word camp nextweb (20)

WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Html5
Html5Html5
Html5
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 

Word camp nextweb

  • 1. HTML5 An Introduction George Kanellopoulos Architect Evangelist @gkanel, http://blogs.msdn.com/gkanel gekanell@microsoft.com
  • 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>
  • 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
  • 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; }
  • 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.