Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘web standards’

Web Standards Project – WaSP

No início, fabricantes de browsers, W3C e desenvolvedores começaram quase que ao mesmo tempo.

Neste começo não brotaram desenvolvedores web do chão. Essa profissão não existia. Os primeiros que trabalharam nessa área, migraram de profissões parecidas: quem era programador desktop naquele tempo, começou a programar para web. Quem era designer de impresso, começou a fazer design para web. Continuar lendo »

7 Comentários

O Caminho Suave para o Tableless

A maior parte dos desenvolvedores web, designers ou programadores, começaram antes do surgimento dos movimentos em prol dos padrões web, usando tabelas para montar layouts em editores WYSIWYG, e ainda hoje este método é usado na maioria dos projetos de internet. Logo, é natural que muita gente, ao começar a entender o valor dos padrões, se pergunte como migrar do desenvolvimento “tradicional” para o desenvolvimento de código semanticamente coerente.

É um caminho muito duro o que separa o desenvolvedor acostumado a editores visuais do desenvolvimento de código coerente. E é muito comum que o designer desista após uma primeira tentativa frustrada de desenvolver um website tableless, com layout CSS e XHTML validado.

Por isso gostaria de propor um caminho gradual, mais suave, para aqueles que querem se aventurar pela primeira vez pelos padrões web. O princípio desse método é da recompensa. Você pode obter um grande benefício aproximando seu código dos padrões web, mesmo que não faça tudo de uma vez. Quero mostrar como você pode começar, e obter benefícios imediatos.

Limpe seu HTML

A minha primeira recomendação é que você estude CSS. Comece pela formatação básica de fonte, cor e tamanho. Isso vai te garantir código menor e produtividade maior com pouquíssimo esforço.

Assim, ao criar um item de menu, você vai evitar códigos como este:

<a href="parceiros.asp"><font
face="Arial, Helvetica, Sans-serif" size="2"
color="#FF3300"><b>Parceiros</b></font></a>

Colocando no lugar:

<a href="parceiros.asp" class="menu">Parceiros</a>

Tendo no CSS:

.menu{
font-family: Arial, Helvetica, Sans-serif;
font-size: 80%;
font-weight: bold;
color:#FF3300;
}

Como você pode ver, o CSS é extremamente simples. Aprender esses quatro atributos, mais o “font-style” (para fazer itálico), é a primeira coisa que eu recomendo. É claro, isso apenas faz cócegas nas possibilidades do CSS, ainda há muito o que aprender, mas recomendo começar por aí porque é algo que você pode aprender em alguns minutos e vai te salvar muito, muito tempo. E você vai começar a ter o controle da formatação, tendo todas as definições de fonte em um único arquivo, podendo alterar, por exemplo, a qualquer momento, a fonte de todo o conteúdo ou de todos os menus do site.

O passo seguinte para limpar seu HTML é se livrar do spacer.gif, aquele gif transparente de 1 pixel que se usa para dar espaços em tabelas, e das dezenas de tabelas aninhadas. Para isso vamos começar a estudar o “box-model”.

O pulo-do-gato aqui é um atributo CSS chamado padding. O padding é a distância entre as bordas de um elemento e o texto dentro dele. Assim, se é preciso que o conteúdo de uma célula esteja a 10 pixels da borda esquerda, ao invés de inserir uma célula extra como espaçador, ou inserir mais uma tabela, basta definir uma classe para essa célula. Uma vez que você já está colocando a formatação no CSS, provavelmente esta célula já tem uma classe. Então basta:

.conteudo{
padding-left:10px;
}

Isso vai fazer com que o texto esteja a 10 pixels da borda esquerda do documento. Ah, claro, o CSS também pode livrar você de definir no HTML as bordas e o background das células de sua tabela. Lembre-se, quanto mais layout e formatação você colocar no CSS, mais controle terá sobre seu site, principalmente em mudanças de layout durante o processo de produção e em futuras manutenções. O site também será mais leve para carregar.

