Download - Web mobile dicas
1
web em dispositivos móveis • dicas práticas
@analauragomes
2
Bem vind@[email protected]@analauragomesemblema.art.brwebdemais.com.br• Docente, palestrante e
consultora nas área de Web e Computação Gráfica
• Colaboradora do W3C Escritório Brasil
Publicações:Editora Senac-SP: XHTML/CSS Criação de Páginas Web, Dreamweaver CS5, Fireworks CS5Editora Abril: Coleção Clique a Clique, O curso de informática da Abril
Presença digital: meadiciona.com/ana_laura
3
Agenda
• Compreender o meio
– Web
– Web Mobile
• Dicas práticas
– Conteúdo
– Interação
– Layout
– Planejamento
– Desenvolvimento
– Testes
A Web somos nós
5
Cada um de nós
6
Usuários• Perfil básico• Expectativa• Objetivo
• Interação• Experiência• Informação
7
Web Mobile• Perfil básico• O que vai fazer?• De que forma?
• Onde ele está?• A que horas?• Qual aparelho?
Não é só tamanho...
Tipo• celular• tablets• e-readers
10
Capacidade• touch• caneta • memória• bateria
• OS• linguagens• navegador
Cenários de uso - físico• luz• tráfego• apertado
• andando / parado• WiFi / 3G
Cenários de uso - mental• nervoso / calmo• atento / disperso• pressa / tranquilo
Estado de espírito
Predisposição / Expectativa
13
Estatísticas - acessos
fixo70 milhões
celular 22 milhões
Fevereiro, 2011 | http://bit.ly/hrUBbg
14
Estatísticas - aparelhos
SmartphonesHoje: 5,8%
Ano: 165%
CelularesAno: 21%
novembro, 2011 | http://bit.ly/uZpl2w
15
Estatísticas - navegadores web
16
Estatísticas - navegadores web
17
Estatísticas - navegadores web
18
Dicas – conteúdo
Seja 100% relevante
Atenção...Estado de espírito...
Procura por fatos.AGORA!
19
Dicas – conteúdo
Simplicidade+
Objetividade
20
Dicas – conteúdo
O que é mais importante aparece no topo da página
21
Dicas – conteúdo
Conteúdo
XHTML-MP
HTML5
Forma
CSS2
CSS3
Interação
JavaScript
[DOM]
22
Dicas – conteúdo
PADRÕES WEB
23
Dicas – conteúdo
Evite o que não vai funcionar
• framesets
• tabelas
• tabelas aninhadas
• mapa de imagem
• css e scripts inline
• plugins e extensões
24
Dicas – conteúdo
Estraté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
25
Dicas – conteúdo
Estratégias de adaptação - viewport
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />
26
Dicas – conteúdo
Estratégias de adaptação – media queries
http://www.w3.org/TR/css3-mediaqueries
Folha de estilos interna
@media screen and (min-width:801px){
/* definições para telas com largura maior que 801px */
}
27
Dicas – conteúdo
Estratégias de adaptação – media queries
Folha 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)" />
28
Dicas – interação
• lembre-se dos gestos
• não tem mouse over
• projetar para o tamanho do dedo (40/80px)
29
Dicas – interação
• rolagem vertical (conteúdo e menu)
• navegação fácil de aprender
30
Dicas – interação
• links e acessos inteligentes
• acesso ao site normal
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
32
• facilitar a entrada de dados (HTML5) – input type=“url”– input type=“email”– input type=“number”– input type=“tel”
Dicas – interação
33
• 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
Dicas – layout
34
• usar poucas cores e gráficos/imagens
• otimizar imagens• não usar background
com fotos• usar ícones como
background no CSS
Dicas – layout
35
• dê ao usuário opções de layout claro e escuro
• manter consistência com versão desktop
Dicas – layout
36
Dicas – planejamento
37
Dicas – planejamentoSitemap: writemaps.com
38
Dicas – planejamentoSitemap: xmind.net
39
Dicas – planejamentoWireframe: Blog spark (bit.ly/fSE77l)
40
Dicas – planejamentoWireframe: User Zen (bit.ly/eckXKE )
41
Dicas – desenvolvimento
• Bibliotecas e scripts:– Modernizr
modernizr.com– JQuery Mobile
jquerymobile.com– Boilerplate
html5boilerplate.com/mobile
42
• Foco no usuário– experiência
de uso– não focar no
aparelho mas no recurso
Dicas – desenvolvimento
43
Dicas – testes
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
45
Dicas – testesSimuladores• Windows Phone -
create.msdn.com/en-US
46
Dicas – testesSimuladores• Android -
developer.android.com– java SE develepment kit– android SDK• AVD manager• SDK manager
47
Dicas – testesSimuladores• Opera mobile -
opera.com/developer/tools
48
Dicas – testesNavegadores
IE: já está pronto
F12 Ferramentas > Alterar cadeia de caracteres do agente do usuário
49
Dicas – testesNavegadores
Safari: já está prontoeditar > preferencias > avançado > mostrar menu Desenvolvedor na barra de menus
desenvolvedor > agente do usuário
50
Dicas – testesNavegadores
FF: instalar user agent switcher add-onaddons.mozilla.org/en-US/firefox/addon/user-agent-switcherferramentas > default use agent > escolher um ou adicionar
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
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.
53
Dicas – referências
Melhores práticas w3.org/TR/mobile-bp
Quirksmode quirksmode.org/mobile
Safari bit.ly/kXGKrH
Android bit.ly/ey83FF
Internet Explorer bit.ly/bWNCJ0
Mozilla (Fennec) mzl.la/sBYOz
Opera bit.ly/sUiAL
54
Obrigada e sucesso
@analauragomes :: [email protected] ::www.webdemais.com.br
Fireworks: fireworksbr.groups.adobe.comDreamweaver: augdwbr.groups.adobe.com