• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Formação Web Standards - Dia 1
 

Formação Web Standards - Dia 1

on

  • 1,256 views

 

Statistics

Views

Total Views
1,256
Views on SlideShare
1,256
Embed Views
0

Actions

Likes
1
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Suck.com, conteúdo na primeira página, script em Perl que contava os caracteres e inseria um <br />
  • <br />
  • Lançar a discussão entre XHTML e HTML <br />
  • quirks mode causes bugs and is archaic and slow <br />
  • <br />
  • Não devemos utilizar uma tag porque queremos que o conteúdo apareça “grande”, mas sim porque é o título mais importante na página! <br /> <br /> Regra geral, classes são para elementos reutilizáveis e ids para elementos únicos. <br />
  • Não devemos utilizar uma tag porque queremos que o conteúdo apareça “grande”, mas sim porque é o título mais importante na página! <br /> <br /> Regra geral, classes são para elementos reutilizáveis e ids para elementos únicos. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • O DOM é uma API que descreve os objectos presentes numa página. É o que permite ao Javascript seleccionar elementos numa página, inserir informação dinamicamente, etc. <br />
  • <br />
  • Graceful Degradation: Providenciar uma experiência de fallback caso haja um erro <br />
  • <br />
  • <br />
  • <br />
  • <br />

Formação Web Standards - Dia 1 Formação Web Standards - Dia 1 Presentation Transcript

  • 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=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
  • 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: 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