Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 29 2010


Two good books for learning JavaScript, jQuery

Since about March this year, I’ve been searching for a few good, clear books to recommend to journalists and students who are interested in learning to use jQuery — with an eye toward getting ready for HTML5.

You could just leap straight into jQuery, but I think it would make more sense to get a handle on how JavaScript works — then go on to learn about jQuery. (See my earlier post Looking at jQuery for visual journalism for a gentle introduction to why jQuery is important.)

The JavaScript Pocket Guide (pub. April 2010), by Lenny Burdette, provides a straight-to-the-point introduction to JavaScript, and I found it surprisingly readable (and skim-able too). Under 300 pages, it does not try to be comprehensive, but also it does not shy away from the higher-level and more difficult things JavaScript can do. I love it that the author makes it easy for  you to play along using Firebug, a free plug-in for the Firefox Web browser.

You do not need access to a Web server (except for a few examples in the final chapters) to use JavaScript. For that reason especially, I think JavaScript is a good language to use for teaching journalists the basics of programming, such as variables, loops, and functions. I haven’t tested this book with students yet, but I feel really confident that it’s going to be more usable with beginners than a lot of the other books I’ve looked at.

jQuery: Novice to Ninja (pub. February 2010), by Earle Castledine and Craig Sharkie, was recommended to one of my students, and like the JavaScript book above, it is surprisingly reader-friendly without being lightweight or “dummy” oriented. It uses jQuery version 1.4 (the latest one).

Please note, these books assume that the reader has at least a basic knowledge of how HTML and CSS work to make Web pages appear and function as we want them to. See this page for some suggestions on how to get started if you are new to using HTML or CSS.

Also, thanks to a tip from a student, I recently learned that some public libraries offer free access to their patrons to Safari Books Online — and both of these books are available through Safari! So, log in to your local public library’s Web site and look for a link to “downloadable media” or something similar.

For related posts, check out the “code” category here in this blog.

May 25 2010


Tips for HTML5, part 5: A closer look at selected tags

Most journalism students need to know only the bare minimum about HTML and how it works. For years I have been saying they need to know about 10 basic tags and not much more.

That’s probably going to change with HTML5.

This elegant illustration by Derek Bender (from his presentation The Future of the Web: HTML5) sums up the five new tags that just might make it easier to teach HTML (and CSS) to journalism students, even though it means learning more tags.

It’s nice that three of the six tags adopted the words that most of us already use to name our CSS divs for these page elements today: header, footer, nav. The aside is what we would normally call a sidebar, or in some cases, a rail. There can be more than one article on a page, as well as more than one section.

I think Bender’s illustration portrays section correctly — see this explanation about section at the HTML5 Doctor site. One rule is that you should not have a section unless it has a unique <h> inside it. (I’ll bet we will have to be very clear in teaching the difference between <header> and the familiar <h> tags!)

Oli Studholme also has a nice discussion about the difference between article and section.

We can style these HTML5 tags any way we like, with CSS. We can assign IDs or classes to them. And we can still use the <div> tag — that has not changed. We will simply use fewer DIVs in our style sheets once we start using these new tags.

May 21 2010


Tips for HTML5, part 3: Tags we won’t see anymore

Continuing with this series of brief posts about the future of HTML (and what our students will need to know about it), I’m going to mention a few of the HTML tags that will be going away — no longer supported — with HTML5.

For a very attractive and clearly organized “cheat sheet” for HTML5 tags, see this one by Antonio Lupetti.


No big loss — most people have not been using any of those tags for several years already.

Odd that <b> (bold) and <i> (italic) are staying while <u> (underline) is going. CSS is a better choice for all of these. The same goes for <s> (strike-through).

Instead of <tt>, most people would use <pre> or <code> (both of which are staying).

Although all the old frames tags are going, the newer <iframe> is staying. (If you’re not familiar with how to use it, see the W3schools page about the <iframe> tag.)

For related posts, check out the “code” category here in this blog.

May 19 2010


Video for HTML5: The latest update

On2’s VP8 video codec “is now fully open and completely royalty-free,” thanks to Google (source: DZone).

This is a big deal not only because Apple — in its full-out war against Adobe — has declared Flash video to be a non-starter and crowned H.264 the online-video heir apparent, but also because H.264 is no more open, really, than Flash (FLV and F4V) video.

I wrote about this video war in April: What you should know about HTML5 today. What’s at stake is the format for all video on the Web — because, as Lawrence Lessig wrote in 1999, “Code is law.”

When HTML5 is fully baked and comes out of the oven, we will be stuck with whatever video standard(s) has been baked in.

I don’t want us to be stuck with a proprietary standard controlled by Apple, Adobe, or Microsoft — or Google.

