Review: HTML5 for Web Designers by Jeremy Keith

Book review of HTML5 for Web Designers by Jeremy Keith

I’ve read three books by Jeremy Keith at this point, and I can’t say I’ve found another author who can teach you something and make you laugh quite as well as Keith can. HTML 5 for Web Designers is no different, I mean, he manages to work in a Hitler reference in the first sentence of this book.

HTML5 for Web Designers is the first in a new line of books from A Book Apart, the publishing company founded by Jeffrey Zeldman, Jason Santa Maria, and Mandy Brown. If you’re a web standards fanboy, like me, you’re already drooling. Once you take a gander at the lineup of authors A Book Apart has already, and plans to feature, you might just be pushed over the edge. In addition to Jeremy Keith, Dan Cederholm, Ethan Marcotte, Aarron Walter, Luke Wroblewski and more have all signed on to pen a book for the new publisher. Its like the super-hero lineup of The Avengers, but more geeky, if that’s possible.

So HTML5 for Web Designers is a short book, around 100 pages, (394 pages on my iPod Touch, for anyone counting), which means you can read it in an afternoon if you can concentrate on one thing for such an immense quantity of time, and for web designers like me, that’s exactly how much time I’d like to spend wrapping my head around HTML5 in order to decide what pieces of it I can use in my work today.

Keith wastes no time, giving us a very brief history of markup, and then jumping right in to the differences in HTML5′s DOCTYPE declaration, and how we reference external CSS and JS files. He gives working examples of using the new canvas, audio and video elements, some of which I’ve already been able to incorporate into my own work. He then spends a chapter on HTML5′s improvements to web forms, before diving into new elements offered by HTML5 like mark, time, meter, and progress, as well as the new structural elements like section, header, footer, aside, nav and article. The final chapter is spent analyzing how you can put HTML5 into practice today, and offers a few alternate approaches.

There it is, a very brief review for a very brief, but informative, book. Reading a short book like this on a mobile device is an absolute pleasure. I’ve read a few books of this size on my iPod Touch: Rework by the 37 Signals founders, Mobile Web Design by Cameron Moll, and now HTML5 for Web Designers by Jeremy Keith. I can say that this form factor works, and works very well for reading on mobile devices, and for books that don’t contain large amounts of code, this seems to be the format of choice for the future.

HTML5 for Web Designers comes highly rated if you’re a working web designer who’d rather spend quality time learning about HTML5′s goodies rather than tedious time picking through the official HTML5 spec.

You can purchase HTML5 for Web Designers over at A Book Apart.

Rating

  • Overall: 9 out of 10

Attached Images in WordPress using the_post_thumbnail

I’ve been working with WordPress for years now, and I’ve always struggled with an easy way to display an image that’s attached to a post in a list of posts. I didn’t say it wasn’t possible, just not easy. In the past I’ve used plugins, like "The Attached Image", or hacked my way around the issue. While these methods worked, they weren’t ideal, and any time you can avoid using plugins, the more healthy your WordPress site will be.

I was delighted then, to find that WordPress 2.9+ comes with a few new functions designed specifically for working with images attached to posts. Specifically, the_post_thumbnail works wonders. Here’s how it works:

Add Thumbnail Support

First, you have to activate post thumbnails for your theme. Open functions.php, and add this line somewhere near the top:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(224, 126, true);

The first line adds thumbnail support to your theme. The second line overrides the "thumbnail" settings in your WordPress admin panel. The three values passed here are image width, image height, and the crop flag. If you set the crop flag to true, WordPress will automatically re-crop images so they’re not distorted.

Next, open any of your existing posts. You’ll be happy to find a new box in the right column, titled "Featured Image". You can then use the standard WordPress media tool to either upload a new image, or select an image from your site’s Media Library. Once you’ve associated a featured image with a post, the next step is adding it to your templates.

Insert Thumbnails in Your Theme

Locate the loop where you’d like thumbnail images to appear, and insert the following code:

the_post_thumbnail();

This will insert a full image HTML element, with the option to pass an array to specify dynamically generated attributes, like the image’s alt or title text.

Have More than One Size? No Problem!

Say you want to feature two thumbnail sizes on your site. Switch back to functions.php and add this code, below the code we added earlier:

