Benefícios dos WebStandards

WEB STANDARDS Benefícios do desenvolvimento Web baseado na metodologia Tableless Luciano Eduardo Braga dos Santos Náiron José Correia Guimarães Disponível em: http://elmicox.blogspot.com

CENTRO FEDERAL DE EDUCAÇÃO TECNOLÓGICA DE GOIÁS
COORDENAÇÃO DA ÁREA DE TELECOMUNICAÇÕES
CURSO SUPERIOR DE TECNOLOGIA EM REDES DE COMUNICAÇÃO
Banca Examinadora
Prof. M.Sc. João Batista José Pereira
Prof. M.Sc. Wagner Bento Coelho
Tecgº. Fábio da Silva Marques

Definições – Internet, WWW e W3C
Internet
Diversas redes de computadores que se comunicam basicamente através dos protocolos TCP/IP
WWW
Um dos serviços oferecidos pela da Internet. Usa hipertexto para ligar diversos documentos
W3C - World Wide Web Consortium
Prover padrões e interoperabilidade na Web.

Definições – Linguagem de marcação
Linguagem de marcação
Linguagens utilizadas para marcar a formatação ou o significado de blocos de texto. Ex.: RTF, Tex, HTML
RTF
Linha negrito0par fs32 Linha fonte 16fs20par
HTML
Linha negrito Linha fonte 16

Definições - Hipertexto
Hipertexto
Sistema para visualização de informação onde os documentos possuem ligações (chamados links ou hiperlinks) que permitem chegar a outros documentos.

Definições - HTML
HTML – Hipertext Markup Language
Linguagem de marcação de hipertexto
Mundialmente reconhecido como linguagem padrão na WWW
A marcação dos blocos de texto se dá através de tags e atributos inseridos no texto.
Derivado do SGML (Standard Generalized Markup Language - Norma Padrão para Linguagem de Marcação)

Definições - HTML
Tags
São instruções para marcar determinado bloco do texto.
Se diferenciam do restante do texto por estarem contidas entre sinais de menor (<) e maior (>).
Atributos
São características adicionadas as tags de forma a auxiliar e complementar a marcação do texto.

Definições - HTML
Exemplo de uma marcação HTML
<body> <h1> HTML - Hipertext Markup Language </h1> HTML (acr ô nimo para a express ã o inglesa HyperText Markup Language , que significa Linguagem de Formata çã o de Hipertexto ) é uma <a href=" /Linguagem.htm " title=" Linguagem de marcação "> linguagem de marca çã o </a> utilizada para produzir p á ginas na Web. </body>

Definições - XML
XML - Extensible Markup Language - Linguagem de Marcação de Extensível
Linguagem mais simples e flexível derivada da SGML
Permite a criação de tags
Possui estrutura rígida não permitindo erros.
Mais fácil de analisar e processar.

