Aula 06 textos na web

1.052 visualizações

Publicada em

Aula 06 textos na web

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.052
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 06 textos na web

  1. 1. Cristiano  Pires  Martins
  2. 2. Leitura  de  Textos • Escrever  para  Web  é  diferente  de  escrever   para  impressão.   • A  leitura  na  web  é  feita  de  forma   “escaneável”,  ou  seja,  as  pessoas  não  lêem   da  esquerda  para  direita  como  em  um  livro.   • O  texto  do  site  precisa  ser  rapidamente   “escaneável  e  facilmente  digerível”   • 15%  das  pessoas  lêem  mais  lentamente  na   web  do  que  um  documento  impresso. 2
  3. 3. Texto  escaneável 3 • Fornece  ao  usuário  uma  melhor  experiência  no   site,  o  que  significa  que  eles  ficarão  por  mais   tempo  e  voltarão  com  mais  frequência  ao  site.   • Para  auxiliar  na  montagem  do  texto,  é  sugerido   o  uso  da  técnica  da  Pirâmide  Invertida.
  4. 4. Pirâmide  Invertida • É  a  forma  dos  usuários  lerem  o  texto  e  já   saberem  através  do  topo  da  pirâmide  o  que   é  mais  importante.   • Primeiro:  comece  com  uma  pequena   conclusão  para  que  os  usuários  possam  ver  a   parte  principal  da  página  e  adicionar   detalhes  depois,  dessa  forma,  os  usuários   param  de  ler  a  qualquer  momento  e  ainda   tem  a  confiança  de  que  já  leram  as  partes   importantes  da  informação. 4
  5. 5. Pirâmide  Invertida 5 .   Um pequeno texto de compor para dar ao usuário algum contexto e uma pequena introdução do conteúdo da página Cabeçalho Principal • alguns pontos importantes • que contêm os destaques • do conteúdo da página Outro Cabeçalho Mais algum texto de corpo que fornece ao usuário detalhes sobre o conteúdo da pagina etc... IMPORTÂNCIA
  6. 6. Pirâmide  Invertida 6 .   Conteúdo com menos importância progressiva, mesmo que bem escrito. O que não é essencial para a compreensão do artigo pelo usuário pode ficar aqui. Coloque a coisa mais importante No topo de seu texto. Os usuários devem ser capazes de ler seu primeiro parágrafo e tem uma ideia do todo.
  7. 7. E  qual  fonte  usar? • Para  não  errar,  temos  9   de  famílias  de  fontes   suportado  pela  maioria   dos  sistemas   operacionais  existentes,   elas  são  chamadas  de   fontes  da  Lista  Segura.   1. Arial   2. Arial Black   3. Comic Sans MS   4. Courier New 5. Georgia 6. Impact 7. Times New Roman   8. Trebuchet MS   9. Verdana 7
  8. 8. Tipografia A   palavra   tipografia   é   formada   pelos   radicais   typos   (impressão   ou   marca)   e   grapheia   (escrita),   ou   seja,   produzir   impressões   por   meio  da  escrita. 8
  9. 9. Anatomia  de  um  tipo  de  letra 9
  10. 10. Terminologias 1  –  Linha  Base:  é  a  linha  horizontal  imaginária  sobre  a   qual  a  maioria  dos  caracteres  se  assenta.   2  –  Altura  da  Caixa  Alta:  é  uma  linha  imaginária  que   marca  a  altura  de  todas  as  letras  maiúsculas  em  um   tipo  de  letra.  A  altura  da  caixa  alta  é  inferior  à  altura   máxima  do  tipo  da  letra.   3  –  Barra  Transversal:  é  um  traço  que  une  as  linhas   nos   tipos   de   letras   maiúsculas   como   as   letras   “A”   e   “H”,   sendo   diferente   do   traço   transversal   das   letras   “f”  e  “t”. 10
  11. 11. Terminologias 4   –   Serif   (Cerifa):   é   o   nome   dado   aos   traços   do   acabamento   na   base   e   no   topo   de   certos   tipos   de   letras.   5  –  Linha  Média:  uma  linha  imaginária  que  marca  a   extremidade  superior  das  maiúsculas.   6  –  Barriga:  é  a  curva  redonda  que  encerra  o  espaço   negativo  em  um  tipo  de  letra.  Exemplo  as  letras  “D”,   “o”  e  “g”.   8   –   Descendente:   é   a   parte   inferior   das   letras   minúsculas,   como   “g”,   “j”,   “p”,   “q”   e   “y”   e   também   alguns  numerais  como  das  fontes  Georgia. 11
  12. 12. Terminologias 9  –  Haste:  é  o  principal  traço  vertical  ou  diagonal  de   um  tipo  de  letra,  como  as  letras  “I”,  “H”,  “W”.   10  –  Título:  é  o  nome  dado  ao  ponto  acima  das  letras   minúsculas,  como  o  “j”  e  o  “i”.   11   –   Terminal:   é   a   extremidade   de   uma   haste   ou   traço  sem  serif,  como  a  letra  “c”  do  exemplo.   12   –   Ascendente:   é   a   extensão   de   algumas   letras   minúsculas   que   chegam   até   a   linha   média   como   exemplo  as  letras:  “b”,  “d”,  “f”,  “h”,  “l”,  “t”. 12
  13. 13. Terminologias 13   –   Perna   ou   caudas:   são   os   traços   inferiores   angulares  como  os  das  letras  “K”,  “R”e  “Q”   14   –   Ligadura:   é   a   junção   de   letras,   que   dão   a   impressão   de   serem   um   único   caractere,   como   a   palavra  “fix”.   15  –  Altura  x:  é  a  altura  do  “x”  minúsculo  em  um  tipo   de  letra,  ele  é  a  distância  entre  as  linhas  base  e  média   de  um  tipo  de  letra.  Também  pode  ser  utilizado  como   unidade  relativa  de  medição  em  CSS  (ex).   13
  14. 14. Distinções  entre  tipos  de  Letra • Fonte  é  um  conjunto  de   letras  com  estilo  visualmente   parecido.   • Elas  já  vêem  instaladas  no   computador.  Por  exemplo  nos   sistemas  operacionais   Windows  oferece  cerca  de  40   fontes  como  padrão   enquanto  os  usuários  do  Mac   tem  mais  de  100  fontes.   • As  fontes  são  agrupadas  por   famílias  que  representam   uma  variação  diferente  da   fonte  original.   • As  famílias  de  fonte  incluem   os  tipos:  normal,  itálico,   negrito  e  negrito  itálico. 14
  15. 15. Fontes  Serif • As  fontes  serif  são  fontes  que  permitem  tornar   mais  legíveis  as  letras  em  um  bloco  de  textos  para   leitura,  principalmente  quando  impressa,  pois   criam  uma  linha  horizontal  de  referência.   • A  fonte  mais  conhecida  atualmente  é  a  Times New Roman.   • Há  uma  grande  variedade  de  fontes  serif,  entre  elas   podemos  destacar:     – Garamond,     – Baskerville,     – Didot.   15G
  16. 16. Fontes  Sans  Serif • São  fontes  que  não  possuem  a  serifa,  são  fontes   mais  legíveis  e  práticas  para  qualquer  finalidade.   • As  fontes  mais  utilizadas  atualmente  são:  Arial  e   Verdana.   • Uma  boa  prática  no  design  é  utilizar  fontes  com   serifa  nos  cabeçalhos  para  chamar  atenção  e  nos   blocos  de  texto  fontes  sem  serifa  para  uma  melhor   legibilidade. 16
  17. 17. Fontes  Manuscritas • As  fontes  manuscritas  são  ideais  para  representar  a   humanidade,  sofisticação,  tradição,  é  muito  utilizada   na  criação  de  logotipos  e  também  como  títulos  de   matérias.   • O  lado  negativo  é  conseguir  uniformizar  os  tipos  de   letras,  espaçamentos  e  alinhamentos;   • Também  apresenta  bastante  dificuldades  de  leituras   em  textos  longos. 17
  18. 18. Exemplos  de  Fontes  Manuscritas Blackadder Bradley Hand Brush Script Edwardian Script French Script Kunstler Script Monotyoe Corsiva Palace Script MT 18
  19. 19. Fontes  Novelty • São  conhecidas  como  fontes  de  exibição  ou   decorativas,  representam  a  grande  maioria  das   fontes  disponíveis  gratuitamente  on-­‐line.   • São  versões  modificadas  das  populares  serif  ou   sans  serif  .   • São  menos  legíveis  que  suas  correspondentes   originais.   • Quando  usadas  com  moderação  podem  enriquecer   o  design  com  bastante  estilo. 19
  20. 20. Exemplos  Novelty Curls MT AlphaWood Old English Text Almonte Snow B SurfersPlane Chinese takeawa 20
  21. 21. Fontes  Dingbat • Também  chamadas  de  fontes  símbolos,  as   fontes  originais  consistiam  em  ornatos  e   símbolos  comumente  usados.   • As  letras  Dingbat  podem  ser  ajustadas  em   qualquer  tamanho  sem  perder  a  legibilidade.   • As  fontes  mais  conhecidas  são:  Wingdings  e   Webdings,  que  já  estão  pré-­‐instaladas  no   Windows. 21
  22. 22. Exemplos  de  dingbat WP Arabic Sihafa WP  Arabic  Sihafa   WP Hebrew David WP  Hebrew  David   !"#$%&'( Webdings   W♓■♑♎♓■♑⬧   Wingdings 22
  23. 23. Fontes  de  Tamanho  Fixo • São  fontes  que  possuem  espaçamento  uniforme,  os   tipos  das  letras  são  elaborados  de  forma  que  as  larguras   de  cada  letra  são  semelhantes.   • Elas  foram  elaboradas  baseadas  nas  máquinas  de   escrever  que  utilizavam  a  letra  “w”  como  medida  de   espaçamento  para  todas  as  letras  e  depois  nos  primeiros   computadores.   • A  fonte  mais  utilizada  neste  formato  é  a  Courier New. • Na web,  utilizamos  o  comando  <pre>  que  preserva   tabulações,  espaços  e  quebras  de  linha. 23
  24. 24. Escolhendo  Fontes  Corretas • A  escolha  da  fonte  correta  depende  do  foco  do  site,   do  público  que  deseja,  do  contexto  em  geral.   • Procure  “ligar”  a  fonte  escolhida  como  alguma   conexão  emocional  ou  que  lembre  alguma  sensação   agradável  para  o  site.   • Tente  não  usar  mais  do  que  4  fontes  para  testar  o   design  do  site,   • Procure  evitar  uma  combinação  de  duas  fontes  serif   diferentes    ou  de  duas  sans  serif  diferentes  no   mesmo  projeto. 24
  25. 25. Um  "em"  é  uma   unidade  de   medida  relativa,  é   igual  ao  tamanho   vertical  de  um   texto  do   elemento.   Definir  Tamanho  da  Fonte • O  tamanho  de  fonte  padrão  na  maioria   dos  navegadores  é  de  16  pixels   • Para  exibir  uma  fonte  no  tamanho  de  12   pixels  é  necessário  definir  o  tamanho  da   fonte  no  parágrafo  em  0,75em.   • Por  quê  utilizar  o  em?   – Porque  nem  todos  os  navegadores   suportam  o  “aumentar”  fonte  como  o   internet  explorer  6 25
  26. 26. Definindo  o  tamanho • Para  facilitar  o  trabalho  de  conversão  de  pixels  para   "em"  alteramos  o  tamanho  da  fonte  do  elemento   do  body  em  62,5%.  Com  isto,  o  valor  do  em  passa   para  10  pixels.   • Dessa  forma,  12  pixels  equivalem  a  1,2  eme  e   assim  por  diante.  Veja  o  exemplo  em  CSS. 26 body { font-size: 62,5%; } p{ font-size: 1,2 em; } h1{ font-size: 3,5 em; }
  27. 27. Onde  encontrar  mais  fontes? • Em  galerias  de  fontes  gratuitas  e  shareware  como:   • www.sofontes.com.br     • www.1001fonts.com     • www.dafont.com     • www.fontesgratis.com.br     • Fontes  à  venda,  que  tem  como  benefício  ao  pagar   por  uma  família  de  fontes  o  pacote  completo  de   negrito,  itálico,  etc..   • www.fontshop.com     • www.myfonts.com     • www.itcfonts.com     • www.adobe.com/type   27
  28. 28. Espaçamento  do  texto • Temos  dois  tipos  de  controle  de   espaçamentos:   – Vertical:     – Horizontal 28
  29. 29. Espaçamento  Horizontal • Para  controlar  os  espaçamentos  horizontal  das   letras  utilizamos  o  Kerning  e  o  Tracking.   • Kerning:  aproximação  horizontal,  é  o  processo  de   ajuste  do  espaço  entre  letras  individuais.  Em  CSS   utilizamos  a  propriedade  letter-­‐spacing.   • Tracking:    espaçamento  horizontal,  ajusta  o   espaçamento  mas  aplicando-­‐se  ao  espaço  existente   entre  cada  letra.  Em  CSS,  utilizamos  a  propriedade   word-­‐spacing.. 29
  30. 30. Espaçamento  Vertical • O  espaçamento  vertical  também  é  conhecido  como   entrelinhas  (leading).   • Em  CSS  ajustamos  a  propriedade  line-­‐height.   Exemplo:       line-­‐height:  1.5em; 30
  31. 31. Alinhamento  do  Texto • É  o  alinhamento  dos  textos  as  margens.   • Os  tipos  de  alinhamentos  mais  comuns  são:   esquerda,  centro  ou  centralizar,  direita  e  justificado.   • Cuidado  ao  usar  o  justificar  em  todos  os  textos  na   web,   pois   ao   fazê-­‐lo   é   ajustado   também   os   espaçamentos   entre   os   caracteres   provocando   em   alguns  casos  o  efeito  “percorrendo  o  rio”. 31
  32. 32. Não  use  justificado  na  WEB • Apesar  de  os  textos  justificados  apresentarem   uma  informação  visual  mais  limpa  e  organizada,   essa  não  é  maneira  correta  de  alinhar  textos  web.     • O  texto  justificado  fica  melhor  em  jornais  e   revistas,  onde  ele  é  organizado  em  duas  ou  três   colunas  verticais.     • Na  web  os  textos  são  corridos  e  usados  em  áreas   de  até  800px,  o  que  acaba  gerando  uma  grande   quantidade  de  espaços  vazios,  somente  para  que   o  texto  se  mantenha  justificado. 32
  33. 33. MOTIVOS  PARA  NÃO  USAR  TEXTOS   JUSTIFICADOS  NA  WEB 33
  34. 34. • A  maioria  das  pessoas  não  lêem  os  textos  da  web  de   forma  convencional,  apenas  passam  os  olhos  captando   palavras  e  formando  informações,  e  os  espaços  deixados   pelos  textos  justificados  dificultam  esse  processo.   • A  leitura  dos  textos  justificados  demora  20%  mais  tempo   se  comparado  ao  texto  alinhado  à  esquerda,  pois  os   espaços  criam  falsas  pausas.   • Além  disso,  devemos  tocar  no  ponto  das  pessoas  com   dislexia,  que  é  uma  dificuldade  no  aprendizado  da   linguagem  que  atinge  cerca  de  200  mil  pessoas  no  Brasil.   Um  disléxico  tem  dificuldade  dobrada  a  leitura  de  textos   justificados. 34
  35. 35. Exemplo • Para  evitar  isto  a  maioria   dos  editores  utilizam  a   hifenização,  mas  os   navegadores  web  não   conseguem  fazer,  então  é   melhor  evitar  textos   justificados  em  espaços   estreitos. • Em   CSS   podemos   utilizar   a   propriedade   text-­‐aligment   c o m   a s   o p ç õ e s :   l e f t   (esquerda),   right(direita),   center   (centralizado)   e   justify(justificado).   • Há   vários   softwares   e   sites   que   fazem   os   testes   de   ajustes  de  textos,  um  site  é  o   http://www.typetester.org/   35
  36. 36. Referências • BEAIRD,   J.   Princípios   do   Web   Design   Maravilhoso.   Rio   de   Janeiro:   Altabooks,  2008.   • KALBACH,  J;  PIVETA,  E  K.  Design  de  Navegação  Web.  Bookman,  2009.   • WATRALL,  E;  SIARTO,  J.  Use  A  Cabeça!  Web  Design.  Alta  Books,  2009.     Fonte  de  material  Fabiana  Caravieri  Masson 36

×