add_image_size('thumbnail-50', 50, 50);

This cuts an additional image at 50×50 every time an image is uploaded to the WP Media Library. You can add as many sizes as you’d like. You can then add this call in any of your templates:

the_post_thumbnail('thumbnail-50');

Here you’re just passing the name of the thumbnail you assigned in functions.php, so WordPress knows which thumbnail to use. When the_post_thumbnail() is called with no argument, it will use the default size originally set in set_post_thumbnail_size().

There’s a lot more you can do with these new functions, including setting up conditional PHP during loops to display a larger image first, with smaller images for the second and subsequent posts, for example. I encourage further reading at the WordPress codex:

WordPress Codes: the_post_thumbnail()

Access Remote XML via jQuery+AJAX with PHP as a Proxy

If you’ve ever had to work with XML from another domain, and only had JavaScript in your toolbox, you can feel my pain. Cross-domain XML has been the bane of my existence for many years now, when working on sites where there is no server-side scripting language available. jQuery has some great AJAX features, but you can’t make use of any of them if the file you’re trying to retrieve is an XML file on another domain. Until now. PHP is still required as part of this equation, but it acts as a web service, rather than residing on the server where your site lives.

Setting Up PHP as a Web Service

Thanks to a few new JSON functions added in PHP 5.2, we can build an XML to JSON web service in 4 lines of code. That’s right, 4 lines. Here it is, in all its glory:

$c = $_GET['car'];
$s = file_get_contents('http://www.example.com/' . $c . '.xml');
$a = json_decode(json_encode((array) simplexml_load_string($s)),1);
echo $_GET['callback'] . '(' . json_encode($a) . ');';

This code would reside on a server separate from the server where your site is hosted. And now the break down:

$c = $_GET['car'];

Get the value from the query string (browser’s url bar) with the name “car”, which we’ll see when we build the jQuery request, and save it in a variable named “$c”. Easy enough.

$s = file_get_contents('http://www.example.com/' . $c . '.xml');

Get the contents of a remote XML file, inserting the $car variable in the URL, and save in a variable named “$s” (for “string”).

$a = json_decode(json_encode((array) simplexml_load_string($s)),1);

Convert the XML string into a JavaScript array using PHP’s new json_decode and json_encode functions, and save this new array in a variable titled “$a”.

echo $_GET['callback'] . '(' . json_encode($a) . ');';

Here’s where the magic happens. We take that array, and convert it into JSON using PHP’s json_encode function. We also get the “callback” variable from the query string, which is required by jQuery, and append parentheses around the encoded JSON. The appended parentheses are also known as the “P” in JSONP, or “JSON with Padding”. What this does is essentially create a JavaScript function to pass back to your site that looks like this:

callback987986215(allyourJSONdata)

Setting Up jQuery to Call Your Web Service

Once you’ve got your PHP web service setup to convert XML to JSON, making the request in jQuery is pretty simple as well. Here’s how its done:

$(document).ready(function() {
	$.ajax({
		dataType: 'json',
	  	url: 'http://www.example2.com/my-web-service.php?car=mercedes&callback=?',
		success: function(data) {
			//parse your new JSON object here
		}
	});
});

This is a pretty standard jQuery AJAX request. The url paramater is the most important piece here. We’re looking for the JSON data on our server where our PHP service is hosted, and passing 2 variables:

  • car with a value of mercedes, and
  • callback with a value of ?

The variable of car=mercedes depends on the site where you’re pulling your XML from. This isn’t required, it just demonstrates how you could build a flexible web service to leverage for more than one external XML feed. The second variable callback=? is required by jQuery. The question mark is just there to append an additional name/value pair. jQuery will recognize the variable callback=? and replace the question mark with a randomly generated string of numbers. That’s why in your PHP web service, you get the callback variable, and send it back to jQuery as the function name. Its a sort of security measure.

That’s really it; from this point you have a jQuery object to work with containing all the data in the original XML file. You can see the jQuery object and all its pieces easily by setting a few breakpoints in Firebug and digging in.

If you want to get into the gritty details of how this works, like the coolness of how you can call functions in JavaScript by passing JSON as the argument, and how PHP can convert XML to an array and then to JSON, check out a few of the articles I referenced while building this:

