Se você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação.
Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.
A separação entre informação e formatação traz muitas vantagens, mas vou citar apenas duas, divididos em dois artigos:
Então, vamos ao que interessa.
Separando a informação da formatação, você já organiza grande parte do código, pois você os separa em arquivos distintos, um arquivo .css para a formatação e outro arquivo .html (.asp, .php. seja lá o que for) para a informação. Esta simples organização, lhe permite fazer com rapidez e objetividade qualquer tipo de manutenção, sendo ela grande ou pequena.
Imagine a seguinte situação:
Você está no final daquele grande projeto, aquele site em que você fica horas desenhando tabelas, puxando daqui e dali, acertando medidas, etc… e quando você olha para o lado para descansar um pouco as vistas, você chega a pensar que seguiu o coelho branco…
Então, sem mais nem menos seu chefe lhe chama para conversar sobre o projeto e fala que o cliente pediu para que todos os títulos do site mudassem de cor, você o olha desacreditado, e já contando silenciosamente quantos títulos tem no site, se dirige para sua mesa e decide por onde começar.
Se você não passou por esta situação, acredite, muitos desenvolvedores já passaram por isso.
Vamos supor que o desenvolvedor do exemplo acima, usasse para apresentar os títulos a tag <h1></h1>, ele simplesmente atribuiria pelo CSS um valor para que todas as tags <h1> tivessem a cor desejada, em poucos segundos, ele mudaria a cor de todos os títulos do site, e isso tudo, sem mexer no arquivo HTML, economizando o tempo que ele levaria abrindo vários arquivos para procurar as intermináveis tags <font color=”#666666″></font> somente para mudar uma simples cor. Problemas como este, não vão mais tomar o precioso tempo do desenvolvedor.
Agora, e se a manutenção não fosse simples assim? E se fosse mais um pouco complicada, como do tipo mudar todo o layout do site? E se você pudesse mudar todo o layout do site, mudando apenas um arquivo .css?
Em um site tableless, o código HTML fica livre de tags desnecessárias do tipo: <font> <center>, deixando você à vontade para modificar o visual do site usando apenas CSS, te dando total controle sobre localização de objetos, tamanhos, cores e famílias de fontes, medidas, alinhamentos de texto, etc…
Fazendo isso, você pode escrever vários arquivos CSS distintos, que modifiquem o visual do site completamente, e o melhor, sem tocar numa letra do arquivo HTML, ele continua sendo o mesmo.
Vários sites usam está técnica, deixando o usuário escolher o layout que mais lhe agrada, veja alguns exemplos:
Realmente é uma mão na roda, não acha?
Tudo organizado, formatação de um lado, informação do outro, sem complicação… Seu código fica enxuto, limpo, muito menor do que se você tivesse feito do jeito tradicional, lhe dando menos dor de cabeça, e mais tempo. Ainda por cima, você contribui para uma web mais semântica.
No próximo artigo trataremos sobre o ganho de produtividade observado com a aplicação da metodologia tableless.
Leitura Recomendada:
http://www.pedromendes.com/words/molly-200211-truelanguage1.html
Acho que todos já ouviram falar de Web Semântica, para quem não ouviu, em poucas palavras é: Um projeto para organizar e estruturar a informação da WEB.
Ter uma Web com as suas informações todas “organizadas” é extremamente importante, isso facilita uma busca pela Web por informações mais precisas.
Para que seu arquivo possa ser lido por máquinas além de humanos é muito importante que você escreva um XHTML válido, com isso você está fazendo com que as informações do seu site fique mais acessível para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.
O Doctype (Document Type Definition, vulgo DTD) é a primeira coisa que se deve escrever em um arquivo XHTML, ele vai na PRIMEIRA LINHA do seu documento, se você quiser ter um XML Válido, não devemos esquecê-lo, ele serve para informar ao browser que tipo de documento será visualizado, ok?
Existem 3 tipos:
Exemplo:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title></title>
</head>
<body>
…
</body>
</html>
Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem bem fechadas, no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava que era uma beleza.
Para se fazer um XHTML válido, devemos fechar TODAS as tags:
Descobriram que fechando tags desta forma <br/>, não se sabe porque estava causando um problema no Netscape, mas apenas colocando um espaço antes da / o problema é solucionado.
Quem nunca viu um código fonte de um documento HTML escrito assim:
<A href=”http://tags.com.letras.minúsculas/” TARGET=”_BLANK”> </A>
Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula!
Esta regra é bem simples. Todos os atributos XHTML devem conter as benditas “ASPAS”.
O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc, utilizam ainda antigos browsers, você pode sem problema nenhum utilizar as duas formas juntas durante neste período em que estamos migrando:
<img src=”imagem.gif” id=”imagem” name=”imagem” />
Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo:
ERRADO:
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
<option selected=”selected”>
<frame noresize=”noresize”>
<input checked=”checked”>
<input readonly=”readonly”>
E assim por diante.
Se você está migrando do HTML para o XHTML, o TIDY pode te dar uma forcinha.
O TIDY é uma ferramenta para validar e consertar códigos HTML, ele tem opções que você pode escolher qual a versão do HTML você quer validar, uma dessas opções é a XHTML. Se você já está escrevendo um XHTML e quer que seu código fique livre de todos os erros, o TIDY arruma para você.
Ele foi originalmente desenvolvido por Dave Raggett e hoje é mantido por um projeto de código aberto: SourceForge, por um grupo de voluntários.
Fazendo todas essas pequenas porém importantes regras, quer dizer, regras não, LEIS, você terá um belo de um documento XHTML válido, e acima de tudo, estará contribuindo para uma WEB melhor.
Como eu passei apenas o miolo, navegando nestes links poderão ser achados mais informações a respeito:
Para saber se seu documento XHTML é válido:
http://validator.w3.org
Tidy:
http://tidy.sourceforge.net/
http://www.w3.org/People/Raggett/tidy/
Não preciso dizer que os dois carros são totalmente diferentes. Mas, qual dos dois você teria? Me diga… Se você pudesse escolher, você ficaria com qual dos dois?
Acredito que 206 será a resposta mais dita para essa pergunta.
Queria então fazer outra pergunta: Porque você escolheria o 206? O Uno também não vai te levar para lá e para cá como o 206? O que te faz querer um 206 e não um Uno?
Para mim, a culpa é dos detalhes.
Em algumas versões do 206, ao abrir a porta, olhando para baixo, você verá uma soleira de alumínio trabalhado, escrito PEUGEOT, muito bem acabada. Como se dissesse: Prepare-se, você não está entrando em um carro qualquer.
No Uno…
Quando você já está dentro do 206, o painel tem uma série de pequenos compartimentos onde você consegue guardar miudezas como moedas, chaves e etc. Sem contar o material e o desenho do painel.
O detalhe em metal na ponta do câmbio dá um charme diferente para o 206. No Uno não há uma pontinha de metal… mas uma espécie de “sanfona” de borracha envolve o braço do câmbio. Muitas vezes essa “sanfona” rasga na base de plástico do câmbio.
A distância de um detalhe separa sua preferência pelo 206 e seu desprezo pelo Uno. Apenas um detalhe.
E em seus projetos? Já ouviu falar de um ditado que diz assim: O Diabo está nos destalhes?
O mesmo pensamento se aplica sobre PCs comuns e os fabricados pela Apple. A riqueza de detalhes da Apple faz a pessoa se sentir importante.
Outro exemplo: você entra em dois restaurantes: em um deles há 150 mesas. No outro há 15 mesas. Em qual dos dois restaurantes você se sentirá melhor atendido?
Entregar projetos ricos em detalhes faz valer a pena, acredite. Ter aquelae detalhe, mesmo sendo algo que se não existisse, não prejudicaria o funcionamento do todo, faz uma grande diferença. Não importa se o detalhe é visível (layout, texto, etc) ou invisível (código, banco, etc), ele sempre fará a diferença entre você e qualquer outra pessoa.
Pense bem: Os dois carros podem te levar para os mesmos lugares. Os dois restaurantes servem frango à milanesa. Mas em quais das opções você vai se sentir como se tudo fora feito especialmente para você?
38 ComentáriosUpdate: Assista mais video aulas no Campus Online.
Tinha que implementar um layout, resolvi já fazer um video rápido. Sempre é bom mostrar do que só ficar falando e falando e falando…
Tamanho: ~40Mb
Formato: SWF
Tempo: ~40m46s
Acessar Video
Você também pode ficar sabendo dos lançamentos de video tutoriais e outras novidades pelo nosso Feed… Cadastre-o em seu leitor de feeds favoritos.
47 ComentáriosQuando eu estava criando o site da Visie, aproveitei para gravar um video para depois compartilhar com vocês. O Video está sem audio porque eu fiz tarde da noite e a minha verborragia poderia acordar alguém. Se eu aplicasse a narração depois, talvez correria o risco de sair muito artificial. Por isso, o video não tem audio, mas tem umas legendas que explicam o que eu estou fazendo. De qualquer forma, acho interessante.
Video Tutorial #8 - Criando a home da Visie - Estrutura XHTML.
Tempo: ~8m
Tamanho: ~23,7 Mb
Formato: SWF
Quando tiver um tempinho, liberarei o video da implementação do CSS. Ainda preciso colocar as legendas, e ele é muito mais longo que o do XHTML, se não me engano tem 1 hora de duração.
Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.
64 ComentáriosMuita gente vem me perguntando como se transforma um layout fixo em um layout fluido. Dependendo de como você criou sua estrutura HTML, isso pode se tornar uma dor de cabeça. Mas, você pode criar uma estrutura HTML que seja simples e ao mesmo tempo lhe de a flexibilidade de se transformar um layout fixo em fluido mudando apenas 1 linha de CSS. Nesse video tutorial, você vai conferir como isso é feito.
Duração: ~ 7m54
Tamanho: ~7Mb
Formato: SWF
Assistir agora ou baixe o vídeo.
Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.
33 ComentáriosO Google é aquela empresa que sabe exatamente o que é útil para todo e qualquer (ou quase) tipo de usuário. Eles detém um certo número de aplicações que vão desde organização e tratamento (bem básico) de fotos, até análise detalhada de informações sobre o seu site. O Google é um ótimo criador de soluções. E convenhamos, soluções no mínimo interessantes.
Mas uma coisa me intriga. Depois de muito pensar sobre o Google e suas qualidades de fada madrinha, várias perguntas simples me vieram a cabeça. Umas delas é: Porque a maioria (ou todas) das páginas do Google, não seguem os padrões?
Muitas vezes abri seu source, e me deparei com tabelas e tabelas, algumas vezes até mesmo tags font.
Esses dias ele lançou uma versão do Gmail para celulares e dispositivos móveis. Poxa, não era só fazer um CSS para HandHelds?! Se algum browser não suporta CSS, ele veria texto puro, como a versão que eles fizeram.
Bom… Eu não sei a resposta para essas perguntas. Talvez seja algo óbvio que o cara aqui não viu. Mas fica registrada minha curiosidade, e talvez a de muitos.
31 ComentáriosEstamos muito felizes com a mudança, ainda mais depois de tantos comentários de vocês. Obrigado pelo feedback, é muito gratificante escrever assim.
Como numa mudança real, algumas coisas ficam dentro das caixas até que alguém dê pela falta delas. Obrigado também por sua paciência. Aos poucos estamos colocando todo o conteúdo de volta.
Agora foi a vez do Tutorial Tableless Básico, um dos primeiros estudos que escrevi aqui para o Tableless.com.br. Se acharem algum erro, por favor, avisem.
Ah, eu queria aproveitar para perguntar: vocês elogiaram muito o phpBB, e reclamaram muito do fórum anterior, o Snitz. Qual é a diferença? O que o phpBB tem de tão bom?
13 ComentáriosA maneira que o código HTML é escrito pela grande maioria das empresas é uma das grandes causas dos problemas do desenvolvimento web. A perda de tempo, retrabalho, trabalho de manutenção, atrasos na entrega, problemas com designers e programadores, são alguns dos problemas que equipes sofrem ao desenvolver um projeto, seja ele grande ou pequeno.
Isso vem de muito antes. Estamos acostumados a desenvolver da maneira complicada. Usamos tabelas para a estruturação de sites, não nos preocupamos com a acessibilidade, tanto de deficientes visuais ou de usuários de mobiles. Ter um site realmente rápido e compatível com os browsers atuais é uma luta.
Por isso, ministramos um curso presencial de tableless para que você, desenvolvedor que quer se aprimorar no uso dos padrões web, consiga se adaptar e ter novas idéias e implantar novas soluções na implementação do XHTML e CSS em seus projetos.
Experimente o curso de tableless da Visie!
6 ComentáriosA Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.
Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, então liderada por James Clark. A Microsoft, de Bill Gates, resolveu entrar nesse mercado lançando o Internet Explorer. A partir daí, o Netscape e o Internet Explorer começaram a travar uma guerra atrás de adpetos. A concorrência entre os dois browsers é chamada até hoje de Guerra dos Browsers. Durante essa “guerra”, os padrões do W3C ainda eram meros rascunhos. Por conta disso, as duas empresas que não podiam esperar que esses rascunhos ficassem prontos começaram a lançar seus browsers com padrões proprietários.
Agora o impasse: Os browsers tinham seus próprios padrões… Já os desenvolvedores não conseguiam criar um único código que funcionasse nos dois navegadores. Por este motivo, eles eram obrigados a desenvolver, na maioria das vezes, para apenas um browser.
Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar sites que eram feitos para Internet Explorer, e vice-versa.
Como a web não tinha sido projetada para desenvolver os criativos ambientes gráficos que temos atualmente, naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas coração para criar seus sites. Entre as muitas idéias que surgiram para ultrapassar ao ambiente de “apenas texto” da internet, estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões proprietários traziam. A esse tipo de técnica, que foi usadapela maior parte dos websites, chamamos de layout com tabelas.
Os sites que seguem os Padrões Web utilizam uma metodologia de desenvolvimento baseado em 3 camadas, são elas:
Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web.
O termo “tableless” é usado mais largamente aqui no Brasil. Em outros países outros foram mais difundidos, por exemplo: CSS Layouts.
Um site tabeless segue obrigatoriamente regras de semântica. Cada tag tem sua função própria. Por exemplo, para criar um parágrafo de texto, usamos a tag <p></p>. A tag Table e suas filhas são utilizados para exibir dados tabulados, por exemplo, uma listagem de produtos, onde são mostrados algumas informações sobre o produto como tamanho, preço, cor, material, disponibilidade, etc…
| Tênis | Cor | Tamanho | Preço | Disponibilidade |
|---|---|---|---|---|
| Nike | Preto | 38-39 | R$ 100,00 | Em Estoque |
| Adidas | Branco | 40-41 | R$ 120,00 | Esgotado |
Formatar informações dos sites não é algo novo. Por volta de 1970, no começo da tragetória do SGML, vários browsers já personalizavam as aparências dos documentos, cada um com seu estilo próprio.
Håkon Wium Lie, estudava e percebia as dificuldades que se tinham ao desenvolver um site, e resolveu criar uma maneira fácil para formatar a informação do HTML. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets. Esse era o ano de 1994.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C - World Wide Web Consortium - que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e Bert Bos. O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.
Hoje em dia, o nível de compatibilidade entre os browsers é muito parecido, de forma que se você implementar algo específico em um browser, é muito provável que em outro browser esteja igual.
Portanto, o desenvolvedor pode ficar tranqüilo quanto a maioria dos problemas causados por diferenças entre browsers.
13 Comentários