Next Steps

An Easier Canvas to Draw On

October 22, 2010 @ 9:20am

Updated — November 4, 2010 @ 9:45pm

by Jeff Byrnes

Spotted this one courtesy of Think Vitamin, it’s called Ai->Canvas, and it’s an Illustrator plug-in that exports to an HTML5 canvas element. Very cool stuff.

Basically, you make your shapes in AI, export using the plug-in, and the necessary code to draw your shapes is generated. You can even do animation with it, which is definitely very cool.

For those who haven’t yet read up on it, the canvas element is a JavaScript-based method for drawing vector-based images, which is exactly what Illustrator outputs. So the two are a natural match.

If you’d like to read up more on canvas, the best resource I’ve found so far is Mark Pilgrim’s chapter on canvas at Dive Into HTML5.

Let us know if you build anything cool using AI->Canvas!

Tags

Adobe Illustrator, canvas, code, HTML5, javascript, Web Development

Comments

View & Post Comments

My new favorite: HTML5 Boilerplate

October 8, 2010 @ 12:31pm

Updated — November 4, 2010 @ 9:44pm

by Jeff Byrnes

So, this popped up on my radar a few months ago, and has been absolutely indispensable for building sites using HTML5. It’s called HTML5 Boilerplate.

It’s not a framework, which I’ve found can be constricting in how you build out a site, but instead gives you a great jumping off point. The site itself has a great list of why it’s cool, but here are my favorites:

An .htaccess file with caching, compression, font file types, redirects, & other tasty goodies baked right in
Conditional comments to modify the <body> class based on IE version (no more conditional stylesheets!)
A stylesheet w/ an HTML5-friendly reset/un-reset, clearfix, & other excellent pieces ready to go
Print styles inline in the main stylesheet, making for ready-to-go print styles without adding another HTTP request
Responsive markup for iOS and Android devices inline in the main stylesheet, again,
A plugins.js file with a nice open space for you to paste in all those lovely jQuery plugins you’re planning on using, instead of loading them each separately in their own file (again, reducing HTTP requests & speeding up page load)
IE6 pngfix ready to go

The index sets out some great precedents to follow, namely putting as much, if not all, of your JavaScript in the footer (even jQuery itself!), having a local fallback for your CDN-served JS library, but otherwise is a blank slate for you to work on.

I highly recommend giving it a try for your next project.

Tags

HTML5

Comments

View & Post Comments

HTML5 amazingness

September 24, 2010 @ 12:11pm

by Jeff Byrnes

So Microsoft has turned the publicity machine up to 11 for the IE9 beta release, and there’s some truly impressive pieces that have come out of it. Most notably, the Lost World’s Fairs! These are three graphically and programmatically impressive pieces, using all manner of techniques. The two most impressive to me, however, are the Atlantis World’s Fair and the El Dorado World’s Fair.

Both sites are long, vertical layouts, taking advantage of absolute, relative, and fixed positioning, Typekit for rich typography, Modernizr to make sure things play somewhat nicely in less capable browsers (IE7 & IE8, for example), and jQuery as their JavaScript library. Both also utilize Lettering.JS, a rather interesting piece of JavaScript they developed to enable, as they call it, “radical Web Typography.”

Lettering.JS takes whatever element you hand it, parses through it, and provides you with a series of individual <span> tags for each of the letters in your element. So, using their example, you can provide it with this:

<h1 class="fancy_title">Some Title</h1>

And you’ll receive this:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Seems like it just makes span-itis, right? Think again. Each of those spans can now be individually styled, which, when you look at their examples, suddenly grants you the ability to do some very impressive pieces of work. Yet, it leaves your markup nice, clean, and easy to maintain.

Lettering.JS goes two steps beyond just the letter-wrapping, offering the ability to create <span> tags that wrap whole words or even whole lines. The line wrapping takes its cues from <br /> tags, so this:

<p class="line_split">
    Line 1<br />
    Line 2<br />
    Line 3
</p>

Becomes this:

<p class="line_split">
  <span class="line1">Line 1</span>
  <span class="line2">Line 2</span>
  <span class="line3">Line 3</span>
</p>

Taking a look at Atlantis World’s Fair and El Dorado World’s Fair, you can see just how impressive this technique can truly be. The markup is super clean & relatively lightweight. To avoid a FOUT (Flash of Unstyled Text), they do have their JavaScript loading in the <head>, but even with that, things still load quite rapidly.

Seeing as IE9 can handle pages like these just as well as Firefox 3.6+ and Safari 5+, it seems like the web is about to get a whole lot nicer.

Tags

CSS3, HTML5, IE9, javascript, jQuery, typography

Comments

View & Post Comments

HTML5 video solutions

August 17, 2010 @ 3:33pm

Updated — August 20, 2010 @ 8:23am

by Jeff Byrnes

So everybody’s excited about HTML5, and the native media capabilities it brings; specifically the <video> tag. But at the moment, support is a bit tricky. To quickly reiterate:

Safari 3.0+ supports H.264 video & AAC audio in an MP4 container
Firefox 3.5+ supports Theora video & Vorbis audio in an Ogg container, or WebM (VP8 video & Vorbis audio in a Matroska container.)
Chrome 3.0+ supports both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container.
iOS & Android support H.264 & AAC audio in an MP4 container.
Opera 10.5+ supports Theora video & Vorbis audio in an Ogg container.
IE9 will support both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container, but IE8 and earlier have no support for HTML5 video, and must rely on Flash.

So, as you can see, things are all over the place. To properly implement HTML5 video, we need to supply two video files: one file encoded with H.264/AAC contained in an MP4, and another encoded with Theora/Vorbis contained in an Ogg. It would also be wise to create a WebM version of your video as well, to future-proof yourself for the day when Theora is deprecated completely.

Now, once you’ve got your video files encoded, the matter of embedding them correctly raises its ugly head. Thankfully, there are a few ready-to-go solutions for this.

First up is Video for Everybody, created by Kroc Camen. VfE serves up HTML5 video (MP4 and either Ogg or WebM) without JavaScript. This is the very first solution put forth for easy HTML5 video support, and, as Kroc himself writes, should in no way be considered a long-term solution. But he’s being very forward-looking, and not very generous with his work. The primary goal with this player is to use no JavaScript, and thus make it as widely compatible as possible (think RSS readers & other JS-disabled avenues.)

Next, we’ve got Video JS, which, true to its name, relies on JS. However, unlike VfE, the controls are consistent between platforms, which is definitely a marked improvement.

The third and, in my opinion, most promising ready-made solution for HTML5 video is SublimeVideo by the gurus over at Jilion. This is a player with not only a consistent UI, but tons of additional features, a full-window mode (and a full-screen version in Safari!), and it’s being neatly packaged up. Unlike the other two, however, it’s still in-progress, and it will only be free for non-commercial use.

So there you have it folks; some readymade HTML5 video solutions; enjoy!