Baixado 83 vezes
Carregado porAlan Vasconcelos
Web Standards
O documento discute os padrões da web, incluindo semântica, acessibilidade, CSS e desenvolvimento tableless. Apresenta a visão original de Tim Berners-Lee para a web como um espaço compartilhado para informação, e como os desenvolvedores ajudaram a tornar essa visão realidade através do uso de padrões. Também discute a importância da acessibilidade e do código semântico para diferentes dispositivos e pessoas.
Web Standards
- 1.
- 2. Noções de websemântica, acessibilidade, css e tableless.
- 3. Padrões Pra quêpadronizar?
- 4. Weaving the dreamof Web Padrões O sonho da grande teia mundial; A dor de cabeça do inventor; Seu contra-ataque; A realidade. Tim Berners-Lee – o criador do conceito de Web “ Sonho para minha invenção, a World Wide Web, um espaço de uso comunitário onde compartilha-se informações de trabalho, lazer e socialização ( The World Wide Web, A very short personal history ). Como desenvolvedores Web criando sites corporativos, sociais e educacionais, nós transformamos este sonho em realidade.”
- 5.
- 6.
- 7. Padrões O lixona Web
- 8. WaSP Padrões Foipor esse período (1998) que surgiu o WaSP (Web Standards Project), que é um movimento para difundir os Web Standards. Nesta época de crescimento avassalador, a Web necessita de orientação para desenvolver seu pleno potencial . Esse grupo teve um papel muito importante na divulgação dos Padrões. Hoje, o desenvolvedor tem mais liberdade de desenvolvimento do que a 5 anos atrás.
- 9.
- 10. Semântica “ Sonhopara minha invenção, a World Wide Web, um espaço de uso comunitário onde compartilha-se informações de trabalho, lazer e socialização. Como desenvolvedores Web criando sites corporativos, sociais e educacionais, nós transformamos este sonho em realidade.” Tim Berners-Lee Em geral, a semântica (do grego semantikos, derivado de sema, sinal) refere-se ao estudo do significado, em todos os sentidos do termo. Wikipedia Uma rede semântica é uma rede que serve para interligar significados de palavras. A rede semântica, ou semantic web, foi proposta por Tim Berners-Lee como génese para a World Wide Web. Neste âmbito, tem como finalidade a de conseguir atribuir um significado aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador.
- 11. Semântica O que é um código semântico? TABLE??? Títulos: <h1> Seu Título </h1> Parágrafos: <p> Texto do parágrafo </p> Listas: <ul> Item da lista </ul> Tabelas: <table> Dados da tabela </table>
- 12. Semântica Sim!!! Tablenão é pecado! Desde que usada semanticamente.
- 13. Semântica Exemplos decódigo semântico Receita de “Gororoba” Tabela de animais http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#semantico
- 14.
- 15. Acessibilidade Pra quem?Pessoas com deficiência visual; Pessoas com deficiência motora; Pessoas com deficiência de aprendizado; Computadores com conexão lenta; Dispositivos móveis; TV digital; Futuras plataformas; Você e seu computador
- 16. Acessibilidade Outros dispositivosPDA’s; Celulares; Smartphones; TV digital Diferentes browsers / plataformas Futuras plataformas.
- 17. Acessibilidade Agora élei! Decreto-lei 5296 de 2 de dezembro de 2004 Capítulo VI Do Acesso à Informação e Comunicação Art. 47. No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual, garantindo-lhes o pleno acesso às informações disponíveis.
- 18. Acessibilidade Como fazer?www.acessibilidadelegal.com ( repositório completo sobre acessibilidade para web ) www.dasilva.org (validador de código-fonte)
- 19. Práticas de desenvolvimento para Web.
- 20. Práticas de desenvolvimentoQual é o seu papel na equipe? Web-Designer* Programador* Editor de conteúdo
- 21.
- 22.
- 23. Práticas de desenvolvimentoWeb-Designer Mexe no código e bagunça a programação Programador Mexe no código e detona o layout Editor de conteúdo Compra a pipoca e assiste à luta
- 24.
- 25. Tableless Como funciona?CONTEÚDO ESTILO COMPORTAMENTO
- 26. Tableless Como funciona?xHTML CSS JAVASCRIPT, PHP, ASP, .NET...
- 27. Tableless Vantagens Códigolimpo e semântico; Economia de banda; (ESPN, Wired) ESPN – 170 TB por ano Wired – 54% de redução nas páginas Facilidade do trabalho em equipe; Fim da briga Designer vs Programador Facilidade de manutenção; Maior acessibilidade; Outros dispositivos (media type);
- 28. Tableless Comparativo Exemplo1 Layout COM tabelas: Exemplo 2 Layout SEM tabelas http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#comparativo
- 29. Tableless Exemplos Globoesporte; HSBC – Brasil; Unibanco; Adobe; Microsoft !!!
- 30. Tableless Nem tudosão flores... Tempo de aprendizado; Internet Explorer; Resistência de desenvolvedores e chefias; A desculpa da criatividade.
- 31. Tableless Tableless minaa criatividade? Css Zen Garden http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#zengarden
- 32. Tableless O Futuroda Web XHTML 1.0 Elementos “bem formados” CERTO = <p>aqui, um parágrafo em <em>negrito</em>.</p> ERRADO = <p>aqui, um parágrafo em<em>negrito.</p></em> Tag’s de fechamento OBRIGATÓRIAS (inclusive as vazias) CERTO = <br />, <hr /> ERRADO = <br>, <hr> Os valores de atributos devem estar entre aspas CERTO = <td rowspan="3"> ERRADO = <td rowspan=3> Media Types (screen, tv, print, braille, handheld...) XML, Ontologia, agentes
- 33.
- 34.
- 35. VALEU! ALAN VASCONCELOS– www.alanvasconcelos.com
Notas do Editor
- #4 A importância da padronização na nossa vida, e na nossa sociedade.
- #6 O World Wide Web Consortium (W3C) é um consórcio de âmbito internacional dedicado a &quot;conduzir a Web ao seu pleno potencial&quot;. É dirigida por Tim Berners-Lee, o inventor da Web. Fundado em 1994, o W3C tem mais de 400 organizações membro incluindo aí a Microsoft, America Online (proprietária da Netscape Communications), Apple Computer, Adobe, Macromedia, Sun Microsystems, e uma vasta gama de fabricantes de hardware e software, fornecedores de conteúdos, instituições acadêmicas e companhias de telecomunicações. O Consórcio está hospedado em três instituições de pesquisas - - MIT nos EUA, INRIA na Europa e Keio University no Japão .
- #7 O W3C criou linguagens básicas de publicação de conteúdo para Web como o HTML, XHTML, CSS, SVG, XML, XSLT, entre vários outros. Por este tempo, deu- se início a Guerra dos Browsers, onde o Internet Explorer e o Netscape travavam uma briga para conseguir mais adeptos. Durante essa guerra, as linguagens do W3C eram ainda rascunhos. Então, os browsers não tinham um guia completo para se basearem e lançarem seus browsers com suporte a esses Padrões. Resultou que os fabricantes de browsers criaram seus próprios padrões. Problema para o desenvolvedor e para o usuário.
- #8 Os geradores de código e as tabelas As tecnologias proprietárias chamadas de “inovação tecnológica” FrontPage x Dreanweaver Photoshop x Fireworks Tabelas... E a grande bagunça...
- #9 Foi por esse período (1998) que surgiu o WaSP (Web Standards Project), que é um movimento para difundir os Web Standards. Esse grupo teve um papel muito importante na divulgação dos Padrões. Eles negociaram com os fabricantes dos principais browsers, convencendo-os de fazerem browsers mais compatíveis com os Padrões. E isso deu certo… Mas, nesta época de crescimento avassalador, a Web necessita de orientação para desenvolver seu pleno potencial. As Web standards são estas orientações. As standards asseguram que todos tenham acesso às informações e também tornam o processo de desenvolvimento Web mais rápido e mais agradável. Tanto que temos o Opera, Mozilla, e vários outros por aí. Hoje, o desenvolvedor tem mais liberdade de desenvolvimento do que a 5 anos atrás. Hoje, a visão dos fabricantes de browser mudou completamente, e se continuar assim, teremos uma web melhor em muito pouco tempo.
- #11 A Web semântica é uma extensão da Web actual, que permitirá aos computadores e humanos trabalharem em cooperação. [1] . A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador. A idéia da Web Semântica surgiu em 2001, quando Tim Berners-Lee , James Hendler e Ora Lassila publicaram um artigo na revista Scientific American , intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades.”
- #12 A Web semântica é uma extensão da Web actual, que permitirá aos computadores e humanos trabalharem em cooperação. [1] . A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador. A idéia da Web Semântica surgiu em 2001, quando Tim Berners-Lee , James Hendler e Ora Lassila publicaram um artigo na revista Scientific American , intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades.”
- #13 A Web semântica é uma extensão da Web actual, que permitirá aos computadores e humanos trabalharem em cooperação. [1] . A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador. A idéia da Web Semântica surgiu em 2001, quando Tim Berners-Lee , James Hendler e Ora Lassila publicaram um artigo na revista Scientific American , intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades.”
- #14 A Web semântica é uma extensão da Web actual, que permitirá aos computadores e humanos trabalharem em cooperação. [1] . A Web semântica interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja perceptível tanto pelo humano como pelo computador. A idéia da Web Semântica surgiu em 2001, quando Tim Berners-Lee , James Hendler e Ora Lassila publicaram um artigo na revista Scientific American , intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades.”
- #15 Quando ouvimos falar de sites acessíveis, logo imaginamos sites que podem ser acessados por pessoas com necessidades especiais. Isso é um grande erro que não podemos cometer. Ao termos essa atitude, negligenciamos uma série de outros fatores que são extremamente importante para a boa acessibilidade do site.
- #16 Vale lembrar que estes usuários podem não ser necessariamente humanos; mecanismos de busca como o Google, por exemplo, cujo robô acessa diretamente o conteúdo das páginas na Internet, navegam com muito mais eficácia em Web sites cuja construção foi cuidadosa no sentido de garantir boa acessibilidade, permitindo uma indexação muito mais coerente das informações contidas nestes documentos, o que proporcionará uma pesquisa muito mais simples e objetiva por parte de quem se utiliza destas ferramentas para encontrar a informação que procura.
- #17 A Abordagem dos padrões é extremamente importante para que haja um nível de compatibilidade aceitável, não só entre navegadores de uma mesma plataforma, mas principalmente, entre navegadores de outros dispositivos. Usando metodologia antiga, site fatalmente necessita de uma versão para handhelds. Já um site que foi construído baseando-se nos Web Standards, fica melhor acessível mesmo não havendo uma versão especifica para esses dispositivos.
- #18 A lei federal de acessibilidade (Lei no. 10 098, de 19 de dezembro de 2000), que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida e dá outras providências.
- #19 Existem robôs que avaliam o nível de acessibililidade tem seu site. Eles te dão sugestões e te mostram alguns aspectos que devem ser levados em consideração. As avaliações automáticas podem verificar aspectos da sintaxe da página, visto que quanto melhor em relação a este aspecto, melhor será interpretada pelos navegadores. Além disso, pode-se verificar a sintaxe de marcação e requisitos de acessibilidade, como ausência do “alt” em uma imagem. Outra forma de verificação é através da avaliação humana, que inclui testar a página em diversos navegadores, testar em diversas situações distintas (sem mouse, sem teclado, sem som, etc), utilizar um navegador textual ou leitores de telas, entre várias outras. Outras abordagens incluem a presença de usuários com algum tipo de deficiência ou a criação de cenários específicos. Ainda como forma de avaliação, temos os checklists que possuem uma tabela de diretrizes que devem ser analisadas se estão sendo satisfeitas.
- #21 Existem robôs que avaliam o nível de acessibililidade tem seu site. Eles te dão sugestões e te mostram alguns aspectos que devem ser levados em consideração. As avaliações automáticas podem verificar aspectos da sintaxe da página, visto que quanto melhor em relação a este aspecto, melhor será interpretada pelos navegadores. Além disso, pode-se verificar a sintaxe de marcação e requisitos de acessibilidade, como ausência do “alt” em uma imagem. Outra forma de verificação é através da avaliação humana, que inclui testar a página em diversos navegadores, testar em diversas situações distintas (sem mouse, sem teclado, sem som, etc), utilizar um navegador textual ou leitores de telas, entre várias outras. Outras abordagens incluem a presença de usuários com algum tipo de deficiência ou a criação de cenários específicos. Ainda como forma de avaliação, temos os checklists que possuem uma tabela de diretrizes que devem ser analisadas se estão sendo satisfeitas.
- #25 O nome Tableless é um nome mais “publicitário” para se referir a sites que seguem os Padrões. Os sites Tableless não são construídos usando as famigeradas tables. Elas usam XHTML para apresentar a informação e as Folhas de Estilo (CSS) para formatar essa informação. Pelo motivo de as tables não serem usadas para a estruturação, essa metodologia se chama Tableless. Antes que você pense que as tables foram totalmente apagadas do mapa, eu explico: No movimento Web Standards, cada tag tem a sua função. Se você quer fazer um parágrafo, usa- se a tag <p>< /p>. Se quer fazer um título de primeiro nível, usa- se a tag <h1>< /h1>. Se você quer exibir dados tabulados, como por exemplo um calendário, ou ainda uma lista de produtos seguidos de nome, preço e tamanho, você usará as tables para exibir esses dados.
- #27 Dessa forma o designer, o programador e o responsável pelo conteúdo poderão trabalhar harmoniosamente. XHTML permite que as informações nontidas nele, podem ser importadas por qualquer outra base de dados. Muitas tags caíram em desuso e outras foram aperfeiçoadas. Exemplo dos frames <b></b> <i></i> e as tags vazias <hr> e br
- #28 ESPN – economia de 170 TB por ano Wired – redução de 54% do tamanho das páginas
- #32 Explicar o que é o CSS Zen Garden
- #33 XML, RDF e Ontologia O XML é uma linguagem flexível que permite que você crie suas próprias tags e estruturas. Já o RDF expressa o significado. O RDF é composto de triplas compostas por: sujeito, predicado e objeto. Além do RDF e do XML, existe outro componente importante: a ontologia. A ontologia é um documento que define formalmente a relação entre os termos. A ontologia serve para estabelecer um vocabulário comum e compartilhado. Com ele é possível a troca de informações entre os objetos. Existem outros componentes propostos para que esta Web Semântica se torne real, como Topic Maps, OWL, DAM, OIL, Notation3... No fim do artigo tem alguns links para quem quiser se aprofundar. Agentes Se as máquinas forem capazes de entender as páginas, surgirão programas que, conforme as nossas solicitações, poderão marcar consultas em nossos horários disponíveis, encontrar hotéis conforme a nossa preferência, e resolver problemas para nós. Estes programas serão os agentes. Um artigo escrito por Tim Berners-Lee exemplifica muito bem o que este agentes podem fazer. As possibilidades são inúmeras, por isto todo este esforço na criação da Web Semântica.
- #34 Dúvidas
- #35 Você não está sozinho