WEB STANDARDS  Benefícios do desenvolvimento Web baseado na metodologia Tableless Luciano Eduardo Braga dos Santos Náiron ...
CENTRO FEDERAL DE EDUCAÇÃO TECNOLÓGICA DE GOIÁS <ul><li>COORDENAÇÃO DA ÁREA DE TELECOMUNICAÇÕES </li></ul><ul><li>CURSO SU...
Definições – Internet, WWW e W3C <ul><li>Internet </li></ul><ul><ul><li>Diversas redes de computadores que se comunicam ba...
Definições – Linguagem de marcação <ul><li>Linguagem de marcação </li></ul><ul><ul><li>Linguagens utilizadas para marcar a...
Definições - Hipertexto <ul><li>Hipertexto </li></ul><ul><ul><li>Sistema para visualização de informação onde os documento...
Definições - HTML <ul><li>HTML – Hipertext Markup Language </li></ul><ul><ul><li>Linguagem de marcação de hipertexto </li>...
Definições - HTML <ul><li>Tags </li></ul><ul><ul><li>São instruções para marcar determinado bloco do texto. </li></ul></ul...
Definições - HTML <ul><li>Exemplo de uma marcação HTML </li></ul><ul><li><body> <h1> HTML - Hipertext Markup Language </h1...
Definições - XML <ul><li>XML - Extensible Markup Language - Linguagem de Marcação de Extensível </li></ul><ul><li>Linguage...
Definições - CSS <ul><li>CSS - Cascading Style Sheets </li></ul><ul><ul><li>Conjunto de declarações que permite adicionar ...
Histórico - Hipertexto <ul><li>1945:  Vannevar Bush descreve o Memex para seguir ligações entre microfilme </li></ul><ul><...
Histórico - Hipertexto <ul><li>1987:  Bill Atkinson - HyperCard para Apple – hipertexto para aplicações gráficas </li></ul...
Histórico – World Wide Web <ul><li>1991:  WWW-Talk e o crescimento da WWW </li></ul><ul><li>Novos servidores e navegadores...
Histórico – Padronização do HTML <ul><li>1994:  CERN - Primeira conferência WWW. </li></ul><ul><li>Desde o Mosaic, navegad...
Histórico – Padronização do HTML <ul><li>Mar/1995:  Dave Ragget publica rascunho do HTML 3. </li></ul><ul><li>HTML 3  exib...
Histórico – Guerra dos Browsers <ul><li>1995:  Lançado o MS Internet Explorer </li></ul><ul><li>Netscape e IE (Internet Ex...
Histórico - HTML <ul><li>Fev/1998:  XML criado </li></ul><ul><li>Abr/1998:  HTML 4. W3C recomenda CSS e o uso de novos atr...
XHTML <ul><li>XHTML </li></ul><ul><ul><li>Reformulação dos 3 tipos de HTML 4.01 de acordo com as regras do XML. </li></ul>...
XHTML – Principais diferenças com HTML 4 <ul><li>Obrigatória a declaração do DOCTYPE </li></ul><ul><li>Obrigatórios: html ...
Desenvolvimento com Tabelas <ul><li>Popularização da Web: tornar páginas atrativas. </li></ul><ul><li>Tags de efeitos visu...
Desenvolvimento com Tabelas <ul><li>Conseqüências: </li></ul><ul><ul><li>Tag table e outras usadas indevidamente </li></ul...
Solução tableless e padrões Web <ul><li>Inicio do ano 2000 </li></ul><ul><li>Respeito aos padrões divulgados pelo W3C </li...
Tableless e padrões Web <ul><li>Respeito aos padrões da W3C: </li></ul><ul><ul><li>Estrutura correta do documento </li></u...
Tableless e padrões Web <ul><li>Acesso universal </li></ul><ul><ul><li>Acesso a qualquer pessoa independente de necessidad...
Tableless e padrões Web <ul><li>Separação entre conteúdo, visual e comportamento (modularidade) </li></ul><ul><ul><li>Efic...
Desenvolvimento <ul><li>Desenvolvimento - Ordem de importância: conteúdo, visual, comportamento. </li></ul><ul><li>Conteúd...
Desenvolvimento <ul><li>Apresentação Visual (CSS) </li></ul><ul><ul><li>Liberdade para planejar o layout </li></ul></ul><u...
Desenvolvimento <ul><li>Comportamento (JavaScript) </li></ul><ul><ul><li>Tratamento de eventos e ações automáticas </li></...
Comparação – Tableless X Não-Tableless <ul><li>Foram feitas as conversões Tableless de 2 páginas: União Mundial dos Estuda...
Comparação <ul><li>Sintaxe </li></ul><ul><ul><li>Versão tableless com sintaxes válidas e bem formadas. </li></ul></ul><ul>...
Comparação <ul><li>Organização do código fonte </li></ul><ul><ul><li>Versões tableless bem mais organizadas </li></ul></ul...
Comparação <ul><li>Sem CSS </li></ul><ul><ul><li>UME: versão tableless mais acessível e organizada </li></ul></ul><ul><ul>...
Comparação <ul><li>Sem suporte a cores </li></ul><ul><ul><li>Todas as versões satisfatórias </li></ul></ul><ul><li>Navegad...
Comparação <ul><li>Visualização de impressão </li></ul><ul><ul><li>Não-tableless: satisfatória apesar de pequenas quebras ...
Comparação <ul><li>Tamanho do código fonte (em Kbytes) </li></ul>  UME Atual UME  Tableless CEFET Atual CEFET  Tableless H...
Comparação <ul><li>Exemplos de redução no consumo de banda </li></ul><ul><ul><li>Site imasters.com.br : de  445,05 GB (mar...
Comparação <ul><li>Simulação consumo de banda (em Kbytes): </li></ul>  500 novos visitantes Não carregam arquivos CSS, JS ...
Vantagens percebidas <ul><li>Mais acessível para portadores de dificuldades motoras ou visuais; </li></ul><ul><li>Mais ace...
Dificuldades à adoção do método <ul><li>Navegadores </li></ul><ul><ul><li>Padrões mal implementados e desrespeitados </li>...
Conclusão <ul><li>O desenvolvimento seguindo os padrões Web traz vantagens: </li></ul><ul><ul><li>ao processo de desenvolv...
Sugestão de trabalhos <ul><li>Usabilidade e acessibilidade em páginas Web; </li></ul><ul><li>SEO (Otimização para motores ...
Próximos SlideShares
Carregando em…5
×

Benef&iacute;cios dos WebStandards

2.193 visualizações

Publicada em

T&oacute;picos da apresenta&ccedil;&atilde;o do trabalho de conclusão de curso referente aos padrões Web, tableless e seus benefícios.

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.193
No SlideShare
0
A partir de incorporações
0
Número de incorporações
58
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Benef&iacute;cios dos WebStandards

  1. 1. 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
  2. 2. CENTRO FEDERAL DE EDUCAÇÃO TECNOLÓGICA DE GOIÁS <ul><li>COORDENAÇÃO DA ÁREA DE TELECOMUNICAÇÕES </li></ul><ul><li>CURSO SUPERIOR DE TECNOLOGIA EM REDES DE COMUNICAÇÃO </li></ul><ul><li>Banca Examinadora </li></ul><ul><li>Prof. M.Sc. João Batista José Pereira </li></ul><ul><li>Prof. M.Sc. Wagner Bento Coelho </li></ul><ul><li>Tecgº. Fábio da Silva Marques </li></ul>
  3. 3. Definições – Internet, WWW e W3C <ul><li>Internet </li></ul><ul><ul><li>Diversas redes de computadores que se comunicam basicamente através dos protocolos TCP/IP </li></ul></ul><ul><li>WWW </li></ul><ul><ul><li>Um dos serviços oferecidos pela da Internet. Usa hipertexto para ligar diversos documentos </li></ul></ul><ul><li>W3C - World Wide Web Consortium </li></ul><ul><ul><li>Prover padrões e interoperabilidade na Web. </li></ul></ul>
  4. 4. Definições – Linguagem de marcação <ul><li>Linguagem de marcação </li></ul><ul><ul><li>Linguagens utilizadas para marcar a formatação ou o significado de blocos de texto. Ex.: RTF, Tex, HTML </li></ul></ul><ul><li>RTF </li></ul><ul><ul><li> Linha negrito0par fs32 Linha fonte 16fs20par </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li><b>Linha negrito</b><br> <font size=16>Linha fonte 16</font><br> </li></ul></ul>
  5. 5. Definições - Hipertexto <ul><li>Hipertexto </li></ul><ul><ul><li>Sistema para visualização de informação onde os documentos possuem ligações (chamados links ou hiperlinks) que permitem chegar a outros documentos. </li></ul></ul>
  6. 6. Definições - HTML <ul><li>HTML – Hipertext Markup Language </li></ul><ul><ul><li>Linguagem de marcação de hipertexto </li></ul></ul><ul><ul><li>Mundialmente reconhecido como linguagem padrão na WWW </li></ul></ul><ul><ul><li>A marcação dos blocos de texto se dá através de tags e atributos inseridos no texto. </li></ul></ul><ul><ul><li>Derivado do SGML (Standard Generalized Markup Language - Norma Padrão para Linguagem de Marcação) </li></ul></ul>
  7. 7. Definições - HTML <ul><li>Tags </li></ul><ul><ul><li>São instruções para marcar determinado bloco do texto. </li></ul></ul><ul><ul><li>Se diferenciam do restante do texto por estarem contidas entre sinais de menor (<) e maior (>). </li></ul></ul><ul><li>Atributos </li></ul><ul><ul><li>São características adicionadas as tags de forma a auxiliar e complementar a marcação do texto. </li></ul></ul>
  8. 8. Definições - HTML <ul><li>Exemplo de uma marcação HTML </li></ul><ul><li><body> <h1> HTML - Hipertext Markup Language </h1> <p><strong> HTML </strong> (acr &ocirc; nimo para a express &atilde; o inglesa <i> HyperText Markup Language </i> , que significa <i> Linguagem de Formata &ccedil;&atilde; o de Hipertexto </i> ) &eacute; uma <a href=&quot; /Linguagem.htm &quot; title=&quot; Linguagem de marcação &quot;> linguagem de marca &ccedil;&atilde; o </a> utilizada para produzir p &aacute; ginas na Web. </p> </body> </li></ul>
  9. 9. Definições - XML <ul><li>XML - Extensible Markup Language - Linguagem de Marcação de Extensível </li></ul><ul><li>Linguagem mais simples e flexível derivada da SGML </li></ul><ul><li>Permite a criação de tags </li></ul><ul><li>Possui estrutura rígida não permitindo erros. </li></ul><ul><li>Mais fácil de analisar e processar. </li></ul>
  10. 10. Definições - CSS <ul><li>CSS - Cascading Style Sheets </li></ul><ul><ul><li>Conjunto de declarações que permite adicionar atributos visuais (cores, tamanho, posição, etc) a elementos de marcação. </li></ul></ul><ul><ul><li>Vantagem principal: poder ser colocado separadamente dos elementos de marcação. </li></ul></ul><ul><ul><li>p { margin : 0 ; background-color : #FF0000 ;} .menu li, .menu a { color : #F00000 ; } </li></ul></ul>
  11. 11. Histórico - Hipertexto <ul><li>1945: Vannevar Bush descreve o Memex para seguir ligações entre microfilme </li></ul><ul><li>Década de 1960: Douglas Engelbart - oNLine System (NLS) – criação do mouse. </li></ul><ul><li>1963/65: Ted Nelson utiliza os termos hipertexto e hipermidia – Xanadu </li></ul><ul><li>1980: Tim Berners Lee propõe o hipertexto ao CERN e desenvolve o ENQUIRE </li></ul>
  12. 12. Histórico - Hipertexto <ul><li>1987: Bill Atkinson - HyperCard para Apple – hipertexto para aplicações gráficas </li></ul><ul><li>1989: CERN – Maior rede da Internet na Europa. Berners Lee escreve uma proposta dos benefícios do hipertexto </li></ul><ul><li>1990: Berners Lee e Robert Cailliau desenvolvem um leitor e editor de hipertexto ( World Wide Web ). </li></ul><ul><li>1990: Protocolo HTTP 0.9 e HTTPD </li></ul>
  13. 13. Histórico – World Wide Web <ul><li>1991: WWW-Talk e o crescimento da WWW </li></ul><ul><li>Novos servidores e navegadores: Cello, Viola, MidasWWW </li></ul><ul><li>1993: Mosaic – modo gráfico – disponível para X, Windows e Macintosh </li></ul><ul><li>1993: Dave Ragget: “HTML+” (tabelas, formulários, tags de fechamento) </li></ul><ul><li>Nov/1993: Desenvolvedores do Mosaic lançam o Netscape e prosseguem criando as próprias tags </li></ul>
  14. 14. Histórico – Padronização do HTML <ul><li>1994: CERN - Primeira conferência WWW. </li></ul><ul><li>Desde o Mosaic, navegadores acionavam suas próprias tags sem padronização. </li></ul><ul><li>Jun/1994: Dan Connolly une todas as tags e cria o HTML 2 (versão final em set/1995) </li></ul><ul><li>Out/1994: W3C fundado. Tim Berners Lee é o diretor. </li></ul>
  15. 15. Histórico – Padronização do HTML <ul><li>Mar/1995: Dave Ragget publica rascunho do HTML 3. </li></ul><ul><li>HTML 3 exibe uma alternativa às tags visuais: CSS - tag STYLE e o atributo CLASS </li></ul><ul><li>1995: Tabelas usadas para organizar visualmente uma página </li></ul><ul><li>Navegadores continuam sem respeitar os padrões </li></ul>
  16. 16. Histórico – Guerra dos Browsers <ul><li>1995: Lançado o MS Internet Explorer </li></ul><ul><li>Netscape e IE (Internet Explorer) criam funcionalidades fora dos padrões para mostrar superioridade </li></ul><ul><li>1995: IE é distribuido com o MS Windows 95, posteriormente é embutido ao Windows 98. </li></ul><ul><li>Fev/1998: Código do Netscape liberado (mozilla.org) </li></ul><ul><li>Nov/1998: Netscape inicia seu declínio e é vendido para AOL </li></ul>
  17. 17. Histórico - HTML <ul><li>Fev/1998: XML criado </li></ul><ul><li>Abr/1998: HTML 4. W3C recomenda CSS e o uso de novos atributos para portadores de necessidades especiais. </li></ul><ul><li>1998: Grupo WaSP (Web Standards Project) formado </li></ul><ul><li>Ago/1998: lançado revisão HTML 4.01 (atual) </li></ul><ul><li>Jan/2000: XML + HTML = XHTML </li></ul>
  18. 18. XHTML <ul><li>XHTML </li></ul><ul><ul><li>Reformulação dos 3 tipos de HTML 4.01 de acordo com as regras do XML. </li></ul></ul><ul><ul><ul><li>Transitional, Frameset e Strict </li></ul></ul></ul><ul><ul><li>Busca ser compatível com aplicações para HTML 4 (diretrizes de compatibilidade). </li></ul></ul><ul><ul><li>Compatível com aplicações e bibliotecas para XML. </li></ul></ul><ul><ul><li>Foco na marcação do conteúdo. </li></ul></ul>
  19. 19. XHTML – Principais diferenças com HTML 4 <ul><li>Obrigatória a declaração do DOCTYPE </li></ul><ul><li>Obrigatórios: html (raiz), head, title e body </li></ul><ul><li>Atributo lang, xml:lang e alt(imagens) obrigatórios </li></ul><ul><li>Tags aninhadas corretamente. Tags de fechamento obrigatórias </li></ul><ul><li>Atributos em minúscula e entre aspas </li></ul><ul><li>&quot;E&quot; comercial (&) deve ser substituído pela entidade &amp </li></ul><ul><li>Conteúdo dos elem. script e style entre CDATA ou em arquivos externos </li></ul>
  20. 20. Desenvolvimento com Tabelas <ul><li>Popularização da Web: tornar páginas atrativas. </li></ul><ul><li>Tags de efeitos visuais, animações em excesso, nova disposição visual, javascript e applets. </li></ul><ul><li>Apenas o visual passou a ser importante, independente da qualidade do código fonte. </li></ul><ul><li>Para montar o layout facilmente, o uso de tabelas se popularizou. </li></ul><ul><li>Editores WYSIWYG </li></ul>
  21. 21. Desenvolvimento com Tabelas <ul><li>Conseqüências: </li></ul><ul><ul><li>Tag table e outras usadas indevidamente </li></ul></ul><ul><ul><li>Complexidade e tamanho do código fonte </li></ul></ul><ul><ul><li>Excesso de tags em detrimento do conteúdo </li></ul></ul><ul><ul><li>Código sem modularização </li></ul></ul><ul><ul><li>Dificuldade de alteração do código e imagens </li></ul></ul><ul><ul><li>Dificuldade para leitores de tela </li></ul></ul><ul><ul><li>Dificuldade para navegadores limitados </li></ul></ul>
  22. 22. Solução tableless e padrões Web <ul><li>Inicio do ano 2000 </li></ul><ul><li>Respeito aos padrões divulgados pelo W3C </li></ul><ul><li>Acesso universal </li></ul><ul><li>Separação entre: </li></ul><ul><ul><li>Conteúdo – (X)HTML </li></ul></ul><ul><ul><li>Apresentação visual – CSS </li></ul></ul><ul><ul><li>Comportamento – ECMAScript/JavaScript </li></ul></ul>
  23. 23. Tableless e padrões Web <ul><li>Respeito aos padrões da W3C: </li></ul><ul><ul><li>Estrutura correta do documento </li></ul></ul><ul><ul><li>Tags e linguagens de apoio nos padrões. </li></ul></ul><ul><ul><li>Semântica </li></ul></ul><ul><ul><ul><li>Ex.: <h1> para títulos ao invés de tags visuais como <font size=7> </li></ul></ul></ul><ul><ul><li>Facilidade no entendimento do código. </li></ul></ul><ul><ul><li>Diminuição da quantidade de bytes </li></ul></ul>
  24. 24. Tableless e padrões Web <ul><li>Acesso universal </li></ul><ul><ul><li>Acesso a qualquer pessoa independente de necessidades especiais </li></ul></ul><ul><ul><li>Diversidade de dispositivos, navegadores e configurações </li></ul></ul><ul><ul><li>Lei Federal de Acessibilidade (no. 10 098, 19/dez/2000) – prazo vencido 02/12/06 </li></ul></ul><ul><ul><li>W3C: WCAGs (Web Content Accessibility Guidelines - Diretrizes de Acessibilidade ao Conteúdo da Web) </li></ul></ul>
  25. 25. Tableless e padrões Web <ul><li>Separação entre conteúdo, visual e comportamento (modularidade) </li></ul><ul><ul><li>Eficiente separação de tarefas (editor de conteúdo, designer e programador). </li></ul></ul><ul><ul><li>Organização e facilidade de alteração. </li></ul></ul><ul><ul><li>Facilidade na programação server-side. </li></ul></ul><ul><ul><li>Melhor indexação por motores de busca </li></ul></ul><ul><ul><li>Cache e economia de banda </li></ul></ul>
  26. 26. Desenvolvimento <ul><li>Desenvolvimento - Ordem de importância: conteúdo, visual, comportamento. </li></ul><ul><li>Conteúdo – (X)HTML </li></ul><ul><ul><li>Escolher Doctype correto </li></ul></ul><ul><ul><li>Evitar tags e atributos visuais </li></ul></ul><ul><ul><li>Dividir em blocos </li></ul></ul><ul><ul><li>Definir tags corretas para dar significação </li></ul></ul><ul><ul><li>Textos mais importantes no topo </li></ul></ul>
  27. 27. Desenvolvimento <ul><li>Apresentação Visual (CSS) </li></ul><ul><ul><li>Liberdade para planejar o layout </li></ul></ul><ul><ul><li>Facilidade no redesign </li></ul></ul><ul><ul><li>CSS Zen Garden </li></ul></ul><ul><ul><li>Facilidade para diferentes tipos de midia </li></ul></ul><ul><ul><li>Buscar deixar o CSS em arquivo externo </li></ul></ul><ul><ul><li>Buscar generalização nas declarações </li></ul></ul><ul><ul><li>Evitar Hacks </li></ul></ul>
  28. 28. Desenvolvimento <ul><li>Comportamento (JavaScript) </li></ul><ul><ul><li>Tratamento de eventos e ações automáticas </li></ul></ul><ul><ul><li>Acesso aos elementos XML via DOM </li></ul></ul><ul><ul><li>DOM: organização hierárquica de elementos, propriedades e métodos </li></ul></ul><ul><ul><li>Deve ser tratado como incremento. Página funcional independente do JavaScript. </li></ul></ul><ul><ul><li>Buscar manter separado do XHTML </li></ul></ul><ul><ul><li>Diferenças nos navegadores </li></ul></ul>
  29. 29. Comparação – Tableless X Não-Tableless <ul><li>Foram feitas as conversões Tableless de 2 páginas: União Mundial dos Estudantes – UME e CEFET-GO </li></ul><ul><li>Após a conversão, testes de: </li></ul><ul><ul><li>validação de sintaxe </li></ul></ul><ul><ul><li>Acessibilidade, diferentes mídias e dispositivos </li></ul></ul><ul><ul><li>complexidade e organização do código </li></ul></ul><ul><ul><li>visualização em navegadores comuns </li></ul></ul><ul><ul><li>visualização sem facilidades como css, imagens e javascript </li></ul></ul><ul><ul><li>tamanho dos códigos </li></ul></ul>
  30. 30. Comparação <ul><li>Sintaxe </li></ul><ul><ul><li>Versão tableless com sintaxes válidas e bem formadas. </li></ul></ul><ul><ul><li>Páginas podem ser interpretadas por aplicativos XML e bibliotecas XML de várias linguagens. </li></ul></ul><ul><li>Acessibilidade humana </li></ul><ul><ul><li>Teste dasilva.org.br: páginas tableless mais acessíveis. </li></ul></ul><ul><ul><li>Links e imagens mais acessíveis </li></ul></ul>
  31. 31. Comparação <ul><li>Organização do código fonte </li></ul><ul><ul><li>Versões tableless bem mais organizadas </li></ul></ul><ul><li>Teste em navegadores padrão (IE, FF e OP) </li></ul><ul><ul><li>Poucas diferenças, porém páginas não-tableless apresentaram alguns erros. </li></ul></ul><ul><li>Sem suporte a JavaScript </li></ul><ul><ul><li>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) </li></ul></ul>
  32. 32. Comparação <ul><li>Sem CSS </li></ul><ul><ul><li>UME: versão tableless mais acessível e organizada </li></ul></ul><ul><ul><li>CEFET não-tableless: organizado e acessível mas sem delimitação entre seções. </li></ul></ul><ul><ul><li>CEFET tableless: topo pior, conteúdo acessível e seções delimitadas </li></ul></ul><ul><li>Sem imagens </li></ul><ul><ul><li>Versões não-tableless: imagens essenciais sem texto alternativo. Conteúdo e navegação bastante comprometidos ao contrário das versões Tableless </li></ul></ul>
  33. 33. Comparação <ul><li>Sem suporte a cores </li></ul><ul><ul><li>Todas as versões satisfatórias </li></ul></ul><ul><li>Navegadores de texto </li></ul><ul><ul><li>UME Não-tableless: Conteúdo organizado. Sem texto alternativo para imagens </li></ul></ul><ul><ul><li>CEFET Não-tableless: Desorganização. Conteúdo e navegação comprometidos. </li></ul></ul><ul><ul><li>Tableless: Navegação e conteúdo organizados. </li></ul></ul>
  34. 34. Comparação <ul><li>Visualização de impressão </li></ul><ul><ul><li>Não-tableless: satisfatória apesar de pequenas quebras de layout </li></ul></ul><ul><ul><li>Tableless: impressão otimizada (media print) inclusive com possibilidade de economia de tinta. </li></ul></ul><ul><li>Dispositivos portáteis </li></ul><ul><ul><li>Não-tableless: Partes desorganizadas, imagens desnecessárias. Textos e navegação não prejudicados. </li></ul></ul><ul><ul><li>Tableless: Agradável visualmente, imagens otimizadas, conteúdo e navegação beneficiados. </li></ul></ul>
  35. 35. Comparação <ul><li>Tamanho do código fonte (em Kbytes) </li></ul>  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
  36. 36. Comparação <ul><li>Exemplos de redução no consumo de banda </li></ul><ul><ul><li>Site imasters.com.br : de 445,05 GB (mar/06) para 229,43 GB (Jun/06) mensais. </li></ul></ul><ul><ul><li>Site espn.com : 61 terabytes/mês; </li></ul></ul><ul><li>Simulação consumo de banda semanal: </li></ul><ul><ul><li>500 visualizações página inicial </li></ul></ul><ul><ul><li>1000 visualizações de páginas secundárias </li></ul></ul><ul><ul><li>50% destes são usuários de retorno </li></ul></ul><ul><ul><li>Usuários de retorno não carregam imagens, arquivos CSS, nem JavaScript (cache). </li></ul></ul>
  37. 37. Comparação <ul><li>Simulação consumo de banda (em Kbytes): </li></ul>  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
  38. 38. Vantagens percebidas <ul><li>Mais acessível para portadores de dificuldades motoras ou visuais; </li></ul><ul><li>Mais acessível a outros dispositivos, navegadores e configurações; </li></ul><ul><li>Compatibilidade com aplicações XML; </li></ul><ul><li>Desenvolvimento modularizado; </li></ul><ul><li>Facilidade de alteração e manutenção; </li></ul><ul><li>Facilidade na programação server-side; </li></ul><ul><li>Código organizado; </li></ul><ul><li>Melhor posicionamento em motores de busca; </li></ul><ul><li>Economia de banda; </li></ul><ul><li>Maior velocidade de carregamento; </li></ul>
  39. 39. Dificuldades à adoção do método <ul><li>Navegadores </li></ul><ul><ul><li>Padrões mal implementados e desrespeitados </li></ul></ul><ul><ul><li>Especificações proprietárias </li></ul></ul><ul><li>Editores visuais </li></ul><ul><ul><li>Comodidade e desconhecimento do código fonte </li></ul></ul><ul><li>Dificuldades de aprendizado e cultura </li></ul><ul><ul><li>Domínio de novas técnicas e uma nova linguagem </li></ul></ul><ul><ul><li>Cultura que não prioriza a qualidade do código, mas o resultado visual em apenas um (1) navegador. </li></ul></ul>
  40. 40. Conclusão <ul><li>O desenvolvimento seguindo os padrões Web traz vantagens: </li></ul><ul><ul><li>ao processo de desenvolvimento </li></ul></ul><ul><ul><li>aos visitantes </li></ul></ul><ul><ul><li>econômicos </li></ul></ul><ul><ul><li>à visibilidade do site </li></ul></ul><ul><li>O desenvolvimento seguindo os padrões Web busca resgatar a universalidade da Web. </li></ul>
  41. 41. Sugestão de trabalhos <ul><li>Usabilidade e acessibilidade em páginas Web; </li></ul><ul><li>SEO (Otimização para motores de busca); </li></ul><ul><li>Diferenças entre os tipos e versões de XHTML; </li></ul><ul><li>Servindo XHTML como XML; </li></ul><ul><li>A melhor solução para disp. móveis: XHTML x WML; </li></ul><ul><li>O XHTML para apresentações Web: HTML Slidy </li></ul><ul><li>Tecnologias de indicação: feeds ATOM e RSS; </li></ul><ul><li>Potencialidades do JavaScript: aplicações Web; </li></ul><ul><li>O fenômeno Web 2.0; </li></ul><ul><li>AJAX – Requisições assíncronas em páginas Web. </li></ul>

×