Os arquivos javascript e as folhas de estilo (CSS) são minificados e compilados, respectivamente, usando o django-pipeline.
O TIM Tec usa o framework web Django, e no frontend a linguagem de template Django (Django template language), que é projetada para ser confortável para pessoas acostumadas a trabalhar com HTML. Ela é a camada de apresentação, constituída de variáveis, filtros e tags, isolada da camada lógica, escrita em python.
Está além desta documentação explicar o funcionamento da sintaxe da linguagem de template Django, amplamente documentada pelo próprio Django.
Os templates do TIM Tec estão na pasta themes do repositório e cada pasta dentro dela é um tema.
O tema default é o tema base do timtec. Segue abaixo a lista de templates do diretório themes/default/templates, comentando cada um deles.
Quase todos os templates (com exceção dos começado por "_") extendem o
template
base.html. Nele é criado a estrutura básica do HTML, e nele são
declaradas as tags <head>
e <body>
. Este template também define
os principais
blocos
e usa a tag
include
para inserir o cabeçalho (header.html) e o rodapé (footer.html), que
serão vistos mais adiante.
Usamos a herança de templates do django para evitar repetição no código. Para isso, usamos a tag extends, e sobrescrevemos os blocos (definidos pela tag block) que desejamos. O template base.html tem dois blocos importantes: o content, onde vão os conteúdos da página, e o block js, usado para incluir arquivos javascritp específicos para cada página.
O Timtec utiliza o Bootstrap como framework base bem como Less para escrever e pré-processar os estilos (CSS) dos temas.
A estrutura de arquivos apresenta-se conforme abaixo:
tema/ |-- static/ |-- css/ |-- less/ |-- components/ | |-- ... # componentes reaprovetáveis | da interface |-- modules/ | |-- ... # módulos básicos da interface | |-- pages/ | |-- ... # estilos específicos de páginas | e áreas do site | |-- main.less # arquivo que importa e compila todos os outros arquivos
O arquivo main.less
do tema padrão importa o arquivo principal do
Bootstrap bem como os demais arquivos Less do tema.
O arquivo settings.less
na pasta modules
é o que sobreescreve as
variáveis do Bootstrap que forem necessárias, bem onde estão as
variáveis específicas do tema.
A estrutura de pasta é a mesma no tema padrão e nos demais temas, que
importam o arquivo main.less
do tema padrão para que ele seja usado
como base.
Quando alguma modificação na interface é necessária, é recomendado
manter a mesma estrutura de arquivos do tema base, ou seja, para alterar
as variáveis Less do projeto cria-se um settings.less
da mesma forma
que existe no tema padrão, para modificar algum elemento da página de
cursos cria-se o arquivo courses.less
na pasta pages
, e assim
por diante.