JOOMLA! 1.0.X

TUTORIAL SOBRE TEMPLATE

Autor: Barrie North, www.compassdesigns.net Tradução livre: Geciel Rangel Costa - http://gecielc.spaces.live.com/

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

1 - 60

Tutorial sobre Template do Joomla! Neste tutorial apresentaremos os passos necessários para se criar um template no Joomla. Joomla é um Sistema de Gerenciamento de Conteúdo (CMS) livre (literalmente), disponível e com suporte de uma grande comunidade. Especificamente, criaremos um template que empregará as folhas de estilos em cascata (CSS) para produzir um leiaute sem o emprego de tabelas, Esta é a meta desejável, pois dessa forma, o código do template poderá ser validado nos padrões estabelecidos pelo World Web Consortium (W3C). Também, o template carregará mais rápido, será mais fácil para se manter e terá melhores resultados em ferramentas de busca. Discutiremos esses assuntos, em detalhe, neste tutorial. Este tutorial compõem-se dos seguintes tópicos: •

O que é um Template do Joomla? Explica quais as funções executadas por um template do Joomla e as diferenças entre um template com e sem conteúdo, adicionado ao CMS.

•

Processo do planejamento local Como o processo de planejamento de um template difere daquele pertinente ao esboço de uma página estática (X)HTML.

•

W3C e o esboço do tipo Tableless (sem tabela) As implicações de um esboço sem tabelas no Joomla e o relacionamento entre os padrões do W3C, usabilidade e acessabilidade.

•

Os Componentes de um Template Quais arquivos compõem um template Joomla e as funções que eles executam.

•

Empregando o CSS para criar um leiaute Como criar um esboço de leiaute com 3 colunas ordenadas empregando CSS, ao invés de tabelas.

•

O CSS padrão do Joomla Uma introdução aos estilos básicos do CSS que podem ser empregados no Joomla, além da lista padrão de estilos empregados no código central do Joomla.

•

Módulos Como posicionar, estabelecer estilos, incluindo novas técnicas de arredondamento.

•

Menus Uma estratégia simples para produzir menus CSS enxutos que imitam os efeitos daqueles produzidos com JavaScript.

•

Escondendo Colunas Como controlar quando as colunas serão mostradas e como escondê-las na ausência de conteúdo.

•

Conclusão

•

Apêndice A: Dicas e Truques Largura de página variável, Arredondamentos, Redimensionamento de texto e mais.

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

2 - 60

O que é um template do Joomla? Um template do Joomla é uma série de arquivos do CMS Joomla que controla a apresentação de conteúdo. Um template do Joomla não é um site e nem pode ser considerado um planejamento do site completo. O template é o fundamento básico do planejamento do que será visto no site Joomla. Para produzir o efeito de um site completo, o template trabalha lado a lado com o conteúdo armazenado nos bancos de dados do Joomla. Um exemplo disso pode ser visto abaixo:

Fig. A – Template Joomla com amostra de conteúdo

Fig. B – Template Joomla com pouco ou nenhum conteúdo.

Estas figuras apresentam o template em uso com uma mostra de conteúdo. A Figura ‘B’ mostra o template como ele se parecerá em uma instalação Joomla ainda em construção, com pouco ou sem conteúdo. O template é formatado de tal forma que quando o conteúdo for inserido, ele herdará os estilos definidos no template, como estilos, menus, navegação, tamanho do texto e cores, para nomear apenas alguns. Observe como as imagens associadas ao conteúdo (as fotos das pessoas) não são parte do template, enquanto que as imagens no cabeçalho são parte do mesmo. Empregando um template para um CMS, como o Joomla faz, tem as suas vantagens e desvantagens: •

Há uma separação completa entre conteúdo e apresentação, especialmente quando o CSS é empregado para o leiaute (em oposição a ter tabelas no arquivo index.php). Este é um dos principais critérios para um site que atende os padrões atuais da web.

•

Um novo template, e então, um novo visual completo para o site, pode ser aplicado instantaneamente. E pode, também, ter diferentes localizações/posicionamentos do conteúdo, assim como cores e gráficos.

