Click here to load reader

HTML5 easy if you know how

  • View
    3.911

  • Download
    0

Embed Size (px)

Text of HTML5 easy if you know how

  • Move to HTML5is easyif you know how

  • Jorge del [email protected]

    Co-founder Frontend [email protected]

    Co-founder [email protected]

    Professional profile:linkedin.com/in/jorgecasar

  • What is NOT HTML5?

    CSS3JS APIs (GEOlocation, workers, Drag&Drop, Web storage...)

    Web Apps

  • What is NOT HTML5?

    All that is out of markup

  • What is HTML5?Markup lenguageWeb FormsVideo & AudioCanvasSVG

  • What is HTML5?

    The basis forweb applications

  • HTML5

    JS APis

    canvasvideo

    audio

    web forms

    SVG

    GEOlocation

    Drag & Drop

    Storage CSSCSS1CSS2.1

    CSS3

    Silverlight Flash

    Web Apps

  • Advantages

    Semantic elementsBackwards compatibilityWeb application orientedFaster rendering

  • Progressive Enhancement

  • Graceful Degradation

  • Where to start?

  • XHTML 1.0 Strict

    HTML5

    !DOCTYPE

  • XHTML 1.0 Strict

    HTML5

    Encoding

  • XHTML 1.0 Strict

    HTML5

    Links

  • XHTML 1.0 Strict

    HTML5

    Script

  • Polyfillshtml5shim

  • Old structure

  • New structure

  • sectionnav

    section

    header nav

    asidearticle article article

    footer

    figure figurevideo

    figcaptionfigcaptionheader header header

    header

  • New tags

    articleasid

    e

    audiocanvas

    datalist

    commanddetailsfigure

    figcaption

    footer

    header

    hgroup

    keygen

    nav meteroutput

    videotime

    source

    summary

  • Thanks!Jorge del Casar

    @jorgecasar

Search related