This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
2. Obligatory Intro
So, who is this guy?
• Coding HTML since 1996
• WordPress since 2004 (v1.0.2 Art Blakely)
• New York WP Community since WordCamp
NYC 2009.
• Tadpole.cc - WordPress Hosting, Support,
Training and Consulting
3. I’m assuming...
• You are somewhat familiar with previous
versions of HTML and CSS .
• You know your way around a WordPress
theme, but not necessarily hard-core dev.
4. A Little History
• HTML was created to link documents via
HyperText (the “HT” in HTML)
• Quickly grew into a more rich markup
language (the “ML”)
• Browser Wars: Microsoft vs. Netscape.
5. A Little History
• XHTML created in order to transition from
HTML to XML
• XHTML required stricter coding standards.
• If not coded properly, it would break...
Horribly.
6. A Little History
• 2002: W3C created XHTML 2.0
• 2004: Apple, Mozilla, and Opera created the
WHATWG, when W3C shot down HTML5.
• 2007: W3C created HTML 5 working group.
• 2009: W3C abandons XHTML 2.0 in favor of
HTML5.
7. HTML5 Philosophy
• Must be backwards compatible with older
versions of HTML.
• Everything added or removed must be done
so for a practical purpose.
• The process of deciding what goes in is an
open process, involving blogs, twitter, etc.
8. Can we use it now?
• The spec is not 100% finalized, but is broken
into “modules,” many of which are finalized.
• Most features are supported by all major
browsers (Chrome, Firefox 4+, Safari, IE9+)
• Most features degrade gracefully in older
browsers.
11. HTML Code Syntax
<IMG SRC=”image.png” ALT=”This is an image, Duh!” />
is the same as
<Img sRc=image.png ALt=’This is an image, Duh!’>
12. New HTML Elements
• article • footer
< >
• aside • header
• bdi • hgroup
• command • mark
• details • nav
• summary • ruby, rt, and rp
• figure • section
• figcaption • time
13. Changed Elements
• <a> can now wrap around block elements.
• <b> and <i> are back (but not presentational).
• <cite> defined to be the title of a work.
• <hr> is now a “paragraph-level thematic break.”
• <small> is now for small-print, i.e., legal boilerplate.
14. Removed Elements
• <big>
• <center> and <font>
• <strike> and <u>
• <frame>, <frameset>, and <noframes>
• <acronym> is now <abbr>
• <applet> is now <object>
15. Blog Page Structure
<div id=”header”>
<h1>Page Title</h1>
<p>Tag Line text...</p>
</div>
<div id=”nav”>
<ul>...list of nav links...</ul>
</div>
<div id=”sidebar”>...sidebar links...</div>
<div id=”content”>
<div class=”article”>
<h2>Article Title</h2>
<p>Published on June 9, 2012.</p>
<p>Article Content</p>
<div class=”entry-meta”>...comments, permalink, etc...</div>
</div>
</div>
<div id=”footer”>
16. Blog Page Structure
<header>
<hgroup>
<h1>Page Title</h1>
<h2>Tag Line text...</h2>
</hgroup>
</header>
<nav><ul>...list of nav links...</ul></nav>
<aside>...sidebar links...</aside>
<article>
<header>
<h1>Article Title</h1>
<time datetime=”2012-06-09” pubdate”>Published on June 9, 2012.</time>
</header>
<p>Article Content</p>
<footer>...comments, permalink, etc...</footer>
17. <header> & <hgroup>
• When <header> is used outside of other
elements, it’s assumed to be the page header.
• When <header> is used inside of elements like
<aside> and <article>
• <header> isn’t necessary when an <h1> is the only
element of the header.
• Cannot be placed inside a <footer>, <address> or
another <header> element.
18. <header> & <hgroup>
• <header> allows you to group other content in
with the heading, such as publication date, etc.
• <hgroup> links together multiple headings into
one header.
• Great for headers that have multiple lines, or the
Page Title with a Site Description.
19. <footer>
• Just like <header>, you can use more than one
<footer> on a page.
• A footer typically, but not always, goes at the
bottom of content.
• For example, if you use a <footer> for next/
previous blog post links, you can use
<article>
<header>...</header>
<footer>...Next/Previous nav links</footer>
<p>...Content</p>
<footer>...Next/Previous nav links</footer>
20. <nav>
• Usually contains a <ul> list of links.
• You can have more than one <nav> list on a page.
• Placing the <nav> outside of other elements
means it’s navigation across your site.
• Placing <nav> inside an <article> means it’s
navigation for that article only (useful on single
post pages for Next/Previous links).
21. <article> and <section>
• <article> should be a complete block of content
that is wholly separate from other content.
• <section> divides content into, yes, sections. A
section does not stand on its own.
• Think of <article> as something you might see in
an RSS feed.
• However, you can use <article> within another
<article> tag. For example, comments could be in
separate <article> tags inside of a blog post.
22. <aside>
• Used for “Secondary Content”
• Meant for content that is related to, but not
necessarily important for understanding, content.
• Can be used as a sidebar for a page.
• Can also be used inside <article>, etc., for
information related to the article.
23. <aside>
• Used for “Secondary Content”
• Meant for content that is related to, but not
necessarily important for understanding, content.
• Can be used as a sidebar for a page.
• Can also be used inside <article>, etc., for
information related to the article.
24. Forms - New Attributes
• required
• autofocus
• placeholder
• form
• autocomplete
• pattern
25. Forms - New Input Types
• email • tel (telephone)
• date • color
• search • number
• New input types fall back to type=”text” in older
browsers, but newer browsers can display a special
input (keyboard, color chooser, number dial, etc.)
26. Video - the old way
<object width=”400 height=”300”>
<param name=”movie” value=”http://www.youtube.com/v/ddO9idmax0o” />
<param name=”allowFullScreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<embed src=”http://www.youtube.com/v/ddO9idmax0o” type=”application/x-
shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true”
width=”400” height=”300” />
• Code is complex and confusing
• Relies on 3rd party plugins for functionality.
28. Video - the new way
<video controls autoplay>
<source src=”movie.mp4” type=”video/mp4; codecs=avc1.42E01E,mp4a.40.2”>
<source src=”movie.ogv” type=”vidio/off; codecs=theora,vorbis”>
<p>Get the video in <a href=”movie.mp4”>MP4</a> or <a
href=”movie.ofv”>Ogg Vorbis</a> format.</p>
• Code is easier to read.
• Video playback doesn’t require any plugins.
• Multiple sources depending on browser support.
31. Browser Support
• Webkit (Safari and Chrome)
• Firefox 4+
• Opera
• IE 9+
• CSS3 doesn’t deprecate anything from CSS 2.1.
• Currently uses -moz-, -webkit-, and other browser
specific prefixes on many modifiers.
32. CSS3 and Color
• The old way - background-color: #1a2b3c;
• RGBa - background-color: rgba(0, 255, 0, 0.7);
• HSLa - background-color: hsla(0, 100%, 35%, 0.4);
• “a” stands for “alpha”, or opacity.
33. Opacity and Gradients
• You can also specify the opacity of an object:
header {
background-color: #000;
opacity: 0.7;
}
• or specify a color gradient.
background-image: -webkit-gradient(
linear, left 50, right 50,
color-stop(0.08, rgb(255,255,255)),
color-stop(0.54, rgb(133,133,133)),
color-stop(0.77, rgb(0,0,0))
);
35. Text-shadow and Web fonts
• You can apply a drop-shadow:
.quote {
}
text-shadow: 2px 2px 4px #fff; Quote Text
• or embed a font on the web
@font-face {
font-family: “BiauKai”;
src: url(“fonts/BiauKai.ttf”);
}
37. Rounded Corners
• You can round off the corners of a container:
header {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
• always specify the non-browser specific modifier
last, so compliant browsers will use it.
38. And so much more!
• Box shadows (like text-shadow, but for block-level)
• Specify multiple backgrounds.
• Set transition times on “:hover”ed elements
• “Transform” objects (rotate, skew, resize)
39. Implementing CSS3 Today
• caniuse.com - compatibility check for HTML5,
CSS3 and more based on browser.
• HTML5 for Internet Explorer 6 to 8
<head<
<!-- [if lt IE9]>
<script src=”//html5shiv.googlecode.com/svn/trunk/html5.js”>
<![endif] -->
</head>
• Use a reset.css to start with a clean slate.
• Use Progressive Enhancement
40. Why use HTML5/CSS3?
• Less reliance on JavaScript.
• Less reliance on heavy images.
• Less reliance on 3rd party plugins.
• Better SEO
• Better UX for website visitors.
• They can do some really cool things.
41. Credits
• Joe Lewis: http://www.slideshare.net/sanbeiji/
introduction-to-html5-and-css3-revised
• Bruce Lawson and Remy Sharp: Introducing
HTML5 (2nd Edition)
• w3schools.com/html and w3schools.com/css
• HTML5doctor.com