DESIGN COM WEB
STANDARDS
Bruno Abrantes
Monday, February 9, 2009

SPAGHETTI CODE
Monday, February 9, 2009

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

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

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

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

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.
O conteúdo deve ser estruturado semanticamente.
Monday, February 9, 2009

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

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

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

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

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

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

SEPARAÇÃO DE COMPONENTES
Apresentação
Monday, February 9, 2009

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

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

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

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

Imagem retirada de http://alistapart.com
PROGRESSIVE ENHANCEMENT
Monday, February 9, 2009

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

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

<form id=\"contact-form\" action=\"#\" method=\"post\">
<fieldset>
<legend>Contact Us</legend>
<p>Send us a message. All fields are required.</p>
<ol>
<li>
<label for=\"contact-name\">Name</label>
<input type=\"text\" id=\"contact-name\" name=\"name\" />
</li>
<li>
<label for=\"contact-email\">Email</label>
<input type=\"text\" id=\"contact-email\" name=\"email\" />
</li>
<li>
<label for=\"contact-message\">Message</label>
<textarea id=\"contact-message\" name=\"message\" rows=\"4\" »
cols=\"30\"></textarea>
</li>
</ol>
Exemplo retirado de http://alistapart.com <button type=\"submit\">Send It</button>
</fieldset>
</form>
PROGRESSIVE ENANCHEMENT
Um exemplo
Monday, February 9, 2009

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

PROGRESSIVE
ENHANCEMENT
Utilizando uma propriedade da spec 2.1 de CSS, content, os
“:” podem ser automaticamente gerados:
label:after {content: \":\";}
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