O documento discute o design de websites usando padrões da web. Apresenta os problemas do "código espaguete" e como os padrões da web, como CSS e XHTML, permitem criar layouts mais simples e acessíveis em múltiplos navegadores. Também discute a separação de conteúdo, apresentação e comportamento para melhor manutenção e acessibilidade.

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