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