Categories
Programming & Web Development

HTML5 boilerplate for sectioning tags

I’ve seen a lot of confusion on the use of the new HTML5 sectioning tags <article> <section>, <nav>, <aside> and the role left for the old <div> element we used often in previous versions of HTML specifications.

After reviewing the documentation and consulting several examples of usage, a basic practical skeleton for an HTML5 document should look something like this:

<!DOCTYPE html>
<meta content="utf-8">
<title>Your page title</title>
<div id="wrap">
  <section id="main">
    <header>
      <h1>My page title</h1>
      <nav>
        <ul>
          <li>Website main section 1</li>
          <li>Website main section 2</li>
          <li>Website main section 3</li>
        </ul>
      </nav>
    </header>
    <article>
      <header>
        <h1>My content piece title</h1>
      <header>
        <p>My content text</p>
    </article>
    <article>
      <header>
        <h1>My content piece title</h1>
      </header>
      <p>My content text</p>
    </article>
  </section> <!-- closing #main -->
  <aside>
    <p>Sidebar content</p>
  </aside>
</div> <!-- closing #wrap -->
<footer>
  <p>This is my footer</p>
</footer>

Here’s a colored chart to understand better the nesting of the elements:

HTML5 basic sectioning structure

The <div> element has no meaning in semantic web development practices. It should only be used for styling purposes. In my example, I used it as a wrapper for centering the main content with CSS styling. I could have used <section>, but semantically there was no point on having a section that has nothing else but another section immediately inside it. I only need to wrap all the content so I can style the margins and colors of the background. So I use <div> when I need to wrap some content just for presentation purposes.

I always struggle when deciding to use <section> or <article> for a particular piece of content, or how to layout the document’s structure.

The W3C defines the <article> element as:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

For the <section> element, the specification says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So in that sense, you can nest <article> in <section> or <article> in <article> and <section> in <article>. Yes, I know, this is still confusing.

On my example structure, I put a main <section> with the ID of “main”. This means I have a “main” section on my page, with a list of articles. Each article has its own heading and content. Some articles might have subsections, hence having <section> nested in <article>.

For the case of nesting <article> in <article>, the W3C exemplifies with a blog post and it’s comments. Since the comments are related to the article, they must be inside the tag, but each comment is an independent piece of content that can be individually distributed (direct link to a comment).

So in that way, the HTML structure will look like this:

<article>
  <header>
    <h1>My blog post title</h1>
  </header>
    <p> my post content </p>
  <section id="comments">
    <article id="comment-1">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
    <article id="comment-2">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
  </section>
</article>

Here’s the colored chart:

HTML5 nested article tag

I hope this give a clearer view on how to use the sectioning elements in HTML5 and this example code serves as a quick boilerplate for your projects.

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

CSS3 columns in Internet Explorer and other unsupported browsers

CSS3 Columns

Recently I’ve been working on a project for a client that makes use of CSS3 columns in its layout design. The problem with CSS3 columns is that it’s not supported by any stable version of Internet Explorer so far (surprised? no? good!). At the time of this writing IE9 is the latest version.

Luckily there’s hope. The CSS3 Multi-column script helps render columns in browsers that do not have this capability. All you need to do is download the file and add it to your HTML after all your stylesheet declarations. It will read all your CSS3 column declarations and render the content accordingly.

The script uses some crossdomain ajax calls to work its magic, but IE8 does things differently. I’ve patched the library with the fixes needed for it to work correctly in IE8.

Download the patched CSS3 Multi-column script.

Thanks to Tobin Titus, Internet Explorer Performance Manager, who helped me track the bug down.

Categories
Bookmarks Programming & Web Development

From my reading links: HTML5 forms and Django, Google API playground and Python development tips

  • Making Forms fabulous with html5 Great introduction to the new HTML5 form input types and what you can do with them.
  • HTML5 – Example Form validation and styling Form elements With the new HTML5 form input types and CSS3 properties, form validation is very quick and easy, as well as nice form element presentation.
  • Head JS A very interesting utility that will load all your js scripts (jquery, google analytics, etc) in parallel so page load times get shorter, plus a lot of other nice features like new HTML5 elements styling in browsers that don’t yet support them like some versions of Internet Explorer.
  • Google APIs code playgroud I didn’t know you could play with all the Google APIs in a single webpage, testing your code as your write it.
  • GeoDjango and google maps An interesting read if you’re trying to integrate Google Maps with Django
  • HTML5 and Django form inputs How to render the new HTML5 input types with Django form classes. It doesn’t require much, really easy and fast.
  • Emacs as Python IDE A bunch of tips to have a good Emacs Python development environment. I personally don’t prefer IDEs, so I don’t use ECB but the rest is very useful.
  • Setting up a Python Environment Good advice for those coming from a PHP world and are getting started on Python development. I didn’t know about virtualenv until I had to deploy my first Django app on a shared host web server. Then it all made sense.
Categories
Programming & Web Development Tutorials & Tips

Animate your webpage fast and easy with Facebook Animation Library

Today Facebook released an animation javascript library that modifies CSS properties on the fly. You can download it and use it on your webpages.

Its a very light (10.4 Kb compressed version) animation library and its very easy to use. You can chain events or animations to create the effects you want. You can download it on the facebook developer’s resources page.

A typical effect used in websites is the flash effect to alert or notify of some action.

Here’s all you need to accomplish that:


<a href="#" onclick="Animation(this).to('background', '#fff').from('background', '#ffff4b').go(); return false;">Flash</a>

The syntax is easy. All you need to do is call Animation(this) on your element and then specify what CSS property you want to change on the .to and .from methods. In this case: go from yellow background to white background. The last .go() method tells Animation to run the specified animation.

You can also mix animations or transitions instead of playing one animation after another. For this you have to use .checkpoint() function and .duration() to specify how long the transition will take (in milliseconds). The checkpoints indicate when the second animation will start playing, allowing you to tweak the default behavior of playing one animation after the other one stopped.

So you can basically change anything: colors, widths, lengths, margins, positions, etc. For complete documentation of the library, go to the Facebook Developers Wiki. Its worth checking out.

Its a very simple syntax, with familiar terms (CSS properties) and very lightweight compared to using Prototype and Scriptaculous. Maybe Scriptaulous syntax for doing some animations is simpler or shorter, but you must load Prototype in order to use it, so that makes it heavier. Plus, you need to know the Scriptaculous effects functions and sometimes they are not that tweakable.

Its also nice to see Facebook releasing some open source code (BSD licensed) and contributing back.