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

Posts da TAG ‘acessibilidade’

Opera Mobile passa no Acid2

Ótima notícia.
Opera Mobile becomes the first browser to pass the Acide2 test

Show. Hoje os browsers que passam neste teste são Safari, Konqueror, Opera 9 para PC e agora Opera para Mobiles.

Para quem não sabe, o Acid2 é um teste para ajudar os fabricantes de browsers a fazer um navegador mais complacente com os padrões web. Se um browser não passa neste teste, não quer dizer que ele não aceita totalmente os padrões, o Firefox por exemplo não passa 100% no teste, mas tem um ótimo suporte. Isso não é ponto pacífico para se basear se o browser é ou não adepto aos padrões.

Abra este teste com IE6 e abra com o Firefox. Você vai ver a grande diferença.

8 Comentários

Wii usando Opera!

Wii usará Opera para navegar na internet.

Notícia muito interessante.
Para quem não sabe, Wii é o novo console que a Nintendo irá lançar. Console bem curioso, já que a maneira de jogar irá ser bem diferente do que estamos acostumados.

A Nintendo fez uma parceria com o Opera, para que o Wii use seu browser para navegação na internet. Eles precisavam de um browser seguro, rápido e que tivesse suporte a qualidades como AJAX e Web Standards. Chegaram a conclusão que o Opera seria a opção ideal. Bela escolha.
O Opera tem um certo glamour. Ele não é tão conhecido (usado) como o Firefox no mercado de browsers para PC. Mas é um dos melhores browsers para mobiles ou outros dispositivos. Para quem não sabe, o Opera tem amplo suporte a dispositivos como TV ou set-top-box, e por isso ele é um dos favoritos.

Tá na hora pensar fora da caixa. Usar internet na frente de um computador está com seus dias contados.

25 Comentários

Aplicações comem conteúdo. Só os bem tratados.

Uma das perguntas mais badaladas que costumo ouvir de clientes e até mesmo pessoas que acabaram de conhecer os Padrões é: Como tal site fica sempre em primeiro no Google?
E a segunda pergunta que sempre ouço, vem depois da resposta da primeira pergunta: Só?

Um dos fatores (não o único) para que o Google (ou qualquer outra aplicação “um pouco inteligente”) defina se algum site aparecerá no topo de suas buscas, é a maneira com que seu conteúdo é tratado.

Veja, é muito simples o raciocínio: O que aplicações como o Google procuram quando visitam o seu site? A resposta parece clara, não? Conteúdo. Ele procura conteúdo. O que mais ele procuraria?
Logo, ele vai ao seu site, indexa todo o conteúdo e o guarda para quando alguém fizer uma pesquisa, este conteúdo possa ser mostrado nos resultados.

Dependendo de como a página foi construída, alguns valores importantes podem ter sido perdidos. Partes do conteúdo são mais importantes que outras e seria interessante que as aplicações (como o Google) soubessem disso para que quando o usuário fizesse uma pesquisa, ele pudesse receber resultados mais específicos e exatos. Normalmente quando usamos a maneira antiga de desenvolvimento, nós não aplicamos nenhuma técnica para definir qual conteúdo é mais importante que outro. Logo, o Google (ou outra aplicação) indexa este conteúdo sem nenhum parâmetro de qual parte do texto é ou não importante.

Quando você faz um site com sua estrutura semanticamente exata, você gera significado que pode ser usado em muitas aplicações. Quando você marca um título com sua tag correta (h1, h2, h3 …), o Google sabe que aquilo é um título e então vai dar prioridade “x” a ele. Um leitor de tela para cegos, também sabe que aquilo é um título e então mudará a entonação ou usará qualquer outro método para indicar ao ouvinte que aquela pequena frase é algo importante. Uma aplicação que surgirá daqui a algum tempo, também poderá saber que aquilo é um título.

Portanto, se você faz um site que não usa tabelas para estruturas, mas faz algo parecido:

<div id="titulo1">Título</div>

Você não entendeu perfeitamente a alma do negócio.

Já passou por aqui:

17 Comentários

Diferenças sutis na semântica

Existem alguns elementos no HTML que parecem ser redundantes, como por exemplo a tag STRONG e a tag EM. Se você já tentou usá-las, percebeu que visualmente elas não mostram nenhuma diferença das tags B e I. Apenas visualmente.

Estas tags tem uma função semântica que é percebida apenas pelos deficientes visuais (pelo menos deveriam). Visualmente o STRONG e o B não tem nada de diferente, eles apenas marcam uma parte do texto como negrito. Mas a diferença entre os dois é invisivel para você.

