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. WHY

  2. <style>          .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;          }   </style>     <div>          <div  class="rounded-­‐top-­‐left"></div>          <div  class="rounded-­‐top-­‐right"></div>          <p>Rounded  Corners</p>          <div  class="rounded-­‐bottom-­‐left"></div>          <div  class="rounded-­‐bottom-­‐right"></div>   </div>   <style>          .rounded  {                  border-­‐radius:  10px;          }   </style>     <p  class="rounded">          Rounded  corners   </p>   47 lines 9 lines
  3. <script>   $(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");                  }          });   });   </script>     <form  action="/stuff"  method="post">          <input  type="text"  name="value"  title="Value"  />          <input  type="submit"  value="Submit"  />   </form>   <form  action="/stuff"  method="post">          <input  type="text"  name="value"  placeholder="Value"  />          <input  type="submit"  value="Submit"  />   </form>   1 path 5 paths
  4. <div  class="header">      <div  id="nav">        

     <ul>              <li><a  href="#">Link</a></li>              <li><a  href="#">Link</a></li>              <li><a  href="#">Link</a></li>          </ul>      </div>   </div>   <div  class="page-­‐body">      <div  class="post">          <p>Some  Content</p>      </div>      <div  id="ads">Ad</div>   </div>   <div  id="footer">      &copy;   </div>  
  5. <header>      <nav>          <ul>  

               <li><a  href="#">Link</a></li>              <li><a  href="#">Link</a></li>              <li><a  href="#">Link</a></li>          </ul>      </nav>   </header>   <section>      <article>          <p>Some  Content</p>      </article>      <aside>Ad</aside>   </section>   <footer>      &copy;   </footer>   fixed