Skip to content. Skip to navigation

Ian Lawrence

Sections
Personal tools
You are here: Home Blog Information Architecture for Designers

Information Architecture for Designers

I conclude that I am no longer a graphic designer, but an information architect, and from now on that is how I will describe the meaning of my work and the scope of my activity. - Massimo Vignelli

Creating a web application involves HTML, CSS, images and usually some type of dynamic scripting language. Occasionally, one person will fulfill all these roles, however once an application reaches a certain scale, the question arises of how best to divide these skills between the people involved in the project.
It is a fairly common workflow for the programmer to be given some mock ups from the designer or even some HTML/CSS and he/she is then tasked with implementing the site functionality. Another question then arises of how the designer can best structure this HTML/CSS for the workflow of the programmer.
Django has a philosophy of loose coupling between objects and this is applied equally to the HTML output. To achieve this Django uses the concept of template inheritance. Template inheritance allows you to build a base 'skeleton' template that contains all the common elements of the site and defines blocks that child templates can override. This means you can literally design an entire site by creating only one HTML file. For example look at the maemo site:

 Maemo

this can be roughly broken up in template inheritance terms  the following areas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="maemo.css" />
<title>{% block title %}Maemo Main Site{% endblock %}</title>
</head>

<body>

<div id="header">
{% block header %}
<ul>
<li><a href="/intro/">Intro</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="/community/">Community</a></li> </ul>
{% endblock %}
</div


{% block content %}
{% endblock %}
</div>

<div id="right_sidebar"

This template is called base.html and it defines various placeholders for site content like the main content, the footer, the header and so on. It’s the job of 'child' templates to fill the empty blocks with content. For this the {% block %} tag defines areas that child templates can fill in.
A child template might look like:
{% extends "base.html" %}
{% block title %} Maemo Intro
{% endblock %}

{% block content %}
This is the introduction to the Maemo site
{% endblock %}

{% block right_sidebar %}
This is the Introduction sidebar with a nice video introduction to maemo
{% endblock %}


The {% extends %} tag is the key here. It tells the template engine that this template “extends” another template. When the template system evaluates this template, first it locates the parent — in this case, “base.html”.

At that point, the template engine will notice the {% block %} tags in base.html and replace those blocks with the contents of the child template.
Note that since the child template didn’t define the header block, the value from the parent template is used instead

So a HTML template folder could look like:
base.html 
base_intro.html
base_download.html
base_community.html

This approach maximizes code reuse and makes it easy to add items to shared content areas, such as section-wide navigation.






_____
tags:
Tuesday, August 12, 2008 in CodeWork  | Permalink |  Comments (1)
del.icio.us   Digg   Yahoo   Google   Spurl

Django...

Posted by timsamoff at 2008-08-14 13:08
Nice intro to the value of separating style, code, and content. (I wish I knew more of Django myself -- it's pretty elegant.)