Concluímos então que, após aprender os atributos de formatação de fonte, o passo seguinte é aprender os atributos background, border e padding. Indo até aqui você com certeza será um desenvolvedor muito mais feliz! Depois de limpar seu HTML, ganhar controle sobre a formatação de seu site e se tornar muito mais produtivo, você está pronto para passar à segunda etapa, correndo atrás da semântica.

Começando o Trabalho de Gente Grande

Muito bem, agora você já pode limpar seu código. Vamos estudar um exemplo prático. No começo de cada uma de suas páginas você tem um título, cujo código hoje é assim:

<font face="Arial, Helvetica, Sans-serif" size="4"
color="#FFFF00"><b>Novidades</b></font>

Ao limpar esse código, você vai substituir esse monte de tags por uma só. Que tag você vai usar? Como o CSS te permite formatar qualquer elemento, muita gente que começa a estudar o assunto acha que é indiferente que tag usar, e coloca algo como:

<p class="titulo">Novidades</p>

Agora, veja bem, outro desenvolvedor poderia resolver o mesmo problema com:

<div class="titulo">Novidades</div>

E o resultado visual poderia ser o mesmo. Acontece que há algo na natureza do HTML que nos diz que tag usar. Chamamos esse algo de “semântica”: as tags do HTML tem significado. A tag P é para parágrafos, a tag DIV para divisões no conteúdo, e há uma série de tags para título, h1, h2, h3, h4, h5 e h6. Assim, se você pode usar qualquer tag, pode fazer assim:

<h1>Novidades</h1>

O que você ganha com essa preocupação? Os buscadores inteligentes podem ler semanticamente o conteúdo de um documento, entendendo que trecho de código é um título, por exemplo. Assim, escrever HTML semanticamente correto pode melhorar muito sua visibilidade em buscadores. O segundo bom motivo é que você vai saber para que serve cada tag se tiver que mexer nesse mesmo documento daqui a alguns meses. E vai ser mais fácil também se outra pessoa tiver que dar manutenção no seu código.

Logo, use as tags do HTML para aquilo para o que foram criadas:

dd, dl e dt para listas de definições (um glossário, por exemplo)
h1 a h6 para títulos
p para parágrafos
abbr para abreviaturas e acronym para acrônimos
blockquote e q para citações longas e curtas
address para endereços (sabe aquele rodapé onde vai o endereço e o telefone da empresa?)
ul e ol para listas e li para os itens da lista

Você pode obter uma lista mais abrangente em:
http://www.w3schools.com/xhtml/xhtml_reference.asp

E formate tudo ao seu gosto com CSS.

Finalmente, Livrando-se das Tabelas

Não há bons motivos para você eliminar a qualquer custo todas as tabelas de seu primeiro trabalho. Conheço alguns excelentes profissionais, muito talentosos, que fizeram um ótimo trabalho em sua primeira tentativa de tableless. Mas a maioria dos que eu vi tentarem demoraram muito para conseguir da primeira vez, e alguns não obtiveram os resultados que esperavam. Isso tudo serve para que você possa produzir mais rápido e melhor, não o contrário. Então vá com calma. Faça alguns estudos em tableless, comece eliminando parte das tabelas em seus primeiros trabalhos. Por exemplo, remover as células de tabela que formam o menu, trocando por uma lista (com as tags ul e li), é um ótimo desafio para o primeiro projeto.

Ah, e não se esqueça que para dados como uma tabela periódica ou um calendário a solução semanticamente correta é a tabela mesmo. Ou seja, tableless não é ausência de tabelas, é o seu uso apenas onde é semanticamente justificável.

Não vou entrar em detalhes aqui, porque já escrevi bastante sobre como construir um layout no Tutorial Tableless Básico, mas o conselho é ir com calma, sem estresse. Você logo vai estar produzindo tableless mais fácil do que produz sites com tabelas.

XHTML