Definições - CSS
CSS - Cascading Style Sheets
Conjunto de declarações que permite adicionar atributos visuais (cores, tamanho, posição, etc) a elementos de marcação.
Vantagem principal: poder ser colocado separadamente dos elementos de marcação.
p { margin : 0 ; background-color : #FF0000 ;} .menu li, .menu a { color : #F00000 ; }

Histórico - Hipertexto
1945: Vannevar Bush descreve o Memex para seguir ligações entre microfilme
Década de 1960: Douglas Engelbart - oNLine System (NLS) – criação do mouse.
1963/65: Ted Nelson utiliza os termos hipertexto e hipermidia – Xanadu
1980: Tim Berners Lee propõe o hipertexto ao CERN e desenvolve o ENQUIRE

Histórico - Hipertexto
1987: Bill Atkinson - HyperCard para Apple – hipertexto para aplicações gráficas
1989: CERN – Maior rede da Internet na Europa. Berners Lee escreve uma proposta dos benefícios do hipertexto
1990: Berners Lee e Robert Cailliau desenvolvem um leitor e editor de hipertexto ( World Wide Web ).
1990: Protocolo HTTP 0.9 e HTTPD

Histórico – World Wide Web
1991: WWW-Talk e o crescimento da WWW
Novos servidores e navegadores: Cello, Viola, MidasWWW
1993: Mosaic – modo gráfico – disponível para X, Windows e Macintosh
1993: Dave Ragget: “HTML+” (tabelas, formulários, tags de fechamento)
Nov/1993: Desenvolvedores do Mosaic lançam o Netscape e prosseguem criando as próprias tags

Histórico – Padronização do HTML
1994: CERN - Primeira conferência WWW.
Desde o Mosaic, navegadores acionavam suas próprias tags sem padronização.
Jun/1994: Dan Connolly une todas as tags e cria o HTML 2 (versão final em set/1995)
Out/1994: W3C fundado. Tim Berners Lee é o diretor.

Histórico – Padronização do HTML
Mar/1995: Dave Ragget publica rascunho do HTML 3.
HTML 3 exibe uma alternativa às tags visuais: CSS - tag STYLE e o atributo CLASS
1995: Tabelas usadas para organizar visualmente uma página
Navegadores continuam sem respeitar os padrões

Histórico – Guerra dos Browsers
1995: Lançado o MS Internet Explorer
Netscape e IE (Internet Explorer) criam funcionalidades fora dos padrões para mostrar superioridade
1995: IE é distribuido com o MS Windows 95, posteriormente é embutido ao Windows 98.
Fev/1998: Código do Netscape liberado (mozilla.org)
Nov/1998: Netscape inicia seu declínio e é vendido para AOL

Histórico - HTML
Fev/1998: XML criado
Abr/1998: HTML 4. W3C recomenda CSS e o uso de novos atributos para portadores de necessidades especiais.
1998: Grupo WaSP (Web Standards Project) formado
Ago/1998: lançado revisão HTML 4.01 (atual)
Jan/2000: XML + HTML = XHTML

XHTML
XHTML
Reformulação dos 3 tipos de HTML 4.01 de acordo com as regras do XML.
Transitional, Frameset e Strict
Busca ser compatível com aplicações para HTML 4 (diretrizes de compatibilidade).
Compatível com aplicações e bibliotecas para XML.
Foco na marcação do conteúdo.

XHTML – Principais diferenças com HTML 4
Obrigatória a declaração do DOCTYPE
Obrigatórios: html (raiz), head, title e body
Atributo lang, xml:lang e alt(imagens) obrigatórios
Tags aninhadas corretamente. Tags de fechamento obrigatórias
Atributos em minúscula e entre aspas
"E" comercial (&) deve ser substituído pela entidade &amp
Conteúdo dos elem. script e style entre CDATA ou em arquivos externos

Desenvolvimento com Tabelas
Popularização da Web: tornar páginas atrativas.
Tags de efeitos visuais, animações em excesso, nova disposição visual, javascript e applets.
Apenas o visual passou a ser importante, independente da qualidade do código fonte.
Para montar o layout facilmente, o uso de tabelas se popularizou.
Editores WYSIWYG

Desenvolvimento com Tabelas
Conseqüências:
Tag table e outras usadas indevidamente
Complexidade e tamanho do código fonte
Excesso de tags em detrimento do conteúdo
Código sem modularização
Dificuldade de alteração do código e imagens
Dificuldade para leitores de tela
Dificuldade para navegadores limitados

Solução tableless e padrões Web
Inicio do ano 2000
Respeito aos padrões divulgados pelo W3C
Acesso universal
Separação entre:
Conteúdo – (X)HTML
Apresentação visual – CSS
Comportamento – ECMAScript/JavaScript

Tableless e padrões Web
Respeito aos padrões da W3C:
Estrutura correta do documento
Tags e linguagens de apoio nos padrões.
Semântica
Ex.: <h1> para títulos ao invés de tags visuais como 
Facilidade no entendimento do código.
Diminuição da quantidade de bytes

Acesso universal
Acesso a qualquer pessoa independente de necessidades especiais
Diversidade de dispositivos, navegadores e configurações
Lei Federal de Acessibilidade (no. 10 098, 19/dez/2000) – prazo vencido 02/12/06
W3C: WCAGs (Web Content Accessibility Guidelines - Diretrizes de Acessibilidade ao Conteúdo da Web)

Separação entre conteúdo, visual e comportamento (modularidade)
Eficiente separação de tarefas (editor de conteúdo, designer e programador).
Organização e facilidade de alteração.
Facilidade na programação server-side.
Melhor indexação por motores de busca
Cache e economia de banda

Desenvolvimento
Desenvolvimento - Ordem de importância: conteúdo, visual, comportamento.
Conteúdo – (X)HTML
Escolher Doctype correto
Evitar tags e atributos visuais
Dividir em blocos
Definir tags corretas para dar significação
Textos mais importantes no topo

Desenvolvimento
Apresentação Visual (CSS)
Liberdade para planejar o layout
Facilidade no redesign
CSS Zen Garden
Facilidade para diferentes tipos de midia
Buscar deixar o CSS em arquivo externo
Buscar generalização nas declarações
Evitar Hacks

Desenvolvimento
Comportamento (JavaScript)
Tratamento de eventos e ações automáticas
Acesso aos elementos XML via DOM
DOM: organização hierárquica de elementos, propriedades e métodos
Deve ser tratado como incremento. Página funcional independente do JavaScript.
Buscar manter separado do XHTML
Diferenças nos navegadores

Comparação – Tableless X Não-Tableless
Foram feitas as conversões Tableless de 2 páginas: União Mundial dos Estudantes – UME e CEFET-GO
Após a conversão, testes de:
validação de sintaxe
Acessibilidade, diferentes mídias e dispositivos
complexidade e organização do código
visualização em navegadores comuns
visualização sem facilidades como css, imagens e javascript
tamanho dos códigos

Comparação
Sintaxe
Versão tableless com sintaxes válidas e bem formadas.
Páginas podem ser interpretadas por aplicativos XML e bibliotecas XML de várias linguagens.
Acessibilidade humana
Teste dasilva.org.br: páginas tableless mais acessíveis.
Links e imagens mais acessíveis

Comparação
Organização do código fonte
Versões tableless bem mais organizadas
Teste em navegadores padrão (IE, FF e OP)
Poucas diferenças, porém páginas não-tableless apresentaram alguns erros.
Sem suporte a JavaScript
Todas com conteúdo acessível apesar de pequenas deficiências (mudança de cor de fundo no UME e destaques do governo no CEFET)

Comparação
Sem CSS
UME: versão tableless mais acessível e organizada
CEFET não-tableless: organizado e acessível mas sem delimitação entre seções.
CEFET tableless: topo pior, conteúdo acessível e seções delimitadas
Sem imagens
Versões não-tableless: imagens essenciais sem texto alternativo. Conteúdo e navegação bastante comprometidos ao contrário das versões Tableless

Comparação
Sem suporte a cores
Todas as versões satisfatórias
Navegadores de texto
UME Não-tableless: Conteúdo organizado. Sem texto alternativo para imagens
CEFET Não-tableless: Desorganização. Conteúdo e navegação comprometidos.
Tableless: Navegação e conteúdo organizados.

Comparação
Visualização de impressão
Não-tableless: satisfatória apesar de pequenas quebras de layout
Tableless: impressão otimizada (media print) inclusive com possibilidade de economia de tinta.
Dispositivos portáteis
Não-tableless: Partes desorganizadas, imagens desnecessárias. Textos e navegação não prejudicados.
Tableless: Agradável visualmente, imagens otimizadas, conteúdo e navegação beneficiados.

Comparação
Tamanho do código fonte (em Kbytes)
UME Atual UME Tableless CEFET Atual CEFET Tableless HTML 11,0 5,2 22,3 12,4 JavaScript 0 4,4 1,43 1,5 CSS 1,17 5,9 3,65 6,35 Sub-total 12,17 15,5 27,38 20,25 Imagens 70,78 40,7 154,0 154,0 Total 92,27 56,2 181,38 174,25

Comparação
Exemplos de redução no consumo de banda
Site imasters.com.br : de 445,05 GB (mar/06) para 229,43 GB (Jun/06) mensais.
Site espn.com : 61 terabytes/mês;
Simulação consumo de banda semanal:
500 visualizações página inicial
1000 visualizações de páginas secundárias
50% destes são usuários de retorno
Usuários de retorno não carregam imagens, arquivos CSS, nem JavaScript (cache).

Comparação
Simulação consumo de banda (em Kbytes):
500 novos visitantes Não carregam arquivos CSS, JS nem imagens devido ao cache. Total 500 visitantes de retorno 500 visitações de páginas secundárias UME atual 46.135 5.500 5.500 57.135 UME Tableless 28.100 2.600 2.600 33.300 CEFET atual 90.690 11.150 11.150 112.990 CEFET Tableless 87.125 6.200 6.200 99.525

Vantagens percebidas
Mais acessível para portadores de dificuldades motoras ou visuais;
Mais acessível a outros dispositivos, navegadores e configurações;
Compatibilidade com aplicações XML;
Desenvolvimento modularizado;
Facilidade de alteração e manutenção;
Facilidade na programação server-side;
Código organizado;
Melhor posicionamento em motores de busca;
Economia de banda;
Maior velocidade de carregamento;

Dificuldades à adoção do método
Navegadores
Padrões mal implementados e desrespeitados
Especificações proprietárias
Editores visuais
Comodidade e desconhecimento do código fonte
Dificuldades de aprendizado e cultura
Domínio de novas técnicas e uma nova linguagem
Cultura que não prioriza a qualidade do código, mas o resultado visual em apenas um (1) navegador.

Conclusão
O desenvolvimento seguindo os padrões Web traz vantagens:
ao processo de desenvolvimento
aos visitantes
econômicos
à visibilidade do site
O desenvolvimento seguindo os padrões Web busca resgatar a universalidade da Web.

Sugestão de trabalhos
Usabilidade e acessibilidade em páginas Web;
SEO (Otimização para motores de busca);
Diferenças entre os tipos e versões de XHTML;
Servindo XHTML como XML;
A melhor solução para disp. móveis: XHTML x WML;
O XHTML para apresentações Web: HTML Slidy
Tecnologias de indicação: feeds ATOM e RSS;
Potencialidades do JavaScript: aplicações Web;
O fenômeno Web 2.0;
AJAX – Requisições assíncronas em páginas Web.

Benefícios dos WebStandards

by Náiron Jcg

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 155

Statistics