Veja… Quando você usa STRONG, você dá um significado para aquela parte especifica do texto. Você diz que ela deve ser lida com mais força, com mais intensidade. Já com o elemento B você apenas marca em negrito o texto, e só. Ou seja, quando um browser para cegos (acho que ainda não existe nenhum assim) lê aquela parte com STRONG, a “voz dele” será alterada, ele passará a ler com mais força, já com o B isso não deve acontecer.
A mesma coisa acontece com o EM e o I. Quando uma parte do texto é marcada com EM, você dá um significado ao texto, você diz que aquela determinada parte deve ser lida com mais ênfase.

23 Comentários

Subjetividade na Semântica

O Bruno escreveu um artigo sobre estruturação de formulários com listas não ordenadas.

Este artigo me lembrou um assunto interessante que podem levar alguns à dúvida.

Se você ler o artigo, perceberá que o Bruno sugeri uma solução para a estruturação de formulários manipulando listas não ordenadas (UL). Já o Fábio Caparica, fez um comentário dizendo que prefere usar uma estrutura baseada em DL, DT e DD. Eu, posso seguir a mesma linha de raciocínio, só que eu acho “mais semântico” fazer com listas ordenadas, já que o formulário segue uma linha lógica e dependendo das vezes uma linha de prioridade.

Mas quem está correto? Você que já tem algum tempo no mundo dos Padrões Web deve ter outra solução.
Esse assunto, por exemplo é totalmente subjetivo. Os três modos seguem uma idéia semântica, é difícil apontar qual está errado (ou certo) e dar motivos para tal. É diferente de ver um bloco de texto dentro de um div com classe “paragrafo”. Normalmente, estes erros são grotescos, fáceis de identificar - e mesmo assim muitos o cometem por aí afora.
Nestas situações é melhor usar o bom senso. Uma boa pesquisa na internet é uma boa idéia para saber quais soluções os desenvolvedores estão usando para tais situações. Claro, filtrando ocasiões como a do div “paragrafo” citada acima.

18 Comentários

A Semântica é que manda

Um leitor do Tableless enviou um artigo muito interessante: Divless.

Muitos desenvolvedores que começam a abordar os padrões tem muita dificuldade porque não prestam atenção em uma coisinha simples: semântica.
Já cansei de falar em curso, em artigos, podcasts e tudo mais… Semântica é a alma do negócio. Semântica é a chave do desenvolvimento com padrões web. Se você entende semântica, você tem meio caminho andado.

Todo mundo já sabe que cada tag, tem uma função semântica. Se você quer definir um título as tags apropriadas serão H1, H2, H3… Se você quiser fazer um parágrafo, usa-se P. Simples assim.
A tag DIV serve para dividir o layout em seções. O layout geralmente é dividido em partes como o cabeçalho, o menu, a coluna da esquerda, a coluna do meio, o rodapé etc. Para separar ou demarcar estas seções a tag semanticamente correta é a DIV. Nada de tabelas, nada de span, nada de p ou qualquer outra tag. O DIV foi designado para fazer este trabalho. Usar qualquer outra tag para fazer isto é errado.

Sem contar que criar um código semanticamente correto vai te ajudar bastante na hora de implementar o CSS. Você vai ter mais variedade de tags. Vai conseguir identificar melhor as partes do layout. Imagine se o layout fosse feito com listas. Você teria que colocar classe ou ids em todos os objetos para poder identificá-los para manipulá-los com CSS. Iria se tornar uma coisa totalmente contraproducente.

No artigo do camarada, ele fez alguns exemplos de layout usando apenas listas. Bom, nada mais fácil… Se você quiser você pode fazer layouts usando apenas a tag B ou qualquer outra tag que quiser. O CSS lhe permite manipular as características dos objetos, mas o CSS não muda a função semântica do elemento.

O que você acha?

Nunca é demais voltar nestes assuntos para fixar melhor na memória. Já dizia o velho sentado: A repetição faz a gravação.

34 Comentários

Podcast #20 - Preocupações sobre o desenvolvimento para internet móvel

Fiz um podcast rápido falando um pouco sobre algumas descrições (ou preocupações?) sobre o mundo móvel. O mundo móvel é muito mais assustador do que a gente pode imaginar. Você sabe qual aparelho o camarada do outro lado está usando? Você sabe a resolução desse aparelho? E o sistema operacional? E o navegador?
Apenas algumas devagações sobre esse grande mundo de pequenos aparelhos.

