Web mobile dicas

web em dispositivos móveis • dicas práticas @analauragomes 1

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

Agenda• Compreender o meio • Dicas práticas – Web – Conteúdo – Web Mobile – Interação – Layout – Planejamento – Desenvolvimento – Testes 3

A Web somos nós

Cada um de nós 5

Usuários• Perfil básico • Interação• Expectativa • Experiência• Objetivo • Informação 6

Web Mobile• Perfil básico • Onde ele está?• O que vai fazer? • A que horas?• De que forma? • Qual aparelho? 7

Não é só tamanho...

Tipo• celular• tablets• e-readers

Capacidade• touch • OS• caneta • linguagens• memória • navegador• bateria 10

Cenários de uso - físico• luz • andando / parado• tráfego • WiFi / 3G• apertado

Cenários de uso - mental• nervoso / calmo Estado de espírito• atento / disperso • pressa / tranquilo Predisposição / Expectativa

Estatísticas - acessos fixo70 milhões celular22 milhões Fevereiro, 2011 | http://bit.ly/hrUBbg 13

Estatísticas - aparelhosSmartphones Hoje: 5,8%Ano:  165% Celulares Ano:  21% novembro, 2011 | http://bit.ly/uZpl2w 14

Estatísticas - navegadores web 15

Dicas – conteúdo Atenção... Estado de espírito... Procura por fatos. AGORA!Seja 100% relevante 18

Dicas – conteúdoSimplicidade +Objetividade 19

Dicas – conteúdoO que é maisimportanteaparece notopo da página 20

Dicas – conteúdoConteúdo Forma InteraçãoXHTML-MP CSS2 JavaScript HTML5 CSS3 [DOM] 21

Dicas – conteúdo 22

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

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

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

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

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

Dicas – interação• lembre-se dos gestos• não tem mouse over• projetar para o tamanho do dedo (40/80px) 28

Dicas – interação• rolagem vertical (conteúdo e menu)• navegação fácil de aprender 29

Dicas – interação• links e acessos inteligentes• acesso ao site normal 30

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

Dicas – interação• facilitar a entrada de dados (HTML5) – input type=“url” – input type=“email” – input type=“number” – input type=“tel” 32

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

Dicas – layout• usar poucas cores e gráficos/imagens• otimizar imagens• não usar background com fotos• usar ícones como background no CSS 34

Dicas – layout• dê ao usuário opções de layout claro e escuro• manter consistência com versão desktop 35

Dicas – planejamento 36

Dicas – planejamento Sitemap: writemaps.com 37

Dicas – planejamento Sitemap: xmind.net 38

Dicas – planejamentoWireframe: Blog spark (bit.ly/fSE77l) 39

Dicas – planejamentoWireframe: User Zen (bit.ly/eckXKE ) 40

Dicas – desenvolvimento• Bibliotecas e scripts: – Modernizr modernizr.com – JQuery Mobile jquerymobile.com – Boilerplate html5boilerplate.com/mobile 41

Dicas – desenvolvimento• Foco no usuário – experiência de uso – não focar no aparelho mas no recurso 42

Dicas – testes 43

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

Dicas – testesSimuladores• Windows Phone - create.msdn.com/en-US 45

Dicas – testesSimuladores• Android - developer.android.com – java SE develepment kit – android SDK • AVD manager • SDK manager 46

Dicas – testesSimuladores• Opera mobile - opera.com/developer/tools 47

Dicas – testesNavegadores IE: já está pronto F12 Ferramentas > Alterar cadeia de caracteres do agente do usuário 48

Dicas – testesNavegadores Safari: já está pronto editar > preferencias > avançado > mostrar menu Desenvolvedor na barra de menus desenvolvedor > agente do usuário 49

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

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

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

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

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

http://webdemais.com.br	950
http://www.netvibes.com	3
http://us-w1.rockmelt.com	1

Web mobile dicas

by Ana Laura Gomes on Nov 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 954

Statistics

Web mobile dicas — Presentation Transcript