Introdução ao Desenvolvimento
     de Temas para Drupal
             por Sheena Donnelly
       traduzido por Frederick va...
Parte I

Introdução à camada de
    temas do Drupal
O que é um tema do Drupal?
I. HTML, CSS e PHP
II.arquivo .info
    • Configurações básicas
      do tema
III.arquivo .tpl.p...
Onde os temas se encontram
.info
I. Informações básicas sobre
   o tema
   • Nome
   • Versão Drupal
   • Theme Engine
   • Regiões
   • CSS files
   ...
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...
Arquivos CSS
I. Declarado no .info file ou
   carregado por drupal_add_css()
    • O core do Drupal organiza a
      cascat...
Arquivos Javascript
I. Declarado no .info ou
   adicionado por
   drupal_add_js()
   • Drupal pode comprimir
     javascri...
page.tpl.php
I.     template básico em HTML
       para todas as páginas (é
       como uma casca)
II.    Recebe e mostra ...
Outros Templates
I. node.tpl.php
   • aparece na variável
     $content do
     page.tpl.php
   • pode ser específico
     ...
Página de configurações do tema
I. Liga/desliga certas
   variáveis
II.Opções globais e opções
   customizáveis
III.Envia ...
Página de informações do site
I. Identificação do site
  • $site_name
  • $site_slogan
  • $mission
  • $footer_message
II....
Parte II

Do PSD ao Page.tpl.php
Variáveis de página básicas
I. Regiões                     III. Variáveis importantes
   • $header, $left, $right,        ...
Variáveis adicionais
I. Variáveis úteis
   • Verificar algo na página
   • Ex. - $is_front responde
     se a página atual ...
Relacionando elementos de
Design às variáveis da página
I. Isole os elementos     III. Crie novas regiões
   que são único...
Isolando os elementos no .PSD
Isolando elementos Regiões e outras variáveis
Isolando elementos   Blocos em regiões

Arquivo PSD          Administração de blocos
Usando variáveis no page.tpl.php
Parte III

 Ferramentas e
recomendações
Temas populares básicos
I. Zen - http://drupal.org/
  project/zen
    • O melhor para
      começar
    • Bem documentado
...
Temas prontos
I.   www.drupal.org/project/Themes
II. www.topnotchthemes.com
III. www.adaptivethemes.com

IV. www.themefore...
Módulos essenciais
I. Admin/Development   III. Taxonomy
   • Admin Menu           • Taxonomy Image
   • Devel             ...
Referências
I. drupal.org theming guide
    • http://drupal.org/theme-guide
II.irc.freenode.net
    • #drupal-themes
    •...
Obrigado!
I. Veja mais slides e dicas aqui:
  • www.coalmarch.com
  • www.sheenadonnelly.net
Upcoming SlideShare
Loading in...5
×

Introdução ao Desenvolvimento de Temas para Drupal

3,749

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
3,749
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
108
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×