Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical HTML 5

Practical HTML 5

Whether you’re building a new website or maintaining an existing one, you’ll leave this talk ready use HTML5. We’ll look at what it offers modern application developers and how you can code rich Web Applications both today and tomorrow. In this talk we will see how to build an awesome website which uses HTML5 & related standards like Audio, Video, GeoLocation, Local Storage, Canvas etc.

Matthew Osborn

January 31, 2013
Tweet

More Decks by Matthew Osborn

Other Decks in Technology

Transcript

  1. HTML5
    PRACTICAL

    View full-size slide

  2. A NEW Standard
    Web

    View full-size slide

  3. section
    hgro
    footer article
    websocke
    keyframes
    validatio
    boxshadow
    video
    aud
    tim

    View full-size slide

  4. section
    hgro
    footer article
    websocke
    keyframes
    validatio
    boxshadow
    video
    aud
    tim

    View full-size slide

  5. section
    hgro
    footer article
    websocke
    keyframes
    validatio
    boxshadow
    video
    aud
    tim

    View full-size slide

  6. s
    impler
    emantic
    maller
     
    s
    s

    View full-size slide

  7.  <br/>        .rounded  {  <br/>                padding:  10px;  <br/>                position:  relative;  <br/>        }  <br/>          <br/>        .rounded-­‐top-­‐left,  <br/>        .rounded-­‐top-­‐right,  <br/>        .rounded-­‐bottom-­‐left,  <br/>        .rounded-­‐bottom-­‐right  {  <br/>                height:  10px;  <br/>                position:  absolute;  <br/>                width:  10px;  <br/>        }  <br/>  <br/>        .rounded-­‐top-­‐left  {  <br/>                background-­‐image:  url(../images/topleft.gif);  <br/>                left:  0;  <br/>                top:  0;    <br/>        }  <br/>          <br/>        .rounded-­‐top-­‐right  {  <br/>                background-­‐image:  url(../images/topright.gif);  <br/>                right:  0;  <br/>                top:  0;    <br/>        }  <br/>                  <br/>        .rounded-­‐bottom-­‐left  {  <br/>                background-­‐image:  url(../images/bottomleft.gif);  <br/>                bottom:  0;  <br/>                left:  0;  <br/>        }  <br/>                          <br/>        .rounded-­‐bottom-­‐left  {  <br/>                background-­‐image:  url(../images/bottomright.gif);  <br/>                bottom:  0;  <br/>                left:  0;  <br/>        }  <br/>  
     
     
             
             
           Rounded  Corners  
             
             
     
     <br/>        .rounded  {  <br/>                border-­‐radius:  10px;  <br/>        }  <br/>  
     
     
           Rounded  corners  
     
    47 lines
    9 lines

    View full-size slide

  8.  <br/>$(function  ()  {  <br/>        $("input[type=text]").each(function  ()  {  <br/>                $(this).val(this.title);  <br/>                $(this).addClass("placeholder");  <br/>        });  <br/>  <br/>        $("input[type=text]").focus(function  ()  {  <br/>                if  ($(this).val()  ===  this.title)  {  <br/>                        $(this).val  =  "";  <br/>                        $(this).removeClass("placeholder");  <br/>                }  <br/>        });  <br/>  <br/>        $("input[type=text]").blur(function  ()  {  <br/>                if  ($(this).val()  ===  "")  {  <br/>                        $(this).val(this.title);  <br/>                        $(this).addClass("placeholder");  <br/>                }  <br/>        });  <br/>});  <br/>  
     
     
             
             
     
     
             
             
     
    1 path
    5 paths

    View full-size slide

  9.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     

    View full-size slide

  10.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     
    fixed

    View full-size slide

  11. http://modernizr.com
    http://html5test.com
    http://dev.w3.org/html5/spec
    http://www.html5labs.com
    Resources

    View full-size slide

  12. OSBORNM
    .com
    twitter
    github
    codeplex

    View full-size slide