Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 w/ ASP.NET 4 & 4.5

Matthew Osborn
December 13, 2011

HTML5 w/ ASP.NET 4 & 4.5

Whether you’re building a new website using ASP.NET or maintaining an existing one, you’ll leave this talk ready use HTML5 on ASP.NET with VS2010. We’ll look at what HTML5 offers modern application developers and how you can code HTML5 with ASP.NET WebForms or ASP.NET MVC for rich Web Applications both today and tomorrow. In this talk we will see how to build an awesome ASP.NET website which uses the HTML5 & related standards like Audio, Video, GeoLocation, Local Storage, Canvas etc.

Matthew Osborn

December 13, 2011
Tweet

More Decks by Matthew Osborn

Other Decks in Technology

Transcript

  1. <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>
  2. <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>
  3. <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>
  4. <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>