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.

Transcript

1. HTML5
   PRACTICAL
   

   View Slide

2. WHAT
   

   View Slide

3. A NEW Standard
   Web
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. WHY
   

   View Slide

8. s
   impler
   emantic
   maller
    
   s
   s
   

   View Slide

9.  <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 Slide

10.  <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 Slide

11.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     
    

    View Slide

12.  
         
             
               Link  
               Link  
               Link  
             
         
     
     
         
           Some  Content  
         
       Ad  
     
     
       ©  
     
    fixed
    

    View Slide

13. DEMO
    

    View Slide

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

    View Slide

15. OSBORNM
    .com
    twitter
    github
    codeplex
    

    View Slide