Temas em Drupal

Download Temas em Drupal

Post on 03-Jun-2015

2.813 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

Apresentao feita por Catarina Clemente e Joo Belchior durante o DrupalCamp Lisboa 2011.

TRANSCRIPT

  • 1. Temas emDrupalDrupalCamp Lisboa 2011 - 26 de MaroCatarina Clemente (cvclemente)Joo Belchior (Jolidog)

2. Temas em Drupal2 | 18INICIADOINTERMDIOAVANADOSistema de camadas / LayersO tema o ltimo layerantes do utilizador ver osite no seu browser. 3. Temas em Drupal 3 | 18INTERMDIO AVANADO INICIADO 4. Temas em Drupal4 | 18INICIADO INTERMDIO AVANADO Onde encontrar temasExistem cerca de 702 temas (574 Drupal 6 e 128 Drupal 7) gratuitamentedisponibilizados em http://drupal.org/project/themesPoder 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!2/8 5. Temas em Drupal 5 | 18INICIADOINTERMDIO AVANADOTemas ContribuidosPodem no ter ocdigo optimizadoou asfuncionalidades queservem os seuspropsitos.Sodisponibilizadospara a comunidadegratuitamente.Alguns tm suportepela estruturadrupal.orgAlguns tmdocumentao e/oudemonstrao2/8 6. Temas em Drupal6 | 18INICIADOINTERMDIOAVANADO Opes bsicas de personalizaoSite logo, slogan, favicon;Esquema de cores, em temas como o Garland ou o Bartik ou outrostemas com suporte para o mdulo Color.Outras opesAlguns temas, tais como o Acquia Slate, Acquia Marina e AcquiaProsper permitem personalizar outros aspectos:Posicionamento e largura de colunas;Tipo e tamanho de fonte 7. Temas em Drupal 7 | 18 INICIADOAVANADOINTERMDIO 8. Temas em Drupal 8 | 18 INICIADO INTERMDIOAVANADO Crie o seu tema usando interface grficoAtravs de servios de alojamento Drupal (por exemplo com o DrupalGardens da Acquia ou o Buzzr da Lullabot), pode fazer upload dos seuselementos grficos, escolher o layout, o esquema de cores, os elementosde estilo da pgina e pode mesmo usar o seu prprio CSS.http://drupalgardens.comhttp://buzzr.comExistem, tambm, aplicaes Wysiwyg ou web design generators.http://www.artisteer.com2/8 9. Temas em Drupal9 | 18INICIADO INTERMDIOAVANADOComo criar o seu temaUma boa forma de aprender modificando um tema existente. Instaleum dos temas mencionados no nvel anterior ou faa uma cpia de umdos temas includos 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.js2/8 10. Temas em Drupal 10 | 18 INICIADO INTERMDIO AVANADOAlgumas ferramentasWeb 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 Servicehttp://www.w3.org/Status.html2/8 11. Temas em Drupal 11 | 18 INICIADO INTERMDIO AVANADO 12. Temas em Drupal 12 | 18INICIADO INTERMDIO AVANADOTemas base / Starter ThemesPermitem comear de um ponto avanado.Muitos incluem kit inicial, resets de CSS, grelhas, settings avanados.ZenFusion Adaptative themehttp://drupal.org/project/zenhttp://drupal.org/project/fusion http://drupal.org/project/adaptivethemeOutros em drupal.orgmothership blueprint zentropy...GenesisOmegahttp://drupal.org/project/genesishttp://drupal. org/project/omega 13. Temas em Drupal13 | 18INICIADOINTERMDIOAVANADOSubstituir / Override de templatesFicheiros .tpl.phpSubstituir ficheiros do tema base ou do ncleo.Usar sugestes de template para casospontuais.http://drupal.org/node/1089662Modificar funesUsar o template.phpUsar funes theme_foobar (); comonomedotema_foobar ();http://drupal.org/node/173880 Criar variveisUsar o template.php.criar variveis.Funes preprocess and process.http://drupal.org/node/223430 14. Temas em Drupal14 | 18 INICIADOINTERMDIO AVANADOGesto de layoutPanelsUm gestor de layout, com contextos, excelente integrao com o views.http://drupal.org/project/panelsContextpermite expor blocos ou outros elementos de acordo com o contexto da pgina emquesto. Trabalha com os mdulos spaces e boxes.http://drupal.org/project/contextDisplaySuitePermite modificar os layouts de alguns elementos do drupal, como o node, comments,search results, etc. Simples e uma excelente opo no D7.http:/drupal.org/project/dsBlockifyExpem elementos do drupal core como blocos.http://drupal.org/project/blockify 15. Temas em Drupal 15 | 18 INICIADO INTERMDIO AVANADO Markup / CSSSemantic views (integrado no Views3)Permite modificar o markup produzido pelo views directamente no interfacegrfico.http://drupal.org/project/semanticviewsSemantic CCKPermite modificar o markup produzido pelo mdulo CCK.http://drupal.org/project/semantic_cckIE CSS Optimizer (Integrado no D7)Soluo para o bug do IE6 -> 8 que no 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 16. Temas em Drupal 16 | 18 INICIADOINTERMDIO AVANADOMarkup / CSS (cont.)@font-your-faceIntegra servios externos de fonts, Typekit, Font Squirrel, google fonts e muitos outros.http://drupal.org/project/fontyourfaceUniformIntegra o jquery.uniform library para estilizar forms de forma coerente nos vrios browsers.http://drupal.org/project/uniformModernizrIntegra a biblioteca javascript modernizr, permite usar CSS3 e html5 nos browsers quesuportam.http://drupal.org/project/modernizrTypogrifyAplica melhorias a nvel tipogrficohttp://drupal.org/project/typogrify 17. Temas em Drupal 17 | 18 INICIADO INTERMDIO AVANADO Criar um tema de Raiz Tambm uma opo... Mas tenham em ateno o grfico ao lado! 18. Temas em Drupal 18 | 18INICIADOINTERMDIOAVANADO OBRIGADO! QUESTES?Joo Belchior | jbelchior@fidibiko.com | twitter @jolidog Catarina Clemente | geral@catarinaclemente.com | twitter @cvclemente