•

Se leiautes diferentes são necessários em um site, isso é difícil de conseguir. Embora diferentes templates possam ser aplicados em páginas distintas, isto ganha em funcionalidade, mas não é confiável. Muitos desenvolvedores optam por empregar vários códigos PHP para mostrar/esconder colunas, dependendo se existe ou não algum conteúdo publicado naquela posição (isso será apresentado em dicas e truques, no apêndice).

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

3 - 60

Processo do planejamento local Uma página que você vê em um site típico do Joomla não é estático. Isto significa que ele está sendo gerado dinamicamente a partir do conteúdo armazenado no banco de dados. A página que você vê é criada através de comandos PHP que estão no template. Isto apresenta algumas dificuldades na fase de planejamento. É comum hoje empregar um editor do tipo “O que você vê é o que você obtém” (WYSIWYG), como o Dreamweaver. Isto significa que o web designer nem precisa codificar em HTML. Contudo, isto não é possível no processo de planejamento de um template no Joomla, pois editores WYSIWYG não podem apresentar páginas dinâmicas. Isto significa que o web designer deve codificar manualmente e ver a página de saída do PHP na página do servidor. Com uma conexão rápida isto pode ser feito em um servidor de web, porém, muitos web designers preferem fazê-lo no servidor local, ou seja, em seu próprio computador. Não existe um caminho único para se criar uma página da web, isto depende do conhecimento do próprio web designer. Aqueles chegados mais a gráficos, fazem uma imagem da página em programas gráficos como o Photoshop e então partem essa imagem para ser empregada (processo conhecido como ‘slice and dice’ [partir e jogar]). Os mais técnicos freqüentemente lançam-se sobre o CSS e começam a codificar. Contudo, como mencionado acima, o web designer de um template Joomla é limitado naquilo que ele não poderá ver instantaneamente o efeito de sua codificação no mesmo editor. O processo de modificação do esboço: 1. Faça a edição com o editor HTML, salve as alterações 2. Tenha o servidor local rodando para executar o Joomla. 3. Veja as modificações no navegador 4. Volte ao passo 1. Opções do servidor Localhost Muitos servidores locais são disponíveis: •

JSAS - Joomla Stand Alone Server. Servidor WAMP que executa o Joomla em PCs com Windows. É um pacote complete com Apache - MySQL – PHP. http://jsas.joomlasolutions.com

•

XAMPP é uma distribuição fácil de instalar para Linux, Windows, Mac OS X, e Solaris. O pacote inclui o servidor Apache, MySQL, SQLite, PHP, etc. www.apachefriends.org/en/xampp.html

JSAS, de fato, tem uma grande quantidade de propagandas, o que pode incomodar você. Fácil modelagem com CSS  Uma técnica útil para fazer o processo de esboço mais eficiente é apresentar a página que você está  esboçando e então copiar e colar a fonte (o código) em um editor. Por exemplo, uma vez que o seu leiaute CSS esteja  configurado, você pode empregar o servidor local para apresentar a página e, no navegador, selecionar a opção  ‘View_Source’ (Ver fonte). Você, então, copia e cola a fonte em seu editor. Você, agora, poderá mais facilmente 

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

4 - 60

especificar um estilo para a sua página, empregando CSS e não precisará seguir os passos descritos acima (no  processo de modificação do esboço).

Algumas opções de editores para web designers do Joomla Para aqueles que não têm recursos para pagar por um editor comercial, como o Dreamweaver, existe alguns editores livres disponíveis. Nvu é uma opção sólida e foi construído com validação. É também uma extensão Mambo/Joomla, que poderá ser útil. Nvu é 100% código aberto. Isto significa que qualquer um pode fazer o download do mesmo sem custos, (download Nvu at no charge), incluindo o código fonte, se você desejar fazer mudanças especiais. Você pode pegar extensões a partir do (extension from Mamboforge). O projeto completo encontra-se (aqui). Uma outra opção é realmente mais que um validador. O "CSE HTML Validator" é um tudo-emum com HTML, XHTML, CSS, link, corretor, e verificador de acessibilidade. Você pode pegar a versão livre aqui (html validator here). Observe que nenhum desses são editores html do tipo "WYSIWYG".

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

