1. HTML5 + WordPress Rob Larsen 1.23.2010 htmlcssjavascript.com | drunkenfist.com @robreact htmlcssjavascript.com /downloads/wordpress.ppt

2. Who is this Guy Anyway? 12+ years HTML/CSS/JavaScript. My job since 1999. WordPress since 2005. Launched a ton of sites. Currently manage 6. For the next 5 days: Principal Presentation Engineer at Cramer Next Week: Molecular PAST: AdvisorTech, Compete, Demandware, The Weekly Dig, Gillette, Museum of Science, Boston, PC Connection, State Street, Webex

3. Introduction to HTML5 HTML5 is a lot of things- –Ongoing. This is a moving target. The spec can change underneath you. This can be fun, I swear. It also means there’s not always an answer. That, too, can be fun. –Occasionally controversial. –Full of cool stuff that’s got both browser and web developers excited –Something to pay attention to/ experiment with/ discuss and give feedback on (which is why we’re here today)

4. What Are We Going To Talk About Marking up a standard WordPress blog using some of the new, semantic elements/attributes. This is a subset of the spec that’s relatively stable and is usable right now. We’ll use a small bit of JavaScript or the Modernizr library to make styling these elements work in Internet Explorer. Sweet.

5. Meet the New Semantic Elements The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, contact information.

6. Meet the New Semantic Elements The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element

7. Meet the New Semantic Elements The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

8. Meet the New Semantic Elements The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

9. Meet the New Semantic Elements The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. “Just another wordpress weblog”

10. Meet the New Semantic Elements The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

11. Meet the New Semantic Elements The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

12. Meet the New Semantic Elements The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

13. Meet the New Semantic Elements attributes Placeholder Text/Search Boxes Email Addresses Web Addresses

14. Isn’t All That New Stuff Just About Perfect for Marking up a Blog? Heck yes.

15. Let’s Look at Some Code

16. header.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> > " /> var elem; var elems = 'abbr article aside audio canvas datalist details eventsource figure footer header hgroup mark menu meter nav output progress section time video'.split(' '); var i = elems.length+1; while ( --i ) { elem = document.createElement( elems[i] ); } elem = null; " media="screen" /> " /> Default/Kubrick (part 1)

17. header.php <?php // Checks to see whether it needs a sidebar or not if ( empty($withcomments) && !is_single() ) { ?> #page { background: url(" /images/kubrickbg-.jpg") repeat-y top; border: none; } #page { background: url(" /images/kubrickbgwide.jpg") repeat-y top; border: none; } > /"> Default/Kubrick (part 2)

18. header.php class=“no-js”> | Fresh Ideas Caught and Served | post_parent) { $parent_title = get_the_title($post->post_parent); echo $parent_title;?> – " /> ID, "meta-description", "true"); ?>" /> var ___baseURL =" "; <!—one file, which contains Modernizr  /_assets/scripts/b.c.js"> AwiderNet.com

19. View Source <!– such is the power of modernizr  A Wider Net | Fresh Ideas Caught and Served AwiderNet.com

20. index.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ get_header(); ?> id="post- "> " rel="bookmark" title="Permanent Link to "> " pubdate="pubdate"> '); ?> Posted in | Not Found Sorry, but you are looking for something that isn't here. Default/Kubrick

21. View Source s This Is an HTML5ized Version of the Default Wordpress Theme January 17th, 2010 Source Code and discussion. Posted in Uncategorized | Edit | No Comments » Default/Kubrick

22. sidebar.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> Pages ' ); ?> Archives Categories '); ?> Meta Default/Kubrick

23. searchform.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> " > Search for: " name="s" id="s" /> Default/Kubrick

24. comments.php <?php // snip! ?> You must be ">logged in to post a comment. /wp-comments-post.php" method="post" id="commentform"> Logged in as /wp-admin/profile.php">. " title="Log out of this account">Log out » Name " size="22" tabindex="1" /> Mail (will not be published) " size="22" tabindex="2" /> Website " size="22" tabindex="3" /> Comments ID); ?> <!—SNIP-  AWiderNet

25. footer.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ ?> is proudly powered by WordPress ">Entries (RSS) and ">Comments (RSS). queries. seconds. --> Default/Kubrick

26. What’s the Diff? footer.php

27. archives.php <?php /** * @package WordPress * @subpackage Kubrick_x_HTML5 */ /* Template Name: Archives */ ?> Archives by Month: Archives by Subject: Kubrick/default

28. style.css /*SNIP!*/ /* Begin Structure */ body { margin: 0 0 20px 0; padding: 0; } /*HTML5*/ footer, section, article, aside, header, time { display:block; } #page { background-color: white; margin: 20px auto; padding: 0; width: 760px; border: 1px solid #959596; } #header /*SNIP!*/ Kubrick/default

29. What’s the Diff? style.css

30. .borderradius.boxshadow.rgba #container #main article,.borderradius.boxshadow.rgba #container #main #posts >.meta-data,.borderradius.boxshadow.rgba #container #main #posts #no-results,.borderradius.boxshadow.rgba #container #main #posts.author { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0,.15); box-shadow: 0px 0px 5px rgba(0, 0, 0,.15); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0,.15); background:#fff; overflow: hidden; } AWiderNet

31. PSST! CSS3

32. Things I Learned The new outline algorithm is a fickle master Otherwise- not so bad. Kubrick worked with almost no browser specific intervention in modern browsers

33. Any Questions?

34. More Info http://www.whatwg.org/ http://diveintohtml5.org/ http://www.modernizr.com/ http://gsnedders.html5.org/outliner/ http://htmlcssjavascript.com/html/im- messing-around-with-an-html5-version-of- the-default-wordpress-theme/http://htmlcssjavascript.com/html/im- messing-around-with-an-html5-version-of- the-default-wordpress-theme/