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:
this can be roughly broken up in template inheritance terms the following areas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"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.
"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
{% endblock %}
<div id="content">
{% block content %}
{% endblock %}
</div>
<div id="right_sidebar"
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:
Django...