Há uma coisa que muita gente que está começando me pergunta: o que é e para que serve esse tal de XHTML? É muito mais simples do que parece. Um arquivo XHTML é um arquivo HTML, que pode ser lido por qualquer browser. Não estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrário, o XHTML 1 foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML é também um arquivo XML válido, que pode ser lido por qualquer interpretador de XML.

Meu primeiro conselho, nesse caso, é que você, se não trabalha com XML, deixe preocupação com o XHTML para depois de dominar bem o código semântico e o layout tableless. Não porque seja complicado, pelo contrário, transformar bom HTML em XHTML é bem simples, mas simplesmente porque você pode obter benefícios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML.

O segundo conselho é que você comece a estudar o assunto. Depois de dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair dados diretamente em XML e todas as plataformas de aplicações web trabalham bem com XML. E com a poderosa linguagem XSLT você pode muito facilmente oferecer seus os dados em XHTML para o navegador.

Voando Alto

Estamos falando de muito mais do que criar sites estilosos. Há duas semanas esteve aqui um amigo com um Palm novo, um Zire 71, e um celular com acesso à internet. Isso está se tornando cada vez mais barato e comum. Conheço também uma porção de empresas e instituições, entre elas uma série significativa de TeleCentros e órgãos públicos, que estão adotando Linux como sistema operacional para desktops. O Google hoje é responsável por 90% do tráfego que meu site consegue de buscadores. É o primeiro colocado absoluto entre os buscadores. E conseguiu isso indexando semanticamente o conteúdo real dos sites. Praticamente todas as plataformas web estão oferendo suporte a XML e apostando na idéia de webservices.

Quem segue os padrões web não precisa ter medo do futuro. Não importa que browser vai ser o mais usado daqui a dois anos, que tecnologia vai estar na moda ou de onde as pessoas vão estar usando a internet. Seu site estará lá, leve, acessível, atual e útil.

6 Comentários

Sites para Dispositivos Móveis - MediaType

Felizmente, com a ajuda dos Web Standards, o trabalho para criar um site ficou muito mais fácil, rápida e o mais importante, divertida.
Hoje, você troca de layout a hora que quiser, sem se preocupar em ter que refazer todo o código e programação. Eles já estão feitos, por que ter que recriá-los? Então, você troca apenas 1 arquivo CSS, e seu site muda completamente, sem dor de cabeça, apenas mudando a lente de formatação.

E com as qualidades do CSS, também se tornou fácil fazer várias vesões de um mesmo site para diversas medias. O que eu quero dizer com isso? Muito simples… Antes, se você quisesse prover para seu visitante uma versão do seu site para imprimir, você faria uma versão do seu layout mais enxuta, sem as informações que se tornariam desnecessárias uma vez impressas. Teria que refazer o HTML, tirar partes de código e etc… Hoje, você simplesmente cria um CSS para a media de impressão, e pelo CSS oculta os objetos que você quiser. Muito mais fácil, muito mais prático.

Do mesmo jeito que você faz uma versão do CSS para site ser impresso, você fará uma folha de estilo para os HandHelds. Ou seja, o camarada que entrar usando um dispositivo móvel, terá uma versão totalmente compatível, e sem informações que não lhe é interessante quando está usando esse dispositivo.
A mecanica é mesma. Com CSS você oculta as informações não são interessantes para o usuário de mobiles. Por exemplo, se o cidadão acessar o site da UOL com um mobile, não é interessante para ele, ver boa parte de cabeçalho do UOL. Como por exemplo os links de ASSINE UOL ou links para o BATE-PAPO. Essas informações seriam facilmente ocultadas.

Você fará então, várias versões de CSS para vários tipos de Medias. Usará o mesmo XHTML, sem tocar em nenhum código de programação, manipulando totalmente o site para se adequarem às Medias desejáveis.
Suas tags para linkar os arquivos CSS ficarão desta maneira:

Screen: Para Desktops: <link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen” />
Print: Para Impressão: <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
HandHelds: Para HandHelds, PDA´s, etc: <link rel=”stylesheet” type=”text/css” href=”handheld.css” media=”handheld” />