Its like rejuvenation

I couldn’t resist the temptation to blatantly quote Howard Stern whack packer Blue Iris, as the phrase describes my recent adventures in web design perfectly. It had been way too long; way too long since I’d put myself back in student mode, way too long since I’d let HTML 5 and CSS 3 take shape without paying too much attention, and way too long since I’d posted here. So without further ado, lets take a look at what’s happened in web design over the past six months:

  1. Zeldman released Designing with Web Standards, 3rd Edition.
  2. HTML 5 and CSS 3 support gain traction.
  3. WordPress 3 set to drop any day now.
  4. The BIG Web Show launched.
  5. jQuery still rocks.

Lets take them one at a time:

1. Zeldman has released Designing with Web Standards, 3rd Edition.

The king is back. And this time he’s got a sidekick. That’s right, Jeffrey Zeldman released the 3rd edition of the book that changed the web industry, and he signed up Ethan Marcotte as his trusty co-author this time around. I just blazed through the book in a week, and I’m gearing up for a second run-through. Needless to say, not only will this book give you a rock-solid foundation for building modern web sites, its been updated with current technologies in mind, including new kids on the block, HTML 5 and CSS 3. Also, a special treat this time around is a companion volume, Developing with Web Standards, released simultaneously. Author John Alsopp picks up where Zeldman leaves off, providing the practical solutions to Zeldman’s powerful theory. I’m giving myself a bit of time to digest Designing with Web Standards prior to diving into Developing, but look for a full review of Designing to come over the next few weeks here at Withinsight. All I can say for now is, bravo.

2. HTML 5 and CSS 3 support gaining traction.

HTML 5 and CSS 3 not only offer all kinds of fun new goodies for web designers and developers alike, they’re now starting to gain real support. In addition to the support already provided for new HTML elements and CSS properties in browsers where you’d expect it like Firefox, Chrome and Safari, it appears that IE9 has completely jumped on the bleeding-edge standards wagon. While the finalized specs are still years off, if all major browsers support them with the release of the next version of IE, we’ll be able to start using them reliably very soon. Actually, you already can, but more on that in bullet 4. If IE9 really does support HTML 5 and CSS 3 as well or better than other modern browsers, this may just be the kick that IT departments and large corporations need to drop their “IE6 fo’ life” mantra. Exciting times indeed.

3. WordPress 3 is set to drop any day now.

WordPress 3 will support multi-site installations, meaning you can install WordPress once and create multiple blogs from the single installation. I’m so happy I think I just made a mess in my pants. This means no more upgrading multiple installations of WordPress with each release, centralized plugin management, and huge swaths of citizens rejoicing in the streets for weeks on end. Well, maybe not that last part, but this one feature alone would be enough for me for one upgrade. I’ve played with the beta 2 release a bit, and its super-simple to setup multiple blogs, and basically acts like WPMU did, where you can select subdomains or subdirectories for all your additional blogs. The potential is making me dizzy. Roo-haa.

4. The BIG Web Show launched.

Zeldman’s The BIG Web Show launched recently, and just concluded its third episode this past Thursday. If you like web design, pay attention. Episode 2 featured Jeremy Keith as a special guest, promoting his latest book, HTML 5 for Web Designers, which is slated to drop in June. Remember when I mentioned using HTML 5 and CSS 3 now above? Good! In The BIG Web Show, episode 2, Keith explains how you can start supporting the semantics of HTML 5 now by using standard class names for your divs that correspond to the HTML 5 elements. Not only does it make transitioning in a future redesign easier, it makes explaining your classes to other designers or developers 100 times easier when you hand off your work because you can just point them to the spec. Fantastic. Also, kind of a sub-bullet here, HTML 5 for Web Designers is the first book from A Book Apart publishing! I’m overjoyed with this new publishing company and will likely gobble up each and every offering they proffer from here until infinity.

5. jQuery still rocks.

I really only started working with jQuery personally about a year ago, and since then the library has really gone full-blown as the hands-down most popular JavaScript library in existence. Not only has it been included in the download of WordPress for a while now, its hosted by Google in its compressed form, which means if you link to the Google version and your site visitors already visited a site that also links to the Google version of jQuery, they don’t have to download it again. In addition, all the JavaScript examples in Designing with Web Standards, 3rd Edition are in jQuery, because it just makes JavaScript so much more concise and is easy for the uninitiated to pick up, having a syntax very similar to CSS selectors.

