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.

Da981fdeee4e1170b90334eac70652d6?s=128

Matthew Osborn

January 31, 2013
Tweet

Transcript

  1. HTML5 PRACTICAL

  2. WHAT

  3. A NEW Standard Web

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

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

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

    tim
  7. WHY

  8. s impler emantic maller   s s

  9. <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
  10. <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
  11. <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>  
  12. <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
  13. DEMO

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

  15. OSBORNM .com twitter github codeplex