5 - 60

W3C e o esboço do tipo Tableless (sem tabela) Usabilidade, acessibilidade e otimização de ferramentas de buscas são todas expressões empregadas para descrever a alta qualidade das páginas da web atualmente. Na realidade, há um significativo distanciamento entre as mesmas, e uma página da web que demonstre a característica de uma delas pode fazer pelas três. A maneira mais fácil de se conseguir esses três objetivos é empregando os componentes disponibilizados pela W3C web standards. Por exemplo, um site que é estruturado semanticamente em (x)html (o xhtml explica o documento, não como ele se apresenta) poderá ser facilmente apresentado em uma tela que tenha sido preparada por alguém de pouca visão. Poderá, também, ser facilmente lida por ferramentas de busca. Google é, efetivamente, cego em como ele lê o seu site.

Site ‘pobre’

Site ‘bom’

Código válido pela W3C

Um site que é validado de acordo com os padrões estabelecidos pelo World Wide Web Consortium's (W3C) tem uma melhor estrutura, o que o torna mais acessível, usável e otimizado para ferramentas de buscas. Pense nisso como construindo códigos para a sua casa. Um site construído conforme aqueles padrões é seguro e forte. Você pode verificar se suas páginas são válidas, de acordo com o padrão definido pela W3C, a partir do serviço de validação gratuita em W3C's HTML. Assim, em resumo, um site que atenda as regras de validação do W3C emprega semântica (x)html e separa conteúdos de estilos de apresentação, empregando o CSS. Para ajudá-lo a entender de onde vêm os padrões da web, alguma história é útil. Muitas páginas da web são esboçadas para navegadores antigos. Por quê? Os navegadores têm evoluído continuamente desde o início da www. Novos têm aparecido e os mais antigos estão desaparecendo Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

6 - 60

(lembram-se do Netscape?). Um outro fator complicador é diferentes empresas que constroem navegadores (como a Microsoft) tendem a construir os seus próprios interpretadores html/xhtml ligeiramente diferentes dos demais. Isto leva os web designers a construir os seus sites para atender as especificações dos navegadores mais antigos em detrimento dos novos. Tem sido freqüentemente decidido que as páginas da web precisam aparecer adequadamente nesses navegadores legados. Os padrões da web disponibiliza um conjunto de regras para todos os navegadores mostrar as páginas da web. A principal organização que conduz esses padrões é World Wide Web Consortium (WC3), cujo Diretor, Tim Berners-Lee, tem realmente a distinção de ter inventado a world wide web (www) em 1989. Pergunte a cinco web designers o que significa padrões da web e você obterá cinco respostas. Mas, muitos concordam que elas se baseiem no seguinte: •

Código Válido, se html ou xhtml (ou outros) Antes empregamos um exemplo de se construir códigos comparados à construção. Os padrões esquematizados para os códigos que fazem uma página da web foram desenvolvidos para se conseguir consistência. É fácil verificar o seu código em validator.w3.org. Assegure-se que você empregará o correto tipo de documento (DOCTYPE) quando tentar validar o seu código. Este artigo do site Compass Design descreve um documento do Joomla, (valid Joomla doctype).

•

Código Semanticamente Correto Mencionamos antes que ser semântico significa que o código (x)html na página da web descreve somente o conteúdo, não a apresentação. Em particular, isto significa a organização estruturada dos marcadores h1/h2; somente empregar tabelas para dados que precisem ser tabelados, não para organizar o leiaute de uma página.

•

Folhas de Estilo em Cascata (CSS) Muito relacionado a se ter códigos semanticamente corretos é o emprego das folhas de estilo em cascata (CSS), que é um mecanismo simples de estilo (por exemplo: fontes, cores, espaçamento) para documentos da web. (Fonte: www.w3.org/Style/CSS/). Elas existem em paralelo ao código (x)html e permite a você separar completamente o conteúdo (código semântico) da apresentação (CSS). O melhor exemplo disso é CSS Zen Garden, um site onde a mesma semântica do xhtml é formatada em diferentes e únicas maneiras do CSS. O resultado é uma página que parece muito diferente uma da outra, mas têm o mesmo conteúdo central.

