Introdução ao Desenvolvimento de Temas para Drupal
-
Upload
frederick-van-amstel -
Category
Technology
-
view
3.655 -
download
0
description
Transcript of Introdução ao Desenvolvimento de Temas para Drupal
![Page 1: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/1.jpg)
Introdução ao Desenvolvimento de Temas para Drupal
por Sheena Donnelly
traduzido por Frederick van Amstel
DrupalCamp AtlantaSeptember 18, 2009
![Page 2: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/2.jpg)
Parte I
Introdução à camada de temas do Drupal
![Page 3: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/3.jpg)
O que é um tema do Drupal?I. HTML, CSS e PHPII.arquivo .info
• Configurações básicas do tema
III.arquivo .tpl.php• Templates
IV. .css e .js• Aparência e
comportamentoV.Template.php
• Para funções avançadas
![Page 4: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/4.jpg)
Onde os temas se encontram
![Page 5: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/5.jpg)
.info
I. Informações básicas sobre o tema • Nome• Versão Drupal• Theme Engine• Regiões• CSS files• JS files
![Page 6: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/6.jpg)
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
![Page 7: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/7.jpg)
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
![Page 8: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/8.jpg)
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
![Page 9: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/9.jpg)
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
![Page 10: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/10.jpg)
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
![Page 11: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/11.jpg)
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
![Page 12: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/12.jpg)
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
![Page 13: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/13.jpg)
Parte II
Do PSD ao Page.tpl.php
![Page 14: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/14.jpg)
Variáveis de página básicas
I. Regiões• $header, $left, $right,
$content, $footerII.Variáveis de
configurações do tema• $site_name,
$site_slogan, $logo, $primary_links, $secondary_links, $mission, $footer_message, $search_box
III. Variáveis importantes do sistema• $head, $head_title,
$styles, $scripts, $title, $tabs, $messages, $feed_icons, $closure
![Page 15: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/15.jpg)
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
![Page 16: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/16.jpg)
Relacionando elementos de Design às variáveis da páginaI. Isole os elementos
que são únicos para aquela página daqueles que são compartilhados com outras páginas
II.Determine que elementos serão blocos e quais as regiões onde estarão
III. Crie novas regiões no .info se necessário
IV. Finalmente, formate os elementos HTML no page.tpl.php
![Page 17: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/17.jpg)
Isolando os elementos no .PSD
![Page 18: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/18.jpg)
Isolando elementos Regiões e outras variáveis
![Page 19: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/19.jpg)
Arquivo PSD Administração de blocos
Isolando elementos Blocos em regiões
![Page 20: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/20.jpg)
Usando variáveis no page.tpl.php
![Page 21: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/21.jpg)
Parte III
Ferramentas e recomendações
![Page 22: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/22.jpg)
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
![Page 23: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/23.jpg)
Temas prontos
I. www.drupal.org/project/Themes
II. www.topnotchthemes.com
III. www.adaptivethemes.com
IV. www.themeforest.com
V. www.templatemoster.com
![Page 24: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/24.jpg)
Módulos essenciais
I. Admin/Development• Admin Menu• Devel• Conditional
StylesheetsII.Menu Help
• Menu Icons• Menu Block• Menu Trails• Pathauto• Nice Menus
III. Taxonomy• Taxonomy Image• Taxonomy Menu
IV. Images• Imagecache• Imagecache Crop• Galleria• Thickbox
V. Other• Block Class• Dynamic Rendering
![Page 25: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/25.jpg)
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/podcastIV. http://boston.design4drupal.org/sessions
![Page 26: Introdução ao Desenvolvimento de Temas para Drupal](https://reader035.fdocument.pub/reader035/viewer/2022062513/554e7f11b4c905f66a8b5397/html5/thumbnails/26.jpg)
Obrigado!
I. Veja mais slides e dicas aqui:• www.coalmarch.com• www.sheenadonnelly.net