Histórico para o ‘Webstandards’ Categoria

Como funcionam os Web Standards?

Tuesday, March 13th, 2007

Para web designers e desenvolvedores, os Web Standards implicam em utilização de standards/padrões principalmente no escopo estrutural e de apresentação.

Embora existam padrões que se apliquem a todos os aspectos da Internet, como ECMAScript (JavaScript), DOM, XML, RDF, User Agents (navegadores) e guias de acessibilidade, quando se fala em Web Standards, estamos se referindo principalmente as linguagens estruturais e de apresentação que compõe um documento web: o HTML (Hypertext Mark-up Language), o XHTML (Extensible Hypertext Markup Language) e o CSS (Cascading Style Sheets).

Adotar os Web Standards exige uma mudança de atitude:

Website Tradicional

O desenvolvimento de um Website tradicional é uma extensão da mídia impressa. Características comuns incluem:

  • Layouts baseados em tabelas.
  • Camada de apresentação junto com a camada de conteúdo.
  • Códigos inválidos, inacessíveis e semanticamente incorretos.

Website “Web Standards”

Implementar os Web Standards significa aceitar a web como uma ampla ferramenta acessível por um grande número de usuários e uma variedade de aparelhos. Características comuns incluem:

  • Layout baseado em containers (DIVs - Tableless).
  • Uso de Cascading Style Sheets (CSS) para separação entre conteúdo e apresentação.
  • Marcação semanticamente correta.
  • Código válido e acessível (por humanos e máquinas).

Quais pontos negativos do WebStandards?

Tuesday, March 13th, 2007
  • Curva de aprendizado acentuada.
  • Problemas com incompatibilidade entre browsers.
  • Alguns tipos de layouts podem ser obtidos de forma muito mais fácil utilizando-se tabelas ao invés de CSS.

Benefícios dos Web Standards

Tuesday, March 13th, 2007
  • Redução dos custos de desenvolvimento (simplificar código, separação entre apresentação e conteúdo).
  • Redução dos custos de manutenção (menos código, código modular). O conteúdo pode ser facilmente re-estilizado sem alteração de código.
  • Redução dos custos de hosting (utilização de banda - redução do tamanho e tráfego de arquivos).
  • Facilidade em manter a consistência visual entre os documentos do mesmo site.
  • Ampliação da audiência. Proporcionar web sites acessíveis a uma gama maior de pessoas e um número maior de devices/aparelhos/ferramentas para Internet. Suporte a usuários de equipamentos wireless e PDA sem necessidade de despender tempo e dinheiro no desenvolvimento de diferentes versões da aplicação/website.
  • Melhor experiência do usuário. Sites mais funcionais. Carregamento mais rápido do conteúdo e menores problemas com incompatibilidades com navegadores.
  • Melhor posicionamento em ferramentas de buscas.
  • Garantir a viabilidade ao longo do tempo de qualquer documento web, à medida que os navegadores evoluem, e novos produtos surgem no mercado.
  • Aumento na percepção de qualidade do trabalho produzido. Confere vantagem competitiva em relação aos desenvolvedores e empresas que não adotaram ainda desenvolvimento baseado nos Web Standards.
  • Acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituições públicas) possibilitando o acesso a pessoas portadoras de necessidades especiais através de browser especiais.

Web Standards

Tuesday, March 13th, 2007

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web. Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazer com que o conteúdo desenvolvido dentro destes padrões possa ser visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiver acessando a Internet. É um conceito de acessibilidade estendido.

Os standards ou padrões atuais são:

Linguagens Estruturais

  • Extensible Hypertext Markup Language (XHTML) 1.0
  • XHTML 1.1
  • Extensible Markup Language (XML) 1.0

Linguagens de Apresentação

  • Cascading Style Sheets (CSS) Level 1
  • CSS Level 2
  • CSS Level 3

Modelo de Objeto

  • Document Object Model (DOM) Level 1 (Core)
  • DOM Level 2

Linguagens de Script

  • ECMAScript 262 (a versão padrão do JavaScript)

Linguagens de Apresentação Adicionais (Marcação)

  • Mathematical Markup Language (MathML) 1.01
  • MathML 2.0
  • Scalable Vector Graphics (SVG) 1.0

