Download - Temas em Drupal

Transcript
Page 1: Temas em Drupal

Temas emDrupal

DrupalCamp Lisboa 2011 - 26 de Março

Catarina Clemente (cvclemente)João Belchior (Jolidog)

Page 2: Temas em Drupal

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

Page 3: Temas em Drupal

INTERMÉDIO AVANÇADO

3 | 18Temas em Drupal

INICIADO

Page 4: Temas em Drupal

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

Page 5: 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

Page 6: Temas em Drupal

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

Page 7: Temas em Drupal

INTERMÉDIO

AVANÇADO

7 | 18Temas em Drupal

INICIADO

Page 8: Temas em Drupal

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

Page 9: Temas em Drupal

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

Page 10: Temas em Drupal

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

Page 11: Temas em Drupal

INTERMÉDIO

AVANÇADO

11 | 18Temas em Drupal

INICIADO

Page 12: Temas em Drupal

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

Page 13: Temas em Drupal

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

Page 14: Temas em Drupal

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

Page 15: Temas em Drupal

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

Page 16: Temas em Drupal

@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

Page 17: Temas em Drupal

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

Page 18: Temas em Drupal

AVANÇADOINTERMÉDIOINICIADO

18 | 18

OBRIGADO!QUESTÕES?

Temas em Drupal

João Belchior | [email protected] | twitter @jolidog

Catarina Clemente | [email protected] | twitter @cvclemente


Top Related