HTML5 - PowerPoint PPT Presentation

yamka
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 PowerPoint Presentation
play fullscreen
1 / 15
Download Presentation
HTML5
128 Views
Download Presentation

HTML5

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. PRACTICAL HTML5

  2. WHAT

  3. Standard A NEW Web

  4. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  5. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  6. footer article time websockets video boxshadow audio validation section keyframes hgroup aside storage header

  7. WHY

  8. s maller s impler s emantic

  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> 47 lines 9 lines <style> .rounded { border-radius: 10px; } </style> <p class="rounded"> Rounded corners </p>

  10. 5 paths <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> 1 path <form action="/stuff" method="post"> <input type="text" name="value" placeholder="Value" /> <input type="submit" value="Submit" /> </form>

  11. mixed <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> self contained not related

  12. fixed <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> portable separated

  13. DEMO

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

  15. OSBORNM .com twitter github codeplex