So that’s it for now, stay tuned for more frequent updates as I’m completely turned on by the impending release of WordPress 3 and impending web standards developments. This truly is an exciting time to be a web developer. Cheers!

How Fluid.app will Change the World

Are you the type of web surfer who has tons of tabs open all the time? Do you get frustrated when one web page causes all your other tabs to crash, or even just slows your productivity when you install a plugin and have to restart your browser?

How many of the tabs that you typically keep open all day are web apps? How many of them do you frequently revisit or refresh, constantly checking their status?

If you can identify with any of the questions above (and you have a Mac), get ready to experience a revolution. Fluid.app allows you to insert any web app URL, give it a title and icon, and voila, you’ve got an application (or SSB: Site Specific Browser) running like an application in OS X.

You can dock all your new web apps (I’ve got Yahoo Mail, Finance, Basecamp, Facebook and Google Reader setup here):

web-apps

You can also convert your SSB into a MenuExtra SSB, which exists only as an icon in your OS X Status Bar:

stats-bar

Fluid.app is based on Safari’s Webkit rendering engine, and all the SSB’s you create are true Cocoa OS X applications.

Once the coolness factor wears off, you may start to realize what this all means.  People have been talking for years about how once web apps get to the point where they’re as robust as desktop apps, we’d see a major paradigm shift in the way people use computers.  With this single application, you are now able to convert any web app you use into a desktop app.

While web apps still have a ways to go before they truly offer the same functionality as desktop apps, this is the first major move in that direction.

Grab Fluid.app today.  Its changed the way I use my Mac in less than 24 hours since I got it.

Review: ProBlogger by Darren Rowse and Chris Garrett

Book review of ProBlogger by Darren Rowse and Chris Garrett

ProBlogger by Darren Rowse and Chris Garrett

While not a book covering strictly web design or development, ProBlogger is relevant in many ways.  Authors Darren Rowse and Chris Garrett walk the reader through the very basics of blogging, right through more advanced topics like blog promotion, advertising and blog “flipping”, the digital version of TLC’s Flip that House.  The fact that they detail the various blog publishing platforms, but express their tendency to lean toward WordPress for all their personal sites was appealing to me.  Also, just about every designer or developer comes across the issues of having to drive traffic, monetize pages, and analyze site performance at one point or another in their career.

I took some rather lengthy notes while reading the book, to make implementation on my personal sites a bit easier after completion of the book, and I’ll share some of those notes with you here.

1. Websites You Should Investigate

These are a few tools that I realized I should be using while reading the book.  These cover the main bases that every web site should be using to monitor or enhance their site:

  • Alexa – for researching hot topics and competitor sites
  • Technorati – add your blogs to the Technorati index, and monitor popular tags
  • Quantcast – track your site’s performance and compare to competitor site performance
  • Google Webmaster Tools – discover keywords that people are already using to find your site through Google

2. Tools to Target Hot Topics

Staying on top of industry news is an important task for a lot of web sites, from newspaper sites, to sporting sites, to the latest Hollywood gossip.  Here are some of the best:

3. Content Tips

For bloggers that are just starting out, Rowse and Garrett offer a fantastic intro to formatting blog posts so that they will rank well in search engines.  This happens to coincide with HTML standards and best practices, so this section is doubly worth your time:

  • Post regularly (1x/day or 1x/week)
  • Titles are important!
  • Vary long posts (reviews), with shorter posts (news)
  • Use h2 and h3 tags
  • Number paragraphs (helps with web audiences that typically scan pages)
  • Break longer posts into series
  • Write your entire post first, then go back and edit

4. Types of Blog Posts

ProBlogger contains a wealth of ideas.  Here are some of their recommendations for varying the style of your posts, so as not to become repetitive and stale:

  • Tutorials
  • Reviews
  • Lists
  • Profiles (pick an idol of yours or industry mogul and write a review of their life)
  • Links (microblogging)
  • Rants
  • Memes (idea virus, further explanation)

5. Link Bait Ideas