O desenvolvimento de sites poderosos com o Joomla atualmente apresenta consideráveis desafios para atender aos requisitos da validação. Na presente série, versão 1.0.X, o código emprega uma grande quantidade de tabelas para apresentar suas páginas. Isto não está, de fato, empregando o CSS para a apresentação, nem isto produz códigos semanticamente corretos. O problema é composto pelo fato que poucos desenvolvedores estejam empregando o CSS, também, pois muitos empregam tabelas para gerar o seu código. Contudo, tableless (sem tabela) também não válido. É pouco provável ter um site que emprega tabela para validar, isto é difícil. Uma corrente útil no fórum do Joomla apresenta este assunto em maior detalhe: Truques fáceis para se remover muitas tabelas de uma saída padrão do Joomla (Easy tricks to remove many tables from the standard output of Joomla!). Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

7 - 60

Afortunadamente, o time de desenvolvimento do Joomla reconhece isto no Joomla. Enquanto na versão 1.5 não há possibilidade de se remover tabelas do núcleo do sistema, um esboço foi definido para resolver isso na próxima versão 1.6 e diante. Entretanto, cuidados devem ser tomados quando criando templates para que os mesmos sejam acessíveis (por exemplo, com fonte escaláveis), usável (por exemplo, navegação fácil) e otimizado para ferramentas de buscas (por exemplo, fonte ordenada).

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

8 - 60

Os Componentes de um Template Para que se possa entender o conteúdo de um template, iniciaremos observando um template vazio do Joomla. Neste arquivo estão os vários arquivos e pastas que constituem um template do Joomla. Estes arquivos devem ser colocados no diretório /templates de uma instalação Joomla. Então, se tivermos dois templates instalados, nosso diretório se parecerá com: ¾

/templates/JS_Smoothportal

¾

/templates/JS_Synergy

Observe que o nome do diretório dos templates devem ser os mesmos do template, neste caso JS_Smoothportal e JS_Synergy. Obviamente, as letras maiúsculas e minúsculas são diferenciadas no nome, e eles não podem possuir espaços. Tradicionalmente, as iniciais do web designer ou o seu próprio nome é empregado como prefixo (o prefixo é, no exemplo acima, o JS). Dentro de um diretório de um template existe alguns arquivos chaves: ¾

/JS_Smoothportal/templateDetails.xml

¾

/JS_Smoothportal/index.php

Estas duas localizações e nomes de arquivos devem ser exatamente como são apresentados, pois é assim que são chamados pelo script central do Joomla. •

templateDetails.xml (Observe a letra maiúscula "D"). Um formato de arquivo metadata XML que diz ao Joomla quais os demais arquivos são necessários quando carregando a página da web que emprega este template. Também detalha o autor, direitos autorais e quais arquivos constituem o template (incluindo qualquer imagem empregada). O último emprego desse arquivo é para instalar um template quando empregando a área de manutenção ou administração.

•

index.php Este arquivo é o mais importante, Ele monta a apresentação do site e diz ao Joomla onde colocar os diferentes componentes e módulos. É uma combinação de PHP e (X)HTML.

Em quase todos os templates, arquivos adicionais são empregados. É convencional (mas, não requerido pelo sistema Joomla) nomear e localizá-los conforme indicado abaixo: ¾

/JS_Smoothportal/template_thumbnail.png

¾

/JS_Smoothportal/css/template_css.css

¾

/JS_Smoothportal/images/ logo.png

•

template_thumbnail.png A captura da tela do template aberto no navegador (usualmente reduzido para cerca de 140

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

9 - 60

pixels de largura por 90 pixels de altura). Depois que o template for instalado, isto funciona como uma imagem de pré-visualização visível na área de administração de gerenciamento de template. •

