Joomla! Amazônia - Tutoriais Joomla - O site mais completo de tutoriais para Joomla!

Estarei dando aqui uma visão geral de todas as tecnologias usadas atualmente que podem ser integradas ou tem alguma relação com o HTML e linguagens de marcação:

• Folhas de Estilo (CSS)
• Templates
• Acessibilidade
• Sítios dinâmicos ou automatizados
• Web standards e validação

20.1 - Folhas de Estilo (CSS)

Folhas de estilo permitem que você separe o conteúdo do seu documento da sua representação gráfica. Como exemplo, ao invés de uma expressão do tipo:

<font face=" fxed" s ize="+2" color=" red">Estilo misturado com o texto</ font>

Você utiliza algo mais organizado, como:

<div class="estilosa">Estilo separado do texto</d v>

E então você definiria uma classe de nome estilosa onde os atributos, como tipo de fonte, tamanho e cor seriam definidos. Essa definição pode inclusive estar armazenada num arquivo separado do seu documento, sendo que neste último é necessár io apenas uma referência ao arquivo que contenha os estilos.

O mecanismo mais utilizado para criar folhas de estilo para um arquivo HTML é o Cascading Style Sheet , ou CSS. Em CSS, o estilo estilosa para o exemplo acima poderia ser definido como:

div.estilosa {
color: red;
font: fixed;
font-size: 14;
}

As vantagens de usar folhas de estilo são:

• Separação entre a informação que o seu texto pretende passar e sua apresentação

• Permite que toda a apresentação do seu texto seja mudada sem que seja preciso alterar o html, bastando apenasque o arquivo que contenha a folha de estilo seja alterado

• Mais organização para seus documentos

• Facilita a criação de Templates

Pela clareza e organização resultante do uso de folhas de estilo, muitas tags e atributos do HTML são consideradas obsoletas ou seu uso é depreciado, inclusive muitas das quais ensinadas neste tutorial. Sempre que possível, utilize CSS nos seus documentos.

Para mais informações sobre Folhas de Estilo em HTML, consulte os links que anexei abaixo:

Materiais de CSS:http://www.codigofonte.com/css
Especificação HTML http://www.w3.org/TR/html4/present /styles.html
Cascading Style Sheets , level 1
http://www.w3.org/TR/1999/REC-CSS1-19990111

20.2 – Templates

Quem usa HTML provavelmente não o faz para escrever um único documento e sim um grande número deles. Se você está redigindo um texto ou fazendo um site composto por muitos arquivos, provavelmente você deseja que todos seus documentos HTML tenham a mesma aparência ou o mesmo estilo.

Para uniformizar o estilo e a apresentação, você pode criar um modelo, também conhecido como Template, que contenha o esqueleto de qualquer página de um site ou texto que seja dividido em vários arquivos. Esse template pode conter menus, tabelas e todos os campos que você for utilizar.

Existem ainda os motores de template, que são softwares que juntam o conteúdo com os templates e produzem páginas HTML. Criar um template depende do gosto de cada um, porém se você pretende utilizar um sítio automatizado existem vários motores de template que você pode utilizar, como por exemplo:

• FreeMarker: é um template engine. Ele facilita a geração de textual (HTML, PostScr ipt, TeX, source code, etc) e ajuda a separar edição de design da lógica. Integrado com servlets, XML, Python e mais.

• Smarty: é uma classe de templates. Funciona de uma forma que separe interface da lógica de programação e tem por objetivo, facilitar e melhorar o desenvolvimento de qualquer aplicação em PHP.

20.3 – Acessibilidade

Uma consideração importante ao escrever seus documentos HTML é o quão usável e acessível ele é, tanto em termos visuais quanto na organização do conteúdo. Lembre-se que todos os tipos de pessoas podem acessar seu site,
desde as leigas até as especialistas no assunto que você trata, desde aquelas que já conhecem o site até as que nunca ouviram falar dele. Seu conteúdo também precisa estar organizado para que ao longo do tempo as coisas não se percam.

Para ter um bom nível de usabilidade em seu site, siga as seguintesn recomendações:

• Use esquemas simples
• A navegação do seu sítio deve ser intuitiva
• Crie seções do tipo "Sobre este sítio", "Quem somos", etc
• Use índices na medida do possível
• Escreva resumos
• Use referências
• Use uma lógica para os nomes de arquivos e pastas
• Evite usar frames, elas bloqueiam o modo natural de se navegar pela web
• Escolha mais de um estilo para seu sítio e evite usar combinações de cores que dificultem a visualização
• Disponibilize, na medida do possível, seu conteúdo em mais de um formato: texto simples, documento HTML, etc
    Disponibilize seu conteúdo em copyleft ou em outras licenças
