DESIGN COM WEB
                             STANDARDS
                               Bruno Abrantes




Monday, February 9...
SPAGHETTI CODE
Monday, February 9, 2009
SPAGHETTI CODE


               Layouts complexos, com tabelas dentro de tabelas, <font>
               tags e outras redu...
WEB STANDARDS



               A partir de 2000, os browsers começaram a suportar
               tecnologias (CSS, XHTML,...
UTILIZAR STANDARDS


               Reduz o tempo de loading das páginas;

               Aumenta a acessibilidade, sem ne...
UTILIZAR STANDARDS


               Permite suportar múltiplos browsers sem ter de criar
               múltiplas versões ...
SUCK.COM
                              1996
Monday, February 9, 2009
SEPARAÇÃO DE COMPONENTES
                           Conteúdo
Monday, February 9, 2009
CONTEÚDO


               O elemento mais importante da página.

               É estruturado com recurso a (X)HTML.

    ...
DTD


               Um DTD, ou Document Type Definition, diz ao browser
               como fazer o render de um document...
XHTML 1.0 STRICT


               No SAPO Campus planeamos utilizar XHTML 1.0 Strict;

               Linguagem de transiç...
SEMANTIC MARKUP


               Os dados são formatados de acordo com o seu significado.

               Assim, um título...
SEMANTIC MARKUP


               As classes podem ser genéricas, para descrever estilos
               abstractos e repeti...
ESTRUTURA


               O código deve ser correctamente indentado, facilitando a
               sua leitura e manutençã...
VALID MARKUP


               O XHTML foi desenhado tendo em mente a portabilidade.

               Código sem erros ou el...
SEPARAÇÃO DE COMPONENTES
                         Apresentação
Monday, February 9, 2009
APRESENTAÇÃO

               As linguagens de apresentação (CSS1, CSS2, ...) formatam
               a página web, control...
APRESENTAÇÃO

               É possível criar folhas de estilo que suportem diferentes
               tipos de media;

   ...
SEPARAÇÃO DE COMPONENTES
                         Comportamento
Monday, February 9, 2009
COMPORTAMENTO

               O DOM (Document Object Model) proposto pela W3C
               funciona com XHTML, CSS, e EC...
Imagem retirada de http://alistapart.com




                   PROGRESSIVE ENHANCEMENT

Monday, February 9, 2009
PROGRESSIVE
                           ENHANCEMENT

               Origina do princípio de Graceful Degradation;

        ...
PROGRESSIVE
                           ENHANCEMENT



               Através de técnicas de CSS avançadas, é possível melh...
<form id=quot;contact-formquot; action=quot;#quot; method=quot;postquot;>
                                                ...
PROGRESSIVE
                           ENHANCEMENT


               Neste formulário, o normal seria inserir os “:” dentro...
PROGRESSIVE
                             ENHANCEMENT
               Utilizando uma propriedade da spec 2.1 de CSS, content...
Upcoming SlideShare
Loading in …5
×

Formação Web Standards - Dia 1

390 views
337 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
390
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

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




  • Formação Web Standards - Dia 1

    1. 1. DESIGN COM WEB STANDARDS Bruno Abrantes Monday, February 9, 2009
    2. 2. SPAGHETTI CODE Monday, February 9, 2009
    3. 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. 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. 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. 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. 7. SUCK.COM 1996 Monday, February 9, 2009
    8. 8. SEPARAÇÃO DE COMPONENTES Conteúdo Monday, February 9, 2009
    9. 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. 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. 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. 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. 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. 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. 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. 16. SEPARAÇÃO DE COMPONENTES Apresentação Monday, February 9, 2009
    17. 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. 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. 19. SEPARAÇÃO DE COMPONENTES Comportamento Monday, February 9, 2009
    20. 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. 21. Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, February 9, 2009
    22. 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. 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. 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. 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. 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

    ×