Convertidos do Tableless

Tuesday, March 6th, 2007

Parabéns Elcio e Diego, reativaram o convertidos http://tableless.com.br/convertidos/

Mudando para WebStandards

Friday, March 2nd, 2007

Mudanças básicas

  • Adicione um DOCTYPE correto para todas as páginas.
  • Adicione texto para as tags ‘ALT’ de suas imagens.
  • Adicione títulos significativos para as suas páginas.

Mudanças intermediárias

  • Código XHTML Transitional válido.
  • Código semanticamente correto.
  • Substitua as tags ‘FONT’ e ‘COLOR’ por CSS.
  • Formulários acessíveis, tabelas de dados e menus de saída.
  • Posicionamento básico com CSS (padding, margins etc) e utilização de tabelas para layout geral.

Mudanças avançadas

  • Posicionamento total com CSS - sem tabelas para o layout.
  • Utilização de listas para menus de navegação.
  • Código XHTML Strict válido.

Como adotar o desenvolvimento baseado em Web Standards?

Friday, March 2nd, 2007

Web Standards não é um tópico fácil. Todos os desenvolvedores devem tê-lo como meta e gradualmente mudar para Web sites baseados em Web Standards.

A mudança do tradicional para o padrão Web Standards requer tempo e treinamento. Ao invés de mergulhar de cabeça e se frustrar rapidamente, estabeleça prioridades e gradualmente mude para o Web Standards.

Como tornar o seu código acessível?

Friday, March 2nd, 2007
  • Disponibilize equivalentes em texto para elementos não textuais.
  • Utilize tabelas acessíveis (identificando headers para linha e coluna).
  • Utilize formulários acessíveis (label, id, fieldset, rótulo).
  • De preferência para marcação em relação a imagens para dispor a informação.
  • Disponibilize menus de saída visíveis.
  • Disponibilize teclas de atalho.
  • Utilize folhas de estilo com unidades relativas para controlar o layout e a apresentação.
  • Verifique se seus documentos podem ser lidos sem as folhas de estilo.
  • Disponibilize meta data para adicionar informação semântica.

Por que utilizar código Acessível?

Friday, March 2nd, 2007
  • Torne o seu site acessível para um amplo público (deficientes
    físicos, perceptivos, etc).
  • Torne o seu site acessível para um amplo número de aparelhos
    helds, leitores de tela, navegadores de texto, sites de busca,
  • É um requisito para sites Federais e Governamentais.

Acessibilidade

Friday, March 2nd, 2007

Acessibilidade… Você já ouviu muito sobre isso. Quando vemos esta palavra, já relacionamos com site acessível aos deficientes visuais.

Acontece que isso é muito mais amplo do que parece. Acessibilidade sim, tem haver com sites mais acessíveis aos deficientes, mas não só eles. Muito gira em torno disso, e às vezes ficamos condicionados a pensar dessa forma.

Acessibilidade é para todos. Desde o usuário que tenta acessar o site do banco pelo desktop usando um browser como Opera e Firefox não conseguindo acessar corretamente o site, até aquele usuário que está preso no trânsito e aproveita para tentar mandar um email pelo seu PDA.

Fazer um site utilizando os padrões web, é fazer um site melhor acessível a qualquer plataforma ou dispositivo, sem qualquer esforço, ou ainda, sem fazer uma versão específica para um dispositivo específico.

Isto é… Se você faz um site para desktops, com web standards bem feito, seu site vai estar muito bem acessível em leitores de telas e em dispositivos móveis. E você pode melhorar isso usando as famosas Media Types. Assim, você deixa seu site muito mais acessível para o dispositivo / plataforma escolhido.

Temos que entender uma coisa. Não é porque o site é acessível que ele será compatível.
Seu site certamente não será compatível quando comparado no Lynx e Internet Explorer. Mas será perfeitamente acessível aos dois, de formas diferentes, mas será acessível. No Lynx você não verá imagens bonitas, degrades e botões personalizados. Mas se você utilizar o atributo ALT em imagens e até mesmo técnicas como Image Replacement, seu site será perfeitamente acessível.

Logo, logo, a Internet estará em todo o canto, e você não pode estar desenvolvendo sites apenas para um dispositivo.