Академический Документы
Профессиональный Документы
Культура Документы
/templates/JS_Smoothportal
/templates/JS_Synergy
Observe que os nomes dos diretórios para os templates devem ter o mesmo nome que o
template, neste caso JS_Smoothportal e JS_Synergy. Evidentemente, eles são
sensíveis a caixa(case sensitive) e não devem conter espaços. Tradicionalmente os
designers usam iniciais ou nome como prefixo.
/JS_Smoothportal/templateDetails.xml
/JS_Smoothportal/index.php
Estes dois nomes de arquivo e localização devem ser exatamente assim pois é assim quee
eles são chamados pelo script núcleo do Joomla.
- templateDetails.xml
(observe a caixa alta do “D”) Um arquivo XML metadata que diz ao Joomla! quais
arquivos são necessários quando o template estiver em uso em um site. Ele contém também
detalhes sobre o autor, direitos autorais(copyright) e que arquivos fazem parte do
template(incluindo qualquer imagem usada). E por fim, esse arquivo serve também na hora
da instalação do template quando o admin usa o backend.
- index.php
Este arquivo é o mais importante. Ele ordena o site e diz para o CMS joomla onde colocar
diferentes componentes e móduloss. Ele é a combinação do PHP e (X)HTML.
Na maioria dos templates, arquivos adicionais são usados. Por convenção (embora não
obrigatório pelo core) para nome e localização são mostrados a seguir:
/JS_Smoothportal/template_thumbnail.png
/JS_Smoothportal/css/template_css.css
/JS_Smoothportal/images/ logo.png
- template_thumbnail.png
Um screenshot do template (geralmente reduzido em torno de 140 pixels de largura por 90
pixels de altura). Depois do template ter sido instalado, esta função é como “Preview
image” visível no Template Manager do painel de administração do Joomla!.
- css/template_css.css
O CSS do template. A localização da pasta é opcional, mas você deve especificar onde
está.. Observe que o nome do arquivo é somente importante quando é referido no
index.php. Você poderá chamá-lo como quiser. Geralmente usa-se o nome mostrado aqui,
mas nós mostraremos mais tarde as vantagens de ter outros css.
- images/logo.png
Qualquer imagem que tiver no template. De novo, por razões de organização, a maioria dos
designers colocam suas imagens em uma pasta de imagens. Aqui nós colocamos uma
imagem chamada logo.png como um exemplo.
Para adicionar o template (de novo, para isso que o tutorial existe) vá na administração do
seu site e instale seu template enviando(upload) o arquivo zip. Observe que, na verdade,
você pode adicionar arquivos individulmente(não zipado) também. Você deve colocá-lo em
seusite.com/templates.
templateDetails.xml
O templateDetails.xml deve conter todos os arquivos que fazem parte do template. Ele
também inclui informações como o autor e direito autoral. Algumas dessas informações são
mostradas no Template Manager do admin backend
- mosinstall:
O conteúdo do documento XML são instruções para o instalador. A opção
type=”template” diz para o instalador que estamos instalando um template
- name:
Define o nome do template. O nome que você entrar aqui irá ser usada para criar o diretório
dentro do diretório template. Por esse motivo, não deve conter nenhum caracter estranho,
tal como espaço. Se for fazer a instalação manualmente, você precisa criar um diretório
com o mesmo nome do template.
- creationDate:
A data que o template foi criado. Esse campo é livre de formato e pode ser qualquer coisa
como May 2005, 08-June-1978, 01/01/2004 etc.
- author:
O nome do autor do template - provavelmente o seu nome.
- copyright:
Qualquer direito autoral vai nesse elemento. Uma instrução básica para Developers &
Designers pode ser achado nos fóruns do Joomla.
- authorEmail:
Endereço de Email que o autor do template pode ler.
- authorURL:
A URL do site do autor.
- version:
A versão do template.
- files:
A seção “files” contém todo tipo de arquivos como códigos PHP para o template ou
imagens thumbnail image para o preview do template. Cada arquivo listado nessa seção é
englobado por<filename> </filename>. Também pode se incluir qualquer arquivo
adicional, aqui usamos como exemplo um arquivo JavaScript que é necessário no nosso
template.
- images:
Todas as imagens usadas no template são listads na seção “images”. Novamente os
arquivos listados são englobados por <filename> </filename>. A informação sobre o
caminho dos arquivos é referente a raiz do seu template. Por exemplo, se seu template está
no diretório ‘YourTemplate’ e todas as imagens no diretório ‘images’ que está dentro do
‘YourTemplate’, o caminho correto é:
<filename>images/my_image.jpg</filename>
- css:
A folha de estilo é listado na seção “css”. De novo, o nome do arquivo estará
entre<filename> </filename> e seu caminho é relativo a raiz do template. As vezes é mais
prático ter várias folhas de estilos importadas pelo principal template_css.css. Nós iremos
discutir isso mais tarde no tutorial.
index.php
Uma página DOCTYPE é parte fundamental de componentes que mostram uma página
deve ser mostrada no navegador, especificamente, como o navegador interpreta o CSS.
Para você entender, uma observação do alistapart.com diz:
[informação no site W3C sobre doctype] “escrito de geeks para geeks. E quando eu digo
geeks, eu não quis dizer profissionais da web como eu e você. Eu quis dizer geeks que
fazem o resto de nos parecerem uma avózinha no seu primeiro dia que email.”
De qualquer jeito, há vários doctypes que você pode usar. Basicamente, o doctype diz ao
navegador como interpretar a página. Aqui as palavras “strict” e “transitional” começa
flutuado ao redor (float:left e float:right geralmente). Essencialmente, desde que a WWW
começou, diferentes navegadores tem diferentes níveis de suporte para CSS. Isto significa,
por exemplo, que o Internet Explorer não irá entender o comando “min-width” que define
uma largura mínima da página. Para reproduzir o mesmo efeito, você deve usar “hacks” no
CSS.
Strict(estrito) diz que o html (ou xhtml) irá ser interpretado exatamente conforme o padrão.
Um doctype transitional(transição) diz que a página irá permitir algumas diferenças fora do
padrão.
Para complicar coisas, há algo chamado de modo “quirks”. Se o doctype for errado, antigo,
ou não tem, então o navegador entra na modo quirks(quirks mode). Esta é uma tentativa de
manter a compatibilidades antigas, assim o Internet Explorer, por exemplo, renderizará a
página fingindo como se fosse o IE4.
Infelizmente, as pessoas acidentalmente vão para o quirks mode. Ele acontece geralmente
duas maneiras:
DTD/xhtml1-strict.dtd
Exceto esse é um link relativo ao servidor W3C . Você precisa o caminho completo como
mostrado anteriormente.
Microsoft montou no IE6 um esquema para você ter páginas válidas, mesmo sendo em
quirks mode. Isto acontece tendo um “prológo xml” colocado antes do doctype.
A parte sobre quirks mode no IE6 é importante. Esse tutorial será somente para fazer layout
pra IE6+, assim nos iremos ter certeza que estaremos rodando em modo padrão. Isso irá
minimizar os hacks que precisaremos fazer depois. O prológo xml de qualquer modo não é
essencial. Iremos anotar isso para as futuras versões do Joomla e esquecer. Fazendo uma
página de acordo com o padrão, onde você vê um “xhtml válido” no final na página não
quer dizer que foi realmente dificil codifica-lo, ou dificil de entender. Isso somente diz que
o código que usou casa com o doctype que você iria usar. Só isso! Nada mais! Criando seu
site dentro dos padrões reduz um nível para dizer o que você fez e então fazendo o que você
diz.
• 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
• http://www.tableless.com.br
• http://www.maujor.com
• http://www.brunotorres.net
Faz com que tenhamos certeza que o arquivo não será acessado diretamente.
Nós falamos sobre isso anteriormente. O “<?php echo _LANGUAGE; ?>” está colocando a
linguagem vinda da configuração global do site.
Que set de caracteres estamos usando, _ISO é uma constante especial que define o set de
caracter está em uso(encoding).
<?php if ($my->id) { initEditor(); } ?>
Este é uma variável script que não é zero se o usuário estiver logado no seu site. Se o
usuário estiver logado então o editor WYSIWYG será pré-carregado. Você pode, se
desejar, carregar sempre o editor, mas geralmente um visitante anônimo não precisará
adicionar conteúdo. Isto economiza um pequeno tempo de carregamento de seu site.
Enche o cabeçalho com as configurações globais. Isso inclui as seguintes tags (padrão da
instalação):
Para parar um erro, que pode ser um flash de um conteúdo não estilizado. Detalhes com
permissão do Blue Robot(?). Observe que isso pode ser qualquer arquivo com script, então
se nos não adicionamos m, nós podemos remover essa linha.
Esta linha linka o arquivo CSS no template. O código PHP <?php echo
$cur_template; ?> irá retornar o nome do template corrente. Isto faz com que essa
linha seja “portável”. Quando nós criamos um novo template, nos podemos apenas copiá-lo
( junto com todo o código do header) e não nos importarmos em editar depois.
Como você irá ver mais adiante, no arquivo template_css.css, nós usaremos o @import
como meio de parar o site aparecer quebrado no Netscape 4. Usuário de navegadores muito
antigos não estarão capacidados em conseguir ver o conteúdo usando o CSS. Se você quer
satisfazer esses navegadores antigos, você deverá ter muitos hacks no CSS, para
conseguirmos fazer isso.
<body>
<!– 1 –><?php echo $mosConfig_sitename;?>
<!– 2 –><?php mospathway()?>
<!– 3 –><?php mosLoadModules(’top’);?>
<!– 4 –><?php mosLoadModules(’left’);?>
<!– 5 –><?php mosMainBody();?>
<!– 6 –><?php mosLoadModules(’right’);?>
<!– 7 –><?php
include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?>
</body>
</html>
1. nome do site
2. caminho
3. módulo do topo
4. módulos da esquerda
5. conteúdo principal
6. módulos da direita
7. módulo padrão do rodapé
O objetivo é tentar tornar o mais próximo da marcação semântica. Sob o ponto de vista
web, isso significa uma página que pode ser lida por qualquer um, um navegador, um
“spider” ou um leitor de tela. Um layout semântico é a pedra fundamental da acessibilidade.
Agora isso merece uma observação que o que nós temos aqui realmente é somente um a
capacidade de ter um layout semântico. Se alguém colocasse módulos aleatórios em lugares
aleatórios, então você teria uma verdadeira bagunça. Uma consideração importantepara
sites que usam CMS, um template é de boa qualidade quando há a inserção de conteúdo.
Um design típico poderia usar tabelas para o layout da página. Eles são práticos se você
precisa definir a largura das colunas em porcentagens, mas eles podem ter algumas
desvantagens:
- Eles tem uma grande quantidade de código extra se comparados a um layout com CSS.
Isto leva a um tempo de carregamento maior(internautas não gostam) e pobres
desempenhos em sites de busca. O código duplicam de tamanho, não pelo aumento mas
pelos chamados “spacer gifs”. Mesmo as companhias grandes caem às vezes na armadilha
da tabela como visto por uma recente controvérsia sobre o novo site da disney.co.uk.
- Eles são difíceis de manter. Para mudar alguma coisa, você tem que ver o que cada td/tr
está fazendo. No CSS somente verificar algumas poucas linhas.
- O conteúdo não pode ser ordenado. Muitos internautas não podem ver sua página em um
navegador comum. Aqueles que usam leitores de texto e leitores de tela irão ler seu site do
topo-esquerda até rodapé-direita. Isso significa que eles primeiro leêm tudo do cabeçalho e
coluna a esquerda(para layout de 3 colunas) antes de eles irem para a coluna do meio, o
objeto mais importante. Um layout baseado em CSS por sua vez, “ordenar” o conteúdo,
isso quer dizer que o conteúdo pode ser rearranjado no código/fonte. Talvez seu mais
importante visitante seja o Google e ele usa um leitor de tela para todos os objetivos e
propósitos.
Vamos olhar nosso layout usando CSS. Você pode posicionar os elementos(objetos) de
vários modos usando CSS. Para uma rápida introdução veja Brainjar’s CSS Positioning.
Se você é iniciante em CSS, você deveria ler no mínimo algum “guia de CSS para
iniciantes”. Aqui algumas sugestões:
Nós iremos usar float para posicionar nosso conteúdo. O mais básico, o template seria
isso:
Os estilos CSS estão definidos aqui no cabeçalho do arquivo mostrando como deve ser.,
mas normalmente eles viriam no arquivo template_css.css.
Tudo está dentro do elemento/box chamado #wrap que tem 80% de largura da tela.
Há abreviação no começo de cada definição de estilo. Uma vez preenchendo os estilos, faça
a versão abreviada e apague a versões grandes. A sintaxe é:
Tem isso:
<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’);?>
</div></div>
<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’);?>
<?php mosMainBody(); ?>
</div></div>
<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’);?>
</div></div>
.inside {padding:10px;}
Um layout simples é um bom caminho de aprendizado de como usar CSS com Joomla. Isso
traz duas vantagens do CSS sobre os layouts baseados em tabela: menos código e
manutenção mais fácil. Porém, o código não está ordenado. Para que isso ocorra, nós
devemos usar um layout mais avançado chamado de “float aninhado”(nested float). Com
esse tipo de permissão, nós iremos adaptar o layout desenvolvido pelo Dan Cederholm e
descrito em mais detalhes no seu livro.
Para explicar o que está sendo feito, veja primeiro o resultado no final esse post.
<div id=”wrap”>
<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>
<div id=”main-body”>
<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’);?>
<?php mosMainBody(); ?>
</div></div>
<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’);?>
</div></div>
</div> <!–end of main-body–>
<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’);?>
</div></div>
1. #content
2. #sidebar
3. #sidebar-2
Para calcular as larguras, nós agora precisamos um pouco de matemática. Precisamos das
colunas laterais terem 25% cada. #sidebar-2 é fácil, é so ajustar em width:25%.
Entretanto, #sidebar irá precisar a largura definida baseada na largura interna do
<div> que era de 75%. Essa largura deve ser 33%.
A largura do #content é o restante. Nós iremos setar para 66%. E por ultimo, 1% para
dividir o #content e #sidebar.
#wrap {width:80%;}
#header {} #footer {
clear:both;
}
#main-body { float:left; width:75%; } #sidebar-2 { float:right; width:25%; }
#content { float:right; width:66.5%; } #sidebar { float:left; width:33.5%; }
.inside {
padding:10px;
}
Alguns designer de CSS recomendaria um pequeno gutter e fazer a coluna do lado um
pouquinho menor. Isso ajuda para de quebrar o layout no Internet Exporer. Se você quer
fazer isso, mude simplesmente a largura do #sidebar-2 para 24%
O código do template é mostrado abaixo. Você pode copiar e colar no seu index.php.
Observe que nós removemos o CSS do cabeçalho. Nós iremos colocar ele em um arquivo
separado.
Até agora todo nosso CSS tem sido somente para layout. Vamos agora adicionar a
formatação. Nós também movemos todo o nosso código CSS que estava no cabeçalho do
index.php e colocamos em arquivos CSS.
Embora isso possa parecer que seu site irá demorar pra carregar, isso possibilita maior
flexibilidade para ter sub-arquivos de CSS e então termos eles todos importados no
template_css.css, um exemplo disso poderia ser assim:
Como mencionado anteriormente, nós usamos @import pois o Netscape 4 não entende
esse comando[nota do tradutor: é quase impossível fazer algo tableless para o Netscape 4,
por isso devemos excluir esse navegador usando uma tag que não possa ser entendido por
ele]. Ele também não entende CSS, assim ele mostrará somente os textos sem estilo.
Todo CSS relativo ao layout poderia estar no arquivo layout.css. Uma vez
configurado você pode esquecer e qualquer mudança em outras folhas de estilos não afetará
drasticamente. O arquivo color.css poderia conter qualquer coisa relativas as cores(no
exemplo acima está comentado). Você poderá mudar fácil e rapidamente ou configurar um
pacote de cor “color packs”. E por último, toda nossa tipografia e estilos do Joomla
poderiam ir no nosso arquivo customize.css.
Nós centralizamos nossa página usando um pequeno hack. Isso deve ser feito por causa do
Internet Explorer. Com navegadores que seguem o padrão, nós usamos o margin:0
auto; para centralizar a página, mas o IE não entende isso. Então nós centralizamos o
“texto” de toda a página e então alinhamos de volta para a esquerda dentro das colunas.
Nós adicionamos mais duas régras. Uma é overflow:hidden para cada coluna. Isso
irá fazer a “quebra” de página mais consistentemente como forma de reduzirmos a largura.
Segundo, nós adicionamos uma margem negativa no sidebar-2. Isso é puramente para
o Internet Explorer dirija-se a algumas de suas edições com CSS. Nós poderíamos aplicar
esta régua somente ao IE adicionando um hack (o hack do Tan):
Entretanto, os cortes são geralmente incômodos. É melhor (na opinião deste autor) aplicar a
regra a todos os browsers, apesar de tudo, são só 3 pixels.
Tudo recebe margin e padding zero e então todos os elementos do nível do bloco é dado
então uma margem inferior Isto ajuda obter a consistência esperada. Você pode ler mais
sobre a restauração global em clagnut e left-justified.
O tamanho da fonte foi setado para 76.1%. A razão disso é para tentar manter a melhor
consistência sobre os navegadores. Todas as fontes foram setadas em em. E tendo altura de
linha de line-height:1.3em ajuda na leitura. Isso significa que as páginas serão
mais acessíveis quando visualizadas de acordo com a própria preferência de fonte. Isso é
discutido mais em:
An experiment in typography at The Noodle Incident (Owen Briggs)
Por último nós adicionamos algums cores de background para podermos ver as colunas.
Com uma instalação padrão do Joomla 1.0.8, o template irá se parecer om isso:
Observe que tamanho das colunas não alcançam o rodapé. Isso é por causa eles somente
extende de acordo com o conteúdo, onde o espaço está vermelho na esquerda e o branco na
direita, não existem. Se nós temos um template um fundo branco para as três colunas, isso
não seria problema. Nós iremos fazer essa abordagem e os módulos estarão dentro de
boxes. Se você quer alturas iguais e deseja colori-las ou ter boxes, você pode usar uma
imagem de fundo que se repete verticalmente. Essa técnica é chamada de “Faux Columns”
e é descrita em Douglas Bowman e Eric Meyer.
Observe que em telas muito estreitas (<600px) no Internet Explorer, the layout começara a
quebrar. É possível arrumar isso definindo uma largura mínima, mas isso deixaremos como
exercíco para os designers.
No momento que foi escrito esse tutorial, isto é, na série 1.0.x do Joomla, as versões ainda
geram muitas tabelas na saida do conteúdo do corpo principal. Junto com essas tabelas há
também o CSS disponível para os designers estilizar as páginas. Baseado em algumas
pesquisas e contribuição de membros da comunidade, há esta lista abaixo. Observe que ele
não inclui estilos genéricos de página como H1, H2, p, ul, a, form etc.
#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1,#voteid2….
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper
Muitos designs que você irá ver na verdade tera estilos CSS que são mais específicos em
suas definições. Basicamente, a régra mais estará sobre a menos específica.
Por exemplo:
A cor do link e a cor do .contentheading será VERMELHO, como essa régua é mais
específica (porque .contentheading é contido dentro de um <div>)
No caso dos templates pra Joomla, você irá as vezes ver régras mais específicas sendo
usadas. Isso ocorre as vezes quando uma classe está dentro de uma tabela. Mais exemplos:
.moduletable table.moduletable
a.contentpagetitle:link irá aplicar estilo em qualquer tag com uma classe .contentpagetitle
dentro que seja um link.
.contentpagetitle a:link irá aplicar estilo em qualquer elemento DENTRO .contentpagetitle
que sejam um link.
Especificação não é fácil de entender e as vezes é mais facil começar pelo estilo mais geral
e então refinando se o resultado não está sendo o que você espera.
Nesse momento nosso template está usando um monte de tabelas, 20 de fato! Como
mencionei anteriormente, isto torna a página lenta e faz com que a atualização seja difícil.
Para reduzir o número de tabelas, nós precisamos usar os sufixos $style no index
index.php quando formos chamar os módulos.