Archive for the ‘HTML/CSS’ category

Designing websites is my passion - you should've figured that out already. Here you can find all posts I've written on this topic.

jQuery

Friday, July 20th, 2007

I’ve always been using script.aculo.us to handle all the fancy JavaScript and AJAX stuff on my site. Recently, though, I noticed that regua.biz takes a terrible lot of time to load, due to the size of the framework. I’ve tried jQuery and it works nice for me (so far).

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

 

jQuery.com

 

jQuery code is easier to write than script.aculo.us’ in my opinion. In the latter, the dollar sign ($) was just a shortcut to getElementById function, whereas in jQuery the dollar function works like a CSS selector - you write $('#div') to select the element with ‘div’ id, $('div') to select all div elements, and $('div li') to get all the li elements inside a div or even $('a[@href*=/content/gallery]') to select all links containing “/content/gallery” in their href attribute. I really like the idea. Writing any code is easier when you don’t have to use functions like getElementsByClassName() or getElementById() (who’s invented such long names and what for?), not to mention implementing the CSS-like selectors in JavaScript.

The jQuery JavaScript library contains the following features:

  • DOM traversal and modification (including support for CSS 1-3 and basic XPath)
  • Events
  • Effects and animations
  • Ajax
  • Extensibility

Wikipedia

jQuery allows you to use brilliant event-related function, like $(document).ready() which is a better form of window.onload (the latter waits until all images have been loaded, the former doesn’t). Also, it solves the old problem of altering CSS properties in JavaScript by giving you a great css() method. For instance, $("p").css("color","#f00"); would change the font color in all paragraphs to red. As simple as it is.

The effects, which are kind of a standard among JS libraries nowadays, are done good (just good) in jQuery. There’s nothing wrong with them, but there’s nothing unusual either. I have to admit that script.aculo.us has a bigger collection of effects available, but I still prefer to get a little bit less animations than use a 60 kB framework.

Among other jQuery’s advantages are a great co-operation with other libraries (prototype, YUI), great DOM traversing and manipulation, plugin support… oh, just try it yourself, I assure you it’s great fun to use it on your website. You can admire jQuery in use here, in the site preferences settings (accessible via the main menu) or in the AJAX-based comment posting.

Down with Transitional!

Wednesday, April 11th, 2007

When writing websites, either in HTML or XHTML, you must have met with such a term as DOCTYPE. It declares the document type - which you can choose out of three for HTML 4.01 and three for XHTML 1.0: Strict, Transitional and Frameset. The first is “the correct one” - thanks to which the Web can continue developing, and new standards, like XHTML 2.0, come into being. The second, Transitional, is to help people who aren’t familiar with new Web standards and allow them to move smoothly from the languages which they had used before. Frameset doesn’t bother us at all.

W3C, when it’s created new standards, has wanted to make websites’ codes clean. But there are lots of of unnecessary elements which just clutters the Internet, such as <font>. They are responsible for what the user sees on his screen. But isn’t it CSS to make up the visual part of website? Yes, that’s right. That’s why DOCTYPE Strict has been invented - to separate a website’s code from the elements which make it look as it’s supposed to look like.

If you think that you make the Internet better by using <br /> instead of <br> - you’re wrong. It isn’t XHTML to be the standard of the future, it is DOCTYPE Strict. Thanks to it the websites will be displayed in the same way in all browsers, CSS will be able to develop and W3C to repair all the bad things that the table-<font>-webmasters have done.

To let the DTD Strict work properly, some of HTML language elements had to be permanently removed - so that webmasters had to use style sheets rather than HTML. Here’s the list of them:

  • basefont
  • font
  • center
  • applet
  • dir
  • menu
  • isindex
  • s
  • strike
  • u

And here’s a list of attributes that’ve been removed:

  • align
  • bgcolor
  • border
  • clear
  • color
  • compact
  • face
  • height
  • hspace
  • type
  • vspace

Moreover, the target attribute has also been removed - so links aren’t allowed to be opened in new windows now. Why? Because the “back” browser button doesn’t work in these cases, and modern browsers can open new links in tabs instead of windows, so why would people make them open links in a particular way rather them let them choose?

Separating the presentation part of the website from the code one using CSS allows you to make different version of one website with only one HTML file and to change them in a very easy way. Just look at CSS Zen Garden: it has over 100 different layouts to choose from and all of them use the same HTML file. Amazing, isn’t it? With DOCTYPE Transitional achieving something like this wouldn’t be possible, because the colours and site elements’ position would be defined in the page’s code.

To sum up, use Transitional only when it’s really needed. Maybe your website, written for DTD Transitional, validates as Strict as well? If yes, decide wisely which to choose. The W3C’s Transitional description may help you:

This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

Did I convince you? I hope so. Transitional isn’t worth using.

Do