Perceba que em todas as linhas, há um atributo MEDIA. É com esse atributo que diremos ao navegar onde ele deve aplicar o CSS. Se o camarada visita o site com um dispositivo móvel, com um navegador que seja de acordo com os Padrões (óbvio), vai usar automáticamente para renderizar o site, o CSS de HandHelds, em vez de Screen. Você não terá trabalho para fazer um script que chaveia nem nada parecido, como fazem alguns sites hoje em dia. Esse chaveamento será feito automáticamente, pelo navegador.

Trabalho? Quase zero. Você teve apenas que criar um novo CSS, escondendo objetos, diminuindo e modificando outros. Alguns mais ousados, farão uma versão que segue o estilo do site visto por desktops, mas mais direcionado a usuários de Mobiles, deixando mais confortáveis.

Compare as duas imagens abaixo. Usei como modelo o site do Opera, eles fizeram um belo trabalho. Primeiro, um screeshot do site visto de um monitor, com MediaType Screen.

Agora, confira o mesmo site, só que visto com o CSS destinado a HandHelds. Perceba as diferenças e veja que eles ocultaram boa parte das informações, como por exemplo, aquela chamada enorme sobre o download do Opera 8.5, que é interessante apenas para os usuários de Desktop, não para usuários de Mobiles.

Eles aproveitaram também para rebuscar o design para esses dispositivos. A experiência do usuário, com certeza será satisfatória. É confortável de navegar. Você pode trabalhar melhor outras partes do desenvolvimento, como por exemplo, estudos de usabilidade. Você tem toda liberdade que o CSS pode lhe dar.

Propriedades CSS mais usadas

Todas as propriedades do CSS estarão disposníveis para o uso na manipulação para qualquer media. Claro, na media screen é que você usará mais largamente os mais variados tipos de propriedades que o CSS concede. Na media screen, as propriedades que você mais usará será a WIDTH, HEIGHT e DISPLAY.

Width e Height são propriedades que serve para definir largura e altura, respectivamente. Elas tem duas variação, onde você define qual largura/altura máxima que dado objeto pode ter. São elas max-width e max-hight.
Então, você definirá no CSS de handheld, qual a largura máxima, que por exemplo, o body deverá ter.

body {max-width: 240px;}

Já a propriedade display, será muito usada para ocultar os objetos. Muitas informações que aparecem em alguma parte do layout, muitas vezes não são úteis para os usuários de mobiles, portanto, ocultar essas informações é um favor que você faz para os usuários.

Há algo sobre o assunto no site do Opera, não custa nada dar uma olhada… Visite e leia.

Testando

Você não precisa ter um dispositivo móvel para conseguir saber como seu site se comportará. Basta simplesmente usar o sistema de SSR do Opera, ele é ativado apertando a combinação de teclado SHIFT + F11.
Se você já tem um CSS para media de HandHeld, ele ativará automáticamente esse CSS no SSR.

Meu conselho é você primeiro tudo testar o site sem CSS para HandHeld para ter uma noção de como ele será exibido sem formatação específica. Depois, aplique um CSS para HandHelds, e compare a diferença. Veja como você tem mais controle sobre o layout.

E atenção… Não são todos os browsers que tem um sistema tão bom quanto o Opera. E, hoje em dia, apenas o Opera e o MiniMo (uma versão do Mozilla para mobiles) tem amplo suporte de CSS. O resto dos browsers tem pouca ou quase nenhum suporte. O IE para HandHeld por exemplo, não tem tanto suporte quanto os outros dois, por exemplo, ele não reconhece MediaTypes.

Vamos nos dar mais atenção a esse mercado. Ele está crescendo e a cada ano surgem novas possibilidades. É um ramo que cresce rápido, e não vai demorar muito você ver qualquer pessoa na rua visitando algum site para consultar um mapa ou procurar qualquer tipo de informação. É muito importante que os desenvolvedores atentem para esse grande caminho.

5 Comentários

