Your SlideShare is downloading. ×
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Using HTML5 and CSS3 today
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using HTML5 and CSS3 today

2,584

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. …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  •  
  •  
  • Geo Location
  • Transcript

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

    ×