• Save
Using HTML5 and CSS3 today
Upcoming SlideShare
Loading in...5
×
 

Using HTML5 and CSS3 today

on

  • 2,887 views

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.

Statistics

Views

Total Views
2,887
Views on SlideShare
2,840
Embed Views
47

Actions

Likes
1
Downloads
0
Comments
0

7 Embeds 47

http://www.phpconference.co.uk 27
http://2012.phpconference.co.uk 7
http://localhost 4
http://devvideos.com 3
http://zaworski.dev.red-sky 2
http://www.devslides.com 2
http://devslides.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  •  
  •  
  • Geo Location

Using HTML5 and CSS3 today Using HTML5 and CSS3 today Presentation Transcript

  • Martin Beeby@thebeebsUsing HTML5 and CSS3 Todaymartin.beeby@microsoft.com
  • Not @thebiebs but @thebeebs
  • Browsers and Microsoft
    We talked to developers and got feedback
    We improved our product based upon that feedback
  • the internet has changed
  • 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
  • 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
  • http://test.w3.org/html/tests/reporting/report.htm
    Submit your tests
    http://bit.ly/submitHTML5Tests
  • http://joydefinesthefuture.com/
  • what is CSS3
    controls the way HTML looks
    Achieve things that was previously only possible using JavaScript
  • Oh So Shiny!
    HTML5
    CCS3
    WebApps – WebSockets, Web Storage, etc
    SVG
    GeoLocation
    ECMA
  • thekillersmusic.com/HTML5
  • HTML5
    <!DOCTYPE html>
    Markup Elements
    <header>, <hgroup>, <nav>, <aside>, <footer>
    <article>, <section>
    <figure>, <figcaption>
  • document changes
  • validator.w3.org/check
  • <script>
    You no longer need the <script type="text/javascript"></script>
    This has always worked but was never valid before.
  • Semantic Web
  • <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
  • <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>
  • <aside>
    Good for content that is separate to the main content
    Pull Quotes
    SideBars
  • <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>
  • <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.
  • <footer>
    Copyright Data
    Who Wrote the file
    Related Documents
    Can be more than one per page
  • lime
  • lime
    <header>
    <nav>
    <section id=“intro”>
    <article>
    <aside>
    <header>
    <section>
    <section>
  • rich graphics
    Audio & Video
    Canvas
    SVG 1.1
    Basic shapes
    Paths
    Text
    Transforms
    Painting
    Filling, Colour
    Scripting
    Styling
    Gradients
    Patterns
  • http://www.nevermindthebullets.com
  • video tag
    <video src=”videos/video.mp4” id=”myVideo”>
    </video>
  • 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>
  • video codec
  • modernizr.com
  • <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>
  • 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();
    }
  • video demo
  • canvas
  • www.visitmix.com/lab
  • Canvas Demo – Museum of China
  • GeoLocation (Where Am I?)
  • 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
  • modernizr.com
  • 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
  • CSS3
  • border-radius
    image {
    border-radius:105px
    }
    For more Info
    http://bit.ly/border-radius
  • transforms
  • <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>
  • Apply the standard last
    .target
    {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    }
  • 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);
    }
  • lostworldsfairs.com/eldorado/
  • fontsquirrel.com
  • Come Meet Ubelly.com
    Free windows Hosting offers
    Ubel.ly/2mthsfree
  • 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
  • thankyou