Martin Beeby@thebeebsUsing HTML5 and CSS3 Todaymartin.beeby@microsoft.com<br />
Not @thebiebs but @thebeebs<br />
Browsers and Microsoft<br />We talked to developers and got feedback<br />We improved our product based upon that feedback...
the internet has changed<br />
what is HTML5<br />HTML5 is a standard developed by W3C<br />HTML5 is often incorrectly used as an umbrella term<br />Stil...
Standards are good <br />Standardise what we had like XMLHTTPRequest<br />Standardise what was new<br />Standardise the w...
http://test.w3.org/html/tests/reporting/report.htm<br />Submit your tests<br />http://bit.ly/submitHTML5Tests<br />
http://joydefinesthefuture.com/<br />
what is CSS3<br />controls the way HTML looks<br />Achieve things that was previously only possible using JavaScript<br />
Oh So Shiny!<br />HTML5<br />CCS3<br />WebApps – WebSockets, Web Storage, etc<br />SVG<br />GeoLocation<br />ECMA <br />
thekillersmusic.com/HTML5<br />
HTML5<br /><!DOCTYPE html><br />Markup Elements<br />	<header>, <hgroup>, 	<nav>, <aside>, <footer><br />	<article>, <sect...
document changes<br />
validator.w3.org/check<br />
<script><br />You no longer need the <script type="text/javascript"></script><br />This has always worked but was never va...
Semantic Web<br />
<header><br />Represents a group of introductory or navigational aids<br /><header>	<hgroup>		<h1>My Site</h1>		<h2>Is roc...
<nav><br />Should be used to wrap navigational links<br />Not links that are ads or a collection of links that make up the...
<aside><br />Good for content that is separate to the main content<br />Pull Quotes<br />SideBars<br />
<article><br />Represents a component part of a page<br />Could be independently distributable<br />Don’t think magazine a...
<section><br />The section element represents a generic document or application section.<br />Not a generic container elem...
<footer><br />Copyright Data<br />Who Wrote the file<br />Related Documents<br />Can be more than one per page<br />
lime<br />
lime<br /><header><br /><nav><br /><section id=“intro”><br /><article><br /><aside><br /><header><br /><section><br /><sec...
rich graphics<br />Audio & Video<br />Canvas<br />SVG 1.1<br />Basic shapes<br />Paths<br />Text<br />Transforms<br />Pain...
http://www.nevermindthebullets.com<br />
video tag<br /><video src=”videos/video.mp4” id=”myVideo”><br /></video><br />
video tag<br /><video id=”myVideo”<br />poster=”videos/poster.jpg”<br />autoplay<br />controls<br />preload=”auto”<br />pl...
video codec<br />
modernizr.com<br />
<div id="vidControls"><a href="#" onclick="slower()">Slower</a><a href="#" onclick="play()">Play</a><a href="#" onclick="p...
function slower() {<br />var video = document.getElementById("myVideo");<br />varplaybackRate = video.playbackRate;<br /> ...
video demo<br />
canvas<br />
www.visitmix.com/lab<br />
Canvas Demo – Museum of China<br />
GeoLocation (Where Am I?)<br />
What’s Generally Safe To Use?<br />SVG<br />Document Object Model<br />Core - Level 2 & 3<br />Events – Level 2 & 3<br />C...
modernizr.com<br />
Using Shims and Poly Fills<br />Used to fill the holes in support by legacy browser<br />Example:<br />Use http://json.org...
CSS3<br />
border-radius<br />image {<br />border-radius:105px<br />}<br />For more Info <br />http://bit.ly/border-radius<br />
transforms<br />
<style><br />    #mVideo<br />    {<br />        -webkit-transform: rotate(5deg);<br />        -moz-transform: rotate(5deg...
Apply the standard last<br />.target<br />{<br />  -moz-border-radius: 20px;<br />  -webkit-border-radius: 20px;<br />  bo...
web fonts<br />@font-face<br />        {<br />            font-family: FelbridgeOTSCondensed;<br />src: url('fonts/Felbrid...
lostworldsfairs.com/eldorado/<br />
fontsquirrel.com<br />
Come Meet Ubelly.com<br />Free windows Hosting offers<br />Ubel.ly/2mthsfree<br />
resources<br />Books<br />Introducing HTML5 by Bruce Lawson & Remy Sharp<br />W3C Web Sites & Resources<br />W3C HTML5 Spe...
thankyou<br />
Upcoming SlideShare
Loading in...5
×

Using HTML5 and CSS3 today

2,705

Published on

For years web developers have used hacks, sweat and black magic to bend HTML and CSS into submission and achieve visual effects across browsers that really shouldn't be so difficult.

With HTML5 and CSS3 comes the promise that one day we will be able to play video, create animations and round corners without the need for plugins and with the guarantee that the same code will work in all browsers.

Back in the real world, developers have to navigate the complex issues around HTML5 and CSS3 caused by browser differences, backwards compatibility and an ever evolving standard. This talk introduces HTML5 and CSS3 using demos that will illustrate how to use these new technologies today, but ensure they don't break tomorrow.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,705
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  •  
  •  
  • Geo Location
  • Using HTML5 and CSS3 today

    1. 1. Martin Beeby@thebeebsUsing HTML5 and CSS3 Todaymartin.beeby@microsoft.com<br />
    2. 2. Not @thebiebs but @thebeebs<br />
    3. 3. Browsers and Microsoft<br />We talked to developers and got feedback<br />We improved our product based upon that feedback<br />
    4. 4. the internet has changed<br />
    5. 5.
    6. 6. what is HTML5<br />HTML5 is a standard developed by W3C<br />HTML5 is often incorrectly used as an umbrella term<br />Still under development<br />Needs to be done the right way<br />
    7. 7. Standards are good <br />Standardise what we had like XMLHTTPRequest<br />Standardise what was new<br />Standardise the way mark up errors like<p><span>thebeebs</p></span>are handled<br />Standards that are testablehttp://bit.ly/submitHTML5Tests<br />
    8. 8. http://test.w3.org/html/tests/reporting/report.htm<br />Submit your tests<br />http://bit.ly/submitHTML5Tests<br />
    9. 9. http://joydefinesthefuture.com/<br />
    10. 10. what is CSS3<br />controls the way HTML looks<br />Achieve things that was previously only possible using JavaScript<br />
    11. 11. Oh So Shiny!<br />HTML5<br />CCS3<br />WebApps – WebSockets, Web Storage, etc<br />SVG<br />GeoLocation<br />ECMA <br />
    12. 12. thekillersmusic.com/HTML5<br />
    13. 13. HTML5<br /><!DOCTYPE html><br />Markup Elements<br /> <header>, <hgroup>, <nav>, <aside>, <footer><br /> <article>, <section><br /> <figure>, <figcaption><br />
    14. 14. document changes<br />
    15. 15. validator.w3.org/check<br />
    16. 16.
    17. 17. <script><br />You no longer need the <script type="text/javascript"></script><br />This has always worked but was never valid before.<br />
    18. 18. Semantic Web<br />
    19. 19. <header><br />Represents a group of introductory or navigational aids<br /><header> <hgroup> <h1>My Site</h1> <h2>Is rocking a hgroup</h2> </hgroup></header><br />Can be more than one per page<br />
    20. 20. <nav><br />Should be used to wrap navigational links<br />Not links that are ads or a collection of links that make up the main content of the page.<br />You shouldn’t put links for things like terms of service or copyright pages.<br /><nav> <ul> <li>Menu Name</li> </ul></nav><br />
    21. 21. <aside><br />Good for content that is separate to the main content<br />Pull Quotes<br />SideBars<br />
    22. 22. <article><br />Represents a component part of a page<br />Could be independently distributable<br />Don’t think magazine article Think distinct object<br /><article> <h1>The articles Title</h1> <footer>Posted in category xyz</footer></article><br />
    23. 23. <section><br />The section element represents a generic document or application section.<br />Not a generic container element. <br />When an element is needed for styling purposes or as a convenience for scripting use the div element instead.<br />Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.<br />
    24. 24. <footer><br />Copyright Data<br />Who Wrote the file<br />Related Documents<br />Can be more than one per page<br />
    25. 25. lime<br />
    26. 26.
    27. 27. lime<br /><header><br /><nav><br /><section id=“intro”><br /><article><br /><aside><br /><header><br /><section><br /><section><br />
    28. 28. rich graphics<br />Audio & Video<br />Canvas<br />SVG 1.1<br />Basic shapes<br />Paths<br />Text<br />Transforms<br />Painting<br />Filling, Colour<br />Scripting<br />Styling<br />Gradients<br />Patterns<br />
    29. 29. http://www.nevermindthebullets.com<br />
    30. 30. video tag<br /><video src=”videos/video.mp4” id=”myVideo”><br /></video><br />
    31. 31. video tag<br /><video id=”myVideo”<br />poster=”videos/poster.jpg”<br />autoplay<br />controls<br />preload=”auto”<br />playbackRate=”1”<br />width=”448”<br />><br /><source src=”videos/video.mp4” type=’video/mp4’ /><source src=”video/video.ogv” type=’video/ogg’ /><br /></video><br />
    32. 32. video codec<br />
    33. 33. modernizr.com<br />
    34. 34. <div id="vidControls"><a href="#" onclick="slower()">Slower</a><a href="#" onclick="play()">Play</a><a href="#" onclick="pause()">Pause</a><a href="#" onclick="faster()">Faster</a></div><br />
    35. 35. function slower() {<br />var video = document.getElementById("myVideo");<br />varplaybackRate = video.playbackRate;<br /> if (playbackRate <= 1)<br />playbackRate = playbackRate / 2;<br /> else<br />playbackRate--;<br />video.playbackRate = playbackRate;<br />}<br />function faster() {<br />document.getElementById("myVideo").playbackRate++;<br />}<br />function pause() {<br />document.getElementById("myVideo").pause();<br />}<br />function play() {<br />document.getElementById("myVideo").play();<br />}<br />
    36. 36. video demo<br />
    37. 37. canvas<br />
    38. 38. www.visitmix.com/lab<br />
    39. 39. Canvas Demo – Museum of China<br />
    40. 40. GeoLocation (Where Am I?)<br />
    41. 41. What’s Generally Safe To Use?<br />SVG<br />Document Object Model<br />Core - Level 2 & 3<br />Events – Level 2 & 3<br />CSS3<br />2D Transforms<br />Backgrounds & Borders<br />Fonts<br />Media Queries<br />Selectors<br />Colors and Opacity<br />HTML5<br />Doc Type<br />Semantic Elements<br />Audio & Video<br />Canvas<br />Selection APIs<br />Content Editable<br />DOM Storage<br />Ajax Navigation<br />Cross Document Messaging<br />GeoLocation<br />
    42. 42. modernizr.com<br />
    43. 43. Using Shims and Poly Fills<br />Used to fill the holes in support by legacy browser<br />Example:<br />Use http://json.org/json2.js when Native JSON is not supported<br />Great list of PolyFills (use with caution)<br />http://bit.ly/HTML5pollyfills<br />
    44. 44. CSS3<br />
    45. 45. border-radius<br />image {<br />border-radius:105px<br />}<br />For more Info <br />http://bit.ly/border-radius<br />
    46. 46. transforms<br />
    47. 47. <style><br /> #mVideo<br /> {<br /> -webkit-transform: rotate(5deg);<br /> -moz-transform: rotate(5deg);<br /> -ms-transform: rotate(5deg);<br /> -webkit-transform-origin: bottom left;<br /> -moz-transform-origin: bottom left;<br />-ms-transform-origin: bottom left;<br /> }<br /></style><br />
    48. 48. Apply the standard last<br />.target<br />{<br /> -moz-border-radius: 20px;<br /> -webkit-border-radius: 20px;<br /> border-radius: 20px;<br />}<br />
    49. 49. web fonts<br />@font-face<br /> {<br /> font-family: FelbridgeOTSCondensed;<br />src: url('fonts/FelbridgeOTSCondensed.woff');<br />}<br />#title<br /> {<br />font: 30pt FelbridgeOTSCondensed, sans-serif;<br /> letter-spacing: 0.01em;<br /> text-align: center;<br />color: white;<br />background-color:rgb(152,155,177);<br /> }<br />
    50. 50. lostworldsfairs.com/eldorado/<br />
    51. 51.
    52. 52. fontsquirrel.com<br />
    53. 53. Come Meet Ubelly.com<br />Free windows Hosting offers<br />Ubel.ly/2mthsfree<br />
    54. 54. resources<br />Books<br />Introducing HTML5 by Bruce Lawson & Remy Sharp<br />W3C Web Sites & Resources<br />W3C HTML5 Specification – www.w3.org/TR/html5 <br />HTML5 Test Suite - test.w3.org/html/tests/reporting/report.htm<br />Microsoft Internet Explorer 9 Sites<br />Engineering Blog – blogs.msdn.com/ie/<br />Beauty Of The Web – www.beautyoftheweb.com/experience/<br />IE Test Drive – www.ietestdrive.com<br />My Blog http://blogs.msdn.com/b/thebeebs<br />
    55. 55. thankyou<br />

    ×