Successfully reported this slideshow.

Web Standards

1,706 views

Published on

Apresentação sobre padrões web e tableless. As boas práticas do Web-Design

Published in: Design, Technology
  • Be the first to comment

Web Standards

  1. 2. Noções de web semântica, acessibilidade, css e tableless.
  2. 3. Padrões <ul><li>Pra quê padronizar? </li></ul>
  3. 4. <ul><li>Weaving the dream of Web </li></ul>Padrões <ul><li>O sonho da grande teia mundial; </li></ul><ul><li>A dor de cabeça do inventor; </li></ul><ul><li>Seu contra-ataque; </li></ul><ul><li>A realidade. </li></ul>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.”
  4. 5. Padrões
  5. 7. Padrões O lixo na Web
  6. 8. <ul><li>WaSP </li></ul>Padrões <ul><li>Foi por esse período (1998) que surgiu o WaSP (Web Standards Project), que é um movimento para difundir os Web Standards. </li></ul><ul><ul><li>Nesta época de crescimento avassalador, a Web necessita de orientação para desenvolver seu pleno potencial . </li></ul></ul><ul><li>Esse grupo teve um papel muito importante na divulgação dos Padrões. </li></ul><ul><li>Hoje, o desenvolvedor tem mais liberdade de desenvolvimento do que a 5 anos atrás. </li></ul>
  7. 9. Semântica na Web.
  8. 10. Semântica “ 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. 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.
  9. 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>
  10. 12. Semântica Sim!!! Table não é pecado! Desde que usada semanticamente.
  11. 13. Semântica Exemplos de código semântico Receita de “Gororoba” Tabela de animais http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#semantico
  12. 14. Acessibilidade
  13. 15. Acessibilidade Pra quem? <ul><li>Pessoas com deficiência visual; </li></ul><ul><li>Pessoas com deficiência motora; </li></ul><ul><li>Pessoas com deficiência de aprendizado; </li></ul><ul><li>Computadores com conexão lenta; </li></ul><ul><li>Dispositivos móveis; </li></ul><ul><li>TV digital; </li></ul><ul><li>Futuras plataformas; </li></ul><ul><li>Você e seu computador </li></ul>
  14. 16. Acessibilidade Outros dispositivos <ul><li>PDA’s; </li></ul><ul><li>Celulares; </li></ul><ul><li>Smartphones; </li></ul><ul><li>TV digital </li></ul><ul><li>Diferentes browsers / plataformas </li></ul><ul><li>Futuras plataformas. </li></ul>
  15. 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.
  16. 18. Acessibilidade Como fazer? <ul><li>www.acessibilidadelegal.com </li></ul><ul><li>( repositório completo sobre acessibilidade para web ) </li></ul><ul><li>www.dasilva.org </li></ul><ul><li>(validador de código-fonte) </li></ul>
  17. 19. Práticas de desenvolvimento para Web.
  18. 20. Práticas de desenvolvimento Qual é o seu papel na equipe? <ul><li>Web-Designer* </li></ul><ul><li>Programador* </li></ul><ul><li>Editor de conteúdo </li></ul>
  19. 23. Práticas de desenvolvimento <ul><li>Web-Designer Mexe no código e bagunça a programação </li></ul><ul><li>Programador Mexe no código e detona o layout </li></ul><ul><li>Editor de conteúdo Compra a pipoca e assiste à luta </li></ul>
  20. 24. Tableless
  21. 25. Tableless Como funciona? CONTEÚDO ESTILO COMPORTAMENTO
  22. 26. Tableless Como funciona? xHTML CSS JAVASCRIPT, PHP, ASP, .NET...
  23. 27. Tableless Vantagens <ul><li>Código limpo e semântico; </li></ul><ul><li>Economia de banda; (ESPN, Wired) ESPN – 170 TB por ano Wired – 54% de redução nas páginas </li></ul><ul><li>Facilidade do trabalho em equipe; Fim da briga Designer vs Programador </li></ul><ul><li>Facilidade de manutenção; </li></ul><ul><li>Maior acessibilidade; </li></ul><ul><li>Outros dispositivos (media type); </li></ul>
  24. 28. Tableless Comparativo <ul><li>Exemplo 1 Layout COM tabelas: </li></ul><ul><li>Exemplo 2 Layout SEM tabelas </li></ul>http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#comparativo
  25. 29. Tableless Exemplos <ul><li>Globo esporte; </li></ul><ul><li>HSBC – Brasil; </li></ul><ul><li>Unibanco; </li></ul><ul><li>Adobe; </li></ul><ul><li>Microsoft !!! </li></ul>
  26. 30. Tableless Nem tudo são flores... <ul><li>Tempo de aprendizado; </li></ul><ul><li>Internet Explorer; </li></ul><ul><li>Resistência de desenvolvedores e chefias; </li></ul><ul><li>A desculpa da criatividade. </li></ul>
  27. 31. Tableless Tableless mina a criatividade? <ul><li>Css Zen Garden </li></ul>http://www.alanvasconcelos.com/palestras/webstandards/exemplos.html#zengarden
  28. 32. Tableless O Futuro da Web <ul><li>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=&quot;3&quot;> ERRADO = <td rowspan=3> </li></ul><ul><li>Media Types (screen, tv, print, braille, handheld...) </li></ul><ul><li>XML, Ontologia, agentes </li></ul>
  29. 33. HEIN?!?!? ?
  30. 34. Tableless Comunidade
  31. 35. VALEU! ALAN VASCONCELOS – www.alanvasconcelos.com

×