temas em drupal
DESCRIPTION
Apresentação feita por Catarina Clemente e João Belchior durante o DrupalCamp Lisboa 2011.TRANSCRIPT
Temas emDrupal
DrupalCamp Lisboa 2011 - 26 de Março
Catarina Clemente (cvclemente)João Belchior (Jolidog)
O tema é o último layer antes do utilizador ver o site no seu browser.
INTERMÉDIO AVANÇADO
2 | 18Temas em Drupal
Sistema de camadas / Layers
INICIADO
INTERMÉDIO AVANÇADO
3 | 18Temas em Drupal
INICIADO
2/8
Existem cerca de 702 temas (574 Drupal 6 e 128 Drupal 7) gratuitamente disponibilizados em http://drupal.org/project/themes
Poderá ver algumas demos em Theme Garden;
Existem Theme Shops:Fusion Drupal Themes - http://fusiondrupalthemes.comAdaptative Themes - http://adaptativetheme.com....
Já tem os layouts? Contrate um themer!
Só tem uma ideia? Contrate um webdesigner/themer!
INICIADO INTERMÉDIO AVANÇADO
4 | 18
Onde encontrar temas
Temas em Drupal
2/8
Podem não ter o código optimizado ou as funcionalidades que servem os seus propósitos.São disponibilizados para a comunidade gratuitamente.
Alguns têm suporte pela estrutura drupal.org
Alguns têm documentação e/ou demonstração
INTERMÉDIO AVANÇADO
5 | 18
Temas Contribuidos
Temas em DrupalTemas em Drupal
INICIADO
Site logo, slogan, favicon; Esquema de cores, em temas como o Garland ou o Bartik ou outros temas com suporte para o módulo Color.
INTERMÉDIO AVANÇADO
6 | 18
Opções básicas de personalização
Alguns temas, tais como o Acquia Slate, Acquia Marina e Acquia Prosper permitem personalizar outros aspectos:
Posicionamento e largura de colunas;Tipo e tamanho de fonte
Outras opções
Temas em Drupal
INICIADO
INTERMÉDIO
AVANÇADO
7 | 18Temas em Drupal
INICIADO
2/8
Através de serviços de alojamento Drupal (por exemplo com o Drupal Gardens da Acquia ou o Buzzr da Lullabot), pode fazer upload dos seus elementos gráficos, escolher o layout, o esquema de cores, os elementos de estilo da página e pode mesmo usar o seu próprio CSS.http://drupalgardens.comhttp://buzzr.com
Existem, também, aplicações Wysiwyg ou web design generators.http://www.artisteer.com
INTERMÉDIO AVANÇADO
8 | 18
Crie o seu tema usando interface gráfico
Temas em Drupal
INICIADO
2/8
Uma boa forma de aprender é modificando um tema existente. Instale um dos temas mencionados no nível anterior ou faça uma cópia de um dos temas incluídos na diretoria "themes". Usar um tema já existente e modificar:
Mude o nome da diretoria para o nome do seu temaEdite os ficheiros
nome-do-tema.info;styles.css;scripts.js
Como criar o seu tema
INTERMÉDIO AVANÇADO
9 | 18Temas em Drupal
INICIADO
2/8
Web Developer (Firefox e Chrome)http://chrispederick.com/work/web-developer/
Firebug (Firefox) e Firebug Lite ( IE6+, Firefox, Opera, Safari and Chrome)http://getfirebug.com/
W3C Validation Service http://www.w3.org/Status.html
INTERMÉDIO AVANÇADO
10 | 18
Algumas ferramentas
Temas em Drupal
INICIADO
INTERMÉDIO
AVANÇADO
11 | 18Temas em Drupal
INICIADO
Permitem começar de um ponto avançado.Muitos incluem kit inicial, resets de CSS, grelhas, settings avançados.
Temas base / Starter Themes
Outros em drupal.orgmothership
blueprintzentropy
...
Fusionhttp://drupal.org/project/fusion
Adaptative themehttp://drupal.org/project/adaptivetheme
Genesishttp://drupal.org/project/genesis
Omegahttp://drupal.org/project/omega
Zenhttp://drupal.org/project/zen
INTERMÉDIO AVANÇADO
12 | 18Temas em Drupal
INICIADO
Usar o template.php Usar funções theme_foobar (); como nomedotema_foobar ();http://drupal.org/node/173880
Usar o template.php.criar variáveis.Funções preprocess and process.http://drupal.org/node/223430
Substituir / Override de templates
Modificar funções
Criar variáveis
Ficheiros .tpl.phpSubstituir ficheiros do tema base ou do núcleo.Usar sugestões de template para casos pontuais.http://drupal.org/node/1089662
INTERMÉDIO AVANÇADO
13 | 18Temas em Drupal
INICIADO
PanelsUm gestor de layout, com contextos, excelente integração com o views.http://drupal.org/project/panels Contextpermite expor blocos ou outros elementos de acordo com o contexto da página em questão. Trabalha com os módulos spaces e boxes.http://drupal.org/project/context DisplaySuite Permite modificar os layouts de alguns elementos do drupal, como o node, comments, search results, etc. Simples e uma excelente opção no D7. http:/drupal.org/project/ds BlockifyExpõem elementos do drupal core como blocos.http://drupal.org/project/blockify
Gestão de layout
INTERMÉDIO AVANÇADO
14 | 18Temas em Drupal
INICIADO
Semantic views (integrado no Views3)Permite modificar o markup produzido pelo views directamente no interface gráfico.http://drupal.org/project/semanticviews Semantic CCKPermite modificar o markup produzido pelo módulo CCK.http://drupal.org/project/semantic_cck
IE CSS Optimizer (Integrado no D7)Solução para o bug do IE6 -> 8 que não suporta mais de 31 estilos. http://drupal.org/project/ie_css_optimizerConditional Stylesheets (integrado em alguns temas base)Permite carregar ficheiros CSS exclusivos para o IE. http://drupal.org/project/conditional_styles
Markup / CSS
INTERMÉDIO AVANÇADO
15 | 18Temas em Drupal
INICIADO
@font-your-faceIntegra serviços externos de fonts, Typekit, Font Squirrel, google fonts e muitos outros.http://drupal.org/project/fontyourface Uniform Integra o jquery.uniform library para estilizar forms de forma coerente nos vários browsers.http://drupal.org/project/uniform ModernizrIntegra a biblioteca javascript modernizr, permite usar CSS3 e html5 nos browsers que suportam. http://drupal.org/project/modernizr TypogrifyAplica melhorias a nível tipográficohttp://drupal.org/project/typogrify
Markup / CSS (cont.)
INTERMÉDIO AVANÇADO
16 | 18Temas em Drupal
INICIADO
Também é uma opção... Mas tenham em atenção o gráfico ao lado!
Criar um tema de Raiz
INTERMÉDIO AVANÇADO
17 | 18Temas em Drupal
INICIADO
AVANÇADOINTERMÉDIOINICIADO
18 | 18
OBRIGADO!QUESTÕES?
Temas em Drupal
João Belchior | [email protected] | twitter @jolidog
Catarina Clemente | [email protected] | twitter @cvclemente