css/template_css.css O arquivo CSS do template. A localização da pasta é opcional, mas deve-se especificar onde ela estará. Observe que o nome do arquivo é importante, pois ele é referenciado no arquivo index.php. Você pode denominá-lo como quiser. Normalmente o nome mostrado é empregado, mas veremos depois que há vantagens em ter outros nomes de arquivos CSS, também.

•

images/logo.png Quaisquer imagens que serão mostradas no template. Novamente, por critérios de organização, muitos web designers colocam-nas em uma pasta denominada images (imagens). Aqui temos um arquivo de imagem chamado logo.png, como um exemplo.

Para adicionar o template (novamente, numerosos tutoriais existem) você pode ir à área de administração do site e instalar o template fazendo o upload do arquivo zip correspondente ao mesmo. Observe que, realmente, você pode adicionar os arquivos pertinentes individualmente (não a partir de um arquivo zip), também. Você deve colocá-los em nomedoseusite.com/templates. templateDetails.xml O arquivo templateDetails.xml deve relacionar todos os arquivos que fazem parte do template. Isto inclui, ainda, informações, tais como, o autor e direitos autorais. Alguns desses são apresentados na área de administração do site, no gerenciamento de template. Um exemplo de arquivo xml é apresentado abaixo: <mosinstall type=ʺtemplateʺ version=ʺ1.0.xʺ>   YourTemplate   March 06   Barrie North   GNU/GPL    [email protected]   www.compassdesigns.net   1.0   <description> An example template that shows a basic xml details file       index.php   js/ie.js   template_thumbnail.png         images/header.png   images/background.png  

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

10 - 60

template_thumbnail.png         css/base.css   css/norightcol.css   css/template_css.css       

Vamos explicar o que algumas dessas linhas significam: •

mosinstall O conteúdo do documento XML são instruções para o instalador. A opção type="template" diz ao instalador que estamos instalando um template.

•

name: Define o nome do seu template. O nome que você digitar aqui também será empregado para criar o diretório dentro da pasta /templates. Entretanto o nome não pode conter qualquer tipo de caractere que o sistema de arquivo não possa processar, por exemplo, espaços. Se instalando manualmente, você precisa criar um diretório que seja idêntico ao nome do template.

•

creationDate: A data do template foi criada. Este é um campo livre e pode conter qualquer coisa, como, May 2005, 08-June-1978, 01/01/2004 e etc.

•

author: O nome do autor do template – muito provavelmente o seu próprio nome.

•

copyright: Qualquer informação de direitos autorais é colocado neste elemento. Um exemplo de licenciamento para desenvolvedores e web designers (Licensing Primer for Developers & Designers) pode ser encontrado no fórum do Joomla.

•

authorEmail: Endereço de Email onde o autor do template pode ser encontrado.

•

authorURL: A URL do autor do site.

•

version: A versão do template.

•

files: As seções "files" (arquivos) contém todos os arquivos genéricos, como fontes PHP para o template ou a amostra de imagem de pré-visualização do site. Cada arquivo listado nesta seção é limitada pelos marcadores . Também poderia ser incluído qualquer outro tipo de arquivo, aqui empregamos o exemplo do arquivo JavaScript, que é necessário para o template.

•

images: Todos os arquivos de imagem empregadas no template são listadas nesta seção.

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

11 - 60

Novamente, cada lista de arquivo é limitada pelos marcadores . Informações de caminho dos arquivos são relativos à pasta raiz do template, por exemplo, se o seu template estiver em um diretório chamado 'YourTemplate' e as imagens no diretório 'images' que está dentro da pasta 'YourTemplate', o caminho correto é: images/my_image.jpg 

•

css: A folha de estilo listada na seção CSS. Novamente, os arquivos estão limitados pelos marcadores e o seu caminho é relativo à pasta raiz do template. É útil ter um número de folhas de estilo empregadas, todas importadas para o arquivo principal template_css.css. Nós discutiremos isso mais tarde neste tutorial.