Further depth on content ideas is detailed in ProBlogger, and the issue of link baiting is discussed.  My thoughts on link baiting are that if the content is original, helpful, or insightful, its a good practice.  The content really has to come first.  Here are some ideas that you could potentially build content around:

  • Tools
  • Quizzes
  • Competitions
  • Awards
  • Freebies
  • Interviews

6. Blog Valuation Factors

Rowse and Garrett even get into the topic of buying existing blogs, and “flipping” them, or turning around and selling them for a profit.  The main benefit of blog flipping is that domain age is a major factor in Google’s evaluation of web sites.  Most of the most popular blog sites on Technorati have a domain age of three years or more.  If you purchase an existing domain, with an existing audience, you skip the work involved in starting from scratch.  Here are some factors to use while evaluating a blog purchase or sale:

  • Audience
  • Content
  • Search Rankings
  • Traffic
  • Inbound Links
  • Brand
  • Profit
  • Design
  • Domain

7. Blog Promotion & Marketing

After you’ve got your blog up and running, and feel that your content is good enough and regular enough to warrant an audience, you’ll want to promote or market it in some fashion.  The Field of Dreams mentality does not apply in the blogosphere.  Here are some of the promotion ideas I found in ProBlogger:

  • Build “content magnets”
  • Comment on other niche blogs (1x/day)
  • Encourage comments through questions in your posts
  • Add “blog carnival” posts that link to many other industry/niche blogs
  • Promote subscription via RSS
  • Join a blogging community or forum in your industry, and participate regularly
  • Request links from relevant industry blogs

I’m not going to get into further detail on any of the ideas here, to do that you’ll have to purchase ProBlogger.  I’ve only listed a sampling of the ideas Rowse and Garrett reveal in their book.  There are many more topics and ideas within, as well as much more detail and explanation.

Overall ProBlogger is a invaluable book for anyone with their own website.  Its an idea starter, and that’s a huge part of running your own website.  The other is finding time to actually do everything.  Then again, that’s where Brickwork could help you out.

You can purchase ProBlogger over at Amazon.com.

Rating

  • Overall: 9 out of 10

Blogs with Balls, June 13, NYC

I was in New York on June 13 with NESN, visiting the Blogs With Balls conference, which is a conference for people involved in both blogging and sports.  The conference is still in its infancy, with an attendance of around 250, and it was held in the basement of Stout, which wasn’t all bad, since the Guinness 250 lunch started around 11:30. Rockin’ good times.

The conference was an eclectic mix ranging from CEO’s of blog networks like YardBarker and SBNation to individual bloggers who have taken the leap from corporate life to the risky world of independent blogging.  Conference topics ranged from leveraging social media and working with content networks, to getting down to business with making money with your blog.  I especially enjoyed Kathleen Hessert‘s discussion about how Sports Media Challenge proposed Twitter to Shaq, and not only did he embrace the technology, but his Tweets now have a circulation larger than the daily circulation of the New York Times.  Simply astounding.

Three Things You Need to Know

My largest takeaways from the conference:

  • Become a portal.  If your site can be the start of a discussion, you can increase users and traffic exponentially.
  • Join a blog network.  If you haven’t considered it, joining a blog network can be a tremendous benefit to your traffic.  I’m going to get into more detail on this in a future post (I’m reading “ProBlogger” right now…)
  • Integrate related industry content gracefully.

Become a Content Ninja

I’d like to get into a bit more detail on that last one.  It seems to me that there are a lot of large blog sites out there that do one of the two following items, and do them well, and lead their category or niche because of it:

  1. Offer original content.
  2. Offer aggregate content.

It also seems that the tendency of companies that already do one is to stick with that one, and not designate much focus to the other.  What I heard resoundingly at this conference is that if you can master both, and do it with a little flair, you can likely top your niche or category.  The trick is finding enough original content to come up with, and being tech-savvy enough to incorporate the aggregate content.  Of course, there are new web services like Yahoo! Pipes that are making this easier to accomplish practically daily.

Definitely Check it Out

Overall, this was an extremely beneficial experience, and I would recommend it to anyone in the New York area who has an interest in sports on the web.  Definitely check it out next time around.  They’re supposedly going to post video from the show on the BWB site, so keep an eye on it over the coming weeks.