Sobre Internet Explorer para Mobile - Breve impressão

Desde que adquiri um MotoQ (se lê MotoQUIU) eu venho usando o Opera Mobile como browser padrão. Ao contrário da versão pra desktops, o Opera Mobile é pago. Por este motivo, quando a data expirou, eu resolvi usar por um tempo o Internet Explorer.
Descobri que a forma com que o IE Mobile renderiza as páginas é tão boa quanto a do Opera Mobile. A velocidade de navegação também é ótima.

O Opera usa muito um sistema que eles chamam de SSR,que em teoria, melhoraria (ou pelo menos tentaria) a visualização de sites em dispositivos móveis. Acontece que esse modo deixa o site muito, mas muito feio. Neste caso, tive a impressão de que o Internet Explorer renderiza melhor os sites que não foram feitos para mobile.

Para quem quer dar uma ajuda para o pessoal que usa browsers mobiles, existe uma metatag chamada MobileOptimized:

<meta name="MobileOptimized" content="sualargura" />

Essa metatag é usada principalmente pelo Internet Explorer Mobile para otimizar melhor o site quando visto de SmartPhones, PocketPCs, etc. O valor colocado ali no atributo “content” deve ser a largura que o browser deve limitar seu layout quando visto de um mobile.

Aviso aos navegantes: fazer image-replacement usando text-indent não funciona no IE para Mobiles. Parece que ele não reconhece o text-indent, o que faz com que o texto fique por cima do logo.

A qualidade de rederização das fontes também achei melhor que a do Opera Mobile. Achei as fontes muito mais nítidas e legíveis.

Uma coisa ruim que achei o IE para Mobiles é a falta de abas. Isso seria muito útil. Normalmente estou sempre visitando e usando mais de dois sites simultâneamente. E sair de um para visitar o outro é uma alterativa terrível. Isso sim me faria voltar para o Opera.

11 Comentários

Mobilidade na cabeça

Ontem, depois do lançamento do iPhone e de ter visto suas funcionalidades (nem tão novas assim, mas reinvatadas de verdade), fiquei pensando em uma funcionalidade em particular: navegação na internet. Quem assistiu o Keynote viu o camarada navegando de verdade com um browser de verdade (Safari) e tendo uma experiência realmente boa. O browser carrega o site inteiro, lendo XHTML e CSS, nada de SSR ou qualquer coisa parecida e é renderizado como se fosse uma miniatura na tela, mas a formatação é integral, como se estivesse sendo visualizado de um desktop. Sim, ficou impossível de ler, mas isso foi resolvido quando o nosso camarada tocou duas vezes no lugar que ele gostaria de ler e o browser deu um ZOOM, possibilitando a leitura.
Essa experiência é muito comum hoje em dia, só que em vez de dedos, você estaria usando uma Stylus (aquela canetinha nojenta), muito pior de manejar do que seus dedos.

A impressão que eu tive sobre a experiência de navegação no iPhone é ótima. Será um dispositivo que os desenvolvedores não terão que se preocupar com compatibilidade, você nem vai precisar fazer uma versão especifica para mobiles (no caso do iPhone). Sim! Você ainda precisa se preocupar com desenvolvimento de sites para dispositivos móveis. O iPhone não é o único dispositivo do mercado, infelizmente.

Também hoje, o Yahoo! liberou para download um pacote de programas direcionados para celulares. O Yahoo! sempre foi antenada quando se trata de mobiles. E você sabe que eles fazem um trabalho bem feito. Sem comentar do Opera, que é um dos melhores (ou melhor) browsers para dispositivos móveis que existe.
Mobilidade é uma coisa que todo mundo precisa e quer. Quem tem um celular hoje, não consegue mais viver sem. Quem tem um celular com conexão à internet também não consegue viver sem. E assim o público vai mudando e se inovando. Aí é onde a coisa fica mais interessante.

Já falei e repito: pra mim, este ano será da mobilidade. Haverá mais interesse nesse mercado, mais procura, mais agitação. Se as empresas acima estão dando uma certa atenção pra isso, já é motivo para mexermos nossos ossos e corrermos atrás do prejuízo desde agora.