O arquivo Index.php O que é, realmente, um arquivo index.php? É uma combinação de (X)HTML e PHP que determina tudo sobre o leiaute e a apresentação das páginas. Primeiro, olharemos uma parte crítica de se conseguir um template válido, a expressão DOCTYPE existente na parte superior do arquivo index.php. Este pedaço de código é apresentado na parte superior de qualquer página da web. Na parte superior de nossa página temos o seguinte em nosso template:

   ʺ xml:lang=ʺʺ> 

Uma página da web com a expressão DOCTYPE é a parte fundamental de como uma página é mostrada no navegador, especificamente, como o navegador interpreta o código CSS. Para dar mais sentido, veja uma observação no site www.alistapart.com que afirma: [as informações no site W3C's a respeito de doctypes é] "escrito por geeks para geeks. E quando eu digo geeks, não quero referenciar-me a profissionais da web comuns, como eu e você. Quero dizer com geeks aqueles que fazem o resto de nós parecermos como uma avó no primeiro dia que recebe um Email"

De qualquer forma, há diferentes tipos de doctypes que você pode empregar. Basicamente, a expressão doctype diz ao navegador para interpretar a página. Aqui, as palavras "strict" e "transitional" iniciam o fluir do código (float:esquerda e float:direita, normalmente). Essencialmente, desde que a WWW começou, diferentes navegadores têm diferentes níveis de suporte ao código CSS. Isto significa, por exemplo, que o Internet Explorer não entende o commando ‘min-width’ para especificar a largura mínima de uma página. Para conseguir o efeito você terá que codificar em CSS. ‘Strict’ significa que o html (ou xhtml) será interpretado exatamente como especificado nos padrões. Um ‘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 estiver errado, desatualizado ou não existir, então o navegador entre no modo "quirks". Isto Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

12 - 60

é uma tentativa de tentar ficar compatível; então, o Internet Explorer, por exemplo, fará o processamento da página fingindo que ela era 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 do servidor WC3. Você precisa do caminho completo, como demonstrado no exemplo acima, no início desse item. •

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 prolog" antes da declaração do tipo de documento (doctype).  

A parte a respeito do modo ‘quirk’ do IE6 é importante. Neste tutorial estaremos esboçando 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 que talvez tenhamos que fazer. A expressão ‘xml prolog’ não é essencial, de qualquer forma, faremos anotações para futuros lançamentos do Joomla para isto fique de fora. 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 para reduzir o que você está dizendo que faz e, então, fazendo o que você diz. 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 no arquivo index.php? Vamos observar a estrutura do cabeçalho (header) 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:

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

13 - 60

      ʺ  xml:lang=ʺʺ     <meta http‐equiv=ʺContent‐Typeʺ content=ʺtext/html; ʺ />  id) { initEditor(); } ?>      <script type=ʺtext/javascriptʺ>       /css/template_css.cssʺ rel=ʺstylesheetʺ  type=ʺtext/cssʺ media=ʺscreenʺ />     What does all that mean?   

Assegure-se que o arquivo não possa ser acessado diretamente.

      ʺ  xml:lang=ʺʺ    

Falaremos a respeito do apresentado acima. O código "" está configurando o idioma conforme o especificado no arquivo de configuração global do site.

<meta http‐equiv=ʺContent‐Typeʺ content=ʺtext/html; ʺ /> 

Que tipos de caracteres estamos empregando; a expressão ‘_ISO’ é uma constante especial para definir o conjunto de caracteres a serem empregados.

id) { initEditor(); } ?> 

Esta é uma variável que tem o valor diferente de zero se houver algum usuário logado no site. Se houver um usuário logado, então, o editor WYSIWYG especificado será pré-carregado. Você pode, se desejar, sempre fazer o pré-carregamento do editor, porém, geralmente, um visitante anônimo não

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

14 - 60

terá a necessidade de adicionar um conteúdo. Isto economiza, um pouco, a codificação de script para a realização de uma navegação normal no site.

 

