hersonls

Uma das formas de optimização de paginas web é através da redução do seu tempo de carregamento. Um exemplo de deste tipo de optimização é removendo excessivos espaços em branco do código de sua pagina.

Django possui alguns meios para isto, e uma deles é através da tag de template {% spaceless %}[1], que remove todos os espaços em branco entre tags, de um trecho especificado. Porem, existe algumas restrições em relação à  tag “`spaceless“`, pois para quem a usa para esta finalidade, não poderá usa-lá caso esteja utilizando outro sistema de template.

Com isso, uma das formas de se fazer “`spaceless“` é através da criação de uma middleware[2], que utiliza a função “`strip_spaces_between_tags“` para remover espaços entre tags HTML. Com isso, sobrescreve-se o conteúdo do objeto “`response“` ( resposta ), que é passado para o método de middleware process_response[3]  e logo em seguida é retornado o objeto response com os espaços removidos.

Segue um exemplo de middleware:

from django.utils.html import strip_spaces_between_tags as short


class SpacelessMiddleware(object):
def process_response(self, request, response):
if 'text/html' in response['Content-Type']:
response.content = short(response.content)
return response

Depois disto, no arquivo settings adicionar em  MIDDLEWARE_CLASSES, o caminho à sua middleware.

Exemplo:

MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'projeto.minhas_middlewares.SpacelessMiddleware',
)

Obs: Se estiver utilizando middleware de cache, lembre-se que a ordem das middlewares influencia. Então verifique se esta middleware estará antes da middleware de cache, para que seja feito cache com espaços removidos.

Com isto, todos os espaços entre tags serão removidos, o que lhes dará relativamente a redução do tamanho final do arquivo.

[1] = http://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless
[2] = http://docs.djangoproject.com/en/dev/topics/http/middleware/#topics-http-middleware
[3] = http://docs.djangoproject.com/en/dev/topics/http/middleware/#process-response
Fonte: http://www.davidcramer.net/code/369/spaceless-html-in-django.html

Django é um framework web escrito em python [1] desenvolvido por uma equipe de jornalistas da Lawrence Journal Word [2] com o intuito inicial de ajudar na implementação de novas funcionalidades ou até mesmo na criação de novas aplicações. Django nasceu assim, num ambiente em que modificações da estrutura de web site eram quase constantes e com prazos estreitos para a entrega de uma solução. O sucesso, claro, veio por conseqüência! Django foi desenvolvido para isso, atender os curtos prazos.

A partir de 2005, Django foi amadurecendo e obtendo a capacidade de ser aplicado a vários tipos de sites, principalmente aqueles que possuíam um alto tráfego na rede, e isso fez com que os desenvolvedores decidissem torná-lo um projeto público Open-Source (código aberto)  disponibilizado sob licença BSD ( Berkeley Software Distribution – licensa utilizada inicialmente em sistemas operacionais BSD ) e logo batizado com o nome Django. Segundo, F.A.Q. Geral do django [3] , o nome Django foi dado em homenagem ao guitarrista de Jazz Django Reinhardt e finalmente, em Junho de 2008, criou-se a Django Software Foundation [4] que a partir de agora será responsável pelas decisões que dizem respeito ao futuro do Django.

Hoje, com toda essa história por detrás de suas linhas de código, o Framework Django carrega consigo uma frase que marca sua forte característica “O framework web para perfeccionistas com prazos”, o termo perfeccionistas é utilizado pois o Django permite que o desenvolvedor produza aplicativos de maneira rápida e limpa, tornando os códigos menores e bem estruturados. É assim que o Django é conhecido, pois visa ao máximo a automatização no desenvolvimento e semeia a filosofia DRY[5] (Don’t Repeat Yourself) que no bom português significa “não repita a si mesmo”, trata-se de um processo destinado a reduzir a duplicação, conduzindo o desenvolvedor a uma forma simples de criar seus aplicativos sem precisar reescrever o código, “re-aproveitando” o que já está pronto.