5 Comentários

Principais pontos da Acessibilidade na Web

Quando ouvimos falar de sites acessíveis, logo imaginamos sites que podem ser acessados por pessoas com necessidades especiais. Isso é um grande erro que não podemos cometer. Ao termos essa atitude, negligenciamos uma série de outros fatores que são extremamente importante para a boa acessibilidade do site.

Abaixo, vamos tentar resumir os principais pontos que a Acessibilidade na Web alcança.

Diversos Dispositivos

Hoje o meio mais comum de navegar pela Web é usando um Desktop, ou seja, um Computador pessoal. Mas de uns tempos para cá, essa realidade vem mudando.

Os dispositivos móveis estão sendo muito difundidos e com isso ganham mercado entre os usuários. Hoje, em shoppings, aeroportos e outros lugares com alguma conexão sem fio, já podemos ver pessoas acessando a internet com variados Handhelds.

Há também o surgimento das WebTV´s e outros aparelhos semelhantes que permitem o usuário acessar a internet, usando um aparelho de televisão como dispositivo de saída.
Não é só a TV que ganhou a conexão com internet, microondas e geladeiras também foram privilegiadas. Com o tempo, isso se tornará cada vez mais comum.

A tendência é que cada vez mais surjam novos dispositivos acessando a web.

Diversas Plataformas

Quando você ouve sobre diferentes plataformas, alguns nomes lhe vem na cabeça, como Windows, Linux ou MacOS. Esquecemos de que os HandHelds, Tables ou outros dispositivos, usam seus próprios Sistemas Operacionais. O Palm por exemplo usa o PalmOS, o PocketPC usa Windows Mobile e a Internet Tablet Nokia 770, usa um sistema baseado em Gnome e Linux.

O que quero dizer, é que muitos desenvolvedores, ao fazer algum sistema para internet, usam algum tipo de sistema proprietário, favorecendo apenas uma plataforma. O pior, é que nenhuma versão alternativa é disponibilisada, restringindo muitos usuários.

Diferentes Browsers

Atualmente, os fabricantes de browsers, estão tendo um certo cuidado com a abordagem de padrões do W3C e plugins de terceiros.
Mas, infelizmente, muitos desenvolvedores ainda fazem a implementação dos sites se guiando pela metodologia antiga.

A Abordagem dos padrões é extremamente importante para que haja um nível de compatibilidade aceitável, não só entre navegadores de uma mesma plataforma, mas principalmente, entre navegadores de outros dispositivos. Usando metodologia antiga, site fatalmente necessita de uma versão para handhelds. Já um site que foi construído baseando-se nos Web Standards, fica melhor acessível mesmo não havendo uma versão especifica para esses dispositivos.

Todas as Pessoas

Atualmente, o acesso à internet por pessoas com algum tipo de deficiência física cresceu absurdamente. Os leitores e sintetizadores de tela também melhoram muitos seus sistemas. O que ainda continua parado, é a maioria dos sites que não atentam para pequenos detalhes que melhorariam muito a navagabilidade desses usuários.

Existem robôs que avaliam o nível de acessibililidade tem seu site. Eles te dão sugestões e te mostram alguns aspectos que devem ser levados em consideração.

A Acessibilidade na web é um assunto muito amplo, e que deve ser estudado com certo interesse pelos desenvolvedores.

Sites para Dispositivos Móveis - Breve introdução

Você tem celular? De acordo com a Teleco, em novembro de 2005, havia mais ou menos 82.351.644 de celulares. Ainda me lembro de quando eles eram artigos de luxo, mesmo sendo grandes e pesados.
Hoje, por um preço razoável, você consegue celulares que tiram fotos e fazem outras coisas que nem James Bond ousava imaginar. E quer saber da melhor? Esse é só o começo.

