In Case You Missed It:

Posted on by Rob Larsen

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ’em out.

How To Make a Web Site the Modern Way. Part 10: Forms

Posted on by Rob Larsen

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:


<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">

  <fieldset>

    <legend>Contact Info:</legend>
    <p>

      <label for="author">Name (required)</label>

      <input type="text" name="author" id="author" value="" tabindex="1" />
    </p>        
    <p>

      <label for="email">Mail (will not be published)(required)</label>

      <input type="email" name="email" id="email" value="" tabindex="2" />
    </p>
    <p>

      <label for="url">Website</label>

      <input type="url" name="url" id="url" value="" tabindex="3" />
    </p>

  </fieldset>
  <p>

    <label for="comment">Comments</label>

    <textarea name="comment" tabindex="4"></textarea>
  </p>
  <div class="button">

    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />  
  </div>

</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Continue reading “How To Make a Web Site the Modern Way. Part 10: Forms” →

How To Make a Web Site the Modern Way. Part 9: Tag (and Attribute) Soup

Posted on by Rob Larsen

In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.

Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.

Ignore me.

On with the show:

B, Strong, Em, I

From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:

The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.

Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.

Fast forward to 2000. The W3C publishes the Web Content Accessibility Guidelines. In the section on emphasis they state:

Checkpoints in this section:

* 3.3 Use style sheets to control layout and presentation. [Priority 2]

The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)

This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.

And that’s how we got to strong and em.

And now you know.

Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks.
Continue reading “How To Make a Web Site the Modern Way. Part 9: Tag (and Attribute) Soup” →

How To Make a Web Site the Modern Way. Part 8: Tables!

Posted on by Rob Larsen

Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.

A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.

Yes! We’re winning.

If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.

Anyway, tables.

Tables

Tables are for Tabular Data

Here’s a table full of data.

Continue reading “How To Make a Web Site the Modern Way. Part 8: Tables!” →

You Probably Didn’t Notice – This Site is Now HTML5

Posted on by Rob Larsen

I did the conversion last week. As I’ve talked about blogs and HTML5 are so natural the whole conversion probably took no more than 8 hours. Of course, that 8 hours was spread out over a few days. Which is one of the big reasons I didn’t post anything last week. I was busy getting this site moved into the future.

I’ve now got 3 sites running on the shiny new futurespec and I can now say I officially like the new semantic elements. I also feel like I’m getting a good handle on them.
Continue reading “You Probably Didn’t Notice – This Site is Now HTML5” →