• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
East of Toronto .NET Usergroup - Put the 5 in HTML
 

East of Toronto .NET Usergroup - Put the 5 in HTML

on

  • 850 views

 

Statistics

Views

Total Views
850
Views on SlideShare
850
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    East of Toronto .NET Usergroup - Put the 5 in HTML East of Toronto .NET Usergroup - Put the 5 in HTML Presentation Transcript

    • East of Toronto .NET User Group 2011-10-27Frédéric Harper – Microsoft Canada
    • • It will be all about HTML5!
    • A. You know HTML5 and use it nowB. You know what is HTML5 and don’t use itC. You don’t know what I am talking about
    • + +HTML5 HTML5 CSS3 JavaScript
    • Performance Semantics Styling Multimedia3D Effects Offline& Storage Connectivity Device Access
    • First draft Working draft Last call Recommendation candidate Recommendation
    •  Video  Drag-and-drop Document editing  Canvas Offline storage  Cross-document CSS3 Media messaging Queries  Audio Microdata  Browser history WOFF management Web Sockets  Semantics elements Web Workers  AND MUCH MORE!
    •  Video  Drag-and-drop Document editing  Canvas Offline storage  Cross-document CSS3 Media messaging Queries  Audio Microdata  Browser history WOFF management Web Sockets  Semantics elements Web Workers  AND MUCH MORE!
    • <div id=“header”> <div id=“nav”> “sidebar”><div id=“section”> <div id= <div id=“article”> <div id=“article”> <div id=“media”> <div id=“footer”>
    • <header> <nav><section> <aside> <article> <article> <figure> <footer>
    • <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Sorry, your browser doesn’t support HTML5video tag </a> <!– Flash/Silverlight video here --></video>
    • Web Open Font Format
    • <link href="mobile.css" rel="stylesheet" media="screenand (max-width:480px)“ type="text/css" /><link href="netbook.css" rel="stylesheet“ media="screenand (min-width:481px) and (max-width: 1024px)“type="text/css" /><link href="laptop.css" rel="stylesheet" media="screenand (min-width:1025px)“ type="text/css" />
    • X X X X X Lowest CommonX X X Dominator X X Only use features natively X X X available in all target X X browsers
    • X X X X X Polyfill EnrichedX X X X X X X Only use features either natively available OR X X X available via JavaScript polyfill X X
    • polyfill(n) poly • fill: JavaScript that implants HTML5functionality in a browser that does not offernative support
    • X X X X X AlternateX X X X X ExperiencesX X X X XX X X X X Only use features available in target X X browsers AND design alternate experience for other browsers
    •  http://caniuse.com/ http://www.modernizr.com/
    • iOS Android Windows PhoneGeolocation     Offline   Local Storage   Video/Audio   Canvas  SVG   WebSQL  Gradients*   CSS3 Animations*   Text Shadows  CSS3 Transforms 
    • And more…
    • 1. You already know HTML
    • 1. You already know HTML2. You already know the tools
    • 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices
    • 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices4. One of the future technology
    • Try it
    • Read on it
    • Do coolproject
    • Have fun!
    • http://www.w3.org/TR/html5/http://caniuse.comhttp://www.modernizr.com/http://makeawesomeweb.comhttp://html5gallery.comhttp://diveintohtml5.org/http://www.html5tutorial.info/http://www.beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/
    • Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://webnotwar.cahttp://outofcomfortzone.net