Histórico para o ‘Tableless’ Categoria

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.

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.

Como tornar o seu código válido?

Friday, March 2nd, 2007
  • Utilize uma ferramenta visual que crie código válido (ex: Dreamweaver MX2004).
  • Defina um DOCTYPE apropriado.
  • Consulte as especificações da linguagem no W3C.
  • Faça da validação um processo normal no seu trabalho.

Validação CSS

Friday, March 2nd, 2007

Validação é o processo de verificação de seus documentos comparando-os com um padrão formal, como os publicados pelo W3C. Um documento que foi checado e aprovado é considerado um documento Válido.

Por que utilizar código válido?

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 fiquem mais acessíveis para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.

E mais:

  • Um código válido renderiza mais rápido do que um que contenha erros.
  • Um código válido renderiza melhor do que um inválido.
  • Os Browsers estão se tornando cada vez mais de acordo com o Web Standards, e torna-se extremamente necessário escrever HTML válido e dentro dos padrões.

Como fazer a verificação de seu código?

Através de aplicações disponíveis online:

  • W3C Markup Validation Service http://validator.w3.org
  • W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
  • WDG HTML Validator http://www.htmlhelp.com/tools/validator/
  • Stylesheets.com CSS Validator http://www.style-sheets.com/validator.asp

Alguns programas possuem mecanismos de validação intrínsecos como o Macromedia Dreamweaver MX2004 e o TopStyle.

Técnicas de layout utilizando Float

Friday, March 2nd, 2007

A técnica de layout CSS utilizando float é a mais utilizada para definir posicionamento pois permite uma flexibilidade maior que o posicionamento absoluto.

Para relembrar: quando definimos uma propriedade float para um elemento estamos configurando como os elementos definidos após o elemento irão fluir ou se posicionar em volta do elemento.

Quando queremos interromper o fluxo definido, utilizamos a propriedade clear.

Vertical Align

Friday, March 2nd, 2007

Propriedade do CSS que define o alinhamento vertical de um elemento. Utilizada com freqüência para substituir o atributo align=”absmiddle” usado no HTML para centralizar imagens em relação ao texto adjacente e agora descontinuado no XHTML.

Z-Index do CSS

Friday, March 2nd, 2007

A propriedade Z-Index define a ordem de empilhamento (visualização) dos elementos da página do menor para o maior. Ou seja, um elemento com Z-Index igual a 2 será visualizado sobrepondo um elemento com Z-Index igual a 1 ou 0, se eles estiverem na mesma posição absoluta. O valor padrão da propriedade Z-Index é 0.