Tradução dos slides de Sheena Donnely http://www.slideshare.net/sheenadonnelly/psd-to-drupal-introductory-drupal-theming

1. Introdução ao Desenvolvimento
de Temas para Drupal
por Sheena Donnelly
traduzido por Frederick van Amstel
DrupalCamp Atlanta
September 18, 2009

2. Parte I
Introdução à camada de
temas do Drupal

3. O que é um tema do Drupal?
I. HTML, CSS e PHP
II.arquivo .info
• Configurações básicas
do tema
III.arquivo .tpl.php
• Templates
IV. .css e .js
• Aparência e
comportamento
V.Template.php
• Para funções
avançadas

4. Onde os temas se encontram

5. .info
I. Informações básicas sobre
o tema
• Nome
• Versão Drupal
• Theme Engine
• Regiões
• CSS files
• JS files

6. Regiões
I. Elementos principais da
página
II.Os blocos são postos nas
regiões
III.Gera uma variável de
mesmo nome no
page.tpl.php
IV.Use o mínimo possível de
regiões para evitar
problemas de performance

7. Arquivos CSS
I. Declarado no .info file ou
carregado por drupal_add_css()
• O core do Drupal organiza a
cascata de arquivos CSS
automaticamente
• Drupal comprime os
arquivos CSS
II. Style.css é declarado
automaticamente para cada tema

8. Arquivos Javascript
I. Declarado no .info ou
adicionado por
drupal_add_js()
• Drupal pode comprimir
javascript para ficar
mais leve
II.Drupal Core inclui a
biblioteca JQuery
III. script.js declarado
automaticamente para
todos os temas

9. page.tpl.php
I. template básico em HTML
para todas as páginas (é
como uma casca)
II. Recebe e mostra o
conteúdo dos nós, regiões
e alguns módulos
III. Requer compreensão
básica de PHP para leitura
e edição

10. Outros Templates
I. node.tpl.php
• aparece na variável
$content do
page.tpl.php
• pode ser específico
para um tipo de
conteúdo:
node-type.tpl.php
II.block.tpl.php,
comment.tpl.php, etc.
III.Copie arquivos .tpl.php
dos módulos e coloque na
pasta theme para
configurá-lo

11. Página de configurações do tema
I. Liga/desliga certas
variáveis
II.Opções globais e opções
customizáveis
III.Envia o $site_logo e
ícones favicon

12. Página de informações do site
I. Identificação do site
• $site_name
• $site_slogan
• $mission
• $footer_message
II.Seleciona que nó
aparece na página
inicial

13. Parte II
Do PSD ao Page.tpl.php

14. Variáveis de página básicas
I. Regiões III. Variáveis importantes
• $header, $left, $right, do sistema
$content, $footer • $head, $head_title,
II. Variáveis de $styles, $scripts,
configurações do tema $title, $tabs,
$messages,
• $site_name, $feed_icons,
$site_slogan, $logo, $closure
$primary_links,
$secondary_links,
$mission,
$footer_message,
$search_box

15. Variáveis adicionais
I. Variáveis úteis
• Verificar algo na página
• Ex. - $is_front responde
se a página atual é a
página inicial

16. Relacionando elementos de
Design às variáveis da página
I. Isole os elementos III. Crie novas regiões
que são únicos para no .info se
aquela página necessário
daqueles que são
compartilhados com IV. Finalmente,
outras páginas formate os
elementos HTML
II.Determine que no page.tpl.php
elementos serão
blocos e quais as
regiões onde estarão

17. Isolando os elementos no .PSD

18. Isolando elementos Regiões e outras variáveis

19. Isolando elementos Blocos em regiões
Arquivo PSD Administração de blocos

20. Usando variáveis no page.tpl.php

21. Parte III
Ferramentas e
recomendações

22. Temas populares básicos
I. Zen - http://drupal.org/
project/zen
• O melhor para
começar
• Bem documentado
• Opções de layout fixo
ou fluido

23. Temas prontos
I. www.drupal.org/project/Themes
II. www.topnotchthemes.com
III. www.adaptivethemes.com
IV. www.themeforest.com
V. www.templatemoster.com

24. Módulos essenciais
I. Admin/Development III. Taxonomy
• Admin Menu • Taxonomy Image
• Devel • Taxonomy Menu
• Conditional IV. Images
Stylesheets • Imagecache
II. Menu Help • Imagecache Crop
• Menu Icons • Galleria
• Menu Block • Thickbox
• Menu Trails V. Other
• Pathauto • Block Class
• Nice Menus • Dynamic Rendering

25. Referências
I. drupal.org theming guide
• http://drupal.org/theme-guide
II.irc.freenode.net
• #drupal-themes
• #drupal-design
• #drupal-support
• #drupal-nc
III.
http://mustardseedmedia.com/podcast
IV.
http://boston.design4drupal.org/sessions

26. Obrigado!
I. Veja mais slides e dicas aqui:
• www.coalmarch.com
• www.sheenadonnelly.net