Introdução ao Desenvolvimento de Temas para Drupal

4,166 views
4,173 views

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
4,166
On SlideShare
0
From Embeds
0
Number of Embeds
1,958
Actions
Shares
0
Downloads
117
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Introdução ao Desenvolvimento de Temas para Drupal

  1. 1. Introdução ao Desenvolvimento de Temas para Drupal por Sheena Donnelly traduzido por Frederick van Amstel DrupalCamp Atlanta September 18, 2009
  2. 2. Parte I Introdução à camada de temas do Drupal
  3. 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. 4. Onde os temas se encontram
  5. 5. .info I. Informações básicas sobre o tema • Nome • Versão Drupal • Theme Engine • Regiões • CSS files • JS files
  6. 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. 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. 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. 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. 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. 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. 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. 13. Parte II Do PSD ao Page.tpl.php
  14. 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. 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. 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. 17. Isolando os elementos no .PSD
  18. 18. Isolando elementos Regiões e outras variáveis
  19. 19. Isolando elementos Blocos em regiões Arquivo PSD Administração de blocos
  20. 20. Usando variáveis no page.tpl.php
  21. 21. Parte III Ferramentas e recomendações
  22. 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. 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. 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. 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. 26. Obrigado! I. Veja mais slides e dicas aqui: • www.coalmarch.com • www.sheenadonnelly.net

×