HTML5 Roundup

download HTML5 Roundup

of 66

Transcript of HTML5 Roundup

  • 7/31/2019 HTML5 Roundup

    1/66

  • 7/31/2019 HTML5 Roundup

    2/66

    Why HTML5?

    State of the Internet Now states

    http://www.onlineschools.org/state-of-the-internet/soti.html

  • 7/31/2019 HTML5 Roundup

    3/66

    Timeline

    1995 Nov HTML 2.0 Published by IETF

    1997 Jan HTML3.2 published, W3C

    1997, Dec HTML 4. 1999, Dec HTML 4.01 was published.

    2000, Jan XHTML 1.0

    2001, May XHTML 1.1

  • 7/31/2019 HTML5 Roundup

    4/66

    What happened next?

  • 7/31/2019 HTML5 Roundup

    5/66

  • 7/31/2019 HTML5 Roundup

    6/66

    WHATWG

  • 7/31/2019 HTML5 Roundup

    7/66

    WHATWGWeb Hypertext Applications Working Group

    http://www.whatwg.org/html

  • 7/31/2019 HTML5 Roundup

    8/66

    WHATWG

    A rebellion was formed within W3C.

    W3C was formulating standards, which werepurely theoretical and unrelated to the needs

    of the web designers. Members from Apple, Opera and Mozilla were

    unhappy with this direction.

    Expectation was to place more emphasis onformats that allowed creation of WebApplications.

  • 7/31/2019 HTML5 Roundup

    9/66

    Birth of WHATWG (& HTML5)

    2004, Ian Hickson, proposed the Idea ofextending HTML to create Web Applications.

    Proposal Rejected

    WHATWG formed.

    Ian Hickson became the editor of HTML5

  • 7/31/2019 HTML5 Roundup

    10/66

    Reunification

    WHATWG continued to do its work on HTML5

    and W3C continued on XHTML2

    2006, W3C issued charter to adopt the work

    done by WHATWG as the basis.

  • 7/31/2019 HTML5 Roundup

    11/66

    HTML 5 & HTML5

  • 7/31/2019 HTML5 Roundup

    12/66

    HTML 5 & HTML5

  • 7/31/2019 HTML5 Roundup

    13/66

    SoWhat is HTML5

  • 7/31/2019 HTML5 Roundup

    14/66

    An Application Platform

  • 7/31/2019 HTML5 Roundup

    15/66

  • 7/31/2019 HTML5 Roundup

    16/66

  • 7/31/2019 HTML5 Roundup

    17/66

    HTML5

    HTML + CSS + JSStructure + Presentation + Behavior

  • 7/31/2019 HTML5 Roundup

    18/66

    Semantics

  • 7/31/2019 HTML5 Roundup

    19/66

    Document Type Definition (DTD)

    Old

  • 7/31/2019 HTML5 Roundup

    20/66

  • 7/31/2019 HTML5 Roundup

    21/66

  • 7/31/2019 HTML5 Roundup

    22/66

  • 7/31/2019 HTML5 Roundup

    23/66

  • 7/31/2019 HTML5 Roundup

    24/66

  • 7/31/2019 HTML5 Roundup

    25/66

  • 7/31/2019 HTML5 Roundup

    26/66

  • 7/31/2019 HTML5 Roundup

    27/66

  • 7/31/2019 HTML5 Roundup

    28/66

  • 7/31/2019 HTML5 Roundup

    29/66

    Structural Elements

    and more

  • 7/31/2019 HTML5 Roundup

    30/66

    Your menu

    Article title

    Lorem Ipsum

    Pellentesque habitant morbi tristique senectus et netus et malesuada

    About section

    Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

    Copyright 2009 Your name

  • 7/31/2019 HTML5 Roundup

    31/66

    Date and time

    search

    telrange

    email

    URLcolor

  • 7/31/2019 HTML5 Roundup

    32/66

    Video Element

  • 7/31/2019 HTML5 Roundup

    33/66

    Video Element

  • 7/31/2019 HTML5 Roundup

    34/66

    Audio Element

    Play theAudio

    Pause the

    Audio

    Increase

    Volume

    DecreaseVolume

  • 7/31/2019 HTML5 Roundup

    35/66

    Canvas

    Create graphics with the canvas element

    Uses Javascript to get the context and draw

    elements.

    Useful for creating Charts, Games,Visualizations etc.

  • 7/31/2019 HTML5 Roundup

    36/66

  • 7/31/2019 HTML5 Roundup

    37/66

    CSS3

    Still work in progress

    Already a widely used and unsung standard

    All modern browsers support CSS3

    (Chrome, Firefox, Safari, Opera)

  • 7/31/2019 HTML5 Roundup

    38/66

    SoWhat About

  • 7/31/2019 HTML5 Roundup

    39/66

    SoWhat About

  • 7/31/2019 HTML5 Roundup

    40/66

  • 7/31/2019 HTML5 Roundup

    41/66

    IE is Improving

  • 7/31/2019 HTML5 Roundup

    42/66

  • 7/31/2019 HTML5 Roundup

    43/66

    Rounded Corners

    Border-radius{10px}

    -moz-Border-radius{10px}

    -webkit-Border-radius{10px}

    Border-radius{10px 20px 30px 40px}

    -moz-Border-radius{10px 20px 30px 40px}-webkit-Border-radius{10px 20px 30px 40px}

  • 7/31/2019 HTML5 Roundup

    44/66

    Box Shadow

    Box-shadow {3px 3px 10px #333}

    -moz-Box-shadow {3px 3px 10px #333}

    -webkit-Box-shadow {3px 3px 10px #333}

    Box-shadow {inset 3px 3px 10px #333}

    -moz-Box-shadow {inset 3px 3px 10px #333}-webkit-Box-shadow {inset 3px 3px 10px #333}

  • 7/31/2019 HTML5 Roundup

    45/66

    Text Shadow

    text-shadow {3px 3px 10px #333}

    -moz-Text-shadow {3px 3px 10px #333}

    -webkit-Text-shadow {3px 3px 10px #333}

  • 7/31/2019 HTML5 Roundup

    46/66

    RGBA

    Background-color:{ rgba(234, 221, 79, 0.5) }

  • 7/31/2019 HTML5 Roundup

    47/66

    Gradientsbackground-image: linear-gradient(bottom, rgb(36,72,244)39%, rgb(65,101,255)

    70%);

    background-image: -o-linear-gradient(bottom, rgb(36,72,244)39%, rgb(65,101,255)

    70%);

    background-image: -moz-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -webkit-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -ms-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -webkit-gradient(

    linear,left bottom,

    left top,

    color-stop(0.39, rgb(36,72,244)),

    color-stop(0.7, rgb(65,101,255))

    );

  • 7/31/2019 HTML5 Roundup

    48/66

    Gradientsbackground-image: linear-gradient(bottom, rgb(36,72,244)39%, rgb(65,101,255)

    70%);

    background-image: -o-linear-gradient(bottom, rgb(36,72,244)39%, rgb(65,101,255)

    70%);

    background-image: -moz-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -webkit-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -ms-linear-gradient(bottom, rgb(36,72,244)39%,

    rgb(65,101,255)70%);

    background-image: -webkit-gradient(

    linear,left bottom,

    left top,

    color-stop(0.39, rgb(36,72,244)),

    color-stop(0.7, rgb(65,101,255))

    );

  • 7/31/2019 HTML5 Roundup

    49/66

    Selectors

    .row:nth-child(even) {

    background: #dde;

    }.row:nth-child(odd) {

    background: white;

    }

    nth selectors

    li:last-child {

    background: #dde;

    }

    li:nth-child(3n) {

    background: red;

    }

  • 7/31/2019 HTML5 Roundup

    50/66

    Selectors

    form input[type="text"] {

    border: 1px solid #333;

    padding: 0.2em;

    width: 400px;}

    Attribute Selectors

    a[href*="example.com"] { color : red ; }

  • 7/31/2019 HTML5 Roundup

    51/66

    Compatibility

    Most of the CSS3 elements can be used with

    Vendor Prefixes.

    http://caniuse.com/

  • 7/31/2019 HTML5 Roundup

    52/66

  • 7/31/2019 HTML5 Roundup

    53/66

  • 7/31/2019 HTML5 Roundup

    54/66

    https://reader009.{domain}/reader009/html5/0427/5ae256a2b71e7/5ae256c419445.png

  • 7/31/2019 HTML5 Roundup

    55/66

    Solution

    Responsive Design

  • 7/31/2019 HTML5 Roundup

    56/66

  • 7/31/2019 HTML5 Roundup

    57/66

    http://mediaqueri.es

  • 7/31/2019 HTML5 Roundup

    58/66

    Responsive Design

    Using CSS, we can make the website RESPOND

    to the Device Landscape and structure content

    appropriately.

  • 7/31/2019 HTML5 Roundup

    59/66

    HTML5 & CSS3 are still work in progress,

    But they can be still used.

  • 7/31/2019 HTML5 Roundup

    60/66

    HTML5 & CSS3 are still work in progress,

    But they can be still used.

    FRAMEWORKSAcross Devices

  • 7/31/2019 HTML5 Roundup

    61/66

  • 7/31/2019 HTML5 Roundup

    62/66

  • 7/31/2019 HTML5 Roundup

    63/66

    and many many more

    52Framework

    G5 Framework

    Perkins

    Sprites.js

    LESS

    SASS animate.css

  • 7/31/2019 HTML5 Roundup

    64/66

    Resources

    html5rocks.com html5doctor.com

    net.tutsplus.com

    smashingmagazine.com

    caniuse.com

    mediaqueri.es

    blog.whatwg.org

    w3.org

    slides.html5rocks.com

    netmagazine.com

  • 7/31/2019 HTML5 Roundup

    65/66

  • 7/31/2019 HTML5 Roundup

    66/66

    Thank You