Google completed its acquisition of On2 Technologies, Inc., in February 2010. While most people have never heard of On2 (which has a pretty weird name, it must be said), its video codecs were part of Sorenson Squeeze back when I first started struggling with Web video several years ago, and they were often preferable to the other options available because they gave very good results — always a trade-off between file size and audio-visual quality in video.

Google, along with Mozilla and Opera, is part of the WebM Project, “dedicated to developing a high-quality, open video format for the web that is freely available to everyone.” Although they haven’t run around screaming about it, they are no more eager to accept the status quo of Flash video for the future Web than is Apple.

If Adobe were really smart, they would have open sourced (fully) not only their video formats but also the SWF format. Like, a month ago. I kept waiting for them to do it. But no — just more posturing, like Apple, like dictators of small, violent, self-absorbed countries.

In this game, it seems to me that Apple and Adobe are equally pigheaded and old school. Meanwhile, Google — while surely not a mild-mannered philanthropist in its corporate heart of hearts — has done what one of them should have done, instead of pouring gasoline on the fire.

Is this over yet? I’m sure it is not. But Google’s (apparent) commitment to open standards is better for all of us than a proprietary lock-out (or locked-down) approach.

May 12 2010


Tips for HTML5, part 2

Continuing on with the meaty third chapter of Dive into HTML5, I’m delighted to see that we can still represent the structure of a page to HTML beginners this way:

<!-- meta data -->
<!-- document content -->

This essential structure will not change with HTML5.

There are two important bits (one in the HTML tag, and the other within the HEAD) that we need to include.

(1) Inside the HTML tag:

<html lang=”en”>

Many of us have been including a bunch of other stuff in there, as called for by XHTML 1.0. No more! That extra stuff is not to be included for HTML5.

If your language is not English, you’ll use something other than “en” (look it up).

(2) Enclosed by the HEAD tags:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Many of us have been including this for a long time, but I find a lot of people still not using the UTF-8 character set. (They are using the older ISO-8859-1, which is no longer correct.)

Alternatively, you could use this shorter version for HTML5:

<meta charset=”utf-8″ />


For related posts, check out the “code” category here in this blog.

May 11 2010


Tips for HTML5, part 1

We’re in a transition time, and students need to understand that.

This begins a new series of short posts, which will appear on no set or special schedule. The intention is to record discrete items of information that we will need to teach journalism students about the new developments coming out of W3C and WHATWG and anywhere else we need to worry about.

Starting at the beginning — literally, the beginning of every HTML document — we need a DOCTYPE. This is not new, but it seems to me that a lot of people who learned to write HTML “from scratch” never learned this.

Your doctype needs to be on the first line of your HTML file. If there’s anything else before it — even a single blank line — then browsers will treat your page as if it has no doctype at all. That means they will render your page in “quirks mode.” This can be a very difficult error to catch. It is made even worse by the fact that, in certain server-side languages, it’s easy to add a blank line and not at all clear how to get rid of it.

That’s from the excellent online book Dive into HTML5, by Mark Pilgrim. The chapter that discusses doctypes is No. 3 What Does It All Mean? (He explains “quirks mode,” in case you’re not familiar with that. He explains it in quite an amusing way, in fact!)

So, one of the neat things about HTML5 is, instead of the freakishly long and awkward doctype we have been using for several years now, with HTML5 it’s only this:

<!DOCTYPE html>


For related posts, check out the “code” category here in this blog.

December 10 2009


DocumentCloud Releases More Code, Continues to Attract Developer Interest

A public beta of DocumentCloud, one that journalists can kick the wheels on and upload documents to, won't be ready for a few more months, but work is continuing apace in our corner of the cloud. We've released a handful of code that comprises some of the components of our big picture, and it is great to see how well received our work has been by the Ruby and JavaScript communities. Last week we hit a little milestone: more than 1,000 developers are watching DocumentCloud projects on Git Hub, which is pretty cool. The advantage for us is that many of these developers are actually trying out our software releases and helping us make them stronger.

Gregg Pollack included a great review of CloudCrowd in a recent episode of his show, Scaling Rails. CloudCrowd will still be Greek to the truly non-technical readers out there, but if you have enough of a handle on software development to wish you understood"scaling" better, his review just might help.

Our latest release, Docsplit, is a command-line utility and Ruby library for splitting documents into distinct components such as raw text (which you need for searches), page thumbnails, and document metadata (details like the document's author or the number of pages it contains). Splitting documents apart is a pretty key functionality for DocumentCloud: everything else DocumentCloud does depends on the presence of one or another of these pieces. Docsplit got a lot of attention when we released it on Monday -- and we're all looking forward to seeing what other folks do with it.

July 07 2008


SoundManager 2: Javascript Sound for the Web

SoundManager 2 is an attempt at providing the sound API which Javascript has been missing. It's a Javascript library which wraps and extends Flash's sound capabilities, bringing cross-platform audio functionality to Javascript.
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!