Coisas de cabeçalho que são estabelecidas, novamente, na configuração global. Isto inclui os seguintes marcadores (considerando uma instalação típica):

   <meta name=ʺdescriptionʺ content=ʺInstalling Joomla, doctype and the blank joomla templateʺ />   <meta name=ʺkeywordsʺ content=ʺinstalling joomla, joomla doctype, blank joomla tempateʺ />   <meta name=ʺGeneratorʺ content=ʺJoomla! ‐ Copyright (C) 2005 Open Source Matters. All rights  reserved.ʺ />   <meta name=ʺrobotsʺ content=ʺindex, followʺ />      <script type=ʺtext/javascriptʺ>  

Para parar algum erro, que poderia ser um item de documento sem estilo especificado. Os detalhes são cortesia de (www.bluerobot.com). Observe que isto pode ser qualquer arquivo de script, então, adicionamos um; se quisermos podemos retirar esta linha.

/css/template_css.cssʺ rel=ʺstylesheetʺ  type=ʺtext/cssʺ media=ʺscreenʺ /> 

Esta linha linca o arquivo CSS ao template. O código PHP retornará o nome do template atual. Isto faz dessa linha ‘portável’. Quando você criar um novo template você pode apenas copiá-la (em conjunto com todo código do cabeçalho) e não se preocupe em editar nada. Como você poderá ver depois, no arquivo template_css.css, empregaremos a expressão @import como uma maneira de parar a interrupção do site no Netscape 4. Usuários de antigos navegadores não serão capazes de processar as folhas de estilo CSS, então, o que veremos será um conteúdo sem o estilo definido. Se você desejar cuidar desses antigos navegadores, terá muita codificação CSS para processar, então fizemos isso. O corpo de um template vazio do joomla Isto será muito muito fácil! Está pronto?                Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

15 - 60

           

Colocamos em uma ordem lógica: 1. nome do site 2. o caminho (localização) 3. módulo superior 4. módulos posicionados à esquerda 5. conteúdo principal 6. módulos posicionados à direita 7. o módulo de rodapé padrão

O objetivo é tentar e estar o mais próximo possível da semântica de marcação quanto possível. A partir de uma visão da web, isto significa que uma página pode estar disponível para qualquer um: um navegador, ferramentas de busca ou um leitor de tela. O leiaute semântico é a pedra fundamental da acessabilidade. Agora, o que temos aqui, realmente, é somente o potencial para o leiaute semântico. Se alguém desejar ir adiante e colocar módulos aleatórios em posições aleatórias, então terá uma bagunça. Uma consideração importante para sites CMS é que um template é tão bom quanto o conjunto do conteúdo. É isto que freqüentemente faz os web designers tropeçarem quando tentam validar os seus sites.

Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

16 - 60

Empregando o CSS para criar um leiaute Estaremos empregando CSS para criar um leiaute de 3 colunas de template Joomla. Estaremos, também, fazendo um leiaute flexível. Há dois principais tipos de leiaute de páginas: fixo e flexível; e ambos referem-se 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 (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 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 um recente controvérsia, a respeito do novo site da disney: disney.co.uk.

•

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. Se você é novo em CSS deve ler, ao menos, um guia básico de CSS. Aqui estão algumas sugestões: 1. Kevin Hale's - An Overview of Current CSS Layout Techniques 2. htmldog's CSS Beginner's Guide 3. Mulder's Stylesheets Tutorial 4. yourhtmlsource.com Tutotial sobre Template no Joomla! – p/versão 1.0.X O autor, Barrie North criou o Joomla Templates and Tutorials disponível em www.compassdesigns.net. Este trabalho é licenciado sob a licença da Creative Commons Attribution NonCommercial ShareAlike 2.5 License.

17 - 60

Estaremos empregando o comando float para posicionar o nosso conteúdo. Como ele é básico, o template se parecerá com isto:

      ʺ  xml:lang=ʺʺ     <meta http‐equiv=ʺContent‐Typeʺ content=ʺtext/html; ʺ />  id) { initEditor(); } ?>      <script type=ʺtext/javascriptʺ>       /css/template_css.cssʺ rel=ʺstylesheetʺ  type=ʺtext/cssʺ media=ʺscreenʺ />  <style type=ʺtext/cssʺ>