[1] http://www.python.org/
[2] http://www2.ljworld.com/
[3] http://docs.djangoproject.com/en/dev/faq/general/#what-does-django-mean-and-how-do-you-pronounce-it
[4] http://www.djangoproject.com/foundation/
[5] http://c2.com/cgi/wiki?DontRepeatYourself

Meu primeiro artigo sobre django, espero que gostem.

Para quem não conhece, django é um framework web de alto nivel, desenvolvido em python tornando o desenvolvimento web facil e rapido.

Mas na verdade, pra que serve um framework?

Framework serve para auxilio no desenvolvimento de softwares dando ao desenvolvedor um conjundo de programas, bibliotecas, scripts que ajudam a facilitar o desenvolvimento.

Antes de mais nada, precisamos saber como django funciona. Você pode encontrar uma boa introdução no site do Django-Brasil[1].

Bem, depois de uma boa esquentada sobre o que esta por baixo dos panos do django. Podemos começar a desenvolver nossa pagina dinamica.

O que precisamos para que tudo funcione perfeitamente no decorrer do artigo, é a versão recente do django, instalado apartir do svn, uma base de dados de sua preferencia ( no decorrer do artigo usaremos mysql ) e nada mais nada menos que sua criatividade. =)

Vamos começar criando um novo projeto em django chamado webdinamica:

$ django-admin.py startproject webdinamica

Com nosso projeto criado, partiremos a configuração basica do nosso projeto editando o arquivo settings.py:

$ cd webdinamica

$ vim settings.py

Devemos editar as configurações basicas para o funcionamento do nosso projeto, que são a conexao da base de dados e setar qual diretorio que ira estar os templates e os arquivos media do projeto.

Logo abaixo vamos setar, as configurações do banco de dados:

DATABASE_ENGINE = ‘mysql’ # Banco de dados a ser utilizada

DATABASE_NAME = ‘webdinamica’ # Nome da base de dados a ser utilizado

DATABASE_USER = ‘usuario’ # Nome do usuario da base de dados

DATABASE_PASSWORD = ’senha’ # Senha do usuario da base de dados

E por fim vamos inserir um novo valor na tupla TEMPLATE_DIRS, com o caminho completo para os templates.

TEMPLATE_DIRS = (

‘/home/usuario/webdinamica/templates/‘,

)

Agora, com todo o basico configurado, vamos criar uma nova base de dados no mysql chamada webdinamica.

$ mysql -uusuario -hlocalhost -p

Enter password:

mysql> CREATE DATABASE webdinamica;

Query OK, 1 row affected (0.07 sec)

Depois disso, vamos criar a nossa estrutura basica de dados com o subcomando syncdb do aplicativo manage.py que esta no diretorio do projeto.

$ python manage.py syncdb

Quando sincronizamos pela primeira vez nossa base de dados, é feita algumas perguntas basicas para inicio de projeto, que são dados do administrador, como nome, email e senha.

Would you like to create one now? (yes/no):

Você gostaria de criar um agora? (sim/não):

Escolha “yes” e logo em seguida ira lhe perguntar o nome do usuario, email e senha:

Username (Leave blank to use ‘webdinamica’): administrador

E-mail address: administrador@webdinamica.com

Password:

Password (again):

Superuser created successfully.

Agora que temos nossa estrutura basica criada, vamos testar se esta tudo funcionando perfeitamente, executando o servidor de testes django:

$ python manage.py runserver localhost:8080

Se voce ver uma pagina como esta é porque estamo indo bem

Tudo testado vamos criar nosso novo aplicativo que ira gerenciar nossas paginas dinamicas:

$ python manage.py startapp paginas

Depois de criado vamos criar o nosso modelo:

$cd paginas

$vim models.py

No nosso aplicativo para gerenciar paginas teremos 5 campos basicos, Grupo de Paginas, Titulo, Subtitulo, Conteudo e Slug. Obviamente titulo ira conter os titulos das paginas, subtitulo será um subtitulo ilustrativo do que a pagina tera como conteudo, teremos tambem um grupo de paginas para uma organização dos conteudos atravez de grupos, e o campo slug será utilizado para a criação de nossas url.

