Joomla15_TemplateTutorial_traduzido

8/14/2019 Joomla15_TemplateTutorial_traduzido

1/53

Joomla! Um Guia do UsurioConst ruindo um Websit e Poderoso com o Joomla!

JOOMLA! 1.5

TUTORIAL SOBRE TEMPLATE

Extrato do Captulo 11 do livro:Joomla! A Users Guide Building a Joomla! Powered Website

Autor: Barrie North, www.compassdesigns.net(http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.html)Para download do documento original e arquivos modelos do template_1.5:http://www.compassdesigns.net/joomla-library/task,doc_download/gid,13/Itemid,52/Traduo livre: Geciel Rangel Costa - http://gecielc.spaces.live.com/

2006 Compass Design 1 de 53

Esta amostra de contedo foi extrada do prximo lanamento do livro entitulado Joomla! A User Guide Building a Joomla! Powered Website, aser publicado a partir do ms de maio de 2007 pela Prentice Hall Professional. licenciado sob a atribuio de no comercial-no derivativo 2.5
http://www.compassdesigns.net/http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.htmlhttp://www.compassdesigns.net/joomla-library/task,doc_download/gid,13/Itemid,52http://www.compassdesigns.net/joomla-library/task,doc_download/gid,13/Itemid,52http://gecielc.spaces.live.com/http://gecielc.spaces.live.com/http://www.compassdesigns.net/joomla-library/task,doc_download/gid,13/Itemid,52http://www.compassdesigns.net/joomla-library/task,doc_download/gid,13/Itemid,52http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.htmlhttp://www.compassdesigns.net/


2/53



Esta amostra de contedo foi extrada do prximo lanamento do livro entitulado Joomla! A User Guide Building a Joomla! Powered Website, a

Captulo 11

Neste captulo, demonstraremos os passos para se criar um template do Joomla.Especificamente, criaremos um template que emprega folha de estilos em cascata (CSS) paraproduzir um leiaute sem o uso de tabelas. Esta uma meta desejvel, pois significa que o cdigodo template ser mais fcil de ser validado nos padres especificados pelo Consrcio da WorldWide Web (W3C). Tambm, tender a carregar mais rpido, ser mais fcil de manter e termelhor performance em mecanismos de buscas. Discutiremos esses assuntos em detalhe ao longodeste captulo.

Incluso neste captulo esto s seguintes sees:

O que um template Joomla? -> pg. 02Explica quais funes so executadas por um template Joomla e as diferenas entre umtemplate sem contedo e quando algum contedo adicionado ao CMS.

Processo de desenvolvimento no localhost (local) -> pg. 03Como o processo de desenvolvimento difere daquele de uma pgina esttica (X)HTML. W3C e Programao sem Tabela -> pg. 05

As implicaes do desenho sem tabelas no Joomla e o relacionamento entre os padresda W3C, usabilidade e acessibilidade.

Os componentes de um template -> pg. 07Quais arquivos compem um template do Joomla e as funes que eles exercem.

Empregando o CSS para criar um leiaute -> pg. 15Como criar um leiaute de trs colunas ordenadas empregando CSS ao invs de tabelas.

O CSS Especfico do Joomla -> pg. 22Uma introduo aos estilos bsicos que podem ser empregados com o Joomla, alm de

uma lista padro de estilos que so empregados no mecanismo central do Joomla. Mdulos -> pg. 23Como posicionar e aplicar estilos aos mdulos, incluindo tcnicas para cantosarredondados.

Menus -> pg. 28Uma estratgia simples para produzir menus enxutos com CSS que imitam os efeitosdaqueles produzidos com JavaScript.

Suprimindo Colunas -> pg. 32Como controlar a apresentao de colunas e como suprimi-las quando no houvercontedo a ser apresentado.

Fazendo um verdadeiro template para verso Joomla 1.5 -> pg. 36Aqui vamos realmente empregar um modelo especfico e apresentar os passos para criar

um template til para o Joomla 1.5

O que um template Joomla?

O template no Joomla uma srie de arquivos que dentro do CMS Joomla controla aapresentao de contedo. O template no Joomla no um site da web, e nem mesmo pode serconsiderado como um modelo de um site completo da web. O template o esboo principalbsico para visualizar o site Joomla. Para produzir o efeito de um site completo, o templatetrabalha em conjunto com o contedo armazenado nas bases de dados do Joomla. Um exemplopode ser visto na Figura 11-1.

ser publicado a partir do ms de maio de 2007 pela Prentice Hall Professional. licenciado sob a atribuio de no comercial-no derivativo 2.5


3/53




Fig. A Template JoomlaCom amostras de contedo

Fig. B Template JoomlaCom pouco ou sem contedo

Figura 11-1 Template com e sem contedo

A Figura A apresenta o template em uso com amostras de contedo. A Figura B apresenta otemplate como ele deve parecer, com uma lista bsica de recursos da instalao do Joomla, compouco ou sem contedo. O template moldado de forma que quando o seu contedo inserido,ele herdar as especificaes das folhas de estilo definidas no template, tais como o estilo de

link, menus, navegao, tamanho do texto e cores, para citar alguns.

Observe como as imagens associadas com o contedo (as imagens das pessoas) no so parte dotemplate, enquanto a imagem no cabealho (parte superior da pgina) parte do mesmo.

Empregando um template para um CMS, como o Joomla faz, tem um nmero de vantagens edesvantagens:

H uma completa separao do contedo e da apresentao, especificamente quando oCSS empregado para o leiaute (em oposio a se ter tabelas no arquivo index.php). Este um dos principais critrios para um site atender aos modernos padres da web.

Um novo template, e da um visual completamente novo para um site, pode ser aplicadoinstantaneamente. Isto pode, inclusive, permitir a especificao de diferenteslocalizaes/posicionamentos do contedo, assim como cores e grficos.

Se leiautes diferentes forem necessrios para um site, isto pode ser difcil de seconseguir.

Embora diferentes templates possam ser aplicados para diferentes pginas, esta construo emfuncionalidade no confivel. Melhor empregar comandos condicionais em PHP e criar umleiaute que dinamicamente ajusta o nmero de colunas baseado no contedo a ser publicado.

Processo de desenvolvimento no localhost (local)

Uma pgina que voc v em um site Joomla no esttica. Isto significa que ela gerada

dinamicamente a partir do contedo armazenado no banco de dado. A pgina que voc v



4/53




criada a partir de vrios comandos em PHP que esto no arquivo index.php do template. Issoapresenta alguma dificuldade na fase de desenvolvimento.

comum hoje empregar um editor HTML do tipo o que voc v o que obtm (WYSIWYG), talcomo o Dreamweaver. Isso significa que o programador nem mesmo precisa codificar em HTML.Contudo, isso no possvel no processo de programao de template no Joomla, pois editoresWYSIWYG no podem apresentar pginas dinmicas. Isso significa que o programador devecodificar manualmente e ver a sada das pginas em PHP em uma pgina gerada por umservidor. Com uma conexo rpida o suficiente, este poder ser o prprio servidor web, masmuitos programadores empregam um servidor local em seu prprio computador. Este umaparte do software que processar as pginas da web no prprio computador do programador.

No existe a maneira certa para criar pginas da web, isto depende do conhecimento doprogramador. Aqueles mais grficos fazem uma imagem de uma pgina em um programagrfico, como o Photoshop, e ento particionam a imagem para usar (tcnica conhecida comoslice and dice [cortar em pedaos e ordenar]). Os programadores mais inclinados para a rea

tecnolgica, simplesmente vo direto para o CSS e comeam a codificao. Contudo, comomencionado acima, o programador de template Joomla limitado, pois ele no pode verinstantaneamente o efeito da sua codificao no mesmo editor; dessa forma o processo deprogramao modificado deve ser:

1. Fazer as programaes com um editor HTML e salvar as modificaes;2. Ter um localhost [servidor local] em execuo para executar o Joomla;3. Ver o que foi programado no navegador; e4. Voltar para o passo 1.

Opes do Servidor Local

No captulo 3 [do livro a ser lanado e mencionado na pgina inicial] vimos como instalar um servidor web

para rodar em seu computador. Descrevemos um deles para windows chamado Wamp. Paraseguir adiante neste captulo precisaremos t-lo instalado [ou um outro, de sua preferncia]. Seprecisar, vou ficar por aqui enquanto voc instala um servidor local.

