Download - Web mobile dicas
![Page 1: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/1.jpg)
1
web em dispositivos móveis • dicas práticas
@analauragomes
![Page 2: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/2.jpg)
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
![Page 3: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/3.jpg)
3
Agenda
• Compreender o meio
– Web
– Web Mobile
• Dicas práticas
– Conteúdo
– Interação
– Layout
– Planejamento
– Desenvolvimento
– Testes
![Page 4: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/4.jpg)
A Web somos nós
![Page 5: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/5.jpg)
5
Cada um de nós
![Page 6: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/6.jpg)
6
Usuários• Perfil básico• Expectativa• Objetivo
• Interação• Experiência• Informação
![Page 7: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/7.jpg)
7
Web Mobile• Perfil básico• O que vai fazer?• De que forma?
• Onde ele está?• A que horas?• Qual aparelho?
![Page 8: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/8.jpg)
Não é só tamanho...
![Page 9: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/9.jpg)
Tipo• celular• tablets• e-readers
![Page 10: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/10.jpg)
10
Capacidade• touch• caneta • memória• bateria
• OS• linguagens• navegador
![Page 11: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/11.jpg)
Cenários de uso - físico• luz• tráfego• apertado
• andando / parado• WiFi / 3G
![Page 12: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/12.jpg)
Cenários de uso - mental• nervoso / calmo• atento / disperso• pressa / tranquilo
Estado de espírito
Predisposição / Expectativa
![Page 13: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/13.jpg)
13
Estatísticas - acessos
fixo70 milhões
celular 22 milhões
Fevereiro, 2011 | http://bit.ly/hrUBbg
![Page 14: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/14.jpg)
14
Estatísticas - aparelhos
SmartphonesHoje: 5,8%
Ano: 165%
CelularesAno: 21%
novembro, 2011 | http://bit.ly/uZpl2w
![Page 15: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/15.jpg)
15
Estatísticas - navegadores web
![Page 16: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/16.jpg)
16
Estatísticas - navegadores web
![Page 17: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/17.jpg)
17
Estatísticas - navegadores web
![Page 18: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/18.jpg)
18
Dicas – conteúdo
Seja 100% relevante
Atenção...Estado de espírito...
Procura por fatos.AGORA!
![Page 19: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/19.jpg)
19
Dicas – conteúdo
Simplicidade+
Objetividade
![Page 20: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/20.jpg)
20
Dicas – conteúdo
O que é mais importante aparece no topo da página
![Page 21: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/21.jpg)
21
Dicas – conteúdo
Conteúdo
XHTML-MP
HTML5
Forma
CSS2
CSS3
Interação
JavaScript
[DOM]
![Page 22: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/22.jpg)
22
Dicas – conteúdo
PADRÕES WEB
![Page 23: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/23.jpg)
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
![Page 24: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/24.jpg)
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
![Page 25: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/25.jpg)
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" />
![Page 26: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/26.jpg)
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 */
}
![Page 27: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/27.jpg)
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)" />
![Page 28: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/28.jpg)
28
Dicas – interação
• lembre-se dos gestos
• não tem mouse over
• projetar para o tamanho do dedo (40/80px)
![Page 29: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/29.jpg)
29
Dicas – interação
• rolagem vertical (conteúdo e menu)
• navegação fácil de aprender
![Page 30: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/30.jpg)
30
Dicas – interação
• links e acessos inteligentes
• acesso ao site normal
![Page 31: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/31.jpg)
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
![Page 32: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/32.jpg)
32
• facilitar a entrada de dados (HTML5) – input type=“url”– input type=“email”– input type=“number”– input type=“tel”
Dicas – interação
![Page 33: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/33.jpg)
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
![Page 34: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/34.jpg)
34
• usar poucas cores e gráficos/imagens
• otimizar imagens• não usar background
com fotos• usar ícones como
background no CSS
Dicas – layout
![Page 35: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/35.jpg)
35
• dê ao usuário opções de layout claro e escuro
• manter consistência com versão desktop
Dicas – layout
![Page 36: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/36.jpg)
36
Dicas – planejamento
![Page 37: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/37.jpg)
37
Dicas – planejamentoSitemap: writemaps.com
![Page 38: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/38.jpg)
38
Dicas – planejamentoSitemap: xmind.net
![Page 39: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/39.jpg)
39
Dicas – planejamentoWireframe: Blog spark (bit.ly/fSE77l)
![Page 40: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/40.jpg)
40
Dicas – planejamentoWireframe: User Zen (bit.ly/eckXKE )
![Page 41: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/41.jpg)
41
Dicas – desenvolvimento
• Bibliotecas e scripts:– Modernizr
modernizr.com– JQuery Mobile
jquerymobile.com– Boilerplate
html5boilerplate.com/mobile
![Page 42: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/42.jpg)
42
• Foco no usuário– experiência
de uso– não focar no
aparelho mas no recurso
Dicas – desenvolvimento
![Page 43: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/43.jpg)
43
Dicas – testes
![Page 44: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/44.jpg)
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
![Page 45: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/45.jpg)
45
Dicas – testesSimuladores• Windows Phone -
create.msdn.com/en-US
![Page 46: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/46.jpg)
46
Dicas – testesSimuladores• Android -
developer.android.com– java SE develepment kit– android SDK• AVD manager• SDK manager
![Page 47: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/47.jpg)
47
Dicas – testesSimuladores• Opera mobile -
opera.com/developer/tools
![Page 48: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/48.jpg)
48
Dicas – testesNavegadores
IE: já está pronto
F12 Ferramentas > Alterar cadeia de caracteres do agente do usuário
![Page 49: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/49.jpg)
49
Dicas – testesNavegadores
Safari: já está prontoeditar > preferencias > avançado > mostrar menu Desenvolvedor na barra de menus
desenvolvedor > agente do usuário
![Page 50: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/50.jpg)
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
![Page 51: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/51.jpg)
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
![Page 52: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/52.jpg)
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.
![Page 53: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/53.jpg)
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
![Page 54: Web mobile dicas](https://reader035.vdocuments.net/reader035/viewer/2022062319/558c364cd8b42a63458b463e/html5/thumbnails/54.jpg)
54
Obrigada e sucesso
@analauragomes :: [email protected] ::www.webdemais.com.br
Fireworks: fireworksbr.groups.adobe.comDreamweaver: augdwbr.groups.adobe.com