models.py:

from django.db import models

# Create your models here.

class GrupoDePaginas(models.Model):

titulo = models.CharField(max_length=255,core=True)

def __unicode__(self):

return self.titulo

class Admin:

pass

class Pagina (models.Model):

grupodepaginas = models.ForeignKey(GrupoDePaginas,

verbose_name=”Grupo”)

titulo = models.CharField(max_length=255,core=True)

subtitulo = models.CharField(max_length=255,core=True)

conteudo = models.TextField(core=True)

slug = models.SlugField(prepopulate_from=(”titulo”,))

def __unicode__(self):

return self.titulo

class Admin:

list_display = (’grupodepaginas’,'titulo’,’subtitulo’,

‘conteudo’,’slug’)

list_filter = (’grupodepaginas’,)

Vamos dar uma leve analizada no codigo que acabamos de criar. Primeiro criamos uma classe modelo chamada de GrupoDePaginas, onde ira conter os grupos criados para organização das paginas. Logo em seguida criamos a classe modelo chamada Pagina, que servira para crianção de conteudos para nossas paginas. Dentro do modelo Pagina temos um campo com um modelo curioso chamado SlugField que poucas pessoas conhecem. Slug é um termo jornalistico, usado como etiquetas curtas para descrever algo. Sua caracteristica é bem favoravel, pq essas etiquetas possuem apenas letras, underlines, ifens e numeros, otimas para URL. E utilizando o util parametro prepopulate_from, podemos usar alguns de nossos campos para gerarmos automaticamente nosso Slug atravez de um javascript interno do django.

Depois de criarmos nosso aplicativo vamos adicionalo a nossa lista de aplicativos instalados, no arquivo settings.py.

INSTALLED_APPS = (

‘django.contrib.auth’,

‘django.contrib.contenttypes’,

‘django.contrib.sessions’,

‘django.contrib.sites’,

‘django.contrib.admin’,

‘webdinamica.paginas’,

)

Certo, mais antes disso, notem que foi adicionado um novo aplicativo alem do nosso aplicativo, chamado django.contrib.admin, que é o ambiente web de adminstração padrão fornecida pelo django.

Logo em seguida, vamos realizar um novo syncdb, para sincronizar nossas novas tabelas com o banco de dados.

$ python manage.py syncdb

Feito isso, precisamos agora descomentar uma url pattern, que esta comentada por padrão, utilizada pela administração. Para quem não sabe, as UrlPatterns são simples expressões regulares usadas para processar as urls, e dizer o que fazer quando elas surgirem. Iremos editar o nosso arquivo urls.py, gerado por nosso projeto, descomentando a linha:

# (r’^admin/’, include(’django.contrib.admin.urls’)),

Deixando assim:

urlpatterns = patterns(”,

(r’^admin/’, include(’django.contrib.admin.urls’)),

)

Feito isto, ja podemos inicializar o servidor de desenvolvimento novamente, para vermos como esta nosso projeto agora.

$ python manage.py runserver localhost:8080

Para ascessar nossa adminstração basta adicionar ao fim da url /admin, como no exemplo:

http://localhost:8080/admin

Eae? receberam uma janela como esta?

Entao estamos andando no mesmo caminho! =)

Faça seu login com a conta de administrador que criou, e vamos ao que interessa!

Ao fazer o login você vai encontrar logo a baixo o seu aplicativo Paginas com seus dois modelos, Grupo de Paginas e Paginas.

Vamos agora criar nossa primeira pagina. Clique em Paginas e logo em seguida Add Pagina.

No campo Grupo, vamos clicar no sinal de + para adicionarmos um novo grupo, o nome do nosso novo grupo sera “menu” onde ira conter as paginas principais, que irão ter seu lugar no menu do nosso website. E preencha todos os outros campos como desejar. Note que ao digitar o titulo de sua pagina, automaticamente o campo Slug é preenchido totalmente formatado com suas regras como citei acima. Se você digitar em titulo, uma palavra com acentos espaços, será convertido.

