LA.NET [EN]

HTML5Archive

Nov 05

Images are probably the most used media type in a page. Here are some simple suggestions for improving the performance of a page that uses images:

  • include images in its native size. Do not resize the image by using the width and height attributes of the img tag (or its equivalent CSS properties). If needed, the image should always be resized in a graphical editor before being used in the site. This will at least save your client’s browser some CPU time which might be better used in other important operations;
  • try to avoid making several image requests in a page. When possible, you should use image sprites because they will typically minimize the bandwidth for getting the images and you’ll only need one request to get all the images. Btw, it’s also a good idea to check the results of the sprites before publishing them (the current tools do a good job when the images share the same dimensions, but they tend to do a less than stellar job when you’re joining images of different sizes);
  • when available, go with the png format. A possible exception to this rule is showing images which are categorized as photos (in that case, jpeg might be a better option);
  • use the data URI protocol for small images. Notice that small is the key feature here. Getting the base 64 encoding string that represents the image can be done through one of the free tools available on the web (here’s one);
  • when possible, use svg instead of bitmap images. At the same time, try to avoid complex svg paths because they do take some time to process;

And that’s it for now. Stay tuned for more.

Nov 03

Do you want to help me with my next book?

Posted in Books, HTML5       Comments Off on Do you want to help me with my next book?

Yep, I’ve already decided: I’ll be writing an intro book on HTML 5 (in Portuguese, of course). YEs, I just couldn’t resist it: ,,) I think HTML 5 is such a cool platform that I could resist writing a small book about it. But this time, I want to try something new: I want to see if anyone is interested in helping me out with the technical review.

Before going on, a couple of words about this project: I intend to write an intro book about HTML 5 and I do intend to talk about most of the new features which are associated with the HTML 5 acronym (ex.: canvas, geo-location, worker threads, etc.). It won’t be a big book (I’ll be trying to hit the 200 page mark) and  the only thing you need to do is read and give me feedback about the draft. You do not have to be an expert to be a reviewer (but if you are, you’re welcome too Smile). Unfortunately, there’s no money and the only thing I can promise is a special thanks entry in the acknowledgements section and a free book delivered at your home when it gets released. Not sure if this is incentive enough, but you do get the chance to bash my writing and I’ll even thank you for that.

So, if you understand Portuguese and you’re interested in helping me, please send me an email to  labreu_at_gmail.com (just replace the _at_ with the traditional @) with the subject Livro HTML and a few lines telling me why you’re interested in being a reviewer. thank you!

Sep 15

The DOCTYPE element

Posted in HTML5       Comments Off on The DOCTYPE element

One of things I’ve been doing lately is reading the HTML 5 spec.  Before you tell me to sod off, don’t forger that HTML 5 is here…to stay, I’d say! Yes, there’s still no final version and the RC is only planed for 2012, but  the thing is that most browsers are implementing the current drafts right now.

I’m not sure if you recall the story (or should I say legend?) behind the use of DOCTYPE instructions in HTML pages. Here’s a quick recap: while developing IE 5 for Mac, MS noticed that its new version had improved its standard support so much that it broke most (if not all?) existing HTML 4 pages. Yes, version 5 was better than 4 and there was nothing wrong with (to be honest,  it got several things wrong, but being closer to the standard wasn’t one of them). Yes, the problem was really with the pages, which were written for a specific browser instead of the existing standard(remember the IE4/Netscape 4 browser war?).

We can all agree that MS couldn’t simply break all the existing pages and expect that its authors fixed them (that would surely had cost them the market leadership). So, they had a “great” idea: new pages should use a DOCTYPE directive as a way to indicate that they should be rendered according the spec. If IE didn’t find it in a page,it would assume the so called quirks mode and it would render the page just like IE 4 did. Well,guess what? All other major browsers reused the idea and the DOCTYPE hell was born. If you think I’m kidding, just take a look at Henri Sivonen article on the DOCTYPE instruction…

Anyway, here’s one of several DOCTYPEs which trigger the standard HTML 4 compliant mode in a modern browser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Wtf? Can any of you remember this? I can’t and I’m really scared when I look at Sivonen’s ”>table which shows the variety of DOCTYPEs instructions that might (or might not)  trigger the standard compliant mode in the existing browsers…

Thank god the guys behind HTML 5 had simplification as one of their objectives. Now, with HTML 5, you can request the HTML 5 standard mode with this simple DOCTYPE instruction:

<!DOCTYPE html>

How sweet is this? I say it’s great and I *can* really remember this and reuse it in other pages! Thanks guys, I guess I can reduce my daily intake of vitamins 🙂

And that’s it. Stay tuned for more.