Tamanho: ~2,4 Mb
Duração: ~15 min
Formato: Mp3
Download: Podcast #20

Eu aconselho você a cadastrar nosso Feed em seu agregador predileto para receber nossas atualizações automagicamente, mas se preferir, pode baixar o arquivo diretamente aqui.

5 Comentários

Semana da Mobilidade

A Intel está fazendo a Primeira semana da Mobilidade aqui no Brasil. Hoje foi o primeiro dia e tive o privilégio de participar (Valeu Rigonatti!) e conferir uma palestra com Paul Otellini (CEO da Intel) sobre as perspectivas e planos futuros para o mundo móvel aqui no Brasil.

Existem 4 pilares que eles querem cobrir: Estímulo à adoção de notebooks, disseminação dos dispositivos móveis portáteis (celulares e PDAs), ampliação de infra-estrutura de acesso à internet sem fio (WiFi e WiMax) e por fim produção de conteúdo digital como filmes, músicas, jogos etc.

O legal é que o governo está muito interessante (pelo menos é o que mostra) em todo esse movimento. Ele já começou a testar e a implementar a tecnologia WiMax nas prefeituras de São Paulo.
A Intel vem por muito tempo ajudando a adoção dessas tecnologias aqui no Brasil. Esse ano é o ano decisivo para que todo esse blá blá blá sobre mobilidade ganhe proporções maiores transformando ainda mais a postura de usuários e desenvolvedores.

Você pode ter mais informações no Mobile Life.

4 Comentários

Breve introdução: XHTML Mobile Profile

XHTML MP é um subset do já conhecido XHTML. Ele é baseado em um outro subset de XHTML chamada XHTML Basic. O XHTML Basic é uma versão simplificada do XHTML definido pelo W3C. Ele foi feito especificamente para dispositivos com baixo poder de processamento como celulares, PDAs, pagers etc… O XHTML Basic não contém algumas características que esses dispositivos dificilmente suportam, como por exemplo: Frames, Folhas de Estilo em Cascata e scripts.

O ponto forte do XHTML MP é trazer para os dispositivos móveis tecnologias atuais para criar uma experiência melhor ao navegar. Antes do nascimento do XHTML MP, os desenvolvedores para internet móvel usavam WML e WMLScript para criar sites em WAP. Enquanto isso, os desenvolvedores para a internet convencional trabalhavam com HTML/XHTML e CSS para construir web sites.

Com a vinda do XHTML MP, a linguagem da internet sem fio e a linguagem da internet convencional finalmente convergiram. XHTML Mobile Profiles juntamente com o WCSS deram mais flexibilidade para os desenvolvedores de sites para dispositivos wireless. Agora, desenvolver para dispositivos móveis ficou tão fácil quanto desenvolver web sites normais. Não é mais necessário ter dispositivos ou softwares especificos para testar seu projeto. Não é mais necessário aprender outra linguagem, é tudo XHTML e CSS, claro, com mudanças específicas para mobiles.

Assunto interessante. Dá muito pano para manga.
O texto não está tão elaborado porque é um rascunho sobre algumas coisas que ando lendo. Como não tive tempo de fazer um texto mais completo, acabei postando esse mesmo.

obs.: quase uma tradução do texto que está em XHTML MP. E uma prévia para breves lançamentos na Visie.

10 Comentários

Video Tutorial #9 - Implementando a home de um site

Update: Você pode assistir mais video aulas como essa no Campus Online. Vídeos grátis de Tableless e Javascript.

Esse Video Tutorial mostra o processo de aplicação de CSS em cima da estrutura HTML criada no Video Tutorial #8.

UPDATE: Se alguém quiser baixar o vídeo, só clicar nesse link. O arquivo está em formato Rar (rarlab.com).

O vídeo tem uma hora de duração, portanto esteja preparado. Meus comentários não foram muito incisivos porque eu não fiz o audio durante gravação. Tentei ser o mais completo possível, espero que ajude.

Duração: ~1 hora
Tamanho: 60Mb
Formato: SWF
Acesso: Video Tutorial #9
Download: videotutorial9.rar (formato rar)

Por favor, comentem, vai ser bom.
Obs.: O arquivo é grande, mas tem um buffer muito bom, dá para assistir tranqüilamente sem aqueles gaps. Eu acho.

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.

39 Comentários

Voltar para o topo

Outros posts

Aprenda