Uploaded on

Aula 1 - curso webdesign fema

Aula 1 - curso webdesign fema

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,141
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
72
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

Transcript

  • 1. mini-curso mini- DESENVOLVIMENTO para web com padrões (Tableless, Webstandards e Usabilidade) Tableless, Danilo Rosisca Pereira Especialista em Sistemas para Internet
  • 2. Desenvolvimento para Web com Padrões OA Avanço d W b da Web Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitais digitais. E muitas vezes apresentadas de forma vezes, desorganizada.
  • 3. Desenvolvimento para Web com Padrões A NOVA GERAÇÃO DA WEB exige uma mudança e um repensar no processo de desenvolvimento de ambientes informacionais digitais. d g ta s.
  • 4. Desenvolvimento para Web com Padrões A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados na Web como plataforma.
  • 5. Desenvolvimento para Web com Padrões A Web 2.0 busca interação ai t ã entre t usuários, com a criação e o compartilhamento de conteúdo.
  • 6. Arquitetura da Informação
  • 7. Desenvolvimento para Web com Padrões Arquitetura d Informação i da f ã Foi criada por Saul Wurman em 1976 com o objetivo de 1976, organizar a informação, para: • tornar simples o que é complexo; • buscar um balanceamento entre usuário-conteúdo-contexto; • facilitar para as pessoas o acesso a informação informação.
  • 8. Desenvolvimento para Web com Padrões Si istemas d Arquitetura d Informação da i da f ã A Arquitetura da Informação possui 4 sistemas e quando sistemas, reunidas servem para organizar o ambiente informacional digital(website). Rosenfeld e Morville ( g ( ) (2006). ) Esses sistemas são: E i ã
  • 9. Desenvolvimento para Web com Padrões Sistema d O Si t de Organização: Maneira de categorizar e organizar a i ã informação. 1 Esquema de Organização Alfabética Esquema de Organização por Tempo 2 Esquema de Organização 3 por Assunto
  • 10. Desenvolvimento para Web com Padrões Sistema d R t l ã Si t de Rotulação: Define a forma de representar a informação. São l Sã elementos f d t fundamentais que t i antecipam o que virá a seguir logo após efetuar o clique em um link.
  • 11. Desenvolvimento para Web com Padrões Sistema d N Si t de Navegação: Determina o modo de navegar ou mover ã no espaço Informacional (e hipertextual).
  • 12. Desenvolvimento para Web com Padrões Sistema d P Si t de Pesquisa: i Estabelece as dú id dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas serão respondidas. (Exemplo de busca de fácil compreensão)
  • 13. Usabilidade
  • 14. Desenvolvimento para Web com Padrões Usabilidade: U bilid d Possui Poss i componentes múltiplos e é radicionalmente associada com estes cinco atributos: • Ser fácil de APRENDER; • Ser eficiente na utilização; • Ser fácil de ser recordado; • Ter poucos erros; • Ser subjetivamente agradável. (Nilsen, 1993)
  • 15. Desenvolvimento para Web com Padrões U bilid d Usabilidade: Tempo de do nload mínimo download Dez segundos é o limite para manter a atenção do usuário. (Jacob Nielsen)
  • 16. Desenvolvimento para Web com Padrões Usabilidade: U bilid d Fácil de navegar Visitantes não devem perder tempo pensando e tentando descobrir: - Onde está? - Onde posso ir? p - Por onde devo começar? - Quais são as coisas mais importantes nesta página? Poste com dezenas de setas para todos lados
  • 17. Desenvolvimento para Web com Padrões Usabilidade: Tipografia As fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as , sem serifas, as cursivas e as fontes dingbats. g Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
  • 18. Desenvolvimento para Web com Padrões Usabilidade: F t l í i para web Fontes legíveis b Nome da Fonte Característica Arial Moderna, limpa, básica. Fonte F t com serifa projetada para l it if j t d leitura on-line. li Georgia Aparência Tradicional, visual mais moderno que Times News Roman. Trebuchet MS Moderna, simples. Verdana Fonte on-line mais legivel, mesmo em texto pequeno Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)
  • 19. Desenvolvimento para Web com Padrões Usabilidade: Legibilidade, textos existem para serem lidos. Fonte serifada Exemplo: para título í l Curiosidade, inovação e descoberta A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a qualquer instante. instante Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de arte da história. Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem restrições de tempo. Fonte sem serifa para texto
  • 20. Desenvolvimento para Web com Padrões COMBINAÇÃO DE CORES NÍVEL DE LEITURA Texto preto com fundo branco Valor mais alto de contraste T l Texto azul contra f d b fundo branco Dif ti lt t t l Diferença perceptiva alta, contanto que se use azul escuro. Diferença perceptiva média e alta dependendo das combinações de Texto preto com fundo cinza cores e do nível de saturação. Difícil de ler, pois o fundo escuro é percebido mais intensamente que Texto branco com fundo azul o texto branco. Texto cinza com fundo branco. Baixo valor de contraste, diferença perceptível baixa. Texto branco com fundo cinza cinza. Baixo valor de contraste, diferença perceptível baixa. Diferença perceptível muito baixa, combinações de cores escuras Texto vermelho com fundo azul criam um efeito vibrante, cansando os olhos. , Diferença perceptível muito baixa, combinações de cores escuras Texto vermelho contra fundo preto. criam um efeito vibrante, cansando os olhos.
  • 21. Desenvolvimento para Web com Padrões Usabilidade: Portanto um website... U bilid d P b i Bicicleta Convergente de Jacques Carelman. Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário usuário.
  • 22. Webstandards
  • 23. Desenvolvimento para Web com Padrões Padrões Web (Webstandards) Criados pelo W3C (World Wide Web Consortium), eles  separam o conteúdo em HTML da apresentação em CSS, mantendo  a compatibilidade e portabilidade com navegadores, dispositivos...  a compatibilidade e portabilidade com navegadores  dispositivos   (Ferreira, 2005, p. 12)
  • 24. Desenvolvimento para Web com Padrões Padrões Web (Webstandards) Os Padrões Web tornam o desenvolvimento mais simples e  produtivo, resultando em: Montagem Rápida do Layout; Desenvolvimento simplificado; Independência entre layout e conteúdo; Manutenção simplificada; Padrões Reaproveitáveis. (Ferreira, 2005) 
  • 25. Desenvolvimento para Web com Padrões Padrões Web (Webstandards) Boa posição nas ferramentas de busca SEO – Search Engine Optimization: SEO  S h E i  O ti i ti A estratégia de divulgação é peça fundamental para o sucesso de  qualquer negócio online. l   ó i   li Saiba mais: http://www.maujor.com/
  • 26. Agora Chega de conversa conversa...
  • 27. Desenvolvimento para Web com Padrões Padrões Web ‐ Introdução ao CSS Sintaxe: seletor {propriedade: valor;}
  • 28. Desenvolvimento para Web com Padrões Padrões Web ‐ Introdução ao CSS Inserindo CSS na página: Existem 3 formas para aplicar CSS em páginas: CSS Inline, CSS Interno, e , CSS Externo.
  • 29. Desenvolvimento para Web com Padrões Padrões Web ‐ Introdução ao CSS CSS Externo: (mais produtivo) <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;seuarquivo.cssquot; />
  • 30. Desenvolvimento para Web com Padrões Padrões Web ‐ Introdução ao CSS A ib  id: Atributo  O nome do id deve ser único. Não pode haver mais de um id com  p mesmo nome em uma página. O uso do ID é especificado assim: #nome { color:black;} <div id=quot;nomequot;>conteúdo</div>
  • 31. Desenvolvimento para Web com Padrões Padrões Web ‐ Introdução ao CSS A ib  class: Atributo  Ela serve para criar um grupo de elemento que terão características  p g p q iguais e pode ser usado o mesmo nome varias vezes em uma página. O uso da class é especificado assim: .destaques { background‐color:black; color:white; font‐family: Verdana; } <div class=quot;destaques“>   Aqui vai o texto do destaque</div>
  • 32. Desenvolvimento para Web com Padrões Arquivo externo estilo.css Olá mundo: <!DOCTYPE html PUBLIC quot;‐//W3C//DTD XHTML 1.0 Transitional//ENquot;  3 #principal{ width: 250px;} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> .destaque { <head> <meta http‐equiv=quot;Content‐Typequot; content=quot;text/html; charset=iso‐8859‐1quot; /> p q yp 59 background‐color:black; <link rel=quot;stylesheetquot; href=quot;estilo.cssquot; media=quot;screenquot;  type=quot;text/cssquot;/> color: #ededed; <title>Exemplo 1</title> font‐family: Verdana; </head> } <body> <div  id=quot;principalquot; class=quot;destaquequot;> Olá mundo tableless! </div> </body> </html>
  • 33. Desenvolvimento para Web com Padrões Arquivo externo estilo.css Exemplo 2: *{ margin:0px; <div id=quot;geralquot;> padding:0px; list-style:none; text-decoration:none; } #geral { # l </div> margin: 0 auto; width: 960px; position: relative; }
  • 34. Desenvolvimento para Web com Padrões Exemplo 3: #topo { font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #FF0000; <h1 id=quot;topoquot;> background-color: #000000; Logo – topo g display: block; float: left; </h1> height: 70px; width: 400px; padding: 30 0 0 25 ddi 30px 25px; }
  • 35. Desenvolvimento para Web com Padrões Exemplo 4.1: <div id=quot;menuquot;> <ul> <li><a href=quot;#quot;>Menu 1</a></li> li  h f quot;#quot; M   / /li <li><a href=quot;#quot;>Menu 2</a></li> <li><a href= # >Menu 3</a></li> <li><a href=quot;#quot;>Menu 3</a></li> <li><a href=quot;#quot;>Menu 4</a></li> <li><a href=quot;#quot; class=quot;menu5quot;>Menu 5</a></li> </ul> </div>
  • 36. Desenvolvimento para Web com Padrões Exemplo 4.2: #menu li a{ font: 16px Verdana Arial Helvetica sans-serif; Verdana, Arial, Helvetica, sans serif; #menu ul { color: #FFFFFF; background:#000000; float: left; width: 500px; margin: 45px 20px 0 20px; height: 100px; _margin: 45px 10px 0 20px; float: left; } padding: 0 0 0 35px; } #menu li a:hover { text-decoration:underline; #men   l li{  #menu ul color: #ccc; display:inline; } list‐style: none; } #menu li.menu5 a { margin: 45px 0 0 20px;}
  • 37. Desenvolvimento para Web com Padrões Exemplo 5: #condeudo { float:left; <div id=quot;conteudoquot;> width:910px; border-color:#000; border-style:none border style:none solid solid; border-width:10px; </div> padding:10px 15px; }
  • 38. Desenvolvimento para Web com Padrões Exemplo 6: #condeudo h2 { font: bold 28px Arial, Helvetica, sans-serif; margin: 15px 0; <h2>Web Standards</h2> } <p> Texto xyz – Baixar texto xyz  #condeudo p { </p> font: 16px/28px Arial, Helvetica, sans-serif; width: 450px; margin: 0 20 0 0 i 20px 0; display: block; float:left; }
  • 39. Desenvolvimento para Web com Padrões Exemplo 7.1: <div id=quot;col2quot;> #col2 { float:left; </div> /div width: 200px; p ; display:block; }
  • 40. Desenvolvimento para Web com Padrões Exemplo 7.2: <h1> #col2 h1 a{ <a href=quot;#quot;>Meu 1º.........</a> background: #000; </h1> /h1 border: solid 10px #999; p ; width: 400px; <h1> height: 75px; <a href= # >Exemplo...... </a> float: left; <a href=quot;#quot;>Exemplo  </a> </h1> font: bold 60px Georgia, quot;Times New Romanquot;, Times, serif; <h1> <h > color: #FFFFFF; <a href=quot;#quot;>Tableless!....</a> padding: 15px 10px; </h1> margin: 0 0 20px 0; }
  • 41. Desenvolvimento para Web com Padrões Exemplo 8: #rodape{ <div id=quot;rodapequot;> font: 10px Verdana, Arial, Helvetica, sans-serif; Copyright © 2008.  color: #999; Todos os direitos reservados. margin: 20p 0 0 0; 20px </div> width: 910px; height: 20px; float:left; }
  • 42. Desenvolvimento para Web com Padrões Muito Obrigado! danilo@sitedodanilo.com.br
  • 43. Desenvolvimento para Web com Padrões REFERÊNCIAS BIBLIOGRÁFICAS FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, 2005. MEMÓRIA, F. Design para Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005. Ó NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p. NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007. ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006. SHEA, D.; HOLZSCHLAG, M.. The zen of css design: visual enlightenment for the web. Peachpit Press: Berkeley/CA, 2005. ZELDMAN, J. Designing ith ZELDMAN J D i i with web standards. N P bli hi I di li IN 2003. Riders Publishing: Indianapolis, IN, 2003 b t d d New Rid