Web mobile dicas

  • 3,615 views
Uploaded on

Palestra apresentada na 3a Conferência Web W3C Brasil. …

Palestra apresentada na 3a Conferência Web W3C Brasil.
Web Mobile _ Dicas Práticas

More in: Technology
  • 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
3,615
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
46
Comments
0
Likes
4

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. web em dispositivos móveis • dicas práticas @analauragomes 1
  • 2. Bem vind@s!analauragomes@gmail.com Publicações:@analauragomes Editora Senac-SP: XHTML/CSS Criação de Páginas Web,emblema.art.br Dreamweaver CS5, Fireworks CS5webdemais.com.br Editora Abril: Coleção Clique a Clique, O curso de• Docente, palestrante e informática da Abril consultora nas área de Presença digital: Web e Computação Gráfica meadiciona.com/ana_laura• Colaboradora do W3C Escritório Brasil 2
  • 3. Agenda• Compreender o meio • Dicas práticas – Web – Conteúdo – Web Mobile – Interação – Layout – Planejamento – Desenvolvimento – Testes 3
  • 4. A Web somos nós
  • 5. Cada um de nós 5
  • 6. Usuários• Perfil básico • Interação• Expectativa • Experiência• Objetivo • Informação 6
  • 7. Web Mobile• Perfil básico • Onde ele está?• O que vai fazer? • A que horas?• De que forma? • Qual aparelho? 7
  • 8. Não é só tamanho...
  • 9. Tipo• celular• tablets• e-readers
  • 10. Capacidade• touch • OS• caneta • linguagens• memória • navegador• bateria 10
  • 11. Cenários de uso - físico• luz • andando / parado• tráfego • WiFi / 3G• apertado
  • 12. Cenários de uso - mental• nervoso / calmo Estado de espírito• atento / disperso • pressa / tranquilo Predisposição / Expectativa
  • 13. Estatísticas - acessos fixo70 milhões celular22 milhões Fevereiro, 2011 | http://bit.ly/hrUBbg 13
  • 14. Estatísticas - aparelhosSmartphones Hoje: 5,8%Ano:  165% Celulares Ano:  21% novembro, 2011 | http://bit.ly/uZpl2w 14
  • 15. Estatísticas - navegadores web 15
  • 16. Estatísticas - navegadores web 16
  • 17. Estatísticas - navegadores web 17
  • 18. Dicas – conteúdo Atenção... Estado de espírito... Procura por fatos. AGORA!Seja 100% relevante 18
  • 19. Dicas – conteúdoSimplicidade +Objetividade 19
  • 20. Dicas – conteúdoO que é maisimportanteaparece notopo da página 20
  • 21. Dicas – conteúdoConteúdo Forma InteraçãoXHTML-MP CSS2 JavaScript HTML5 CSS3 [DOM] 21
  • 22. Dicas – conteúdo 22
  • 23. Dicas – conteúdoEvite o que não vai funcionar• framesets • mapa de imagem• tabelas • css e scripts inline• tabelas aninhadas • plugins e extensões 23
  • 24. Dicas – conteúdoEstratégias de adaptação não fazer nada • contar com o zoom do aparelho um conteúdo e vários estilos • viewport • media queries Um site novo 24
  • 25. Dicas – conteúdoEstratégias de adaptação - viewport<meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><meta name="Viewport" content="width=device-width" /> 25
  • 26. Dicas – conteúdoEstratégias de adaptação – media querieshttp://www.w3.org/TR/css3-mediaqueriesFolha de estilos interna@media screen and (min-width:801px){/* definições para telas com largura maior que 801px */} 26
  • 27. Dicas – conteúdoEstratégias de adaptação – media queriesFolha de estilos externa<link href="normal.css" rel="stylesheet" type="text/css"media="screen and (min-width:801px)" /><link href=“tablet.css" rel="stylesheet" type="text/css"media="screen and (min-width:321px) and (max-width:800px)" /><link href="celular.css" rel="stylesheet" type="text/css"media="screen and (max-width:320px)" /> 27
  • 28. Dicas – interação• lembre-se dos gestos• não tem mouse over• projetar para o tamanho do dedo (40/80px) 28
  • 29. Dicas – interação• rolagem vertical (conteúdo e menu)• navegação fácil de aprender 29
  • 30. Dicas – interação• links e acessos inteligentes• acesso ao site normal 30
  • 31. Dicas – interação• evitar excesso de entrada de dados – entrada de senha com visualização – lembrar as opções do usuário • HTML5 local storage • usar as informações do aparelho 31
  • 32. Dicas – interação• facilitar a entrada de dados (HTML5) – input type=“url” – input type=“email” – input type=“number” – input type=“tel” 32
  • 33. Dicas – layout• usar poucas fontes na página (2 ou 3)• usar o espaço em branco para separar os elementos• não criar distrativos e empecilhos para acesso ao conteúdo 33
  • 34. Dicas – layout• usar poucas cores e gráficos/imagens• otimizar imagens• não usar background com fotos• usar ícones como background no CSS 34
  • 35. Dicas – layout• dê ao usuário opções de layout claro e escuro• manter consistência com versão desktop 35
  • 36. Dicas – planejamento 36
  • 37. Dicas – planejamento Sitemap: writemaps.com 37
  • 38. Dicas – planejamento Sitemap: xmind.net 38
  • 39. Dicas – planejamentoWireframe: Blog spark (bit.ly/fSE77l) 39
  • 40. Dicas – planejamentoWireframe: User Zen (bit.ly/eckXKE ) 40
  • 41. Dicas – desenvolvimento• Bibliotecas e scripts: – Modernizr modernizr.com – JQuery Mobile jquerymobile.com – Boilerplate html5boilerplate.com/mobile 41
  • 42. Dicas – desenvolvimento• Foco no usuário – experiência de uso – não focar no aparelho mas no recurso 42
  • 43. Dicas – testes 43
  • 44. Dicas – testesServidor de testes• Online• Na sua máquina: – XAMPP: apachefriends.org/pt_br/xampp.html – EasyPHP: easyphp.org – ou qualquer outro servidor para poder testar 44
  • 45. Dicas – testesSimuladores• Windows Phone - create.msdn.com/en-US 45
  • 46. Dicas – testesSimuladores• Android - developer.android.com – java SE develepment kit – android SDK • AVD manager • SDK manager 46
  • 47. Dicas – testesSimuladores• Opera mobile - opera.com/developer/tools 47
  • 48. Dicas – testesNavegadores IE: já está pronto F12 Ferramentas > Alterar cadeia de caracteres do agente do usuário 48
  • 49. Dicas – testesNavegadores Safari: já está pronto editar > preferencias > avançado > mostrar menu Desenvolvedor na barra de menus desenvolvedor > agente do usuário 49
  • 50. Dicas – testesNavegadores FF: instalar user agent switcher add-on addons.mozilla.org/en- US/firefox/addon/user-agent-switcher ferramentas > default use agent > escolher um ou adicionar 50
  • 51. Dicas – testesAdobe Device Central Visualizar o conteúdo em uma grande variedade de dispositivos. – A aparência dos dispositivos – Como o conteúdo é exibido nesses dispositivos Interagir, testar os níveis de desempenho, os estados da rede, a memória, os níveis de potência da bateria e tipos de iluminação 51
  • 52. Dicas – testesUser agent stringswww.useragentstring.com• indica o nome da aplicação, versão, sistema operacional e algumas características do computador.• ao acessar um site, o navegador envia esta string para o servidor que, se necessário, responde a cada requisição de acordo com o visitante. 52
  • 53. Dicas – referênciasMelhores práticas w3.org/TR/mobile-bpQuirksmode quirksmode.org/mobileSafari bit.ly/kXGKrHAndroid bit.ly/ey83FFInternet Explorer bit.ly/bWNCJ0Mozilla (Fennec) mzl.la/sBYOzOpera bit.ly/sUiAL 53
  • 54. Obrigada e sucesso @analauragomes :: www.emblema.art.branalauragomes@gmail.com :: www.webdemais.com.br Fireworks: fireworksbr.groups.adobe.com Dreamweaver: augdwbr.groups.adobe.com 54