Careful Web

Go semantic!

2009-01-27T23:41:47Z

So many people talk about semantic web, valid code and other related stuff. I can’t imagine how I can write more than the usual 5 cents.

But I am trying.

Every professional web developer knows about such topics, but sometimes something stops him from following semantic rules or valid markup. What? His name is Mr. Style. Yes, every HTML coder knows about missing additional div elements to wrap some blocks for fancy shadowing or other eye-candy features.

It’s a long story, that begins in HTML‘s roots. SGML — is a general markup standard, HTML is based on it. HTML was created as both a content and style markup language at the same time. For example, HTML tags like font, i, b is purely style-related. The main task of HTML was not content meaning (semantics), but more styling and representation (rendering).

Opposite to HTML, XML was invented as a pure semantic standard. The main usage for XML is hierarchical data storage and retrival. It has fully flexible generalized element naming, that allows one to create new markup languages on top of XML.

After some time the next standard was invented — CSS, which brings new possibilities for styling both HTML and XML marked-up documents. With CSS each tag/element can be styled in any manner. For example, usual paragraph HTML tags p can be styled as lists with few lines of CSS code. The representation meaning of HTML becomes less important with CSS features.

The next level of document markup was reached with XHTML. Yes, it seems like a natural evolution of HTML, with focus on strong semantic markup as XML. This one brings new possibilities to machine processing for data retrieval, but keeps backward compatibility with older browsers and other HTML processors.

Well, why can’t we use pure XML formats for semantic data exchange in Web? RSS/Atom is the first widely used format in Web that comes to my mind. OK, here are some points:

Semantic (x)HTML can be interpreted by web browsers (with or without corresponding styles the user can see rendered content).
Semantic (x)HTML can be interpreted by machines for data retrieval.
Semantic (x)HTML can be interpreted by special screen readers and other devices dedicated to disabled people.
Semantic (x)HTML can mix different types of information such as news feed, contact cards, calendars, etc. in a single document.

I want to write a little more about the last point. Microformats — is one of the most famous and usable representations of semantic HTML. It’s a very useful thing, because lots of robots/tools can retrieve information (hatom, hcard, hcalendar) from web site pages. Lots of the well-known big players of the Internet community already integrated this standard for their document mark-up (Google, Yahoo, etc). It’s still not Internet-wide, but already shows more and more cases with new possibilities.

With CSS evolution, the Web will go closer and closer to the semantic meaning of web page contents. I recommend that modern web developers always be on the cutting edge of markup technologies. You can easily start with Microformats as a rich example of semantic markup. You can dive into CSS3 techniques and features to be ready to implement it in some of your next projects (and write fewer divs). The markup will shine for those who reach this formatting Zen and for a few robots too! :-)

Quick Rules of Accessible Web. Text and text alternatives.

2009-01-20T16:01:41Z

Provide alternative text in images with the alt attribute of the img tag.
Create corresponding label elements for each form input field, or add the title attribute if you can’t provide a label.

Example #1: <p><label for="first_name">First name</label><input id="first_name" name="firstname" type="text"></p>

Example #2: <input type="password" name="passwd" title="Enter your password">
CAPTCHAs must have an audio version. Like reCAPTCHA, for example.
Write links carefully. Be informative when you point a user by using relevant link text. Avoid javascript: or other placeholders for the href attribute when you are using JavaScript action on link elements. Links must always point to the content they are referring to.
Avoid elements without content. For example, spacer images or table-based layouts. All uninformative pictures must be used as backgrounds (with CSS).
Otherwise don’t include content images as backgrounds. Use img as specified in #1.

Use text and media alternatives for object embedding elements. You can include as many alternatives as you like, encapsulating them within each other. Here is an example of including a Quicktime movie:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" data="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
<param name="src" value="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
<img src="http://images.apple.com/moviesxml/s/independent/posters/blessedisthematch_l200812221525.jpg" alt="Blessed Is the Match movie">
</object>

Cross browser CSS3 features

2008-08-18T20:29:01Z

Three CSS3 features which works right in all major browsers (Mozilla, Safari and Opera). Yes, IE plays outside with finalizing of CSS2 support.

CSS3 Opacity

Opacity effect is very widely used in graphics and of course in web-design too. Today we can use it not only inside our graphic editor, but with plain CSS feature { opacity: 0.5 }. IE users can be supported with { filter: alpha(opacity=50) } property. You can see lots of demo examples here:

Opacity for image example;
Opacity and RGBA quick overview;
Lots of examples on Mandarin Design page: Opacity and transparency.

Box-sizing

This feature really matters for fast coding of block design. It really simple to use: just specify float, width in percent and box-sizing property. Like this (Mozilla, Opera and Safari uses different declaration):

div.span { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Also see live example at CSS3.info box-sizing page.

Overflow-x & overflow-y

Overflow property is improved in CSS3 specification. It allows to specify X and Y axis overflow independently with visible, hidden, auto and scroll options. See examples and tests here.

Text-shadow (bonus)

This one is really fancy and well-know effect. Firefox supporting it only in upcoming 3.1 release. But Opera and Safari already taking care on it. See demo page with reference image on CSS3.info: text-shadow.

New way to catch django signals

2008-08-14T16:44:55Z

During preparations for 1.0 release Django signaling system was refactored. Details on Backwards Incompatible Changes Page, corresponding changeset is 8223.

Well, the main reason of changes is speeding up. Announced “90% improvement in the speed of signal handling“.

The main question is how to update own code to be compatible with new way. We need to replace old style dispatching with new way of signal object creation (django.dispatch.Signal). Let see post and pre save model signal dispatch example.

We have Item model and signal handler add_mime_type declared before. Old style connection:

dispatcher.connect(add_mime_type, signal=models.signals.pre_save, sender=Item)

New way to connect model signals with handlers:

models.signals.pre_save.connect(add_mime_type, sender=Item)

Looks pretty simple. Also we need to change one thing in handler. It must be declared as accepting kwargs. For example:

def add_mime_type(instance, **kwargs):

The main changes are done behind the scenes. Now models.signals.pre_save is instance of django.dispatch.Signal instead of plain object().

Django vs. Pylons

2008-08-11T11:19:17Z

It is a short post-though about two popular Python frameworks. This is my personal experience and some analytics.

Well, if you building long-term project, for example some social network (oh again), usually you need rapid prototyping and then step-by-step (iteration) development. For prototyping you need more and more components, which you can replace or customize later. For iteration-based development you need to setup release deployment and testing automation (aka buildbot). Important thing that you have deployments on own infrastructure and you can build it once and then forget. So Django is number one solution for the component-based model (aka apps).

Other case is when you creating an application which would be highly redistributable, for example blog or e-shop engine. It is really hard (for today) to setup quickly django applications and lots of people is aware of hand-made installations (like terminal commands, etc). Pylons has a better deployment tool (paste) that helps with redistribution of projects and better project/app file layout.

It is main reason why there are still not so much complete django applications.

I thinking to use both for different cases, but anyway large projects is a Django way.

At last my top three django components: 1 Django’s cache framework; 2. User authentication in Django |; 3. Testing Django applications .