1

web em dispositivos móveis • dicas práticas

@analauragomes

2

Bem vind@s!analauragomes@gmail.com@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 :: www.emblema.art.branalauragomes@gmail.com ::www.webdemais.com.br

Fireworks: fireworksbr.groups.adobe.comDreamweaver: augdwbr.groups.adobe.com