1 Company Confidential Skin a Complete DotNetNuke Website Using HTML5 and CSS3 in One Hour Amelia Marschall Partner & Creative Director

2 Company Confidential HTML5 Basic Principles  Support existing content: If it’s not broke, don’t fix it  Less strict than XHTML  But some outdated elements cannot be used: Frames, font tag, center, big, blink (presentation items)  Added APIs and data storage for non-proprietary web apps

3 Company Confidential 3 Skinning with HTML5

4 Company Confidential HTML5 Doctype Skin.doctype.xml: ]]> That’s it!

5 Company Confidential New HTML Elements

6 Company Confidential Internet Explorer Fix IE needs this javascript to recognize the new elements: Available here: from remysharp.com remysharp.com Add to CSS so all browsers render elements as block-level: section, header, nav, article, aside, footer { display: block; }

7 Company Confidential The Site

8 Company Confidential 8 Styling with CSS3

9 Company Confidential Fun Sites  html5readiness.com html5readiness.com  beercamp.com/2010 beercamp.com/2010  2011.beercamp.com 2011.beercamp.com  useragentman.com/tests/cssSandpaper/cube3.html useragentman.com/tests/cssSandpaper/cube3.html

10 Company Confidential Questions? View the demo: Amelia Marschall Partner & Creative