Joomla15 TemplateTutorial Traduzido

Joomla!
Um Guia do Usuário
Construindo um Website Poderoso com o Joomla!
JOOMLA! 1.5
TUTORIAL SOBRE TEMPLATE

Extrato do Capítulo 11 do livro:
“Joomla! A User´s 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/
Tradução livre: Geciel Rangel Costa - http://gecielc.spaces.live.com/
© 2006 Compass Design 1 de 53
Esta amostra de conteúdo foi extraída do próximo lançamento do livro entitulado “Joomla! A User Guide – Building a Joomla! Powered Website”, a
ser publicado a partir do mês de maio de 2007 pela Prentice Hall Professional. É licenciado sob a atribuição de não comercial-não derivativo 2.5
Joomla! Um Guia do Usuário
Capítulo 11
Neste capítulo, demonstraremos os passos para se criar um template do Joomla.

Especificamente, criaremos um template que emprega folha de estilos em cascata (CSS) para
produzir um leiaute sem o uso de tabelas. Esta é uma meta desejável, pois significa que o código
do template será mais fácil de ser validado nos padrões especificados pelo Consórcio da World
Wide Web (W3C). Também, tenderá a carregar mais rápido, ser mais fácil de manter e ter
melhor performance em mecanismos de buscas. Discutiremos esses assuntos em detalhe ao longo
deste capítulo.
Incluso neste capítulo estão às seguintes seções:
• O que é um template Joomla? -> pág. 02

Explica quais funções são executadas por um template Joomla e as diferenças entre um
template sem conteúdo e quando algum conteúdo é adicionado ao CMS.
• Processo de desenvolvimento no localhost (local) -> pág. 03
Como o processo de desenvolvimento difere daquele de uma página estática (X)HTML.
• W3C e Programação sem Tabela -> pág. 05
As implicações do desenho sem tabelas no Joomla e o relacionamento entre os padrões
da W3C, usabilidade e acessibilidade.
• Os componentes de um template -> pág. 07
Quais arquivos compõem um template do Joomla e as funções que eles exercem.
• Empregando o CSS para criar um leiaute -> pág. 15
Como criar um leiaute de três colunas ordenadas empregando CSS ao invés de tabelas.
• O CSS Específico do Joomla -> pág. 22
Uma introdução aos estilos básicos que podem ser empregados com o Joomla, além de
uma lista padrão de estilos que são empregados no mecanismo central do Joomla.
• Módulos -> pág. 23
Como posicionar e aplicar estilos aos módulos, incluindo técnicas para cantos
arredondados.
• Menus -> pág. 28
Uma estratégia simples para produzir menus enxutos com CSS que imitam os efeitos
daqueles produzidos com JavaScript.
• Suprimindo Colunas -> pág. 32
Como controlar a apresentação de colunas e como suprimi-las quando não houver
conteúdo a ser apresentado.
• Fazendo um verdadeiro template para versão Joomla 1.5 -> pág. 36
Aqui vamos realmente empregar um modelo específico e apresentar os passos para criar
um template útil para o Joomla 1.5
O que é um template Joomla?
O template no Joomla é uma série de arquivos que dentro do CMS Joomla controla a
apresentação de conteúdo. O template no Joomla não é um site da web, e nem mesmo pode ser
considerado como um modelo de um site completo da web. O template é o esboço principal
básico para visualizar o site Joomla. Para produzir o efeito de um site “completo”, o template
trabalha em conjunto com o conteúdo armazenado nas bases de dados do Joomla. Um exemplo
pode ser visto na Figura 11-1.
Fig. A – Template Joomla Fig. B – Template Joomla

Com amostras de conteúdo Com pouco ou sem conteúdo
Figura 11-1 Template com e sem conteúdo
A Figura A apresenta o template em uso com amostras de conteúdo. A Figura B apresenta o

