Tutorial 8 de 10

Codificando uma app simples

Agora, vamos adicionar uma folha de estilo e uma imagem.

Além do HTML gerado pelo servidor, aplicações web normalmente precisam servir outros arquivos (imagens, JavaScript, CSS, etc). No Django, estes arquivos são chamados de  'arquivos estáticos'. Para projetos pequenos, isto não é um grande problema, porque você pode simplesmente manter os arquivos estáticos em algum lugar que o seu servidor web consegue encontrar. Entretanto, em grandes projetos, especialmente aqueles comprometidos com múltiplas apps, lidar com múltiplos conjuntos de arquivos estáticos provindos de cada app pode se tornar complicado.

É para isto que o Django traz o módulo django.contrib.staticfiles, localizado em settings.py (INSTALLED_APPS): ele coleciona os 'arquivos estáticos' de cada uma de suas aplicações (e qualquer outro lugar que você especifique) em um único local que pode ser facilmente servido em produção.
--------------------------------------------------------------------
Personalizando a aparência do app:

1º, vamos criar um diretório chamado 'static' no diretório votacao. O Django vai procurar os arquivos estáticos ali, de maneira similar a como o Django encontra os templates dentro de votacao/templates/.

A configuração STATICFILES_FINDERS do Django contém uma lista de buscadores que sabem como descobrir os arquivos estáticos de diversas fontes. Um dos padrões é o App DirectoriesFinder que procura por um subdiretório 'static' em cada uma das INSTALLED_APPS. O site admin usa a mesma estrutura de diretórios para os arquivos estáticos.

Com o diretório 'static' que você acabou de criar, crie outro diretório chamado votacao e com ele crie um arquivo: style.css. O Path deve ficar assim: votacao/static/votacao/style.css.

Por conta da forma que o buscador de arquivos estáticos App DirectoriesFinder funciona, você pode referenciar este arquivo estático no Django simplesmente como votacao/style.css, similarmente como você referência o caminho para templates.

Arquivo estático namespace: Assim como templates, podemos nos safar somente colocando os arquivos estáticos diretamente em votacao/static (ao invés de criar outro subdiretório votacao), mas não é uma boa ideia. O Django vai escolher o 1º o arquivo estático que encontrar com aquele nome, e se você tem um arquivo estático com aquele mesmo nome em uma aplicação diferente, o Django não conseguiria distinguir entre elas. Nós precisamos apontar o Django para o arquivo correto, e a forma mais fácil de garantir isso é por usar um namespacing com eles. Isto é, colocando aqueles arquivos estáticos dentro de outro diretório com o mesmo nome da aplicação.

Coloque o seguinte código na sua folha de estilo - style.css:

li a {
    color: green;
}

Em seguida, edite o arquivo templates/votacao/index.html e adicione o código abaixo no início do arquivo:

{% load static %}
< link rel="stylesheet" type="text/css" 
href="{% static 'votacao/style.css' %}" />

A tag {% static %} gera a URL absoluta para arquivos estáticos.
Acesse o endereço http://localhost:8000/votacao/ e verifique que os links das questões devem estar verdes.
--------------------------------------------------------------------
Adicionando uma imagem de fundo:

Crie um subdiretório para imagens: votacao/static/votacao/images.
Dentro deste diretório, coloque uma imagem: background.jpg. 

Edite o seu stylesheet (votacao/static/votacao/style.css):

body {
    background: white url("images/background.jpg") no-repeat;
}

Recarregue http://localhost:8000/votacao/ e agora deve aparecer o fundo carregado no topo do lado esquerdo da tela.
--------------------------------------------------------------------