Agora que temos paginas adicionadas em nosso site, vamos a melhor parte, que é fazer o site funcionar.

Quando iniciamos um novo aplicativo, temos junto a ele, criado um arquivo chamado views.py, que contem funções views, que como o nome mesmo diz, são funções de visualização que processam requisições http, e dão-lhe a resposta nessessaria, como uma pagina pagina de erro ou sua pagina de contatos

Vamos ao nosso view:

from django.http import HttpResponse

from django.shortcuts import render_to_response

from webdinamica.paginas.models import Pagina, GrupoDePaginas

def index (request,pagina=”principal”):

“”"

Views para processamento basico de paginas

“”"

# Itens do menu

menu = Pagina.objects.filter(grupodepaginas=1)

# Pagina Atual

conteudo = Pagina.objects.get(slug=pagina)

return render_to_response (”index.html”,{’menu’:menu,

‘conteudo’:conteudo})

Bem, vamos as 3 primeiras linhas. Na primeira linha estamos importando uma classe chamada HttpResponse. HttpResponse é uma resposta a um http-request feita por você mesmo, atravez de um view. Na segunda linha importamos render_to_response, que foi feito pra reduzir a quantidade de linhas no desenvolvimento, o que antes era feito pelo objeto Template e a classe Context, podem ser resmidos a um simples render_to_response. Na terceira linha estamos importando os modelos criados por nos no aplicativo paginas, para podermos processar os dados apartir desses modelos.

Ao definirmos index temos como primeiro parâmetro “request”que serve para dizer que será a definição uma função que servira de resposta ao http-request, que segue de um outro argumento criado por nos, chamado de paginas, que tem o valor por padrão “Principal”, mais na frente verão o porque disto.

Bem logo podemos ver como nosso menu é gerado e passado ao objeto menu. Atravez do modelo Pagina importado, podemos fazer uma consulta atravez do metodo objects, seguido por um outro metodo chamado filter que serve para filtrar a consulta no banco de dados. Passamos o parâmetro “grupodepaginas=1″ onde o valor “1″ siguinifica o id do grupo menu. Claro, esse filtro ainda é um pouco problematico, se apagarmos o grupo Menu, teremos um problema, o que pode ser melhorado por um outro filtro, que será visto em outros artigos futuros.

Bem agora que temos nosso menu, vamos dizer ao nosso view qual a pagina atual que será mostrada. Agora saberemos porque atribuimos o valor padrão “principal” ao parametro pagina, para que quando a view nao receba nenhum parametro pagina, sera processada a pagina principal atravez dos metodos objects.get(). Para quem ainda nao conhece o metodo get, ele faz uma pesquisa que deve retornar apenas um valor, podemos resumir isso ao uma pesquisa exata de algo. Passamos como parametro à esse metodo “slug=pagina” que siguinifica “procurar no campo slug o valor pagina”.

E por fim, retornaremos à requisição http, um objeto httprequest atravez da função render_to_response que importamos. O primeiro argumento passado sera o template a ser renderizado e o segundo será um dicionario, que sera o contexto da pagina, tecnicamente um dicionario mapeado por nome de variaveis e valores. Finalmente, indicamos “index.html” para ser nosso template e criamos o dicionario {’menu’:menu,’conteudo’:conteudo} que receberá o valor que que atribuimos acima.

Tudo feito, vamos ao finalmente!

Desculpem por não usar nenhum template cheio de cores e fundos extraordinarios… O que é isso amigos, isto é apenas um artigo =)

<html>

<head><title>WebDinamica</title></head>

<body>

<div id=”tudo”>

<div id=”menu”>

{% for paginas in menu %}

<a href=”/{{ paginas.slug }}”>{{paginas.titulo}}</a>

{% endfor %}

</div>

<div id=”conteudo”>

<h1>{{ conteudo.titulo }}</h1>

{{ conteudo.conteudo|safe|linebreaks }}

</div>

</div>

</body>

</html>

