Slide 1

Slide 1 text

HTML5 PRACTICAL

Slide 2

Slide 2 text

WHAT

Slide 3

Slide 3 text

A NEW Standard Web

Slide 4

Slide 4 text

section hgro footer article websocke keyframes validatio boxshadow video aud tim

Slide 5

Slide 5 text

section hgro footer article websocke keyframes validatio boxshadow video aud tim

Slide 6

Slide 6 text

section hgro footer article websocke keyframes validatio boxshadow video aud tim

Slide 7

Slide 7 text

WHY

Slide 8

Slide 8 text

s impler emantic maller   s s

Slide 9

Slide 9 text

         .rounded  {                  padding:  10px;                  position:  relative;          }                    .rounded-­‐top-­‐left,          .rounded-­‐top-­‐right,          .rounded-­‐bottom-­‐left,          .rounded-­‐bottom-­‐right  {                  height:  10px;                  position:  absolute;                  width:  10px;          }            .rounded-­‐top-­‐left  {                  background-­‐image:  url(../images/topleft.gif);                  left:  0;                  top:  0;            }                    .rounded-­‐top-­‐right  {                  background-­‐image:  url(../images/topright.gif);                  right:  0;                  top:  0;            }                            .rounded-­‐bottom-­‐left  {                  background-­‐image:  url(../images/bottomleft.gif);                  bottom:  0;                  left:  0;          }                                    .rounded-­‐bottom-­‐left  {                  background-­‐image:  url(../images/bottomright.gif);                  bottom:  0;                  left:  0;          }      
         
         
         

Rounded  Corners

         
         
 
           .rounded  {                  border-­‐radius:  10px;          }      

         Rounded  corners  

  47 lines 9 lines

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

     
         
                 
  • Link
  •              
  • Link
  •              
  • Link
  •          
     
 
 
     
         

Some  Content

     
     
Ad
 
 
     ©  
 

Slide 12

Slide 12 text

               
                 
  • Link
  •              
  • Link
  •              
  • Link
  •          
                         

Some  Content

           Ad          ©     fixed

Slide 13

Slide 13 text

DEMO

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

OSBORNM .com twitter github codeplex