template como ele deve parecer, com uma lista básica de recursos da instalação do Joomla, com
pouco ou sem conteúdo. O template é moldado de forma que quando o seu conteúdo é inserido,
ele herdará as especificações das folhas de estilo definidas no template, tais como o estilo de
link, menus, navegação, tamanho do texto e cores, para citar alguns.
Observe como as imagens associadas com o conteúdo (as imagens das pessoas) não são parte do
template, enquanto a imagem no cabeçalho (parte superior da página) é parte do mesmo.
Empregando um template para um CMS, como o Joomla faz, tem um número de vantagens e
desvantagens:
• Há uma completa separação do conteúdo e da apresentação, especificamente quando o
CSS é empregado para o leiaute (em oposição a se ter tabelas no arquivo index.php). Este é
um dos principais critérios para um site atender aos modernos padrões da web.
• Um novo template, e daí um visual completamente novo para um site, pode ser aplicado
instantaneamente. Isto pode, inclusive, permitir a especificação de diferentes
localizações/posicionamentos do conteúdo, assim como cores e gráficos.
• Se leiautes diferentes forem necessários para um site, isto pode ser difícil de se
conseguir.
Embora diferentes templates possam ser aplicados para diferentes páginas, esta construção em
funcionalidade não é confiável. Melhor é empregar comandos condicionais em PHP e criar um
leiaute que dinamicamente ajusta o número de colunas baseado no conteúdo a ser publicado.
Processo de desenvolvimento no localhost (local)
Uma página que você vê em um site Joomla não é estática. Isto significa que ela é gerada
dinamicamente a partir do conteúdo armazenado no banco de dado. A página que você vê é
criada a partir de vários comandos em PHP que estão no arquivo index.php do template. Isso
apresenta alguma dificuldade na fase de desenvolvimento.
É comum hoje empregar um editor HTML do tipo “o que você vê é o que obtém” (WYSIWYG), tal
como o Dreamweaver. Isso significa que o programador nem mesmo precisa codificar em HTML.
Contudo, isso não é possível no processo de programação de template no Joomla, pois editores
WYSIWYG não podem apresentar páginas dinâmicas. Isso significa que o programador deve
codificar “manualmente” e ver a saída das páginas em PHP em uma página gerada por um
servidor. Com uma conexão rápida o suficiente, este poderá ser o próprio servidor web, mas
muitos programadores empregam um “servidor local” em seu próprio computador. Este é uma
parte do software que processará as páginas da web no próprio computador do programador.
Não existe a “maneira certa” para criar páginas da web, isto depende do conhecimento do
programador. Aqueles mais gráficos fazem uma “imagem” de uma página em um programa
gráfico, como o Photoshop, e então particionam a imagem para usar (técnica conhecida como
slice and dice [cortar em pedaços e ordenar]). Os programadores mais inclinados para a área
tecnológica, simplesmente vão direto para o CSS e começam a codificação. Contudo, como
mencionado acima, o programador de template Joomla é limitado, pois ele não pode ver
instantaneamente o efeito da sua codificação no mesmo editor; dessa forma o processo de
programação modificado deve ser:
1. Fazer as programações com um editor HTML e salvar as modificações;
2. Ter um localhost [servidor local] em execução para “executar” o Joomla;
3. Ver o que foi programado no navegador; e
4. Voltar para o passo 1.
Opções do Servidor Local
No capítulo 3 [do livro a ser lançado e mencionado na página inicial] vimos como instalar um servidor web
para rodar em seu computador. Descrevemos um deles para windows chamado Wamp. Para
seguir adiante neste capítulo precisaremos tê-lo instalado [ou um outro, de sua preferência]. Se
precisar, vou ficar por aqui enquanto você instala um servidor local.
Dica
Uma técnica útil para fazer o processo de programação mais eficiente é apresentar a página
que se está desenvolvendo a partir de um servidor e então copiar e colar o código fonte em
um editor. Por exemplo, tão logo o seu leiaute em CSS esteja estabelecido, você pode
empregar um servidor local para apresentar a página, então selecione no navegador a opção
de ver o código fonte. Você então poderá copiá-lo e colá-lo em seu editor. Você poderá agora
facilmente especificar estilos para as páginas empregando CSS e não precisará seguir os
passos especificados anteriormente.
Um editor XHTML livre
Para aqueles que não possam pagar por um editor comercial como o Dreamweaver, existem
alguns editores livres disponíveis. Nvu é uma escolha sólida, foi construído com validação e é
100% de fonte aberta. Isto significa que qualquer um é bem-vindo para fazer o download do Nvu
sem custos (http://www.nvu.com/download.php), incluindo o código fonte, se você desejar
fazer alterações especiais.
W3C e Programação sem Tabela
Usabilidade, acessabilidade e otimização para mecanismos de buscas são todos termos

empregados para descrever páginas de alta qualidade atualmente no mundo da web. Na
realidade, existe uma significativa quantidade de sobreposição entre eles e uma página da web
que demonstra que a característica de um afeta os demais, como demonstrado na figura 11-2. A
maneira mais fácil para alcançar estas três metas é fazê-lo empregando o sistema disponível na
página web que seja validado com os padrões da W3C.
Por exemplo, um site que é estruturado semanticamente em (x)html (o xhtml explica o

documento, não como ele se apresentará) será facilmente lido em um leitor de página por
alguém que tenha dificuldade de visão. Será facilmente lido também por ferramentas de
mecanismos de busca. Google é efetivamente cego em como ele lê o seu site.
Site “pobre”
Código válido pela W3C
Figura 11-2 A sobreposição entre SEO, acessibilidade e usabilidade
Um site que é validado nos padrões estabelecidos pelo Consórcio W3C tem uma estrutura melhor
para fazê-lo mais acessível, usável e otimizado para mecanismos de buscas.
Pense nisso como construindo blocos para a sua casa. Um site construído com os padrões é mais
forte e seguro. Você pode verificar suas páginas nos serviços de validação de HTML da W3C
gratuitamente (http://validator.w3.org/). Em resumo, um site que atende as regras de
padronização e validação da W3C emprega semântica (x)html e separa conteúdo de
apresentação empregando CSS.
Para ajudá-lo a entender de onde vieram os padrões web, um pouco de história é útil. Muitas
páginas da web hoje são programadas para navegadores antigos. Por que? Os navegadores vem
continuamente se desenvolvendo desde o início da web. Alguns novos apareceram e antigos
desapareceram (lembra-se do Netscape?) Um outro fator complicador é que diferentes
fabricantes de navegadores (como a Microsoft) tendem a ter os seus interpretadores html/xhtml
do navegador ligeiramente diferentes dos demais. Isto tem levado os programadores web a
desenvolverem os seus sites para suportar antigos navegadores assim como novos. Isto
frequentemente leva a decisão que a páginas da web precisam apropriadamente nesses
navegadores legados.
Os padrões web colocam em questão um conjunto de “regras” para todos os navegadores web
usarem para apresentar uma página da web. A organização principal apresentam esses padrões
no Consórcio W3C, cujo Diretor, Tim Berners-Lee tem a distinção de ser atualmente o inventor
da rede mundial (www) em 1989.
Pergunte a cinco programadores o que são padrões web e você terá cinco respostas. Mas muitos
concordam que elas são baseadas em se seguir códigos válidos, seja html ou xhtml (ou outros).
Antes usávamos um exemplo de se construir códigos por construir. Os padrões apresentam-nos

um modelo para os códigos de uma página da web ser desenvolvida para alcançar uma
consistência. É fácil verificar o seu código no http://validator.w3.org. Assegure-se de empregar
o tipo correto de documento (DOCTYPE) quando tentar validar o seu código. Este artigo no site
da Compass Design ajuda a explicar mais isto:
http://www.compassdesigns.net/tutorials/joomla-tutorials/installing-joomla-doctype-and-the-
blank-joomla-template.html.
Código Correto Semanticamente
Mencionamos antes que ser semântico significa que o (x)html na página da web descreve
somente o conteúdo, não a apresentação. Em particular isto significa que a organização da
estrutura dos marcadores h1/h2 e etc., estão somente empregando tabelas para dados
tabulados, e não para especificar o leiaute da página.
Folhas de Estilo em Cascata (CSS)
Diretamente relacionado a se ter códigos semânticos é empregar folhas de estilo em cascata

para controlar a aparência e leiaute da sua página da web. Folhas de Estilo em Cascata (CSS) é
um mecanismo simples para adicionar estilos (por exemplo: fontes, cores e espaços) para
documentos web. (Fonte: http://www.w3.org/Style/CSS/). Eles existem em paralelo ao código
(x)html e permitem que você separe completamente o conteúdo (código semântico) da
apresentação (CSS). O melhor exemplo disso é o CSS Zen Garden
(http://www.csszengarden.com/tr/portuguese/) (http://www.csszengarden.com/), um site
onde a mesma semântica XHTML é moldado em diferentes e únicas maneiras com diferentes
códigos CSS. O resultado é uma página que parece muito diferente, mas tem o mesmo conteúdo
central.
Programar sites poderosos com o Joomla apresenta atualmente desafios consideráveis para
atender aos padrões de validação. Nas primeiras séries lançadas, 1.0.X, o código empregava uma
significativa quantidade de tabelas para as páginas de saída. O que não estava realmente
empregando CSS para a apresentação, nem produzia códigos corretos semanticamente. O
problema é complicado pelo fato de que poucos desenvolvedores de códigos estejam
empregando o CSS, e muitos empregam tabelas para gerarem o código, também.
Felizmente, o time de desenvolvimento do núcleo do Joomla reconheceu este fato. Na versão

1.5 é possível para programadores de templates sobrescreverem completamente a saída do
núcleo (chamado de uma vista) e retirar todas as tabelas, customizar o leiaute, o que quer que
queiram.
Entretanto, cuidados devem ainda ser tomados quando criando um template de forma que ele
seja acessível (por exemplo: tamanho da fonte escalável), usável (por exemplo: navegação
clara) e otimizado para mecanismos de buscas (por exemplo: ordenamento de fonte).
Os Componentes de um Template
De forma a entender o conteúdo de um template, iniciaremos dando uma olhadela em um

template em branco (vazio). Um template do Joomla é composto de vários arquivos e pastas.
Esses arquivos devem ser colocados no diretório /templates/ de uma instalação Joomla, em sua
pasta própria. Então, se tivermos dois templates instalados, nosso diretório se parecerá com:
/templates/element
/templates/voodoo
Observe que os nomes dos diretórios dos templates devem ser os mesmos que os nomes dos
templates, neste exemplo acima element e voodoo. Obviamente que são sensíveis ao tamanho
da letra e não devem conter espaços.
Dentro do diretório de um template existem um número de arquivos chaves:
/element/templateDetails.xml
/element/index.php
Esses nomes de arquivos e localização devem ser coincidentes exatamente, pois assim são
chamados pelo script do núcleo do Joomla.
templateDetails.xml
(Observe a letra “D” maiúscula). Esse é um arquivo metadata de formato XML que diz ao Joomla
quais os demais arquivos são necessários quando carregando uma página da web que usa esse
template. Também detalha o autor, direitos autorais e os arquivos que compõem o template
(incluindo as imagens eventualmente empregadas). O último emprego desse arquivo é para
instalar um template quando empregando a área de administração/manutenção do site.
Index.php
Este arquivo é o mais importante. Ele monta o site e diz ao CMS Joomla onde colocar os
diferentes componentes e módulos. Ele é uma combinação de PHP e (X)HTML. Em quase todos os
templates, arquivos adicionais são empregados. É convencional (embora não requerido pelo
núcleo do Joomla) nomear e localizar todos os arquivos conforme mostrado abaixo:
/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png
Esses são apenas exemplos, vamos examinar cada um desses arquivos de per si.
/element/template_thumbnail.png
É uma captura da imagem da tela do navegador (geralmente reduzida para cerca de 140 pixels
de largura por 90 pixels de altura). Depois que o template tiver sido instalado, isto funciona
como uma imagem de pré-visualização visível na área de administração do Joomla, no
Gerenciamento de Template (Template Manager) e também no módulo de seleção de templates
na página de abertura, se empregado.
/element/css/template.css
É o CSS do template. A pasta de localização é opcional, mas você deverá especificar onde ele
está no arquivo index.php. Você pode denominá-lo como quiser. Geralmente o nome
apresentado é o empregado, mas veremos adiante que há vantagens em se ter outros arquivos
css também.
/element/images/logo.png
É uma imagem que acompanha o template. Novamente, por razões de organização, muitos
programadores colocam este arquivo na pasta de imagens (images). Aqui temos uma imagem
chamada 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 também relaciona informações tais como o nome do autor e direitos autorais. Algumas
dessas informações são mostradas na área de administração/manutenção na opção de
Gerenciamento de Template (Template Manager). Um exemplo de arquivo xml é apresentado
abaixo:
<?xml version=”1.0” encoding=”utf-8”?>

<install version=”1.5” type=”template”>
<name>TemplateTutorial15</name>
<creationDate>December 2006</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail>compassdesigns@gmail.com</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>Template for official Joomla documentation guide</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css </filename>
</files>
<params>
<param name=”showComponent” type=”radio” default=”1” label=”ShowComponent”
description=”Show/Hide the component output”>
<option value=”0”>No</option>
<option value=”1”>Yes</option>
</param>
</params>
</install>
Vamos explicar o que algumas dessas linhas significam:
<install version=”1.5” type=”template”>
Os conteúdos de um documento XML são instruções para o instalador da área de administração.

A opção type=”template” diz ao instalador que estamos instalando um template e é para o
Joomla 1.5.
<name>TemplateTutorial15</name>
Define o nome de seu template. O nome que você especificar aqui será também empregado para
criar o diretório dentro da pasta templates. Contudo, ele não deve conter qualquer caractere
que o sistema de arquivos não possa processar, por exemplo, espaços. Se instalar manualmente,
você precisará criar um diretório que tenha um nome idêntico ao nome do template.
<creationDate>December 2006</creationDate>
A data que o template foi criado. Esta é uma forma livre e pode ser qualquer coisa, como, May
2005, 08-June-1978, 01/01/2008, etc.
<author>Barrie North</author>
O nome do autor desse template – ou mais provavelmente o seu nome.
<copyright>GPL</copyright>
Qualquer informação de direitos autorais vai aqui neste elemento. Um tipo de licenciamento
para desenvolvedores e programadores pode ser encontrado nos fóruns do Joomla.
(http://forum.joomla.org/ e http://forum.joomla.org/index.php/board,23.0.html)
<authorEmail>compassdesigns@gmail.com</authorEmail>
Endereço de email onde o autor do template pode ser encontrado.
<authorUrl>www.compassdesigns.net</authorUrl>
O endereço da URL do site do autor do template.

<version>1.0</version>
A versão do template.
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css </filename>
</files>
A seção “files” (arquivos) contém todos os arquivos genéricos como a fonte PHP para o template
ou a amostra da imagem para a pré-visualização do template. Cada arquivo listado nesta seção é
marcado com os marcadores <filename> </filename>. Também poderia ser incluído qualquer
arquivo adicional, aqui empregamos o exemplo de um arquivo JavaScript que é necessário para o
template.
Todos os arquivos de imagens que o template emprega também são listados na seção <files>.
Novamente, cada arquivo listado é marcado com o marcador <filename> </filename>. As
informações de caminho dos arquivos são relativos à raiz do template, por exemplo: se o seu
template estiver em um diretório chamado “SeuTemplate” e todas as imagens estiverem na
pasta “images” que está dentro do diretório “SeuTemplate”, o caminho correto é:
<filename>images/my_image.jpg</filename>
Finalmente, todo arquivo de folha de estilo são listados na seção <files>. Novamente o nome do
arquivo é marcado com os marcadores <filename> </filename> e o seu caminho é relativo à raiz
do template.
O arquivo Index.php
O que de fato existe em um arquivo index.php? Ele é uma combinação de (X)HTML e PHP que
determina tudo a respeito do leiaute e apresentação das páginas.
Primeiro olharemos para uma parte crítica de se conseguir templates válidos, o DOCTYPE
existente no topo do arquivo index.php. Este é um pedaço de código que aparece na parte
superior de cada página da web. No topo da página do nosso template temos o seguinte:
O DOCTYPE é a parte fundamental do componente a partir da qual uma página da web é

apresentada em um navegador e refere-se, especialmente, a como um navegador interpreta o
CSS. Para dar-lhe um sentido do que isto significa, veja uma observação do site
http://www.alistapart.com:
[informação sobre doctypes no W3C diz que doctypes é] “escrito por nerds para nerds. E quando
digo nerds, não quero dizer profissionais comuns da web como eu e você. Quero dizer aqueles
que fazem o resto de nós parecermos como avós no primeiro dia em que recebem um email.TM”
De qualquer maneira, há diversos tipos de doctypes que você pode empregar. Basicamente, o
doctypes diz ao navegador como interpretar a página. Aqui as palavras “strict” e “transitional”
iniciam posicionando as flutuações existentes (float:left e float:right, normalmente).
Essencialmente, desde quando a WWW iniciou, diferentes tipos de navegadores têm diferentes
níveis de suporte a CSS. Isto significa, por exemplo, que o Internet Explorer não entenderá o
comando “min-width” para estabelecer a largura mínima da página. Para conseguir o mesmo
resultado você terá que empregar “hacks” (cortes ou novos códigos de programação, ou seja, hackear) no
código CSS.
Nota:
Alguns dizem que processar XHTML como text/html é considerado prejudicial. Se você realmente
entende essa afirmação você está bem à frente no jogo e além desse guia. Você pode ler mais em
http://www.hixie.ch/advocacy/xhtml.
‘Strict’ significa que o html (ou XHTML) será interpretado exatamente como especificado nos
padrões. Um doctype do tipo ‘transitional’ significa que à página será permitida umas poucas
diferenças em relação aos padrões.
Para complicar as coisas, há alguma coisa chamada de modo "quirks" (volta). Se o tipo de
documento (doctype) estiver errado, desatualizado ou não existir, então o navegador entra no
modo "quirks". Esta é uma tentativa de voltar um passo atrás e para tentar ficar compatível;
então, o Internet Explorer, por exemplo, fará o processamento da página fingindo que ela era da
versão do IE4.
Infelizmente, as pessoas algumas vezes terminam nesse modo louco (quirks mode)
acidentalmente. Isto normalmente acontece por duas razões:
• Eles empregam direto a declaração do tipo de documento (doctype) a partir de uma página WC3,
onde o link termina em:
DTD/xhtml1-strict.dtd
Exceto se este for um link relativo ao servidor WC3, você precisa do caminho completo, como
demonstrado no exemplo acima, no início desse item.
• A Microsoft especificou o IE6 de tal modo que é possível ter páginas válidas, porém, no modo
‘quirk’. Isto acontece por existir a expressão "xml declaration" antes da declaração do tipo de
documento (doctype).
<?php echo ´<?xml version="1.0" encoding="utf-8"?´.´>´?>
A realidade é que uma declaração xml não é realmente necessária, então vamos deixar sem.
A parte a respeito do modo ‘quirk’ do IE6 é importante. Neste capítulo estaremos programando somente
para o IE6+, então, devemos ter certeza de que o mesmo estará funcionando no modo padrão. Isto
minimizará as codificações extras (hacks) que talvez tenhamos que fazer.
Fazer uma página concordante com os padrões, onde você vê a expressão "valid xhtml" no final da página,
não significa que foi difícil elaborar o código ou entender os marcadores. Simplesmente significa que o
código empregado atende as especificações do tipo de documento (doctype) mencionada. Só isso! Nada
mais.
Elaborar o seu site para atender aos padrões deve ser uma forma de reduzir o que você está dizendo que
faz 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://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 cabeçalho (head) primeiro; queremos ser o mais
concisos possíveis, porém, descrever o suficiente para a elaboração de um site. A informação de
cabeçalho que empregaremos é a seguinte:
O que tudo isso significa?
Falamos sobre isso acima. O código <?php echo $this ->language; ?> está carregando os
parâmetros de idioma especificados no arquivo de configuração global do site.
Coisas do cabeçalho que são especificados no arquivo de configuração do site. Isto inclui os
seguintes marcadores (em uma instalação padrão):
Isto inclui um número de metatags, o favicon (ícone indicativo do site) e também URL´s do
alimentador de RSS.
Esta linha faz a ligação do arquivo CSS com o template. O código PHP <?php echo $this -
>template?> retornará o nome do template atual. Escrevendo dessa forma ao invés do caminho
real faz o código mais genérico. Quando você cria um novo template você pode apenas copiá-lo
(com todo o seu código de cabeçalho) e não se preocupar com a edição de nada.
O corpo de um template vazio (em branco) do Joomla
Isto será muito fácil! Pronto?
OK, ainda neste ponto isto parece não representar nada muito inspirador. A saída é apresentada
na figura 11-3.
Nós temos uma ordem lógica razoável:

1. nome do site (sitename);
2. module superior (top);
3. módulos da esquerda (left);
4. conteúdo principal (component); e
5. módulos da direita (right).
A meta é tentar e se aproximar o mais próximo possível da semântica de marcação. A partir do

ponto de vista da web, significa que a página pode ser lida por qualquer um: um navegador, um
mecanismo de busca ou um leitor de tela. O leiaute semântico é a pedra fundamental da
acessibilidade.
Figura 11-3 Um template sem especificação de estilo
Você poderá ler mais a respeito de leiaute semântico no Apêndice B (do livro retromencionado).
Nota
Agora não vale nada que o que temos aqui realmente é apenas um potencial para leiaute
semântico. Se alguém quiser ir adiante e colocar módulos aleatórios em localizações
aleatórias, então você poderá ter uma bagunça. Uma importante consideração para sites CMS,
um template é somente tão bom quanto a quantidade de conteúdo. É isto que
frequentemente derruba programadores quando tentam validar seus sites.
Você deve ter observado que empregamos o primeiro de outros diversos comandos específicos do
Joomla.
O comando de PHP echo simplesmente apresenta na saída um conjunto de caracteres do arquivo

de configuração (configuration.php). Aqui estamos empregando o nome do site, podemos
facilmente ter:
O comando jdoc insere vários tipos de XHTML.
Este insere uma saída de um componente. Qual componente, será determinado pelo link do
menu.
Nota
Interessado o bastante; parece que você parece é capaz de ter múltipas instâncias de saída
de um componente. Não tem certeza de por que precisaria disso, mas penso que deixarei
você saber!
Isto insere a saída para um módulo de localização. A sintaxe completa é:
Veremos as várias opções para estilos posteriormente neste capítulo.
Empregando o CSS para criar um leiaute
Estaremos empregando CSS para fazer um leiaute de três colunas para um template Joomla.
Também estaremos fazendo um leiaute flexível. Há dois tipos de leiautes de páginas da web,
fixo e flexível, e ambos se referem a como a largura da página é controlada.
A largura da página é a questão, por causa das muitas resoluções de um navegador em que as
pessoas navegam na web. Embora o percentual esteja caindo, cerca de 20% das pessoas que
acessam a internet empregam a resolução de 800x600. A grande maioria, 76%, está empregando
a resolução de 1024 x 768 e maior 1 (fonte: www.upsdell.com). Fazer um leiaute flexível significa
que a sua valiosa página da web não será apresentada como uma fina coluna na resolução de
1024, e será totalmente visível em monitores com resolução menor.
Um esboço típico deve empregar tabelas para formar o leiaute da página. Elas são úteis, pois,
basta especificar a largura das colunas em percentual, mas têm muitas desvantagens:
• Tem muitos códigos extras comparados ao leiaute com CSS. Isto resulta em tempo de
carregamento maior (o que as pessoas que acessam a internet não gostam) e baixa
performance em ferramentas de buscas. O código pode duplicar em tamanho, não
somente com marcadores, mas, também, com os chamados “spacer gifs”
(espaçadores). Mesmo grandes companhias caem na armadilha das tabelas, conforme
visto em uma recente controvérsia, a respeito do novo site da disney 2 : disney.co.uk.
1
www.upsdell.com/BrowserNews/stat_trends.htm#res
2
www.compassdesigns.net/joomla-blog/general-joomla/what-makes-a-good-designer.html
• Elas são difíceis de se manter. Para alterar alguma coisa deve-se ter conhecimento do
que todos os marcadores td/tr estão fazendo. Com CSS existem apenas algumas linhas
para inspecionar.
• O conteúdo não pode ser ordenado por código. Muitos usuários da internet não vêem as
páginas da web em um navegador. Aqueles que vêem com navegadores de texto ou
leitores de tela lerão a página da esquerda-superior para o canto direito-inferior. Isto
significa que primeiro eles vêem tudo no cabeçalho e a coluna da esquerda (em um
leiaute de 3 colunas) antes de chegar ao meio da coluna, o assunto mais importante.
Um leiaute CSS, por outro lado, permite que o conteúdo seja código-orientado, o que
significa que o conteúdo pode ser arranjado no código/fonte. Talvez seu mais
importante visitante seja o Google, e ele emprega leitores de tela para todos os
propósitos e intenções.
Vamos olhar o nosso leiaute empregando CSS. Você pode posicionar elementos (o que quiser) de
diversas maneiras com CSS. Para uma informação rápida uma boa fonte é: Brainjar's CSS
Positioning 3 .
Se você é novo em CSS deve ler, ao menos, “um guia básico de CSS”. Aqui estão algumas
sugestões:
• Kevin Hale's - An Overview of Current CSS Layout Techniques
http://particletree.com/features/an-overview-of-current-css-layout-techniques/
• htmldog's CSS Beginner's Guide
http://www.htmldog.com/cssbeginner/
• yourhtmlsource.com
http://www.yourhtmlsource.com/stylesheets/
Estaremos empregando o comando float para posicionar o nosso conteúdo. Como ele é básico, o
template se parecerá com o apresentado na Figura 11-4.
Ainda não muito empolgado, mas vamos ver se todos estão acompanhando.
Os estilos CSS são definidos no marcador do cabeçalho (head) do arquivo index.php para mostrar
o que está acontecendo, mas, normalmente, eles poderiam estar no arquivo template.css.
Tudo estará contido em uma caixa/invólvucro ou elemento chamado #wrap. Este elemento tem
uma largura de 80% da área de visualização, a qualquer tempo.
3
www.brainjar.com/css/positioning/
Figura 11-4 Leiaute de um template muito básico
Dica: CSS abreviado

É possível reduzir a quantidade de código CSS empregado através de “abreviações”. Um
exemplo disso é o estilo de espaçamento e margem para um elemento.
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
que pode ser substituído por:
margin: 5px 10px;
Há estilos de “abreviações” no início de cada definição de estilo. Tão logo tenha se
familiarizado com os estilos, passe a empregar os comandos abreviados e apague os
completos. A sintaxe é:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
Aqui está um exemplo, ao invés disso...
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-
height:1.3em;
Faça isso:
font:bold 1em/1.3em Arial,Helvetica,sans-serif,italic;
Leia mais a respeito de sintaxe em An Introduction to CSS shorthand properties (Uma
introdução às propriedades de abreviações em CSS Æ
http://home.no.net/junjun/html/shorthand.html).
A cada uma das colunas da esquerda, meio e direita é especificado os seus próprios elementos.
Todas são especificadas como ‘floated” (fluindo) à esquerda, e dado um percentual de largura
de 100%. O comando de estilo clear:both no rodapé diz ao navegador para parar de fluir e fazer
com que o rodapé se alongue (justifique) englobando as três colunas. Quando formos construir o
nosso segundo template neste capítulo, vamos ter que usar uma técnica mais avançada de
justificação.
Para implementar o leiaute e adicionar algum espaço ao conteúdo, precisamos acrescentar

alguns espaçamentos de coluna, normalmente chamados de "gutter" (canal). Infelizmente, há
um problema. Você deve saber que o Internet Explorer não interpreta corretamente o código
CSS (veja em: Internet Explorer does not interpret CSS correctly). Um problema é que ele calcula a largura
diferentemente. Resolvemos este problema não empregando qualquer espaçador ou borda em
algo que tenha uma largura. Para conseguir o nosso efeito "gutter" adicionamos um outro
elemento <div> 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 o
Joomla. Ele apresenta, ao menos, duas vantagens de se empregar CSS ao invés de leiautes
baseados em tabelas; tem menos código e é mais fácil de se manter. Contudo, não é fonte-
ordenado. Para isso devemos empregar um leiaute mais avançado, conhecido como “nested
float” (fluir aninhado).
Leiautes de fonte ordenada obtém melhores resultados em mecanismos de busca do que aqueles
que o conteúdo importante aparece na parte final do código. A partir de uma perspectiva de um
site Joomla, o conteúdo mais importante é aquele que vem do componente.
Este leiaute específico (de fonte ordenada) é um tanto quanto complexo e grande o suficiente
para ser colocado aqui. Afortunadamente para você, existe uma explicação de como criar o
mesmo 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 padrão do Joomla
Até agora todo nosso CSS tem sido somente sobre leiaute. Isto nos permitirá fazer uma página
limpa e bonita, então, vamos agora adicionar alguma formatação. Nós também movemos todo o
nosso código CSS que estava no marcador de cabeçalho do index.php e colocamos em arquivos
CSS.
Vamos adicionar, ainda, um par de coisas, nosso leiaute agora será:
Nós centralizamos a página empregando um pequeno código (hack). Isso deve ser feito por causa
do Internet Explorer. Com navegadores que seguem o padrão, apenas empregamos o código
margin:0 10%; para centralizar a página, mas o IE não reconhece isso. Então nós centralizamos o
“texto” de toda a página e alinhamos de volta para a esquerda nas colunas.
Em comemoração ao suporte do Internet Explorer 7 aos códigos de min/max width (IE6 não
suportava esses códigos) podemos adicionar um tamanho de largura (width) mínima e máxima.
Observe que tivemos que adicionar um pequeno código (hack) para o IE6, pois o mesmo ainda
não entende àqueles códigos. Ele ignorará o comando !important e considerará a largura total de
960px.
Dica
Pode parecer estranho definir nossas colunas em percentuais de largura e depois ter um
elemento (div) que é fixo. Bem, existem muitas coisas acontecendo aqui.
1. Ter colunas flexíveis dentro de elementos de largura fixa torna o template mais flexível.
Se acrescentarmos botões de alteração de largura teremos que alterar apenas um valor.
2. Ainda temos uma largura máxima, entretanto, por que não colocarmos tudo flexível?
Muitos usuários da web hoje possuem enormes telas de monitor. Pesquisa de usabilidade
nos informa que linhas de texto mais largas que 900px são difíceis de ler porque os olhos
têm que se deslocar por um longo caminho para ir para a próxima linha. Limitando a
fluidez (flexibilidade)torna o site mais acessível/usável.
Também adicionamos um novo estilo de colunas: overflow:hidden. Isto fará a página “quebrar”
mais consistentemente quando reduzimos a sua largura.
No início da tipografia do CSS estabeleceremos alguns estilos básicos e teremos o que

conhecemos como “reset global”.
Tudo recebe o valor zero de margin e padding e então todos os elementos do nível de bloco é
dado, então, uma margem inferior. Isto ajuda a obter a consistência do navegador. Você pode
ler mais sobre o reset global em clagnut 4 e left-justified 5 .
O tamanho da fonte foi setado para 76%. A razão disso é para tentar manter a melhor
consistência entre os navegadores. Todas as fontes foram setadas em em (é um fator relativo ao
tamanho da propriedade font-size de um elemento). E tendo altura de linha de line-height:1.3em
ajuda na leitura. Isso significa que as páginas serão mais acessíveis e os visitantes do site
poderão alterar o tamanho da fonte para o da sua preferência. Isso é discutido mais em:
An experiment in typography at The Noodle Incident (Owen Briggs) 6 .
4
http://www.clagnut.com/blog/1287/
5
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
6
http://www.thenoodleincident.com/tutorials/typography/template.html
Se você pretende adicionar algum tipo de cor de fundo (background) veremos alguma coisa como
o apresentado na figura 11-5.
Figura 11-5 Template básico com tipografia
Observe que as colunas laterais não alcançam o seu rodapé. Isso é porque elas somente se
estendem de acordo com o conteúdo; onde o espaço está em branco à esquerda e à direita, não
existe conteúdo.
Se nós temos um template que tenha um fundo branco para as três colunas, isso não será
problema. Nós iremos considerar essa abordagem e teremos caixas limitando os módulos. Se
você quer colunas com alturas iguais e deseja colori-las ou ter caixas, você pode usar uma
imagem de fundo que se repete verticalmente. Essa técnica é chamada de “Faux Columns” e é
descrita por Douglas Bowman 7 e Eric Meyer 8 .
7
http://www.stopdesign.com/log/2004/09/03/liquid-bleach.html
8
http://www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/
O CSS Específico do Joomla
Embora o Joomla 1.5 tenha a funcionalidade de cancelar/substituir a saída do núcleo do

template, sua renderização padrão ainda emprega tabelas para a saída de conteúdo no corpo
principal. Em conjunto com essas tabelas existem saídas CSS disponíveis para os programadores
aplicarem estilos em suas páginas. Baseado em algumas pesquisas com inúmeros membros da
comunidade, a lista atual é a apresentada abaixo. Observe que ela não inclui estilos de web
genéricos como H1, H2, p, ul, a, form, etc.
É importante observar esta lista.

Muitos projetos que você pode encontrar atualmente empregam estilos de CSS mais específicos
às suas definições. Basicamente, uma regra mais específica sobrescreverá uma menos específica.
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 serão vermelha, pois esta regra é mais específica
(pois a classe .contentheading está contida dentro de uma <div>)
No caso de templates Joomla, você freqüentemente verá regras mais específicas sendo
empregadas. Isto freqüentemente ocorre quando a classe está dentro de uma tabela. Mais
exemplos:
.moduletable
table.moduletable
.moduletable é o nome de uma <div> que engloba (envolve) um módulo. table.moduletable

somente 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 não é fácil de se entender; é freqüentemente mais fácil começar empregando

estilos mais gerais possíveis e então chegar ao mais específico, se o resultado não for aquilo que
se deseja.
Alguns links sobre especificidades:

http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://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 página mais lenta e dificulta a atualização. Para
reduzir o número de tabelas precisamos empregar parâmetros de estilos nos jdoc:include quando
chamarmos os módulos.
Módulos
Quando um módulo é chamado no arquivo index.php, ele tem várias opções de como será
exibido.
A sintaxe é:
<jdoc:include type=”modules” name=”LOCATION” style=”OPTION” />
O estilo é opcional e é definido em /modules/templates/modules.php. Atualmente o arquivo

padrão modules.php possui os seguintes leiautes.
style=”table” (apresentação padrão). Os módulos são apresentados em uma coluna. Um exemplo

de saída é apresentado abaixo:
<table cellpadding=”0” cellspacing=”0” class=”moduletable”>

<tr>
<th valign=”top”> modChrome_table </th>
</tr>
<tr>
<td> modChrome_table </td>
</tr>
</table>
style=”horz” = Os módulos são apresentados horizontalmente. Cada módulo é apresentado em

uma célula de uma tabela-invólucro. Um exemplo de saída é apresentado abaixo:
style=”xhtml” = Os módulos são apresentados como um simples elemento <div>. Um exemplo de

saída é apresentado abaixo:
<div class=”moduletable”>
<h3>modChrome_xhtml</h3>
modChrome_xhtml </div>
style=”rounded” = Os módulos são apresentados em um formato que permite, por exemplo,

apresentar cantos arredondados. Se esse $style for empregado o nome da <div> muda de
moduletable para module. Um exemplo de saída é apresentado abaixo:
<div class=”module”>
<div>
<div>
<div>
<h3>modChrome_rounded</h3>
modChrome_rounded </div>
</div>
</div>
</div>
style=”raw” = Os módulos são apresentados em estado bruto, ou seja, sem processamento, sem
elemento de agrupamento e sem título.
modChrome_raw
Como você pode ver as opções CSS (xhtml e rounded) são muito mais limpas em código e as
tornam mais fáceis de serem empregadas para se especificar estilos às páginas da web. Este
autor não recomenda o emprego de sufixos table (padrão) ou horz, a menos que seja
absolutamente necessário.
Mas aqui está a melhor parte!
Se você examinar o arquivo modules.php verá todas as opções existentes para os módulos. É
realmente fácil adicionar uma sua própria, isto faz parte das novas poderosas possibilidades
incluídas na versão 1.5 do Joomla.
Dentro do arquivo module.php, o exemplo de xhtml se parece com o apresentado abaixo:
Você pode observar que é bem fácil fazer alterações.
Para desenvolver nosso template, nós colocaremos um módulo de estilo de “xhtml” em todos os
nossos módulos.
Observe que não podemos colocar esses estilos de módulos no <jdoc:include type=”component”
/>, pois esse não é um módulo.
Especificando o módulo para uma apresentação CSS reduziu o número de tabelas para 14. Vamos
agora acrescentar alguns estilos simples ao template para conseguir o resultado abaixo:
Também colocamos o título do site no marcador <H1>. É semanticamente mais correto e

também auxiliará os mecanismos de buscas.
Também acrescentamos códigos CSS para especificar os estilos de borda e fundo para o
cabeçalho (header).
Nosso código CSS se parecerá com isso:
Nota
Diversos parâmetros de menu da instalação padrão tem um sufixo nas propriedades do módulo
de _menu. Para que tudo funcionasse adequadamente, eu apaguei aqueles parâmetros.
Essa tipografia de CSS agora produz o resultado apresentado na figura 11-6.
Figura 11-6 Template Básico com o título dos módulos estilizados
Menus
Vimos no capítulo 6 que existem diversas especificações de como um menu pode ser renderizado
(formatado).
Novamente, empregando a lista de CSS ao invés de tabelas, o resultado reduzirá a quantidade de

códigos e facilitará a marcação. Depois de colocar todos os nossos menus para lists nós temos
somente 12 tabelas (veremos como removeremos o resto empregando o novo recurso de
cancelamento/substituição da versão 1.5). Lembre-se, a especificação de lists é nova na versão
1.5; flat list é da versão 1.0 e será descontinuada. Lists são também melhores que tabelas
porque navegadores baseados em texto, leitores de tela, navegadores sem suporte a CSS,
navegadores com suporte a CSS desativados e mecanismos de busca serão capazes de acessar o
seu conteúdo mais facilmente.
Uma das outras vantagens de se empregar CSS para menus é que existem um monte de exemplos
de códigos em vários sites de programadores em CSS. Vamos dar uma olhada em um deles e ver
como pode ser empregado.
A página da web no maxdesign.com 9 tem uma seleção de cerca de 30 tipos de menus todos
empregando a mesma base de códigos. É chamada de Listamatic. Existem pequenas diferenças
no código que tenhamos que alterar para podermos adaptar esses menus para o Joomla.
9
http://css.maxdesign.com.au/listamatic/index.htm
Essas listas empregam o seguinte código:
Isto significa que existe uma <div> que engloba a lista chamada de navcontainer e o marcador
<ul> tem uma identificação de classe navlist. Para duplicar esse efeito no Joomla, precisaremos
de alguma espécie de <div> envoltória.
Podemos conseguir isso empregando os sufixos de módulos. Se você se lembra, a saída de uma
opção de módulo de estilo xhtml é:
Se adicionarmos um sufixo de módulo, isto será acrescido à classe moduletable, dessa forma:
Dessa forma, quando escolher um menu do Listamatic, você precisará substituir o estilo no
código CSS da classe navcontainer para moduletablesuffix.
Nota
Os sufixos de módulos de certa forma mesclam a linha entre a programação de um modelo de
um site e a fase de produção/administração desse site. Um dos objetivos de desenvolvimento
futuro do núcleo do Joomla é claramente separar essas regras. O que pode ocorrer é que é
provável que eles venham a descontinuar esse recurso em futuras versões do Joomla, além da
1.5.
Este emprego de sufixo de classe dos módulos é muito útil. Veremos nas seções de Dicas e
Truques (do livro retro-mencionado) que ele permite diferentes caixas coloridas com uma simples
alteração da classe do sufixo do módulo.
Para o nosso site empregaremos a List 10 elaborada por Mark Newhouse 10 . Nosso CSS será:
10
http://css.maxdesign.com.au/listamatic/vertical10.htm
Isso produzirá um menu como mostrado na figura 11-7.
Então, qualquer menu que queiramos que seja estilizado dessa forma, apenas precisamos
adicionar a palavra “menu” como o sufixo do módulo.
Figura 11-7 Template Básico com menu estilizado
Dica de Programador
Quando estiver tentando fazer um menu específico funcionar, aqui está uma dica útil. Crie uma
instalação padrão do Joomla e então observe o código que está formatando o mainmenu (menu
principal). Copie e cole esse código em um editor HTML (como Dreamweaver). Substitua todos os
links por “#” e então você pode adicionar regras de CSS e testar até que obtenha o efeito
desejado. O código para o menu para se criar o estilo desejado é o que se segue:
Observe que o CSS é embutido (presente no próprio arquivo index.php) ao invés de lincado (presente
como um link (link rel) no arquivo index.php)para permitir que a edição seja facilitada.
Escondendo Colunas
Quando o nosso leiaute estiver pronto sempre teremos as nossas três colunas, independentemente que
haja ou não conteúdo a ser apresentado. A partir da perspectiva de um template de um CMS, isto não é
muito útil. Em um site estático o conteúdo nunca muda, porém, queremos dar aos administradores a
habilidade de colocar o seu conteúdo onde quer que eles queiram sem que tenham que se preocupar com
edição de leiaute em CSS. Queremos ser capazes de “desligar” uma coluna automaticamente, ou “ocultá-
la”, se não houver conteúdo a ser apresentado.
Durante o desenvolvimento do mecanismo de template do Joomla 1.5 houve um grande número

de mudanças e aprimoramentos. Mencionando o que foi posto no blog do desenvolvimento do
Joomla 11 :
As alterações no sistema de template no Joomla! 1.5 podem ser divididas em duas categorias. Em
primeiro lugar há mudanças na maneira de como as coisas eram feitas no Joomla! 1.0, por exemplo, a
forma como os módulos eram posicionados, e em segundo lugar houve a inclusão de um monte de
recursos extras, como parâmetros do template... uma visão rápida:
Mudanças nas velhas maneiras...
mosCountModules
A função mosCountModules foi substituída pela função $this->countModules e suporte para as
condições que foram adicionadas. Isto permite que programadores possam facilmente quantificar o
número de módulos existentes em múltiplas posições do template em apenas uma linha de código, por
exemplo $this->countModules(“user1 + user2”); que retornará a quantidade total do número de
módulos existentes nas posições user1 e user2, incluindo as saída geradas pelo núcleo do Joomla!
No Joomla! 1.0 podíamos empregar diferentes funções para incluir uma saída gerada pelo núcleo do
Joomla. Todas essas funções foram substituídas pelo elemento <jdoc:include... />. Por exemplo,
módulos em determinadas posições podem ser incluídos empregando <jdoc:include type=”modules”
name=”left”/>
Carregando o editor
No Joomla! 1.0 você precisava carregar por si mesmo o editor nos seus templates. Isto não será mais
necessário. Quando o sistema processar o cabeçalho do seu template ele decidirá se irá ou não precisar
de editor para incluí-lo ou não.
Novos recursos
11
http://dev.joomla.org/component/option.com_jd-wp/itemid.33/p.210/
Parâmetros do template
Os parâmetros do template podem ser empregados para permitir que o administrador controle a
estrutura do mesmo. Eles funcionam praticamente da mesma maneira que os parâmetros dos módulos.
Um programador de template pode definir especificações extras para o template no arquivo xml do
mesmo e o administrador do site pode ajustá-los na opção template manager (gerenciamento do
template). Por exemplo, os administradores podem alterar os esquemas de cores, escolher entre 2 ou 3
colunas de leiaute... ou especificar a largura mínima do template.
Cancelamento/susbtituição de template
Os templates poderão cancelar/substituir a saída padrão do núcleo do Joomla!, por exemplo, você
poderá facilmente cancelar a maneira que um artigo é processado e alterar a tabela de saída por
<div>. Ou você pode alterar a classe ou o id ao seu gosto. Processamento de paginação e estilização
de módulos também poderão ser alteradas.
Suporte para arquivos múltiplos de CSS

O gerenciamento de template suporta múltiplos arquivos CSS, dessa forma você não precisará colocar
toda a sua codificação CSS dentro de um único arquivo. Também, alteramos o nome do arquivo
principal do arquivo de CSS principal para template.css ao invés de template_css.css e adicionamos
suporte para o arquivo especial editor.css, que pode ser carregado pelo editor wysiwyg na área de
administração.
Mais informações estão disponíveis no fórum do Joomla! 12
Então o uso geral do mosCountModules seria:

<?php if($this->countModules(‘condição’)) : ?>
faça alguma coisa
<?php else : ?>
faça mais alguma coisa
<?php endif; ?>
Então, existem 4 possíveis condições:
• countModules (‘left’)
Retornará 1 se houver algum módulo na posição ‘left’ (esquerda).
• countModules (‘left and right’)
Retornará 1 se houver algum módulo na posição ‘left’ e ‘right’ (esquerda e direita).
• countModules (‘left or right’)
Retornará 1 se houver algum módulo na posição ‘left´ou ‘direita’ (esquerda ou direita).
• countModules (‘left + right’)
Contará os módulos nas posições ‘left’ e ‘right’ (esquerda e direita).
Nesta situação, precisamos empregar a função de sermos capazes de contar os módulos

presentes em uma localização específica. Então, por exemplo, se não houver conteúdo publicado
na coluna da direita, podemos ajustar o tamanho da coluna para preencher aquele espaço.
Há diversas maneiras para que você possa fazer isso. Você pode colocar um comando condicional
no corpo (do arquivo index.php) para não mostrar o conteúdo, e então ter um estilo diferente
para o conteúdo baseado em qual coluna você disporá. Para fazer isso da forma mais fácil, tenho
uma série de comandos condicionais que podem ser colocados no marcador de cabeçalho (head)
que (re)define os estilos de alguns códigos CSS.
12
http://forum.joomla.org/index.php/topic.101825.msg535479.htm#msg535479
<?php
If($this->countModules(‘left and right’) == 0 $contentwidth = “100”;
If($this->countModules(‘left or right’) == 1 $contentwidth = “80”;
If($this->countModules(‘left and right’) == 1 $contentwidth = “60”;
?>
Então, nós contamos:

• Se não tivermos nada na esquerda (left) ou (OR) direita (right), então teremos 100% de espaço.
• Se houver algum módulo na esquerda (left) ou (OR) direita (right), então teremos 80% de espaço.
• Se houver algum módulo na esquerda (left) e (AND) na direita (right), então teremos 60% de
espaço.
Então teremos que alterar o arquivo index.php na <div> de conteúdo para:
<div id=”content”<?php echo $contentwidth; ?>”>
E alteramos o arquivo layout.css para:
#content60 (float:left;width:60%;overflow:hidden;)
Os comandos condicionais em PHP no marcador de cabeçalho (head) devem aparecer DEPOIS da

linha que faz o link para o arquivo template.css. Isto é porque se houver duas regras de estilos
CSS idênticas, a que estiver por último sobreporá as demais.
Isto pode ser feito de uma maneira similar, tendo comandos if importando um arquivo CSS
secundário.
Dica
Enquanto estiver tentando resolver os problemas dos seus comandos condicionais, você pode
adicionar uma linha de código no seu arquivo index.php, como a apresentada abaixo, para
mostrar qual é o valor da largura de sua coluna:
O conteúdo desta coluna é <?php echo $contentwidth; ?>% de largura.
Estamos quase chegando lá, mas agora temos invólucros <div> vazios onde as colunas existem.
Escondendo Código do Módulo
Quando criando colunas ocultáveis é de boa prática especificar os módulos para também não
serem apresentados se não houver conteúdo. Se isto não for feito as páginas terão <div> vazias,
o que pode levar a confundir os navegadores.
Para esconder <div> vazias o seguinte comando é empregado:
<?php if($this->countModules(‘left’)) : ?>

<div id=”sidebar”>
<div class=”inside”>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>
</div>
<?php endif; ?>
Empregando o código acima, se não houver nada publicado na coluna da esquerda, então <div
id=”sidebar”> não será apresentado.
Empregando essas técnicas para as nossas colunas da esquerda e direita, o nosso arquivo
index.php se parecerá com o apresentado abaixo. Também acrescentamos um invóluvro (include)
para o módulo breadcrumbs. Observe que isso precisará ser incluído no arquivo index.php e
também publicado como um módulo.
Recomendaria uma maneira ligeiramente diferente de produzir um rodapé (footer). Da maneira

apresentada acima ele tem um código pesado dentro do arquivo index.php que dificulta
eventuais alterações. Faria mais sentido se tivéssemos um módulo posicionado ali e então o
administrador do site poderá mais facilmente mudá-lo. Não o módulo de rodapé apresentado na
área de administração que apresenta os direitos autorais do Joomla e que não pode ser
facilmente editado. Se você deseja criar o seu próprio rodapé, você simplesmente cancelará a
publicação daquele módulo e criará um módulo html customizado em qualquer idioma que
queira.
Dica de Programador
Há diversos nomes associados a módulos no Joomla: banner, left, right, user1, footer, etc.
Uma coisa importante a considerar é que os nomes não correspondem a nenhuma localização
específica. A localização de um módulo é controlada pelo programador do template, como
temos visto. É costume colocá-los (os módulos) em posição que esteja relacionada ao nome,
mas isto não é mandatório.
Este template básico tem a intenção de apresentar alguns dos princípios básicos de criação de
template no Joomla. Você pode encontrar uma cópia dos arquivos a serem empregados no
seguinte endereço: http://www.compassdesigns.net/joomla-library.
Agora que temos o básico pronto, vamos criar um template ligeiramente mais atrativo,
empregando técnicas que estudamos até aqui.
Fazendo um verdadeiro template para o Joomla 1.5
A primeira coisa que precisaremos para começar é o nosso “comp”. Isto é o modelo que será a
base de nosso template. Empregaremos um gentilmente doado para os nossos propósitos por
Casey Lee, o programador líder do Joomlashack 13 . Ele é chamado de Bold e podemos vê-lo na
figura 11-8.
Fatiar e jogar
O próximo passo no processo é o que chamamos de fatiar (slicing). Precisaremos empregar o

nosso programa gráfico para criar pequenos pedaços fatiados de imagem que possam ser
empregadas no template. É importante prestar atenção a como os elementos poderão ser
redimensionados, se necessário. Meu aplicativo gráfico por opção é o Fireworks, pois achei-o
mais apropriado para programador web que o Photoshop.
13
http://www.joomlashack.com
Figura 11-8 Um modelo do Joomlachack
Cabeçalho (header)
A imagem do cabeçalho é um leve enfeite no topo. Vamos mantê-lo. Então, colocaremos a

imagem como pano de fundo (background), e depois atribuímos uma cor, também. Dessa maneira
o cabeçalho escalará verticalmente, se necessário, por exemplo, se o tamanho da fonte for
redimensionada. Também, precisaremos alterar as cores de qualquer fonte para branco, de
forma que possam ser vistas no fundo preto.
Também empregaremos uma imagem para a caixa de busca. Devemos ter certeza que
apontamos para a entrada certa empregando mais especificidades com o CSS. Também utilizo
posicionamento absoluto dentro de um elemento de posição relativa para colocar a caixa de
busca onde a desejo. A imagem não será redimensionada com apenas uma simples imagem.
Ainda requererá uma imagem de top e bottom (cima e baixo). Este será um outro exercício para o
leitor!
Observe que não empreguei um logotipo gráfico aqui, mas texto puro. A razão é principalmente
porque os mecanismos de busca não podem ler imagens. Alguém poderá substituir por belas
imagens, mas deixo isso como exercício para o leitor.
Nosso cabeçalho se parecerá com o apresentado na figura 11-9, abaixo.
Figura 11-9 Imagem do cabeçalho (header)
Próximo passo, precisaremos implementar a técnica chamada de portas deslizantes (sliding doors)
O fundo (background) das Colunas
Nós falaremos sobre isso quando formos colocar cor de fundo nas colunas, sendo que a cor não
se estenderá por toda a coluna até o rodapé. Isto é porque o elemento <div>, neste caso sidebar
e sidebar-2, é somente do tamanho do conteúdo. Ele não cresce para preencher o espaço do
elemento.
Teremos que empregar a técnica 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 invólucros <div> para colocar os fundos. Normalmente poderíamos
aplicar uma ao invólucro maior (#wrap), mas estou empregando um invólucro extra (e
trabalhoso) por razões de ilustrações, 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
No nosso caso, a largura máxima que estamos considerando é de 960px, dessa forma começamos
com uma imagem dessa largura. Na pasta de imagens está o arquivo slidingcolumns.png. Então,
exportamos duas fatias (empreguei a mesma fatia e apenas ocultava/apresentava as imagens
laterais), uma com 960px de largura com uma de fundo com 192px à esquerda, e uma de 960px
de largura com uma de fundo com 192px à esquerda.
Nota
A imagem à esquerda precisa ter um fundo na cor branca, e a da direita de um fundo
transparente. 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 têm 20% de
largura.
Nós 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 invólucro interno dentro do maior

wrap.
Também precisamos colocar um comando condicional para fechar as <div>.
Observe que devemos colocar um fundo para o nosso rodapé e módulos/elementos da parte
inferior, pois de outra forma os fundos das colunas seriam mostrados.
Precisamos limpar os comandos “floats” de forma que o invólucro flutuante (as colunas de Faux)
possam se estender até o fim da página. O método normal para fazer isso era a de se empregar a
propriedade :after 14 . Mas, com o lançamento do IE7, este método não funcionará
completamente. Precisamos endereçar a limpeza dos floats no Internet Explorer 6 e 7, e aí está
o arredondamento no final.
Um par 15 de soluções foram encontradas 16 . Eu vou empregar a opção 17 “Float (nearly)

Everything” aqui.
Então, adicionamos um simples comando clear:both ao #footer (<div> do rodapé) e acrescentamos

floats aos invólucros 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.
Módulos Flexíveis
14
http://positioniseverything.net/easyclearing.html
15
http://www.quirksmode.org/css/clearing.html
16
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
17
http://orderedlist.com/articles/clearing-floats-the-fne-method
No nosso esboço, temos um bloco de módulo grande no início. Não sabemos o quão alto será o
texto que vai ser incluído lá. Para resolver este problema pusemos o módulo incluso em um
elemento de invólucro e demos um fundo da mesma cor da imagem. Esta é a mesma estratégia
que empregamos para o cabeçalho.
Observe que também empregamos um comentário condicional de forma que se a localização do

módulo de top (superior) não tiver conteúdo, a imagem da laranja implicante (mensagem de erro?)
não estará lá. O que vai estar lá é um invólucro vazio que conterá uma parte da imagem de
fundo e um valor de espaçamento de 20px. Isto é somente para fim estético.
É preciso empregar as especificidades do CSS para sobrescrever os estilos do moduletable que

foram definidos anteriomente.
Com o fundo de nosso template básico no lugar o nosso site se parecerá com o apresentado na
figura 11-10.
Nada mal, agora precisamos nos focar em alguma coisa de tipografia (fonte).
Figura 11-10 Template avançado com leiaute
Tipografia (fonte)
Muitos links precisarão estar na cor branca. Então, definimos isso de forma global e depois
modificamos a cor para a coluna central.
O esboço possui botões estilizados. Criamos isso empregando uma imagem de fundo a partir do
modelo. É uma fatia muito fina que é preenchida horizontalmente.
Para as tabelas, como as FAQ (perguntas mais freqüentes), podemos adicionar um fundo fácil
repetindo o uso da imagem que empregamos para chamar atenção. A reutilização de imagens é
comum e também economiza em download, tornando a página mais rápida.
Os módulos precisam de apenas uma simples redefinição e ajustes nos espaçamentos (padding) e
margens.
Menus, como sempre, precisam de muitos estilos CSS. Aqui vamos manter o mais simples
possível. Nós fatiamos uma simples imagem que inclua ambos o marcador e a marca de
sublinhado. Observe que o estilo é “ligado” aplicando um sufixo de módulo de menu para
qualquer lista de links que queiramos que tenha a mesma aparência.
Por último é a tab (tabela) do menu no canto superior direito. Como defensores da
acessibilidade, queremos colocar isso de forma que as tabs sejam escaláveis e as fontes possam
alterar o seu tamanho. Felizmente, uma técnica foi desenvolvida para fazer isso, e é de fato
com o mesmo princípio que empregamos para as nossas colunas, as portas deslizantes (sliding
doors) 18 novamente!
Também tentamos e fizemos alguma otimização em velocidade para os templates e empregamos

uma única imagem para a esquerda e a direita das portas (doors), assim como os estados de
ligado (on) e desligado (off). Isto é conhecido como empregando fantasmas (sprites) 19 .
O CSS não é tão complicado; apenas marcamos passo com o posicionamento vertical da imagem
de fundo para o estado de ligado (on).
18
http://www.alistapart.com/articles/slidingdoors/
19
http://fiftyfoureleven.com/sandbox/weblog/2004/jun/doors-meet-sprites/
Se você observar lá atrás o esboço original, verá que havia ícones nessas tabs. Como estamos
empregando duas imagens de background, uma na li (lista) e a outra no link, precisaremos de um
terceiro elemento para colocar o fundo do ícone. Podemos fazer isso tendo um span, mas isso
não é o que a saída do CMS nos dará. A solução seria tanto forçar o menu dentro de um módulo
ou cancelar a saída do núcleo (mais sobre isso será apresentado posteriormente).
Depois de adicionar uma cor de fundo, nosso template terá a aparência razoável da figura 11-11.
A última coisa que permanece é revisar o arquivo templateDetails.xml. Ele precisa relacionar
todos os arquivos e imagens empregadas no template, de forma que ele possa instalar
apropriadamente a partir de um arquivo zip. Há um grande número de ferramentas que faz isso
automaticamente para você, se estiver usando o Joomla 1.0.X, mas até este momento não há
nenhuma disponível para a versão 1.5.
Figura 11-11 Template avançado com tipografia
Podemos ver uma versão ao vivo desse template em http://www.compassdesigns.net/Joomla15.

Os arquivos do template podem ser encontrados em http://www.compassdesigns.net/joomla-library/tutorials.
Parâmetros do Template
Novo na versão 1.5 é a adição de parâmetros do template para os templates. Isto permite que
você passe variáveis ao template a partir de opções selecionadas na área de
administração/manutenção do site.
Uma função de parâmetro relativamente simples é mostrada no template padrão Milky Way. No
arquivo templateDetails.xml você verá o seguinte:
No gerenciamento de template (Template Manager) para aquele template, você verá setagens
para os parâmetros, como mostrado na figura 11-12.
Figura 11-12 parâmetros do template Milky Way vistos na área de administração
Podemos ver que se trata apenas de um simples botão tipo rádio com duas opções. Se
escolhermos “não” (no), então a saída dos componentes são serão apresentadas.
Um outro um pouco mais complexo que ajustará a largura do template, a saída do arquivo XML
terá o seguinte:
Então, no marcador head do nosso arquivo index.php precisaremos acrescentar o seguinte:
Isto nos dá três opções, uma coluna de largura estreita fixa, um larga fixa e uma versão flexível
(fluída).
No gerenciamento de template (Template Manager) veremos a opção como mostrado na figura 11-
13.
Figura 11-13 Outros parâmetros visto na área de administração/manutenção
Empregando os parâmetros do template neste caso pode dar ao administrador do site

flexibilidade em quase todas as facetas do template, como largura, cor e etc.; tudo controlável
com setagens condicionais de PHP e estilos CSS.
Você também precisará de um arquivo chamado de params.ini na sua pasta do template. Ele
pode ser um arquivo em branco, mas o Joomla precisa desse arquivo para armazenar as setagens
que você tiver. Por exemplo, um arquivo ini (de inicialização) do exemplo anterior poderia se
parecer com isso:
showComponent=1
template_width=2
Você deve assegurar-se de que este arquivo esteja com direitos de escrita, de forma que as
alterações possam ser realizadas.
Cancelamento de Template
Talvez o recurso mais poderoso de templates da versão 1.5 seja a habilidade de cancelar a saída
gerada pelo núcleo. Isto é feito com novos arquivos de saída chamados de arquivos do template
que correspondem às visualizações do leiaute de componentes e módulos. O Joomla verificará
em cada caso para ver se existe algum na pasta do template, e se houver, usa aquele e cancela
a saída normal.
Estrutura de cancelamento
Todas as visualizações de leiaute e de templates estão no núcleo principal em uma pasta

/tmpl/. A localização é ligeiramente diferente para componentes assim como para módulos, pois
os módulos têm essencialmente somente uma visualização (view).
Por exemplo:
A estrutura básica para todos os componentes e módulos é a seguinte:
visualização -> leiaute -> templates
Aqui estão alguns exemplos; observe que os módulos somente possuem uma visualização.
(visualização) (leiaute)
Normalmente existem diversos arquivos de templates envolvidos em um leiaute particular. Eles

possuem uma convenção de nome comum:
(descrição)
(convenção de nome de arquivo) (exemplo)
(leiaute principal de template)
(leiaute secundário de template chamado a partir do ...)
(... arquivo do leiaute principal)
(leiaute comum de template empregado por diferentes

leiautes)
Cancelamento de Módulos
Cada módulo tem uma nova pasta que contém seus templates, a pasta é chamada de “tmpl”.
Dentro dela estão arquivo php que criam as saídas, por exemplo:
Os três primeiros são três leiautes de newsflash (manchetes) baseados em quais opções de
módulos são selecionadas, e o arquivo _item.php é um template de leiaute comum empregado
pelos outros três. Abrindo o arquivo encontraremos:
Então, podemos alterar isso para remover as tabelas e tornar o site um pouco mais acessível:
Este novo arquivo pode ser colocado no diretório do template em uma pasta chamada de html,
como apresentado a seguir:
Templates/templatetutorial15bold/html/mod_newsflash/_item.php
Fácil assim, apenas tiramos as tabelas do módulo de Newsflash (manchetes)!
Cancelamento de Componente
Os componentes funcionam quase da mesma maneira que os módulos, exceto que existem
muitas visualizações associadas com muitos componentes.
Se olharmos na pasta com_content encontraremos uma pasta chamada de views (visualizações).
/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section
Então, estas pastas corresponderiam as quatro visualizações possíveis para content (conteúdo),
archive (arquivo), article (artigo), category (categoria) e section (seção).
Dentro da pasta view encontraremos a pasta tmpl, assim como modules, e nesta os diferentes
leiautes possíveis.
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 padrão

que apresenta os artigos como uma lista de links.
Abrindo-se o arquivo blog_item.php veremos as tabelas atualmente em uso. Se desejarmos

cancelar a saída, nós colocamos o que quisermos empregar em nossa pasta template/html, por
exemplo:
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 o

site Joomla através do seu template. Você pode criar templates de saída que sejam focalizados
nos SEO (mecanismos de busca), acessibilidade ou necessidades específicas de um cliente.
Esses templates são liberados sob a atribuição v2.5 da Creative Commons. Isto significa que você
é livre para:
• Copiar, distribuir, apresentar e realizar o trabalho

• Fazer trabalhos decorrentes
• Fazer uso comercial do trabalho
Sob as seguintes condições:
• Você deve atribuir o trabalho da maneira especificada pelo autor ou licenciador. (neste
caso, deixando um link para o meu site no rodapé do template).
• Para qualquer reutilização ou distribuição, você deve deixar claro para os outros os
termos do licenciamento deste trabalho.
• Quaisquer dessas condições podem ser desconsideradas se você solicitar a devida
permissão do proprietário dos direitos autorais.
Este tutorial propriamente é um conteúdo de amostra que foi extraída do livro a ser lançado,
cujo título será Joomla! A User´s Guide: Building a Joomla! Powered Website (Joomla! Um Guia do
Usuário: Construindo um Website Poderoso com o Joomla!), a ser publicado a partir de maio de 2007
pela editora Prentice Hall Professional. Ele é licenciado sob a atribuição de não comercial – não
derivativo (decorrente) 2.5 20 .
Também no site da Compass Designs existem dicas e truques que não explicitamos aqui, como
por exemplo como criar módulos com cantos arredondados e texto redimensionável.
Você pode encontrar tudo isso em http://www.compassdesigns.net/tutorials/joomla-tutorials/.
20
http://creativecommons.org/licenses/by/2.5/

Joomla15 TemplateTutorial Traduzido

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Joomla15 TemplateTutorial Traduzido

Загружено:

Авторское право:

Доступные форматы

Joomla!

TUTORIAL SOBRE TEMPLATE

Autor: Barrie North, www.compassdesigns.net (http://vig.prenhall.com/catalog/Fast_Search/fast_quick_search/1,3064,,00.html)

© 2006 Compass Design 1 de 53

Neste capítulo, demonstraremos os passos para se criar um template do Joomla.

Incluso neste capítulo estão às seguintes seções:

• O que é um template Joomla? -> pág. 02

O que é um template Joomla?

© 2006 Compass Design 2 de 53

Fig. A – Template Joomla Fig. B – Template Joomla

Figura 11-1 Template com e sem conteúdo

A Figura A apresenta o template em uso com amostras de conteúdo. A Figura B apresenta o

Processo de desenvolvimento no localhost (local)

Opções do Servidor Local

Um editor XHTML livre

© 2006 Compass Design 4 de 53

W3C e Programação sem Tabela

Usabilidade, acessabilidade e otimização para mecanismos de buscas são todos termos

Por exemplo, um site que é estruturado semanticamente em (x)html (o xhtml explica o

Código válido pela W3C

Figura 11-2 A sobreposição entre SEO, acessibilidade e usabilidade

© 2006 Compass Design 5 de 53

Antes usávamos um exemplo de se construir códigos por construir. Os padrões apresentam-nos

Código Correto Semanticamente

Folhas de Estilo em Cascata (CSS)

Diretamente relacionado a se ter códigos semânticos é empregar folhas de estilo em cascata

© 2006 Compass Design 6 de 53

Felizmente, o time de desenvolvimento do núcleo do Joomla reconheceu este fato. Na versão

De forma a entender o conteúdo de um template, iniciaremos dando uma olhadela em um

Dentro do diretório de um template existem um número de arquivos chaves:

© 2006 Compass Design 7 de 53

<?xml version=”1.0” encoding=”utf-8”?>

© 2006 Compass Design 8 de 53

Vamos explicar o que algumas dessas linhas significam:

<install version=”1.5” type=”template”>

Os conteúdos de um documento XML são instruções para o instalador da área de administração.

O nome do autor desse template – ou mais provavelmente o seu nome.

Endereço de email onde o autor do template pode ser encontrado.

O endereço da URL do site do autor do template.

© 2006 Compass Design 9 de 53

O DOCTYPE é a parte fundamental do componente a partir da qual uma página da web é

© 2006 Compass Design 10 de 53

Alguns links úteis:

O que existe a mais no arquivo index.php?

O que tudo isso significa?

© 2006 Compass Design 12 de 53

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

Isto será muito fácil! Pronto?

Nós temos uma ordem lógica razoável:

A meta é tentar e se aproximar o mais próximo possível da semântica de marcação. A partir do

© 2006 Compass Design 13 de 53

Figura 11-3 Um template sem especificação de estilo

O comando de PHP echo simplesmente apresenta na saída um conjunto de caracteres do arquivo

O comando jdoc insere vários tipos de XHTML.

Isto insere a saída para um módulo de localização. A sintaxe completa é:

Veremos as várias opções para estilos posteriormente neste capítulo.

Empregando o CSS para criar um leiaute

Figura 11-4 Leiaute de um template muito básico

Dica: CSS abreviado

Para implementar o leiaute e adicionar algum espaço ao conteúdo, precisamos acrescentar

© 2006 Compass Design 18 de 53

O CSS padrão do Joomla

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