Temos um html muito simples, com algumas variaveis e tags do sistema de template django. Aquelas que possuem {% %} são chamada as tags essas tags podem ser um pouco mais complexas que variaveis, pois podem controlar condições, loops e etc, dentro de um template. Como podemos ver, criamos uma tag html div com id menu, onde estara o nosso menu. Dentro dele criamos um for, onde ira percorrer os objetos que estão no objeto menu que estava no dicionario passado como argumento em render_to_response. Dentro do for, criamos uma tag html <a> para criar-mos nossos links, em href colocamos a variavel {{ paginas.slug }}, que possue uma barra antes para evitarmos que o valor vá para o fim da url. E como valor para tag <a>, colocaremos o titulo da pagina atraves da variavel {{ paginas.titulo }}.

Mais em baixo criamos um div onde ira ficar todo o conteudo da pagina. Iniciando por uma tag html h1 com a variavel {{ conteudo.titulo }} e logo depois, colocamos uma variavel chamada {{ conteudo.conteudo }} e atribuimos a ela alguns filtros padrões do sistema de templates do django. O primeiro chamado safe que serve para permitir o processamento de tags html e o segundo linebreaks que serve para trocar quebras de linha por <br />. Agora podemos salva-lo como index.html na pasta template que definimos no arquivo de configuração settings.py.

Bem, estamos a um passo de testar nossa pagina, falta apenas a configuração de nossa url. Vamos ate o arquivo urls.py.

from django.conf.urls.defaults import *

from webdinamica.paginas.views import index

urlpatterns = patterns(”,

(r’^$’, index),

(r’^admin/’, include(’django.contrib.admin.urls’)),

(r’^(?P<pagina>[-\w]+)/$’, index),

)

O que fizemos agora foi adicionar mais 2 patterns em nosso arquivo e importar 1 view. Na seguna linha importamos a view index, para ser executada quando solicidada em uma pattern. Logo abaixo na primeira pattern, adicionamos esta regra, r’^$’, que diz “tudo que começar e terminar com nada” execute index. Mas porque index? porque foi passado como segundo parametro, o segundo parametro serve pra quando a expressão regular casar com sua URL, ser executado. E por utlimo, adicionamos r’^(?P<pagina>[-\w]+)/$’, que diz “quando começar com qualquer palavra, terminada ou não por / execute…” index, que esta como segundo parametro. Esta “palavra” que diz a expressao regular, sera passada como parâmetro para view que esta como segundo arguimento, que definimos como paginas entre o “<” e “>”. Como deve se lembrar, definimos esse parametro quando criamos a view index.

Mais porque esta ordem? ela significa alguma coisa?

Sim! significa! porque a segunda pattern, tem como expressão regular “tudo que começar com admin e terminar ou nao com /” pode simplesmente casar com a terceira pattern, que esta esperando qualquer palavra. Colocando nessa ordem, qualquer palavra que nao seja admin, vai casar com a terceira pattern e assim fazer o queremos.

Bem, agora ja podemos salvar nosso arquivo urls.py e ver o que acontece, subir o nosso servidor de desenvolvimento e ver o que acontece =)

$ python manage.py runserver localhost:8080

Bem, agora temos um site dinamico bem simples, que servio para abrir a mente de vocês para novas ideias, para poderem fazerem novas implementações e principalmente para se divertirem muito nisso!

Queria dizer pra vocês que django nao é só isso, não para por aqui. Podemos fazer implementações incriveis na nossa adminsitração, como usar WYSIWYG na edição de conteudos o que pode tornar tudo ainda mais produtivo.

E pesso a vocês que leram e se interessaram, leiam o django book[2], e o a documentação[3] porque o que eu conheço hoje de django só poderam ter saido de lá. ;]

Espero que vocês tenham gostado e que tenha sido util para vocês. Qualquer duvida ou sugestão ou ate mesmo algum erro, podem comentar ou mandar um email, ou ate mesmo perguntas na lista de discurção ou no IRC pelo canal #django-br do servidor da freenode.

E pedindo desculpa aos erros de portugues!!

Abraços!

[1] – http://www.djangobrasil.org/

[2] - http://www.djangobook.com/

[3] - http://www.djangoproject.com/