Aparelhos com essas e outras possibilidades aparecerão. Os HandHelds com funcionalidades iguais as de um Desktop estarão em alta. Pessoas acessarão a internet de qualquer canto… não serão dependentes dos poucos HotSpots. Conexões como Wi-Max não serão novidade. Ninguém arregalará os olhos quando você tirar um Palm ou PPC do bolso para anotar algo e enviar por email, pelo contrário. A internet estará espalhada em cada bolso, em cada palma de mão.

O Google acabou de lançar uma versão do seu webmail para mobiles. Sem contar com sua versão de busca para Mobiles. O Flickr também tem sua versão para dispositivos móveis. Isso mostra que os grandes, de uma maneira ou de outra, estão preparados para essa nova etapa.

Como introdução a criação de sites para esses dispositivos, criamos dois artigos que poderão ajudar o desenvolvedor. É importante que comecemos a fazer da maneira certa. Ter em mente suas possibilidades, seus limites. Um dos artigos fala sobre SSR - Small-Screen Reader. O outro fala um pouco sobre MediaType para HandHelds.

13 Comentários

O que é Tableless?

A 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:

Informação - A informação do site é exibida utilizando código XHTML ou HTML.
Formatação - O XHTML que exibe a informação é formatada com CSS (Folhas de Estilo). É com CSS que comandamos todo o visual do site. Tudo que é visual e decorativo deve ser feito por CSS.
Comportamento - Definida por Javascript e AJAX. É a camada que define como os elementos irão se comportar de acordo com as ações do usuário.

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.

11 Comentários

Browsers dos Dispositivos Móveis

Dispositivos Móveis. Este é um terreno muito estranho para os desenolvedores de sites.
Talvez você tenha ouvido falar em fazer sites para Dispositivos Móveis (Mobiles) depois que começou a estudar Web Standards. Confesso que comecei a dar mais atenção a essa área depois que estudei a fundo os Padrões.

Mas, para aquele usuário um pouco mais avançado, que quer fazer seus sites aparecerem melhores nestes dispositivos, nada melhor que conhecer os Browsers que estão disponíveis e que são usados pelos usuários de Mobiles.
Tentei montar abaixo uma tabelinha de compatibilidade entre os browsers. Como eu, muitos não devem ter como comprar um aparelho desses para testar, por isso eu recomendo muito pesquisar pela internet. Tentarei na medida do possível dar algumas dicas por aqui sobre os dispositivos, browsers, compatibilidades e etc. Existem muitos sites que são ótimas fontes de estudos, com links e material farto sobre o assunto.

Browser	HTML	XHTML 1.0	CSS 1.0	CSS 2.0	DOM	JavaScript
Palm Web Pro 3.0	sim	sim	sim	sim	?	v1.5
Palm Web Pro 3.5	sim	sim	sim	sim	?	v1.5
PalmSource Web Browser 2.0	sim	sim	sim	Parcial	?	v1.5
PalmSource Web Browser 3.0	sim	XHTML 1.0 + XHTML Mobile Profile	sim	sim	Nível 1 / Parc. Nível 2	sim
EudoraWeb Browser	sim
Handspring(TM) Blazer(TM) 2.0	sim	sim
Pocket Internet Explorer	sim	?	?	?	?	?

Claro.
Como nos Desktops, os Mobiles tem seus Sistemas Operacionais. O Pocket Internet Explorer é para PocketPc (PPC), todos os outros são para Palm. Sim, há vários tipos de sistemas operacionais para Palm; e não, os browser não são compatívels com todos os tipos de Palms. Por exemplo, o browser Web Browser 3.0 só é compatível com Palm OS Cobalt que ainda nem saiu.

Se alguém souber mais alguma informação sobre especificamente o Internet Explorer. Por favor, nos diga para que possamos melhorar a tabela acima.

Mais do mesmo: Palm Web Pro 3.0; Palm Web Pro 3.5; PalmSource Web Browser 3.0; PalmSource Web Browser 2.0; Pocket Internet Explorer; Handspring(TM) Blazer(TM); Mobile Life