• Valide seu HTML: verifique se seu código HTML está válido ou se existem incorreções

A acessibilidade de um site também leva em consideração os portadores de necessidades especiais.

O W3C possui linhas gerais de recomendação quanto à acessibilidade do conteúdo de documentos que usam linguagem de marcação.

20.4 – Sites dinâmicos ou automatizados

Seu texto ou site pode ser composto simplesmente por meia dúzia de documentos HTML e ter pouca ou nenhuma atualização ao longo da sua existência. Caso nada disso seja verdade e você está fazendo algo grande ou então você não tem tempo para escrever seu código HTML na mão, talvez seja o momento de considerar a adoção de um sistema automatizado. Destaco três tipos deles:

• Gerenciadores de conteúdo
• Blogs
• Wikis

Gerenciadores de conteúdo são softwares que rodam em servidores e que administram informações disponíveis em sites. Muitos sites na web são apenas arquivos html, mas também existem sites automatizados que permitem armazenar o conteúdo das páginas num banco de dados e a partir desse banco criar muitas páginas html e ainda manter o sistema de busca e a publicação sem que para isso o usuário precise saber html ou qualquer outra linguagem de marcação. Alguns gerenciadores de conteúdo permitem que existam usuários capazes de adicionar comentários em publicações existentes ou até mesmo criar suas próprias páginas através do preenchimento de formulários.

Os Blogs são casos especiais de gerenciadores de conteúdo que funcionam como diários ou coluna de editorial, onde o dono do blog adiciona texto, imagens e código HTML no site apenas preenchendo um formulário.

Já os Wikis são ferramentas que permitem qualquer pessoa criar ou editar um texto utilizando uma linguagem de marcação especial e mais simples de ser utilizada do que o HTML. Duas características principais dos sistemas Wiki são: você pode criar facilmente uma nova página simplesmente escolhendo um nome especial para ela e escrever na página já existente. A outra característica dos wikis é a preservação das modificações: o wiki possui um histórico de todas as modificações feitas num documento.

Os gerenciadores de conteúdo, blogs e wikis são escritos nalguma linguagem de programação como PHP, Perl , Python, Java, Ruby e muitas vezes utilizam um banco de dados para armazenar o conteúdo. Com um pouco de estudo, você pode escrever seu próprio sistema ou então utilizar uma solução pronta, como por exemplo:

• Gerenciadores de conteúdo: Drupal, SPIP, etc
• Wikis: PmWiki, PhpWiki, MediaWiki, TWiki, etc
• Blogs: b2, WordPress, etc

20.5 - Web standards e validação

Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.

20.5.1 - O que mais há para conhecer sobre HTML?!

HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porque alguns websites são apresentados de formas diversas em diferentes navegadores.

Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o HTML notadamente através do Wor ld Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o HTML) . Mas, este tem sido um árduo e longo caminho
.
No passado - quando você tinha que comprar um navegador – o Netscape dominava o mercado de navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape não teria - e não teve - que se preocupar muito com normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não funcionavam em outros navegadores.

Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador da Microsoft 's, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente ( isto sempre agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.

A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada versão 4.

O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape também suportam as normas.

Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores - não só agora mas também no futuro. E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão do HTML, que é o XHTML.

20.5.1.1 - Legal!! Posso anunciar?!

Devido à existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o "dialeto" do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o Document Type Definition . O Document Type Definition deve ser escrito sempre no topo do documento:

Exemplo 1:

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/ xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml " lang="pt-br ">
<head>
<title>Título</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>

Além do Document Type Definition, que informa ao navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag html , usando os atributos xmlns e lang.

Xmlns é abreviação de "XML-Name-Space" e deve ter sempre o valorhttp://www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você
tem o hábito ou gosta de se aprofundar e conhecer coisas complicadas poderáler mais sobre namespaces no site do W3C. namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names -19990114

No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No exemplo acima a língua definida no atributo é o português do Brasil ("pt-br") .

Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML.

O DTD é importante ainda, para a validação da página.

20.5.1.2 - Validação?! Porquê deveria eu fazer isto?!

Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador gratuito do W3C. ( http://validator.w3.org )

Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em http://validator.w3.org e lá digite o endereço (a
URL) da sua página, depois clique no botão validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu código para verificar o que acontece.

O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não aceitam o erro e apresentam a página ar ruinada ou mesmo nem apresentam. O validador então ajuda você a encontrar erros que você não tenha nem idéia de que existiam.

Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.