HTML5 + WordPress Resource Links From my WordCamp Boston Presentation

by Rob Larsen

Me, PResenting at WordCamp Boston

Owing to the contrast on the A/V system, my last slide was illegible, so here are all the links that folks couldn’t see.

The presentation itself:
HTML5 + WordPress

And the resource links:

The working group
http://www.whatwg.org/
Mark Pilgrim’s HTML5 book
Dive into HTML5
The Modernizr library
Modernizr
The outliner
http://gsnedders.html5.org/outliner/
The post talking about Kubrick
I’m Messing Around With an HTML5 Version of the Default WordPress Theme

My other sites:
DrunkenFist.com (art portfolio)
@robreact

I’ll have video of the presentation up shortly (I hope!)

I’m Messing Around With an HTML5 Version of the Default WordPress Theme

by Rob Larsen

WordCamp Boston is less than a week away, and as part of my presentation I wanted to show the new elements in an environment that basically everyone that works on WordPress sites will recognize- the default theme. To that end, I mocked up a functioning HTML5ized version of the home page to use as an example. That was both easy and fun.
Read the rest of this entry »

In Case You Missed It…

by Rob Larsen

Mark Pilgrim published his chapter on the new HTML5 form input types:

A Form of Madness

Everybody knows about web forms, right? Make a <form>, a few <input type=”text”> elements, maybe an <input type=”password”>, finish it off with an <input type=”submit”> button, and you’re done.

You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now — without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.

We used the basic ones on the AWiderNet redesign. Quick review: I like them (by basic I mean email, url, etc) as they parallel the things I’ve been doing all along. Beyond the possible user agent enhancements, I’m happy to be able to target CSS using attribute selectors instead of meaningless* classes.

I’m really excited for support for the “fancier” new types. There’s a lot of code overhead out there in the wild for things like sliders and date pickers. Having native controls for very common elements is a big deal.

*Meaningless in that User Agents can’t infer anything from class="email". Clearly humans editing the code can guess what class="email" is all about…

A New Site I Made is Live- AWiderNet.com (HTML5 + CSS3 + WordPress)

by Rob Larsen

We relaunched the Cramer blog today. It’s a soft launch. We’re hoping to shake out any kinks over the quiet time around the holiday. I did the initial HTML5/CSS3 templates and then shepherded the project for a couple of weeks* until I was freed up enough this past week to get the thing out the door.
Read the rest of this entry »

I’m Presenting at WordCamp Boston January 23, 2010

by Rob Larsen

I’m excited to announce that I’m going to be speaking at the 1st WordCamp Boston. I’ll be talking about the marriage of two of my favorite technologies: WordPress and HTML5.

The Future is Now: WP Themes With HTML 5

Excited about HTML5? Wish you could start using the new semantic elements right now? You can. In this presentation Rob Larsen will show you how to create cross-browser, HTML5 enhanced WordPress themes using nothing more than a little extra JavaScript, basic WordPress knowledge and some knowledge of the new elements.

Check out the rest of the program.

It takes place January 23, 2010 and is being held at:

Microsoft New England Research and Development Center
1 Memorial Drive
Cambridge, MA 02142

Thanks once again to Microsoft for hosting pretty much every technology group in the area :)

Have I Mentioned That The HTML5 DOCTYPE Makes Me Smile?

by Rob Larsen

It does.

Why?

Well, I’ve been doing this job, at a very high level, for a long time and I couldn’t code this by hand if you paid me $50,000:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I understand it, and I can’t remember it. That’s basically gibberish to most people. There’s no way anyone is going to remember that string.

This? This I can code by hand and pretty much anyone can “get” what it’s doing:

<!DOCTYPE html >

I do wonder if there’s been any backlash against that? I’ve seen a lot of backlash against HTML5 over the past year, but I can’t really remember anyone complaining about the doctype declaration.

I bet someone hates it.

Not me :)

Default HTML Rendering in 81 Browsers Visualized

by Rob Larsen

The following is a test of this page of unstyled, generic markup performed in 81 browsers. I used browsercam to take screen captures, then imported the resulting captures into Photoshop. In Photoshop, I zeroed out the top/left coordinates of the HTML canvas (not to be confused with the Canvas element,) and then set the Opacity on each layer to 10%. For the second visualization I simply turned on the difference blending mode at full opacity.

Why? I thought it was an interesting illustration of why we use reset style sheets. There’s almost no consistency in the way these browsers handle even the most generic markup.

Here are the two visualizations:
Read the rest of this entry »

Sample HTML Markup Used To Style Common Text Elements

by Rob Larsen

The following is what we use to lay down the most common text styles. This is honestly more than we usually need, but it helps ensure we don’t miss anything when real content is flowed into a design. I thought it might be useful for folks to use in their own projects.

I’ve got a live version here on the site.
Read the rest of this entry »