Your SlideShare is downloading. ×
0
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Formação Web Standards - Dia 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Formação Web Standards - Dia 1

414

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
414
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide






  • Suck.com, conte&#xFA;do na primeira p&#xE1;gina, script em Perl que contava os caracteres e inseria um <p>

  • Lan&#xE7;ar a discuss&#xE3;o entre XHTML e HTML
  • quirks mode causes bugs and is archaic and slow

  • N&#xE3;o devemos utilizar uma tag <h1> porque queremos que o conte&#xFA;do apare&#xE7;a &#x201C;grande&#x201D;, mas sim porque &#xE9; o t&#xED;tulo mais importante na p&#xE1;gina!

    Regra geral, classes s&#xE3;o para elementos reutiliz&#xE1;veis e ids para elementos &#xFA;nicos.
  • N&#xE3;o devemos utilizar uma tag <h1> porque queremos que o conte&#xFA;do apare&#xE7;a &#x201C;grande&#x201D;, mas sim porque &#xE9; o t&#xED;tulo mais importante na p&#xE1;gina!

    Regra geral, classes s&#xE3;o para elementos reutiliz&#xE1;veis e ids para elementos &#xFA;nicos.






  • O DOM &#xE9; uma API que descreve os objectos presentes numa p&#xE1;gina. &#xC9; o que permite ao Javascript seleccionar elementos numa p&#xE1;gina, inserir informa&#xE7;&#xE3;o dinamicamente, etc.

  • Graceful Degradation: Providenciar uma experi&#xEA;ncia de fallback caso haja um erro




  • Transcript

    • 1. DESIGN COM WEB STANDARDS Bruno Abrantes Monday, February 9, 2009
    • 2. SPAGHETTI CODE Monday, February 9, 2009
    • 3. SPAGHETTI CODE Layouts complexos, com tabelas dentro de tabelas, <font> tags e outras redundâncias duplicam ou triplicam a largura de banda necessária para uma página ser carregada. Sempre que surge um novo browser ou dispositivo, é provavelmente necessário criar mais uma versão da página. Monday, February 9, 2009
    • 4. WEB STANDARDS A partir de 2000, os browsers começaram a suportar tecnologias (CSS, XHTML, ECMAScript) desenvolvidas pela W3C e outros órgãos. Monday, February 9, 2009
    • 5. UTILIZAR STANDARDS Reduz o tempo de loading das páginas; Aumenta a acessibilidade, sem necessidade de sacrificar a estética e usabilidade; Simplifica eventuais redesigns. Monday, February 9, 2009
    • 6. UTILIZAR STANDARDS Permite suportar múltiplos browsers sem ter de criar múltiplas versões da página; Separa o conteúdo da apresentação; Assegura que as páginas continuarão a funcionar no futuro; Monday, February 9, 2009
    • 7. SUCK.COM 1996 Monday, February 9, 2009
    • 8. SEPARAÇÃO DE COMPONENTES Conteúdo Monday, February 9, 2009
    • 9. CONTEÚDO O elemento mais importante da página. É estruturado com recurso a (X)HTML. O conteúdo deve ser estruturado semanticamente. Monday, February 9, 2009
    • 10. DTD Um DTD, ou Document Type Definition, diz ao browser como fazer o render de um documento. http://www.w3.org/QA/2002/04/valid-dtd-list.html Não especificar um DTD ou fazê-lo de forma errada faz com que o browser utilize o quirks mode em vez do standards compliant mode no rendering da página. Monday, February 9, 2009
    • 11. XHTML 1.0 STRICT No SAPO Campus planeamos utilizar XHTML 1.0 Strict; Linguagem de transição entre o HTML e o XML; Elementos e atributos de apresentação e comportamento (FONT, BGCOLOR, TARGET) são deprecados. Monday, February 9, 2009
    • 12. SEMANTIC MARKUP Os dados são formatados de acordo com o seu significado. Assim, um título utiliza diferentes tags de Heading (<h1>, <h2>, <h3>, etc.) consoante a sua importância. Os nomes escolhidos para ids ou classes devem também revelar o significado ao invés do aspecto (class=”highlight” em vez de class=”yellow”). Monday, February 9, 2009
    • 13. SEMANTIC MARKUP As classes podem ser genéricas, para descrever estilos abstractos e repetitivos (ex: .clear, .left, .right, etc.) Regra geral, classes devem ser reutilizadas em vários elementos na página, e ids devem ser utilizados em elementos únicos; Monday, February 9, 2009
    • 14. ESTRUTURA O código deve ser correctamente indentado, facilitando a sua leitura e manutenção; As tags devem ser fechadas na ordem correcta, ou seja: <strong><a href=”teste.html”>Teste</a></strong> em vez de: <strong><a href=”teste.html”>Teste</a></strong> Monday, February 9, 2009
    • 15. VALID MARKUP O XHTML foi desenhado tendo em mente a portabilidade. Código sem erros ou elementos inválidos funciona correctamente em browsers, screen readers, dispositivos móveis, etc. Monday, February 9, 2009
    • 16. SEPARAÇÃO DE COMPONENTES Apresentação Monday, February 9, 2009
    • 17. APRESENTAÇÃO As linguagens de apresentação (CSS1, CSS2, ...) formatam a página web, controlando aspectos como a tipografia, a cor, o posicionamento, etc. Como a apresentação está separada da estrutura, é possível alterar uma sem afectar a outra. O mesmo layout pode ser aplicado a várias páginas sem esforço, e pequenas alterações (como alterar o tamanho do texto) podem ser conseguidas em segundos em vez de horas. Monday, February 9, 2009
    • 18. APRESENTAÇÃO É possível criar folhas de estilo que suportem diferentes tipos de media; Assim, é fácil criar uma versão da página para impressão, sem que para isso seja necessário reescrever todo o código; Ou ainda uma versão mobile, com menos gráficos e uma interface ligeiramente diferente; Tudo isto sem alterar o XHTML! Monday, February 9, 2009
    • 19. SEPARAÇÃO DE COMPONENTES Comportamento Monday, February 9, 2009
    • 20. COMPORTAMENTO O DOM (Document Object Model) proposto pela W3C funciona com XHTML, CSS, e ECMAScript 262. O ECMAScript é a versão standard do Javascript, o que significa que é possível programar comportamentos avançados que funcionam em todos os browsers. Acaba assim o Javascript que só funciona em Netscape, ou o ActiveX e JScript para IE. Monday, February 9, 2009
    • 21. Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, February 9, 2009
    • 22. PROGRESSIVE ENHANCEMENT Origina do princípio de Graceful Degradation; No entanto, segue a direcção oposta; Deve ser providenciada uma experiência “normal” para browsers datados. Isto não significa que devamos comprometer a usabilidade da página; Monday, February 9, 2009
    • 23. PROGRESSIVE ENHANCEMENT Através de técnicas de CSS avançadas, é possível melhorar a experiência dos utilizadores com browsers modernos. Monday, February 9, 2009
    • 24. <form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;> <fieldset> <legend>Contact Us</legend> <p>Send us a message. All fields are required.</p> <ol> <li> <label for=quot;contact-namequot;>Name</label> <input type=quot;textquot; id=quot;contact-namequot; name=quot;namequot; /> </li> <li> <label for=quot;contact-emailquot;>Email</label> <input type=quot;textquot; id=quot;contact-emailquot; name=quot;emailquot; /> </li> <li> <label for=quot;contact-messagequot;>Message</label> <textarea id=quot;contact-messagequot; name=quot;messagequot; rows=quot;4quot; » cols=quot;30quot;></textarea> </li> </ol> Exemplo retirado de http://alistapart.com <button type=quot;submitquot;>Send It</button> </fieldset> </form> PROGRESSIVE ENANCHEMENT Um exemplo Monday, February 9, 2009
    • 25. PROGRESSIVE ENHANCEMENT Neste formulário, o normal seria inserir os “:” dentro das tags <label>; No entanto, isto não acrescenta nenhuma informação necessária, e tem apenas uma função visual. Monday, February 9, 2009
    • 26. PROGRESSIVE ENHANCEMENT Utilizando uma propriedade da spec 2.1 de CSS, content, os “:” podem ser automaticamente gerados: label:after {content: quot;:quot;;} Isto significa que, seguido ao conteúdo de qualquer <label>, é inserido dinamicamente o caracter “:”; Browsers mais antigos não suportam esta propriedade, mas a técnica “degrada” facilmente porque os “:” não são essenciais. Monday, February 9, 2009

    ×