DicaUma tcnica til para fazer o processo de programao mais eficiente apresentar a pginaque se est desenvolvendo a partir de um servidor e ento copiar e colar o cdigo fonte emum editor. Por exemplo, to logo o seu leiaute em CSS esteja estabelecido, voc podeempregar um servidor local para apresentar a pgina, ento selecione no navegador a opode ver o cdigo fonte. Voc ento poder copi-lo e col-lo em seu editor. Voc poder agorafacilmente especificar estilos para as pginas empregando CSS e no precisar seguir ospassos especificados anteriormente.

Um editor XHTML livre

Para aqueles que no possam pagar por um editor comercial como o Dreamweaver, existemalguns editores livres disponveis. Nvu uma escolha slida, foi construdo com validao e 100% de fonte aberta. Isto significa que qualquer um bem-vindo para fazer o download do Nvusem custos (http://www.nvu.com/download.php), incluindo o cdigo fonte, se voc desejarfazer alteraes especiais.

http://www.wampserver.com/http://www.nvu.com/download.phphttp://www.nvu.com/download.phphttp://www.wampserver.com/


5/53




W3C e Programao sem Tabela

Usabilidade, acessabilidade e otimizao para mecanismos de buscas so todos termosempregados para descrever pginas de alta qualidade atualmente no mundo da web. Narealidade, existe uma significativa quantidade de sobreposio entre eles e uma pgina da webque demonstra que a caracterstica de um afeta os demais, como demonstrado na figura 11-2. Amaneira mais fcil para alcanar estas trs metas faz-lo empregando o sistema disponvel napgina web que seja validado com os padres da W3C.

Por exemplo, um site que estruturado semanticamente em (x)html (o xhtml explica odocumento, no como ele se apresentar) ser facilmente lido em um leitor de pgina poralgum que tenha dificuldade de viso. Ser facilmente lido tambm por ferramentas demecanismos de busca. Google efetivamente cego em como ele l o seu site.

Sit e pobre

Cdigo vlido pela W3C

Figura 11-2 A sobreposio entre SEO, acessibilidade e usabilidade

Um site que validado nos padres estabelecidos pelo Consrcio W3C tem uma estrutura melhorpara faz-lo mais acessvel, usvel e otimizado para mecanismos de buscas.

Pense nisso como construindo blocos para a sua casa. Um site construdo com os padres maisforte e seguro. Voc pode verificar suas pginas nos servios de validao de HTML da W3C

gratuitamente (http://validator.w3.org/). Em resumo, um site que atende as regras depadronizao e validao da W3C emprega semntica (x)html e separa contedo deapresentao empregando CSS.

http://validator.w3.org/http://validator.w3.org/


6/53




Para ajud-lo a entender de onde vieram os padres web, um pouco de histria til. Muitaspginas da web hoje so programadas para navegadores antigos. Por que? Os navegadores vemcontinuamente se desenvolvendo desde o incio da web. Alguns novos apareceram e antigosdesapareceram (lembra-se do Netscape?) Um outro fator complicador que diferentesfabricantes de navegadores (como a Microsoft) tendem a ter os seus interpretadores html/xhtmldo navegador ligeiramente diferentes dos demais. Isto tem levado os programadores web adesenvolverem os seus sites para suportar antigos navegadores assim como novos. Istofrequentemente leva a deciso que a pginas da web precisam apropriadamente nessesnavegadores legados.

Os padres web colocam em questo um conjunto de regras para todos os navegadores webusarem para apresentar uma pgina da web. A organizao principal apresentam esses padresno Consrcio W3C, cujo Diretor, Tim Berners-Lee tem a distino de ser atualmente o inventorda rede mundial (www) em 1989.

Pergunte a cinco programadores o que so padres web e voc ter cinco respostas. Mas muitos

concordam que elas so baseadas em se seguir cdigos vlidos, seja html ou xhtml (ou outros).

Antes usvamos um exemplo de se construir cdigos por construir. Os padres apresentam-nosum modelo para os cdigos de uma pgina da web ser desenvolvida para alcanar umaconsistncia. fcil verificar o seu cdigo no http://validator.w3.org. Assegure-se de empregaro tipo correto de documento (DOCTYPE) quando tentar validar o seu cdigo. Este artigo no siteda Compass Design ajuda a explicar mais isto:http://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.html.

Cdigo Correto Semanticamente

Mencionamos antes que ser semntico significa que o (x)html na pgina da web descrevesomente o contedo, no a apresentao. Em particular isto significa que a organizao daestrutura dos marcadores h1/h2 e etc., esto somente empregando tabelas para dadostabulados, e no para especificar o leiaute da pgina.

Folhas de Estilo em Cascata (CSS)

Diretamente relacionado a se ter cdigos semnticos empregar folhas de estilo em cascatapara controlar a aparncia e leiaute da sua pgina da web. Folhas de Estilo em Cascata (CSS) um mecanismo simples para adicionar estilos (por exemplo: fontes, cores e espaos) paradocumentos web. (Fonte: http://www.w3.org/Style/CSS/). Eles existem em paralelo ao cdigo

(x)html e permitem que voc separe completamente o contedo (cdigo semntico) daapresentao (CSS). O melhor exemplo disso o CSS Zen Garden(http://www.csszengarden.com/tr/portuguese/) (http://www.csszengarden.com/), um siteonde a mesma semntica XHTML moldado em diferentes e nicas maneiras com diferentescdigos CSS. O resultado uma pgina que parece muito diferente, mas tem o mesmo contedocentral.

Programar sites poderosos com o Joomla apresenta atualmente desafios considerveis paraatender aos padres de validao. Nas primeiras sries lanadas, 1.0.X, o cdigo empregava umasignificativa quantidade de tabelas para as pginas de sada. O que no estava realmenteempregando CSS para a apresentao, nem produzia cdigos corretos semanticamente. Oproblema complicado pelo fato de que poucos desenvolvedores de cdigos estejam

empregando o CSS, e muitos empregam tabelas para gerarem o cdigo, tambm.

http://validator.w3.org/http://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.htmlhttp://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.htmlhttp://www.w3.org/Style/CSS/http://www.csszengarden.com/tr/portuguese/http://www.csszengarden.com/http://www.csszengarden.com/http://www.csszengarden.com/tr/portuguese/http://www.w3.org/Style/CSS/http://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.htmlhttp://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.htmlhttp://validator.w3.org/


7/53




Felizmente, o time de desenvolvimento do ncleo do Joomla reconheceu este fato. Na verso1.5 possvel para programadores de templates sobrescreverem completamente a sada doncleo (chamado de uma vista) e retirar todas as tabelas, customizar o leiaute, o que quer quequeiram.Entretanto, cuidados devem ainda ser tomados quando criando um template de forma que eleseja acessvel (por exemplo: tamanho da fonte escalvel), usvel (por exemplo: navegaoclara) e otimizado para mecanismos de buscas (por exemplo: ordenamento de fonte).

Os Componentes de um Template

De forma a entender o contedo de um template, iniciaremos dando uma olhadela em umtemplate em branco (vazio). Um template do Joomla composto de vrios arquivos e pastas.Esses arquivos devem ser colocados no diretrio /templates/ de uma instalao Joomla, em suapasta prpria. Ento, se tivermos dois templates instalados, nosso diretrio se parecer com:

/templates/element

/templates/voodoo

Observe que os nomes dos diretrios dos templates devem ser os mesmos que os nomes dostemplates, neste exemplo acima element e voodoo. Obviamente que so sensveis ao tamanhoda letra e no devem conter espaos.

Dentro do diretrio de um template existem um nmero de arquivos chaves:

/element/templateDetails.xml/element/index.php

Esses nomes de arquivos e localizao devem ser coincidentes exatamente, pois assim so

chamados pelo script do ncleo do Joomla.

templateDetails.xml

(Observe a letra D maiscula). Esse um arquivo metadata de formato XML que diz ao Joomlaquais os demais arquivos so necessrios quando carregando uma pgina da web que usa essetemplate. Tambm detalha o autor, direitos autorais e os arquivos que compem o template(incluindo as imagens eventualmente empregadas). O ltimo emprego desse arquivo parainstalar um template quando empregando a rea de administrao/manuteno do site.

Index.php

Este arquivo o mais importante. Ele monta o site e diz ao CMS Joomla onde colocar osdiferentes componentes e mdulos. Ele uma combinao de PHP e (X)HTML. Em quase todos ostemplates, arquivos adicionais so empregados. convencional (embora no requerido peloncleo do Joomla) nomear e localizar todos os arquivos conforme mostrado abaixo:

/element/template_thumbnail.png/element/css/template.css/element/images/logo.png

Esses so apenas exemplos, vamos examinar cada um desses arquivos de per si.

/element/template_thumbnail.png



8/53




uma captura da imagem da tela do navegador (geralmente reduzida para cerca de 140 pixelsde largura por 90 pixels de altura). Depois que o template tiver sido instalado, isto funcionacomo uma imagem de pr-visualizao visvel na rea de administrao do Joomla, noGerenciamento de Template (Template Manager) e tambm no mdulo de seleo de templatesna pgina de abertura, se empregado.

/element/css/template.css

o CSS do template. A pasta de localizao opcional, mas voc dever especificar onde eleest no arquivo index.php. Voc pode denomin-lo como quiser. Geralmente o nomeapresentado o empregado, mas veremos adiante que h vantagens em se ter outros arquivoscss tambm.

/element/images/logo.png

uma imagem que acompanha o template. Novamente, por razes de organizao, muitosprogramadores colocam este arquivo na pasta de imagens (images). Aqui temos uma imagemchamada de logo.png, como um exemplo.

O arquivo templateDetails.xml

O arquivo templateDetails.xml deve relacionar todos os arquivos que fizerem parte do template.Ele tambm relaciona informaes tais como o nome do autor e direitos autorais. Algumasdessas informaes so mostradas na rea de administrao/manuteno na opo deGerenciamento de Template (Template Manager). Um exemplo de arquivo xml apresentadoabaixo:

TemplateTutorial15December 2006Barrie NorthGPLcompassdesigns@gmail.comwww.compassdesigns.net1.0Template for official Joomla documentation guide

index.phptemplateDetails.xmljs/somejsfile.jsimages/threecol-l.gifimages/threecol-r.gifcss/customize.csscss/layout.csscss/template_css.css

No



9/53


10/53




index.phptemplateDetails.xmljs/somejsfile.jsimages/threecol-l.gifimages/threecol-r.gifcss/customize.csscss/layout.csscss/template_css.css

A seo files (arquivos) contm todos os arquivos genricos como a fonte PHP para o templateou a amostra da imagem para a pr-visualizao do template. Cada arquivo listado nesta seo marcado com os marcadores . Tambm poderia ser includo qualquerarquivo adicional, aqui empregamos o exemplo de um arquivo JavaScript que necessrio para otemplate.

Todos os arquivos de imagens que o template emprega tambm so listados na seo .Novamente, cada arquivo listado marcado com o marcador . Asinformaes de caminho dos arquivos so relativos raiz do template, por exemplo: se o seutemplate estiver em um diretrio chamado SeuTemplate e todas as imagens estiverem napasta images que est dentro do diretrio SeuTemplate, o caminho correto :images/my_image.jpg

Finalmente, todo arquivo de folha de estilo so listados na seo . Novamente o nome doarquivo marcado com os marcadores e o seu caminho relativo raizdo template.

O arquivo Index.php

O que de fato existe em um arquivo index.php? Ele uma combinao de (X)HTML e PHP quedetermina tudo a respeito do leiaute e apresentao das pginas.

Primeiro olharemos para uma parte crtica de se conseguir templates vlidos, o DOCTYPEexistente no topo do arquivo index.php. Este um pedao de cdigo que aparece na partesuperior de cada pgina da web. No topo da pgina do nosso template temos o seguinte:

O DOCTYPE a parte fundamental do componente a partir da qual uma pgina da web apresentada em um navegador e refere-se, especialmente, a como um navegador interpreta oCSS. Para dar-lhe um sentido do que isto significa, veja uma observao do sitehttp://www.alistapart.com:

[informao sobre doctypes no W3C diz que doctypes ] escrito por nerds para nerds. E quandodigo nerds, no quero dizer profissionais comuns da web como eu e voc. Quero dizer aquelesque fazem o resto de ns parecermos como avs no primeiro dia em que recebem um email.TM

http://www.alistapart.com/http://www.alistapart.com/


11/53




De qualquer maneira, h diversos tipos de doctypes que voc pode empregar. Basicamente, odoctypes diz ao navegador como interpretar a pgina. Aqui as palavras strict e transitionaliniciam posicionando as flutuaes existentes (float:left e float:right, normalmente).Essencialmente, desde quando a WWW iniciou, diferentes tipos de navegadores tm diferentesnveis de suporte a CSS. Isto significa, por exemplo, que o Internet Explorer no entender ocomando min-width para estabelecer a largura mnima da pgina. Para conseguir o mesmoresultado voc ter que empregar hacks (cortes ou novos cdigos de programao, ou seja, hackear) nocdigo CSS.

Nota:Alguns dizem que processar XHTML como text/html considerado prejudicial. Se voc realmenteentende essa afirmao voc est bem frente no jogo e alm desse guia. Voc pode ler mais emhttp://www.hixie.ch/advocacy/xhtml.

Strict significa que o html (ou XHTML) ser interpretado exatamente como especificado nospadres. Um doctype do tipo transitional significa que pgina ser permitida umas poucasdiferenas em relao aos padres.

Para complicar as coisas, h alguma coisa chamada de modo "quirks" (volta). Se o tipo dedocumento (doctype) estiver errado, desatualizado ou no existir, ento o navegador entra nomodo "quirks". Esta uma tentativa de voltar um passo atrs e para tentar ficar compatvel;ento, o Internet Explorer, por exemplo, far o processamento da pgina fingindo que ela era daverso do IE4.

Infelizmente, as pessoas algumas vezes terminam nesse modo louco (quirks mode)acidentalmente. Isto normalmente acontece por duas razes:

Eles empregam direto a declarao do tipo de documento (doctype) a partir de uma pgina WC3,onde o link termina em:DTD/xhtml1-strict.dtdExceto se este for um link relativo ao servidor WC3, voc precisa do caminho completo, comodemonstrado no exemplo acima, no incio desse item.

A Microsoft especificou o IE6 de tal modo que possvel ter pginas vlidas, porm, no modoquirk. Isto acontece por existir a expresso "xml declaration" antes da declarao do tipo dedocumento (doctype).?>A realidade que uma declarao xml no realmente necessria, ento vamos deixar sem.

A parte a respeito do modo quirk do IE6 importante. Neste captulo estaremos programando somentepara o IE6+, ento, devemos ter certeza de que o mesmo estar funcionando no modo padro. Istominimizar as codificaes extras (hacks) que talvez tenhamos que fazer.

Fazer uma pgina concordante com os padres, onde voc v a expresso "valid xhtml" no final da pgina,no significa que foi difcil elaborar o cdigo ou entender os marcadores. Simplesmente significa que ocdigo empregado atende as especificaes do tipo de documento (doctype) mencionada. S isso! Nadamais.

Elaborar o seu site para atender aos padres deve ser uma forma de reduzir o que voc est dizendo quefaz e, sim, fazendo o que voc diz que faz.

Alguns links teis:

http://www.quirksmode.org/css/quirksmode.html

http://www.alistapart.com/stories/doctype http://www.w3.org/QA/2002/04/Web-Quality

http://www.hixie.ch/advocacy/xhtmlhttp://www.quirksmode.org/css/quirksmode.htmlhttp://www.alistapart.com/stories/doctypehttp://www.w3.org/QA/2002/04/Web-Qualityhttp://www.hixie.ch/advocacy/xhtmlhttp://www.w3.org/QA/2002/04/Web-Qualityhttp://www.alistapart.com/stories/doctypehttp://www.quirksmode.org/css/quirksmode.html


12/53




http://forum.joomla.org/index.php/topic,7537.0.html http://forum.joomla.org/index.php/topic,6048.0.html

O que existe a mais no arquivo index.php?

Vamos observar a estrutura do marcador de cabealho (head) primeiro; queremos ser o maisconcisos possveis, porm, descrever o suficiente para a elaborao de um site. A informao decabealho que empregaremos a seguinte:

O que tudo isso significa?

Falamos sobre isso acima. O cdigo est carregando osparmetros de idioma especificados no arquivo de configurao global do site.

Coisas do cabealho que so especificados no arquivo de configurao do site. Isto inclui osseguintes marcadores (em uma instalao padro):

http://forum.joomla.org/index.php/topic,7537.0.htmlhttp://forum.joomla.org/index.php/topic,6048.0.htmlhttp://forum.joomla.org/index.php/topic,6048.0.htmlhttp://forum.joomla.org/index.php/topic,7537.0.html


13/53




Isto inclui um nmero de metatags, o favicon (cone indicativo do site) e tambm URLs doalimentador de RSS.

Esta linha faz a ligao do arquivo CSS com o template. O cdigo PHP retornar o nome do template atual. Escrevendo dessa forma ao invs do caminho

real faz o cdigo mais genrico. Quando voc cria um novo template voc pode apenas copi-lo(com todo o seu cdigo de cabealho) e no se preocupar com a edio de nada.

O corpo de um template vazio (em branco) do Joomla

Isto ser muito fcil! Pronto?

OK, ainda neste ponto isto parece no representar nada muito inspirador. A sada apresentadana figura 11-3.

Ns temos uma ordem lgica razovel:1. nome do site (sitename);2. module superior (top);3. mdulos da esquerda (left);4. contedo principal (component); e5. mdulos da direita (right).

A meta tentar e se aproximar o mais prximo possvel da semntica de marcao. A partir doponto de vista da web, significa que a pgina pode ser lida por qualquer um: um navegador, ummecanismo de busca ou um leitor de tela. O leiaute semntico a pedra fundamental daacessibilidade.



14/53




Figura 11-3 Um template sem especificao de estilo

Voc poder ler mais a respeito de leiaute semntico no Apndice B (do livro retromencionado).

NotaAgora no vale nada que o que temos aqui realmente apenas um potencial para leiautesemntico. Se algum quiser ir adiante e colocar mdulos aleatrios em localizaesaleatrias, ento voc poder ter uma baguna. Uma importante considerao para sites CMS,um template somente to bom quanto a quantidade de contedo. isto quefrequentemente derruba programadores quando tentam validar seus sites.

Voc deve ter observado que empregamos o primeiro de outros diversos comandos especficos doJoomla.

O comando de PHP echo simplesmente apresenta na sada um conjunto de caracteres do arquivode configurao (configuration.php). Aqui estamos empregando o nome do site, podemos

facilmente ter:



15/53




O comando jdoc insere vrios tipos de XHTML.

Este insere uma sada de um componente. Qual componente, ser determinado pelo link domenu.

NotaInteressado o bastante; parece que voc parece capaz de ter mltipas instncias de sadade um componente. No tem certeza de por que precisaria disso, mas penso que deixarei

voc saber!

Isto insere a sada para um mdulo de localizao. A sintaxe completa :

Veremos as vrias opes para estilos posteriormente neste captulo.

Empregando o CSS para criar um leiaute

Estaremos empregando CSS para fazer um leiaute de trs colunas para um template Joomla.Tambm estaremos fazendo um leiaute flexvel. H dois tipos de leiautes de pginas da web,fixo e flexvel, e ambos se referem a como a largura da pgina controlada.

A largura da pgina a questo, por causa das muitas resolues de um navegador em que aspessoas navegam na web. Embora o percentual esteja caindo, cerca de 20% das pessoas queacessam a internet empregam a resoluo de 800x600. A grande maioria, 76%, est empregandoa resoluo de 1024 x 768 e maior1 (fonte: www.upsdell.com). Fazer um leiaute flexvel significaque a sua valiosa pgina da web no ser apresentada como uma fina coluna na resoluo de1024, e ser totalmente visvel em monitores com resoluo menor.

Um esboo tpico deve empregar tabelas para formar o leiaute da pgina. Elas so teis, pois,basta especificar a largura das colunas em percentual, mas tm muitas desvantagens:

Tem muitos cdigos extras comparados ao leiaute com CSS. Isto resulta em tempo decarregamento maior (o que as pessoas que acessam a internet no gostam) e baixaperformance em ferramentas de buscas. O cdigo pode duplicar em tamanho, nosomente com marcadores, mas, tambm, com os chamados spacer gifs(espaadores). Mesmo grandes companhias caem na armadilha das tabelas, conformevisto em uma recente controvrsia, a respeito do novo site da disney2: disney.co.uk.

1www.upsdell.com/BrowserNews/stat_trends.htm#res2www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.html

http://www.upsdell.com/BrowserNews/stat_trends.htm#reshttp://www.compassdesigns.net/resources/articles/w3cstandardcssdesign/http://www.upsdell.com/BrowserNews/stat_trends.htm#reshttp://www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.htmlhttp://www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.htmlhttp://www.upsdell.com/BrowserNews/stat_trends.htm#reshttp://www.compassdesigns.net/resources/articles/w3cstandardcssdesign/http://www.upsdell.com/BrowserNews/stat_trends.htm#res


16/53




Elas so difceis de se manter. Para alterar alguma coisa deve-se ter conhecimento doque todos os marcadores td/tr esto fazendo. Com CSS existem apenas algumas linhaspara inspecionar.

O contedo no pode ser ordenado por cdigo. Muitos usurios da internet no vem aspginas da web em um navegador. Aqueles que vem com navegadores de texto ouleitores de tela lero a pgina da esquerda-superior para o canto direito-inferior. Istosignifica que primeiro eles vem tudo no cabealho e a coluna da esquerda (em umleiaute de 3 colunas) antes de chegar ao meio da coluna, o assunto mais importante.Um leiaute CSS, por outro lado, permite que o contedo seja cdigo-orientado, o quesignifica que o contedo pode ser arranjado no cdigo/fonte. Talvez seu maisimportante visitante seja o Google, e ele emprega leitores de tela para todos ospropsitos e intenes.

Vamos olhar o nosso leiaute empregando CSS. Voc pode posicionar elementos (o que quiser) dediversas maneiras com CSS. Para uma informao rpida uma boa fonte : Brainjar's CSSPositioning3.

Se voc novo em CSS deve ler, ao menos, um guia bsico de CSS. Aqui esto algumassugestes:

Kevin Hale's - An Overview of Current CSS Layout Techniqueshttp://particletree.com/features/an-overview-of-current-css-layout-techniques/

htmldog's CSS Beginner's Guidehttp://www.htmldog.com/cssbeginner/

yourhtmlsource.comhttp://www.yourhtmlsource.com/stylesheets/

Estaremos empregando o comando float para posicionar o nosso contedo. Como ele bsico, otemplate se parecer com o apresentado na Figura 11-4.

Ainda no muito empolgado, mas vamos ver se todos esto acompanhando.

Os estilos CSS so definidos no marcador do cabealho (head) do arquivo index.php para mostraro que est acontecendo, mas, normalmente, eles poderiam estar no arquivo template.css.

Tudo estar contido em uma caixa/invlvucro ou elemento chamado #wrap. Este elemento temuma largura de 80% da rea de visualizao, a qualquer tempo.

3www.brainjar.com/css/positioning/

http://www.brainjar.com/css/positioning/http://www.brainjar.com/css/positioning/http://particletree.com/features/an-overview-of-current-css-layout-techniques/http://particletree.com/features/an-overview-of-current-css-layout-techniques/http://www.htmldog.com/guides/cssbeginner/http://www.htmldog.com/cssbeginner/http://www.yourhtmlsource.com/stylesheets/http://www.yourhtmlsource.com/stylesheets/http://www.brainjar.com/css/positioning/http://www.brainjar.com/css/positioning/http://www.yourhtmlsource.com/stylesheets/http://www.yourhtmlsource.com/stylesheets/http://www.htmldog.com/cssbeginner/http://www.htmldog.com/guides/cssbeginner/http://particletree.com/features/an-overview-of-current-css-layout-techniques/http://particletree.com/features/an-overview-of-current-css-layout-techniques/http://www.brainjar.com/css/positioning/http://www.brainjar.com/css/positioning/


17/53




Figura 11-4 Leiaute de um template muito bsico

Dica: CSS abreviado possvel reduzir a quantidade de cdigo CSS empregado atravs de abreviaes. Umexemplo disso o estilo de espaamento e margem para um elemento.margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;que pode ser substitudo por:margin: 5px 10px;H estilos de abreviaes no incio de cada definio de estilo. To logo tenha sefamiliarizado com os estilos, passe a empregar os comandos abreviados e apague oscompletos. A sintaxe :

font: font-size |font-style | font-variant | font-weight | line-height | font-familyAqui est um exemplo, ao invs disso...font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;Faa isso:font:bold 1em/1.3em Arial,Helvetica,sans-serif,italic;Leia mais a respeito de sintaxe em An Introduction to CSS shorthand properties (Umaintroduo s propriedades de abreviaes em CSS http://home.no.net/junjun/html/shorthand.html).

A cada uma das colunas da esquerda, meio e direita especificado os seus prprios elementos.Todas so especificadas como floated (fluindo) esquerda, e dado um percentual de largurade 100%. O comando de estilo clear:both no rodap diz ao navegador para parar de fluir e fazer

http://home.no.net/junjun/html/shorthand.htmlhttp://home.no.net/junjun/html/shorthand.htmlhttp://home.no.net/junjun/html/shorthand.htmlhttp://home.no.net/junjun/html/shorthand.html


18/53




com que o rodap se alongue (justifique) englobando as trs colunas. Quando formos construir onosso segundo template neste captulo, vamos ter que usar uma tcnica mais avanada dejustificao.

Para implementar o leiaute e adicionar algum espao ao contedo, precisamos acrescentaralguns espaamentos de coluna, normalmente chamados de "gutter" (canal). Infelizmente, hum problema. Voc deve saber que o Internet Explorer no interpreta corretamente o cdigoCSS (veja em: Internet Explorer does not interpret CSS correctly). Um problema que ele calcula a larguradiferentemente. Resolvemos este problema no empregando qualquer espaador ou borda emalgo que tenha uma largura. Para conseguir o nosso efeito "gutter" adicionamos um outroelemento entre as colunas. Isto apresentado abaixo:

Ao CSS adicionamos:

.inside {padding:10px;}

Este simples leiaute o suficiente para se aprender a como empregar o CSS com oJoomla. Ele apresenta, ao menos, duas vantagens de se empregar CSS ao invs de leiautesbaseados em tabelas; tem menos cdigo e mais fcil de se manter. Contudo, no fonte-ordenado. Para isso devemos empregar um leiaute mais avanado, conhecido como nestedfloat (fluir aninhado).

http://tantek.com/CSS/Examples/boxmodelhack.htmlhttp://tantek.com/CSS/Examples/boxmodelhack.html


19/53




Leiautes de fonte ordenada obtm melhores resultados em mecanismos de busca do que aquelesque o contedo importante aparece na parte final do cdigo. A partir de uma perspectiva de umsite Joomla, o contedo mais importante aquele que vem do componente.

Este leiaute especfico (de fonte ordenada) um tanto quanto complexo e grande o suficientepara ser colocado aqui. Afortunadamente para voc, existe uma explicao de como criar omesmo em arquivo pdf para download em http://www.compassdesigns.net.(veja: http://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-your-joomla-website.html e http://www.positioniseverything.net/ordered-floats.html)

O CSS padro do Joomla

At agora todo nosso CSS tem sido somente sobre leiaute. Isto nos permitir fazer uma pginalimpa e bonita, ento, vamos agora adicionar alguma formatao. Ns tambm movemos todo onosso cdigo CSS que estava no marcador de cabealho do index.php e colocamos em arquivos

CSS.

Vamos adicionar, ainda, um par de coisas, nosso leiaute agora ser:

Ns centralizamos a pgina empregando um pequeno cdigo (hack). Isso deve ser feito por causa

do Internet Explorer. Com navegadores que seguem o padro, apenas empregamos o cdigomargin:0 10%; para centralizar a pgina, mas o IE no reconhece isso. Ento ns centralizamos otexto de toda a pgina e alinhamos de volta para a esquerda nas colunas.

Em comemorao ao suporte do Internet Explorer 7 aos cdigos de min/max width (IE6 nosuportava esses cdigos) podemos adicionar um tamanho de largura (width) mnima e mxima.Observe que tivemos que adicionar um pequeno cdigo (hack) para o IE6, pois o mesmo aindano entende queles cdigos. Ele ignorar o comando !important e considerar a largura total de960px.

http://www.compassdesigns.net/http://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-your-joomla-website.htmlhttp://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-your-joomla-website.htmlhttp://www.positioniseverything.net/ordered-floats.htmlhttp://www.positioniseverything.net/ordered-floats.htmlhttp://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-your-joomla-website.htmlhttp://www.compassdesigns.net/tutorials/joomla-tutorials/making-a-3-column-joomla-theme-for-your-joomla-website.htmlhttp://www.compassdesigns.net/


20/53




DicaPode parecer estranho definir nossas colunas em percentuais de largura e depois ter umelemento (div) que fixo. Bem, existem muitas coisas acontecendo aqui.1. Ter colunas flexveis dentro de elementos de largura fixa torna o template mais flexvel.

Se acrescentarmos botes de alterao de largura teremos que alterar apenas um valor.2. Ainda temos uma largura mxima, entretanto, por que no colocarmos tudo flexvel?Muitos usurios da web hoje possuem enormes telas de monitor. Pesquisa de usabilidadenos informa que linhas de texto mais largas que 900px so difceis de ler porque os olhostm que se deslocar por um longo caminho para ir para a prxima linha. Limitando afluidez (flexibilidade)torna o site mais acessvel/usvel.

Tambm adicionamos um novo estilo de colunas: overflow:hidden. Isto far a pgina quebrarmais consistentemente quando reduzimos a sua largura.

No incio da tipografia do CSS estabeleceremos alguns estilos bsicos e teremos o queconhecemos como reset global.

Tudo recebe o valor zero de margin e padding e ento todos os elementos do nvel de bloco dado, ento, uma margem inferior. Isto ajuda a obter a consistncia do navegador. Voc pode

ler mais sobre o reset global em clagnut4 e left-justified5.

O tamanho da fonte foi setado para 76%. A razo disso para tentar manter a melhorconsistncia entre os navegadores. Todas as fontes foram setadas em em ( um fator relativo aotamanho da propriedade font-size de um elemento). E tendo altura de linha de line-height:1.3emajuda na leitura. Isso significa que as pginas sero mais acessveis e os visitantes do sitepodero alterar o tamanho da fonte para o da sua preferncia. Isso discutido mais em:An experiment in typography at The Noodle Incident (Owen Briggs)6.

4http://www.clagnut.com/blog/1287/5

http://leftjustified.net/journal/2004/10/19/global-ws-reset/6http://www.thenoodleincident.com/tutorials/typography/template.html

http://www.clagnut.com/blog/1287/http://leftjustified.net/journal/2004/10/19/global-ws-reset/http://www.thenoodleincident.com/tutorials/typography/template.htmlhttp://www.clagnut.com/blog/1287/http://leftjustified.net/journal/2004/10/19/global-ws-reset/http://www.thenoodleincident.com/tutorials/typography/template.htmlhttp://www.thenoodleincident.com/tutorials/typography/template.htmlhttp://leftjustified.net/journal/2004/10/19/global-ws-reset/http://www.clagnut.com/blog/1287/http://www.thenoodleincident.com/tutorials/typography/template.htmlhttp://leftjustified.net/journal/2004/10/19/global-ws-reset/http://www.clagnut.com/blog/1287/


21/53




Se voc pretende adicionar algum tipo de cor de fundo (background) veremos alguma coisa comoo apresentado na figura 11-5.

Figura 11-5 Template bsico com tipografia

Observe que as colunas laterais no alcanam o seu rodap. Isso porque elas somente seestendem de acordo com o contedo; onde o espao est em branco esquerda e direita, noexiste contedo.

Se ns temos um template que tenha um fundo branco para as trs colunas, isso no serproblema. Ns iremos considerar essa abordagem e teremos caixas limitando os mdulos. Sevoc quer colunas com alturas iguais e deseja colori-las ou ter caixas, voc pode usar umaimagem de fundo que se repete verticalmente. Essa tcnica chamada de Faux Columns e descrita por Douglas Bowman7 e Eric Meyer8.

7

http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html8http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/

http://www.stopdesign.com/log/2004/09/03/liquid-bleach.htmlhttp://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/http://www.stopdesign.com/log/2004/09/03/liquid-bleach.htmlhttp://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/http://www.stopdesign.com/log/2004/09/03/liquid-bleach.htmlhttp://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html


22/53




O CSS Especfico do Joomla

Embora o Joomla 1.5 tenha a funcionalidade de cancelar/substituir a sada do ncleo dotemplate, sua renderizao padro ainda emprega tabelas para a sada de contedo no corpoprincipal. Em conjunto com essas tabelas existem sadas CSS disponveis para os programadoresaplicarem estilos em suas pginas. Baseado em algumas pesquisas com inmeros membros dacomunidade, a lista atual a apresentada abaixo. Observe que ela no inclui estilos de webgenricos como H1, H2, p, ul, a, form, etc.

importante observar esta lista.Muitos projetos que voc pode encontrar atualmente empregam estilos de CSS mais especficoss suas definies. Basicamente, uma regra mais especfica sobrescrever uma menos especfica.

Por exemplo:

a {color:blue;}

a:link {color:red;}

.contentheading {color:blue;}div.contentheading {color:red;}

A cor do link e a cor da classe .contentheading sero vermelha, pois esta regra mais especfica(pois a classe .contentheading est contida dentro de uma )

No caso de templates Joomla, voc freqentemente ver regras mais especficas sendoempregadas. Isto freqentemente ocorre quando a classe est dentro de uma tabela. Maisexemplos:



23/53




.moduletabletable.moduletable

.moduletable o nome de uma que engloba (envolve) um mdulo. table.moduletablesomente aplicar o estilo uma tabela que contenha a classe (class=moduletable).

.moduletable aplicar o estilo independentemente de qual elemento estiver na classe.

a.contentpagetitle:link.contentpagetitle a:link

a.contentpagetitle:link aplicar o estilo para qualquer marcador a que contenha a classe.contentpagetitle que seja um link.

.contentpagetitle a:link aplicar o estilo para qualquer elemento que esteja DENTRO da classe.contentpagetitle que seja um link.

Especificidade no fcil de se entender; freqentemente mais fcil comear empregandoestilos mais gerais possveis e ento chegar ao mais especfico, se o resultado no for aquilo quese deseja.

Alguns links sobre especificidades:http://www.htmldog.com/guides/cssadvanced/specificity/http://www.meyerweb.com/eric/css/link-specificity.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Neste momento o nosso template est empregando um monte de tabelas, 12 para ser exato!Como mencionado anteriormente, isto torna a pgina mais lenta e dificulta a atualizao. Parareduzir o nmero de tabelas precisamos empregar parmetros de estilos nos jdoc:include quandochamarmos os mdulos.

Mdulos

Quando um mdulo chamado no arquivo index.php, ele tem vrias opes de como serexibido.

A sintaxe :

O estilo opcional e definido em /modules/templates/modules.php. Atualmente o arquivopadro modules.php possui os seguintes leiautes.

style=table (apresentao padro). Os mdulos so apresentados em uma coluna. Um exemplode sada apresentado abaixo:

modChrome_table

http://www.htmldog.com/guides/cssadvanced/specificity/http://www.meyerweb.com/eric/css/link-specificity.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlhttp://www.meyerweb.com/eric/css/link-specificity.htmlhttp://www.htmldog.com/guides/cssadvanced/specificity/


24/53


25/53




modChrome_rounded

style=raw = Os mdulos so apresentados em estado bruto, ou seja, sem processamento, semelemento de agrupamento e sem ttulo.

modChrome_raw

Como voc pode ver as opes CSS (xhtml e rounded) so muito mais limpas em cdigo e astornam mais fceis de serem empregadas para se especificar estilos s pginas da web. Esteautor no recomenda o emprego de sufixos table (padro) ou horz, a menos que sejaabsolutamente necessrio.

Mas aqui est a melhor parte!

Se voc examinar o arquivo modules.php ver todas as opes existentes para os mdulos. realmente fcil adicionar uma sua prpria, isto faz parte das novas poderosas possibilidadesincludas na verso 1.5 do Joomla.

Dentro do arquivo module.php, o exemplo de xhtml se parece com o apresentado abaixo:

Voc pode observar que bem fcil fazer alteraes.

Para desenvolver nosso template, ns colocaremos um mdulo de estilo de xhtml em todos osnossos mdulos.



26/53




Observe que no podemos colocar esses estilos de mdulos no , pois esse no um mdulo.

Especificando o mdulo para uma apresentao CSS reduziu o nmero de tabelas para 14. Vamosagora acrescentar alguns estilos simples ao template para conseguir o resultado abaixo:

Tambm colocamos o ttulo do site no marcador . semanticamente mais correto etambm auxiliar os mecanismos de buscas.

Tambm acrescentamos cdigos CSS para especificar os estilos de borda e fundo para ocabealho (header).

Nosso cdigo CSS se parecer com isso:



27/53




NotaDiversos parmetros de menu da instalao padro tem um sufixo nas propriedades do mdulode _menu. Para que tudo funcionasse adequadamente, eu apaguei aqueles parmetros.

Essa tipografia de CSS agora produz o resultado apresentado na figura 11-6.



28/53




Figura 11-6 Template Bsico com o ttulo dos mdulos estilizados

Menus

Vimos no captulo 6 que existem diversas especificaes de como um menu pode ser renderizado(formatado).

Novamente, empregando a lista de CSS ao invs de tabelas, o resultado reduzir a quantidade decdigos e facilitar a marcao. Depois de colocar todos os nossos menus para lists ns temossomente 12 tabelas (veremos como removeremos o resto empregando o novo recurso decancelamento/substituio da verso 1.5). Lembre-se, a especificao de lists nova na verso1.5; flat list da verso 1.0 e ser descontinuada. Lists so tambm melhores que tabelasporque navegadores baseados em texto, leitores de tela, navegadores sem suporte a CSS,

navegadores com suporte a CSS desativados e mecanismos de busca sero capazes de acessar oseu contedo mais facilmente.

Uma das outras vantagens de se empregar CSS para menus que existem um monte de exemplosde cdigos em vrios sites de programadores em CSS. Vamos dar uma olhada em um deles e vercomo pode ser empregado.A pgina da web no maxdesign.com9 tem uma seleo de cerca de 30 tipos de menus todosempregando a mesma base de cdigos. chamada de Listamatic. Existem pequenas diferenasno cdigo que tenhamos que alterar para podermos adaptar esses menus para o Joomla.

9http://css.maxdesign.com.au/listamatic/index.htm

http://css.maxdesign.com.au/listamatic/index.htmhttp://css.maxdesign.com.au/listamatic/index.htm


29/53




Essas listas empregam o seguinte cdigo:

Isto significa que existe uma que engloba a lista chamada de navcontainer e o marcador tem uma identificao de classe navlist. Para duplicar esse efeito no Joomla, precisaremosde alguma espcie de envoltria.

Podemos conseguir isso empregando os sufixos de mdulos. Se voc se lembra, a sada de uma

opo de mdulo de estilo xhtml :

Se adicionarmos um sufixo de mdulo, isto ser acrescido classe moduletable, dessa forma:

Dessa forma, quando escolher um menu do Listamatic, voc precisar substituir o estilo nocdigo CSS da classe navcontainer para moduletablesuffix.

NotaOs sufixos de mdulos de certa forma mesclam a linha entre a programao de um modelo deum site e a fase de produo/administrao desse site. Um dos objetivos de desenvolvimentofuturo do ncleo do Joomla claramente separar essas regras. O que pode ocorrer que provvel que eles venham a descontinuar esse recurso em futuras verses do Joomla, alm da1.5.

Este emprego de sufixo de classe dos mdulos muito til. Veremos nas sees de Dicas e

Truques (do livro retro-mencionado

) que ele permite diferentes caixas coloridas com uma simplesalterao da classe do sufixo do mdulo.

Para o nosso site empregaremos a List 10 elaborada por Mark Newhouse10. Nosso CSS ser:

10http://css.maxdesign.com.au/listamatic/vertical10.htm

http://css.maxdesign.com.au/listamatic/vertical10.htmlhttp://css.maxdesign.com.au/listamatic/vertical10.html


30/53




Isso produzir um menu como mostrado na figura 11-7.

Ento, qualquer menu que queiramos que seja estilizado dessa forma, apenas precisamosadicionar a palavra menu como o sufixo do mdulo.



31/53




Figura 11-7 Template Bsico com menu estilizado

Dica de Programador

Quando estiver tentando fazer um menu especfico funcionar, aqui est uma dica til. Crie umainstalao padro do Joomla e ento observe o cdigo que est formatando o mainmenu (menuprincipal). Copie e cole esse cdigo em um editor HTML (como Dreamweaver). Substitua todos oslinks por # e ento voc pode adicionar regras de CSS e testar at que obtenha o efeitodesejado. O cdigo para o menu para se criar o estilo desejado o que se segue:



32/53




Observe que o CSS embutido (presente no prprio arquivo index.php) ao invs de lincado (presentecomo um link (link rel) no arquivo index.php)para permitir que a edio seja facilitada.

Escondendo Colunas

Quando o nosso leiaute estiver pronto sempre teremos as nossas trs colunas, independentemente quehaja ou no contedo a ser apresentado. A partir da perspectiva de um template de um CMS, isto no muito til. Em um site esttico o contedo nunca muda, porm, queremos dar aos administradores ahabilidade de colocar o seu contedo onde quer que eles queiram sem que tenham que se preocupar comedio de leiaute em CSS. Queremos ser capazes de desligar uma coluna automaticamente, ou ocult-la, se no houver contedo a ser apresentado.

Durante o desenvolvimento do mecanismo de template do Joomla 1.5 houve um grande nmerode mudanas e aprimoramentos. Mencionando o que foi posto no blog do desenvolvimento doJoomla11:

As alteraes no sistema de template no Joomla! 1.5 podem ser divididas em duas categorias. Emprimeiro lugar h mudanas na maneira de como as coisas eram feitas no Joomla! 1.0, por exemplo, aforma como os mdulos eram posicionados, e em segundo lugar houve a incluso de um monte derecursos extras, como parmetros do template... uma viso rpida:Mudanas nas velhas maneiras...

mosCountModulesA funo mosCount Modules foi substituda pela funo $t his->count Modules e suporte para ascondies que foram adicionadas. Isto permite que programadores possam facilmente quantificar onmero de mdulos existentes em mltiplas posies do template em apenas uma linha de cdigo, porexemplo $t his->count Modules( user1 + user2 ); que retornar a quantidade total do nmero demdulos existentes nas posies user1 e user2, incluindo as sada geradas pelo ncleo do Joomla!

No Joomla! 1.0 podamos empregar diferentes funes para incluir uma sada gerada pelo ncleo doJoomla. Todas essas funes foram substitudas pelo elemento . Por exemplo,mdulos em determinadas posies podem ser includos empregando

Carregando o editorNo Joomla! 1.0 voc precisava carregar por si mesmo o editor nos seus templates. Isto no ser maisnecessrio. Quando o sistema processar o cabealho do seu template ele decidir se ir ou no precisarde editor para inclu-lo ou no.

Novos recursos

11http://dev.joomla.org/component/option.com_jd-wp/itemid.33/p.210/

http://dev.joomla.org/component/option.com_jd-wp/itemid.33/p.210/http://dev.joomla.org/component/option.com_jd-wp/itemid.33/p.210/


33/53


34/53





35/53




Empregando o cdigo acima, se no houver nada publicado na coluna da esquerda, ento no ser apresentado.

Empregando essas tcnicas para as nossas colunas da esquerda e direita, o nosso arquivoindex.php se parecer com o apresentado abaixo. Tambm acrescentamos um invluvro (include)para o mdulo breadcrumbs. Observe que isso precisar ser includo no arquivo index.php etambm publicado como um mdulo.



36/53


37/53




Figura 11-8 Um modelo do Joomlachack

Cabealho (header)

A imagem do cabealho um leve enfeite no topo. Vamos mant-lo. Ento, colocaremos aimagem como pano de fundo (background), e depois atribumos uma cor, tambm. Dessa maneirao cabealho escalar verticalmente, se necessrio, por exemplo, se o tamanho da fonte forredimensionada. Tambm, precisaremos alterar as cores de qualquer fonte para branco, deforma que possam ser vistas no fundo preto.

Tambm empregaremos uma imagem para a caixa de busca. Devemos ter certeza queapontamos para a entrada certa empregando mais especificidades com o CSS. Tambm utilizoposicionamento absoluto dentro de um elemento de posio relativa para colocar a caixa debusca onde a desejo. A imagem no ser redimensionada com apenas uma simples imagem.Ainda requerer uma imagem de top e bottom (cima e baixo). Este ser um outro exerccio para oleitor!



38/53




Observe que no empreguei um logotipo grfico aqui, mas texto puro. A razo principalmenteporque os mecanismos de busca no podem ler imagens. Algum poder substituir por belasimagens, mas deixo isso como exerccio para o leitor.

Nosso cabealho se parecer com o apresentado na figura 11-9, abaixo.

Figura 11-9 Imagem do cabealho (header)

Prximo passo, precisaremos implementar a tcnica chamada de portas deslizantes (sliding doors)

O fundo (background) das Colunas

Ns falaremos sobre isso quando formos colocar cor de fundo nas colunas, sendo que a cor nose estender por toda a coluna at o rodap. Isto porque o elemento , neste caso sidebare sidebar-2, somente do tamanho do contedo. Ele no cresce para preencher o espao doelemento.

Teremos que empregar a tcnica chamada de Sliding Faux Columns (colunas deslizantes de Faux).Essencialmente, voc ter que criar duas imagens bem grandes que deslizar uma sobre a outra.Precisaremos criar dois invlucros para colocar os fundos. Normalmente poderamosaplicar uma ao invlucro maior (#wrap), mas estou empregando um invlucro extra (etrabalhoso) por razes de ilustraes, apenas.

Para um maior aprofundamento, voc poder verificar esses dois guias: http://www.alistapart.com/articles/fauxcolumns/ http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58

http://www.alistapart.com/articles/fauxcolumns/http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58http://www.alistapart.com/articles/fauxcolumns/


39/53




No nosso caso, a largura mxima que estamos considerando de 960px, dessa forma comeamoscom uma imagem dessa largura. Na pasta de imagens est o arquivo slidingcolumns.png. Ento,exportamos duas fatias (empreguei a mesma fatia e apenas ocultava/apresentava as imagenslaterais), uma com 960px de largura com uma de fundo com 192px esquerda, e uma de 960pxde largura com uma de fundo com 192px esquerda.

NotaA imagem esquerda precisa ter um fundo na cor branca, e a da direita de um fundotransparente. Eu modifiquei as cores dos fundos porque exportei as imagens do arquivo fonte.

De onde veio o valor de 192px? Ele corresponde a 20% de 960, pois as nossas colunas tm 20% delargura.

Ns empregamos a propriedade background-position para colocar as imagens no lugar correto.Aqui estamos usando o formato de CSS reduzido, pois faz parte da propriedade background.

No nosso arquivo index.php, simplesmente adicionamos um invlucro interno dentro do maiorwrap.

Tambm precisamos colocar um comando condicional para fechar as .

Observe que devemos colocar um fundo para o nosso rodap e mdulos/elementos da parteinferior, pois de outra forma os fundos das colunas seriam mostrados.



40/53




Precisamos limpar os comandos floats de forma que o invlucro flutuante (as colunas de Faux)possam se estender at o fim da pgina. O mtodo normal para fazer isso era a de se empregar apropriedade :after14. Mas, com o lanamento do IE7, este mtodo no funcionarcompletamente. Precisamos enderear a limpeza dos floats no Internet Explorer 6 e 7, e a esto arredondamento no final.

Um par15 de solues foram encontradas16. Eu vou empregar a opo17 Float (nearly)

Everything aqui.

Ento, adicionamos um simples comando clear:both ao #footer ( do rodap) e acrescentamosfloats aos invlucros das colunas faux. Fizemos isso com uma folha de estilo condicional,especificamente para o IE6.

Teremos que acrescentar alguns comandos condicionais no marcador head do arquivo index.php.

Mdulos Flexveis

14http://positioniseverything.net/easyclearing.html15http://www.quirksmode.org/css/clearing.html16

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/17http://orderedlist.com/articles/clearing-floats-the-fne-method

http://positioniseverything.net/easyclearing.htmlhttp://www.quirksmode.org/css/clearing.htmlhttp://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://orderedlist.com/articles/clearing-floats-the-fne-methodhttp://orderedlist.com/articles/clearing-floats-the-fne-methodhttp://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://www.quirksmode.org/css/clearing.htmlhttp://positioniseverything.net/easyclearing.html


41/53




No nosso esboo, temos um bloco de mdulo grande no incio. No sabemos o quo alto ser otexto que vai ser includo l. Para resolver este problema pusemos o mdulo incluso em umelemento de invlucro e demos um fundo da mesma cor da imagem. Esta a mesma estratgiaque empregamos para o cabealho.

Observe que tambm empregamos um comentrio condicional de forma que se a localizao domdulo de top (superior) no tiver contedo, a imagem da laranja implicante (mensagem de erro?)

no estar l. O que vai estar l um invlucro vazio que conter uma parte da imagem defundo e um valor de espaamento de 20px. Isto somente para fim esttico.

preciso empregar as especificidades do CSS para sobrescrever os estilos do moduletable queforam definidos anteriomente.

Com o fundo de nosso template bsico no lugar o nosso site se parecer com o apresentado nafigura 11-10.

Nada mal, agora precisamos nos focar em alguma coisa de tipografia (fonte).



42/53




Figura 11-10 Template avanado com leiaute

Tipografia (fonte)

Muitos links precisaro estar na cor branca. Ento, definimos isso de forma global e depoismodificamos a cor para a coluna central.

O esboo possui botes estilizados. Criamos isso empregando uma imagem de fundo a partir domodelo. uma fatia muito fina que preenchida horizontalmente.



43/53




Para as tabelas, como as FAQ (perguntas mais freqentes), podemos adicionar um fundo fcilrepetindo o uso da imagem que empregamos para chamar ateno. A reutilizao de imagens comum e tambm economiza em download, tornando a pgina mais rpida.

Os mdulos precisam de apenas uma simples redefinio e ajustes nos espaamentos (padding) emargens.

Menus, como sempre, precisam de muitos estilos CSS. Aqui vamos manter o mais simplespossvel. Ns fatiamos uma simples imagem que inclua ambos o marcador e a marca desublinhado. Observe que o estilo ligado aplicando um sufixo de mdulo de menu para

qualquer lista de links que queiramos que tenha a mesma aparncia.



44/53


45/53




Se voc observar l atrs o esboo original, ver que havia cones nessas tabs. Como estamosempregando duas imagens de background, uma na li (lista) e a outra no link, precisaremos de umterceiro elemento para colocar o fundo do cone. Podemos fazer isso tendo um span, mas issono o que a sada do CMS nos dar. A soluo seria tanto forar o menu dentro de um mduloou cancelar a sada do ncleo (mais sobre isso ser apresentado posteriormente).

Depois de adicionar uma cor de fundo, nosso template ter a aparncia razovel da figura 11-11.

A ltima coisa que permanece revisar o arquivo templateDetails.xml. Ele precisa relacionartodos os arquivos e imagens empregadas no template, de forma que ele possa instalarapropriadamente a partir de um arquivo zip. H um grande nmero de ferramentas que faz issoautomaticamente para voc, se estiver usando o Joomla 1.0.X, mas at este momento no hnenhuma disponvel para a verso 1.5.



46/53




Figura 11-11 Template avanado com tipografia

Podemos ver uma verso ao vivo desse template em http://www.compassdesigns.net/Joomla15.Os arquivos do template podem ser encontrados emhttp://www.compassdesigns.net/joomla-library/tutorials.

http://www.compassdesigns.net/Joomla15http://www.compassdesigns.net/joomla-library/tutorialshttp://www.compassdesigns.net/joomla-library/tutorialshttp://www.compassdesigns.net/Joomla15


47/53




Parmetros do Template

Novo na verso 1.5 a adio de parmetros do template para os templates. Isto permite quevoc passe variveis ao template a partir de opes selecionadas na rea deadministrao/manuteno do site.

Uma funo de parmetro relativamente simples mostrada no template padro Milky Way. Noarquivo templateDetails.xml voc ver o seguinte:

No gerenciamento de template (Template Manager) para aquele template, voc ver setagenspara os parmetros, como mostrado na figura 11-12.

Figura 11-12 parmetros do template Milky Way vistos na rea de administrao

Podemos ver que se trata apenas de um simples boto tipo rdio com duas opes. Seescolhermos no (no), ento a sada dos componentes so sero apresentadas.

Um outro um pouco mais complexo que ajustar a largura do template, a sada do arquivo XMLter o seguinte:



48/53




Ento, no marcador head do nosso arquivo index.php precisaremos acrescentar o seguinte:

Isto nos d trs opes, uma coluna de largura estreita fixa, um larga fixa e uma verso flexvel(fluda).

No gerenciamento de template (Template Manager) veremos a opo como mostrado na figura 11-

13.

Figura 11-13 Outros parmetros visto na rea de administrao/manuteno

Empregando os parmetros do template neste caso pode dar ao administrador do siteflexibilidade em quase todas as facetas do template, como largura, cor e etc.; tudo controlvel

com setagens condicionais de PHP e estilos CSS.

Voc tambm precisar de um arquivo chamado de params.ini na sua pasta do template. Elepode ser um arquivo em branco, mas o Joomla precisa desse arquivo para armazenar as setagensque voc tiver. Por exemplo, um arquivo ini (de inicializao) do exemplo anterior poderia separecer com isso:

showComponent=1template_width=2

Voc deve assegurar-se de que este arquivo esteja com direitos de escrita, de forma que asalteraes possam ser realizadas.



49/53




Cancelamento de Template

Talvez o recurso mais poderoso de templates da verso 1.5 seja a habilidade de cancelar a sadagerada pelo ncleo. Isto feito com novos arquivos de sada chamados de arquivos do templateque correspondem s visualizaes do leiaute de componentes e mdulos. O Joomla verificarem cada caso para ver se existe algum na pasta do template, e se houver, usa aquele e cancelaa sada normal.

Estrutura de cancelamento

Todas as visualizaes de leiaute e de templates esto no ncleo principal em uma pasta/tmpl/. A localizao ligeiramente diferente para componentes assim como para mdulos, poisos mdulos tm essencialmente somente uma visualizao (view).

Por exemplo:

A estrutura bsica para todos os componentes e mdulos a seguinte:

visualizao -> leiaute -> templates

Aqui esto alguns exemplos; observe que os mdulos somente possuem uma visualizao.

(leiaute)(visualizao)

Normalmente existem diversos arquivos de templates envolvidos em um leiaute particular. Elespossuem uma conveno de nome comum:

(leiaute secundrio de template chamado a partir do ...)

(leiaute principal de template)

(exemplo)(conveno de nome de arquivo)(descrio)



50/53




(leiaute comum de template empregado por diferentes

leiautes)

(... arquivo do leiaute principal)

Cancelamento de Mdulos

Cada mdulo tem uma nova pasta que contm seus templates, a pasta chamada de tmpl.Dentro dela esto arquivo php que criam as sadas, por exemplo:

Os trs primeiros so trs leiautes de newsflash (manchetes) baseados em quais opes demdulos so selecionadas, e o arquivo _item.php um template de leiaute comum empregadopelos outros trs. Abrindo o arquivo encontraremos:



51/53




Ento, podemos alterar isso para remover as tabelas e tornar o site um pouco mais acessvel:

Este novo arquivo pode ser colocado no diretrio do template em uma pasta chamada de html,como apresentado a seguir:

Templates/templatetutorial15bold/html/mod_newsflash/_item.php

Fcil assim, apenas tiramos as tabelas do mdulo de Newsflash (manchetes

)!Cancelamento de Componente

Os componentes funcionam quase da mesma maneira que os mdulos, exceto que existemmuitas visualizaes associadas com muitos componentes.

Se olharmos na pasta com_content encontraremos uma pasta chamada de views (visualizaes).

/components/com_content/views/



52/53




/components/com_content/views/archive/components/com_content/views/article/components/com_content/views/category/components/com_content/views/section

Ento, estas pastas corresponderiam as quatro visualizaes possveis para content (contedo),archive (arquivo), article (artigo), category (categoria) e section (seo).

Dentro da pasta view encontraremos a pasta tmpl, assim como modules, e nesta os diferentesleiautes possveis.

Se olharmos para a pasta category poderemos ver:

/components/com_content/views/ category/blog.php/components/com_content/views/ category/blog_item.php/components/com_content/views/ category/blog_links.php/components/com_content/views/category/default_items.php

Observe que no caso do com_content, o leiaute default.php referenciado ao leiaute padroque apresenta os artigos como uma lista de links.

Abrindo-se o arquivo blog_item.php veremos as tabelas atualmente em uso. Se desejarmoscancelar a sada, ns colocamos o que quisermos empregar em nossa pasta template/html, porexemplo:

Templates/templatetutorial15bold/html/com_content/category/blog_item.php

Este um processo relativamente simples de copiar e colar todos esses views da pasta/components/ e /modules/ para a pasta templates/seutemplate/html.

A funcionalidade de cancelamento de template prov um poderoso mecanismo para customizar osite Joomla atravs do seu template. Voc pode criar templates de sada que sejam focalizadosnos SEO (mecanismos de busca), acessibilidade ou necessidades especficas de um cliente.

ser publicado a partir do ms de maio de 2007 pela Prentice Hall Professional. li

Joomla15_TemplateTutorial_traduzido

Documents

Transcript of Joomla15_TemplateTutorial_traduzido