Use a Cabeca Mobile Web

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Primeiros Elogios ao Use a Cabeça! Mobile Web
“Se você tem considerado comprar um livro sobre desenvolvimento mobile que seja para 
qualquer tipo de navegador ou fornecedor, deveria parar agora mesmo e comprar o Use a 
Cabeça! Mobile Web. Foi escrito por pessoas incrivelmente inteligentes [que] possuem grande 
experiência em mobile e não param em uma só plataforma, mas trabalham em todas elas. 
Muitos desenvolvedores passam dias discutindo [se] deveriam escolher nativo ou web. Este 
livro transita suavemente de assuntos introdutórios a avançados, dando toda a informação 
necessária para criar fantásticos conteúdos mobile.” 
 — Andrea Trasatti, líder do projeto DeviceAtlas e cocriador do depósito 
WURFL de informação de capacidade de dispositivo wireless
“Uma introdução pragmática ao caótico mundo do desenvolvimento de mobile web, como 
o é nos dias atuais, com um toque de como podemos e deveríamos nos familiarizar com ele 
no amanhã. Use a Cabeça! Mobile Web apresenta de forma bem sucedida técnicas práticas para 
que todos os leitores possam utilizar imediatamente, enquanto fornece uma grande base e 
vários recursos para desenvolvedores mais experientes se apoiarem.”
 — Stephen Hay, web designer, desenvolvedor, orador e cofundador da 
Mobilism Conference
“Com exercícios práticos desde o início, o livro Use a Cabeça! Mobile Web proporciona uma 
excelente introdução aos desafios e oportunidades disponíveis ao explorar os próximos 
capítulos em web design.”
 — Bryan e Stephanie Rieger, fundadores do yiibu.com
BOOK - Head First Mobile Web - 29-04-13.indb 1 02/05/2013 13:08:01
“O Use a Cabeça! Java de Kathy e Bert transforma a página impressa na coisa mais próxima 
à interface gráfica do usuário que você já viu. Em tom irônico, de maneira descolada, os 
autores tornam o aprendizado do Java uma experiência envolvente do tipo ‘o que você fará 
em seguida?’”
 — Warren Keuffel, Software Development Magazine
“Além do estilo envolvente que o leva daquilo que você desconhece para o status de 
guerreiro Java, o Use a Cabeça! Java abrange uma enorme quantidade de questões práticas 
que os outros textos abandonam como o temido ‘exercício para o leitor...’. É inteligente, 
irônico, descolado e prático – não há muitos livros que podem fazer essa reivindicação e 
viver de acordo com ela, enquanto também ensinam sobre a serialização do objeto e os 
protocolos de inicialização da rede.”
 — Dr. Dan Russell, Diretor de Ciências e Pesquisa da Experiência do Usuário 
Centro de Pesquisa Almaden da IBM (e ensina Inteligência Artificial na 
Universidade de Stanford)
“É rápido, irreverente, divertido e cativante. Tenha cuidado – você pode realmente 
aprender algo!”
 — Ken Arnold, ex-engenheiro sênior da Sun Microsystems e coautor (com 
James Gosling, criador do Java), Linguagem de Programação Java
“Eu sinto como se o peso de milhares de livros acabasse de ser retirado da minha cabeça.” 
 — Ward Cunningham, inventor do Wiki e fundador do grupo Hillside
“O tom certo para o guru entendido, casual e legal em todos nós. A referência certa para as 
estratégias de desenvolvimento prático – faz meu cérebro avançar sem ter que passar pela 
fala velha e cansada do professor.”
 — Travis Kalanick, fundador da Scour and Red Swoosh Membro do MIT TR100
“Há livros que você compra, livros que você guarda, livros que você mantém em sua mesa 
e graças à O’Reilly e à equipe do Use a Cabeça!, existe a penúltima categoria, livros Use a 
Cabeça!. Eles são os únicos que estão com as orelhas dobradas, deformados e são levados a 
todos os lugares. O Use a Cabeça! SQL está no topo da minha pilha. Ah, até o PDF que tenho 
para revisão está surrado e rasgado.”
 — Bill Sawyer, Gerente de Currículos ATG, Oracle
“A admirável clareza, humor e doses substanciais de inteligência deste livro o tornam o tipo 
de livro que ajuda até os não programadores a pensar bem sobre a resolução do problema.”
 — Cory Doctorow, coeditor do Boing Boing autor de Cinema Pirata e Pequeno 
Irmão
Elogios sobre outros livros da série
BOOK - Head First Mobile Web - 29-04-13.indb 2 02/05/2013 13:08:01
“Eu recebi o livro ontem e comecei a lê-lo... e não consegui parar. Isto é definitivamente très 
legal. É divertido, mas eles abordam muita coisa e estão certos ao meu ver. Estou realmente 
impressionado.”
 — Erich Gamma, Engenheiro da IBM e coautor de Design Patterns
“Um dos livros mais divertidos e inteligentes sobre design de software que eu já li.”
 — Aaron LaBerge, Tecnologia VP, ESPN.com
“O que costumava ser um processo longo de aprendizagem com tentativas e erros, agora foi 
reduzido a um livro envolvente.”
 — Mike Davidson, CEO, Newsvine, Inc.
“O design elegante é o centro de cada capítulo, cada conceito transmitido em doses iguais 
de pragmatismo e inteligência.”
 — Ken Goldstein, Vice-Presidente executivo da Disney Online
“Eu  o Use a Cabeça! HTML com CSS & XHTML – ensina tudo que você precisa aprender 
em um formato divertido.”
 — Sally Applin, Designer IU e Artista
“Geralmente, quando leio um livro ou um artigo sobre padrões de design, às vezes tenho 
que ficar de olho em alguma coisa só para me certificar que estava prestando atenção. Não 
com este livro. Por mais estranho que possa parecer, este livro torna divertido o aprendizado 
sobre padrões de design.”
“Enquanto os outros livros sobre padrões de design estão dizendo ‘Bueller... Bueller... 
Bueller...’, este livro está sobre o carro do desfile, cantando‘Shake it up, baby!’”
 — Eric Wuehler
“Eu literalmente amo este livro. Na verdade, eu beijei este livro na frente da minha esposa.” 
 — Satish Kumar
Elogios sobre outros livros da série
BOOK - Head First Mobile Web - 29-04-13.indb 3 02/05/2013 13:08:01
Outros livros da série Use a Cabeça! 
Use a Cabeça! Ajax Profissional
Use a Cabeça! Álgebra
Use a Cabeça! Análise e Projeto Orientado ao Objeto
Use a Cabeça! Análise de Dados
Use a Cabeça! C# – 2ª Edição
Use a Cabeça! Desenvolvimento de Software
Use a Cabeça! Desenvolvendo para iPhone
Use a Cabeça! Estatística
Use a Cabeça! Excel 
Use a Cabeça! Física
Use a Cabeça! Geometria 2D
Use a Cabeça! Java – 2ª Edição
Use a Cabeça! JavaScript
Use a Cabeça! Padrões de Projetos – 2ª Edição
Use a Cabeça! Programação
Use a Cabeça! PHP & MySQL
Use a Cabeça! PMP
Use a Cabeça! Python
Use a Cabeça! Rails – 2ª Edição 
Use a Cabeça! Redes de Computadores
Use a Cabeça! Servlets & JSP – 2ª Edição
Use a Cabeça! SQL
Use a Cabeça! Web Design
BOOK - Head First Mobile Web - 29-04-13.indb 4 02/05/2013 13:08:01
Rio de Janeiro, 2013
Lyza Danger Gardner
Jason Grigsby
Use a Cabeça! Mobile Web
Não seria um sonho se existisse um 
livro que me ajudasse a construir sites 
mobile e que fosse mais divertido do 
que ir ao dentista? Provavelmente, não 
passa de uma fantasia...
BOOK - Head First Mobile Web - 29-04-13.indb 5 02/05/2013 13:08:01
Às mulheres fenomenais de minha família: minha irmã, Maggie; 
Momula, Fran; Tia Catherine; madrasta, Christie; e, acima de tudo, 
à memória de minha avó, Pearl, cuja independência feroz e letrada 
inspirou gerações.
 — Lyza
Aos meus pais por comprarem aquele Commodore 64 tantos anos 
atrás; à minha amada esposa, Dana, sem cujo apoio e compreensão 
este livro nunca teria acontecido; e a Katie e Danny – sim, papai pode 
brincar agora.
 — Jason
BOOK - Head First Mobile Web - 29-04-13.indb 7 02/05/2013 13:08:02
os autores
viii
Lyza Danger Gardner (@lyzadanger) é uma 
desenvolvedora. Ela constrói , quebra e hackeia 
coisas na web desde 1996. Curiosamente, Lyza 
realmente nasceu e cresceu em Portland, Oregon, 
a cidade onde todos querem estar, mas parece que 
ninguém é de lá.
Lyza começou cedo na faculdade e acabou fazendo 
um curso em duas áreas distintas: um bacharelado 
em Artes e Letras
pela Portland State University, 
seguido por um programa de mestrado em Ciência 
da Computação na Universidade de Birmingham 
(Reino Unido).
Lyza escreveu diversos aplicativos para web 
(desenvolvimentos no lado servidor, tá pensando o 
quê?!), derrotou astutos sistemas de gerenciamento 
de conteúdo, otimizou sites mobile, bateu vários 
APIs e se preocupou muito com banco de dados. 
Fascinada com a maneira com que a tecnologia 
mobile tem mudado as coisas, agora ela gasta 
muito tempo pensando a respeito do futuro da web, 
mobile e outras tantas coisas.
Desde a cofundação da Cloud Four, uma agência 
de mobile web em Portland, em 2007, Lyza tem 
mergulhado fundo, expandido os horizontes da 
Terra dos Dispositivos, explorando os defeitos 
e caos dos navegadores mobile e a mobile web. 
Possui também um conjunto estranho de hobbies 
anacrônicos, e alguns já disseram que ela tira um 
número considerável de fotografias. Ela tem um 
domínio .com de quatro letras! Apostamos que 
você pode imaginar o que isso significa e irá visitá-la.
Lyza
Jason
Em 2000, Jason Grigsby comprou seu primeiro 
celular. Tornou-se obcecado com a maneira que o 
mundo poderia se tornar um lugar melhor se todos 
pudessem ter acesso ao mundo das informações em 
seus bolsos. Quando sua esposa, Dana, conheceu-o, 
ele tinha as paredes de seu apartamento cobertas 
com loucos sonhos mobile. Até hoje Jason continua 
sem entender como ela se casou com ele.
Aqueles sonhos mobile deram com a cara na 
porta da realidade – WAP era uma porcaria. Jason 
trabalhou na Web até 2007, quando o iPhone 
mostrou que aquela era a hora certa. Juntou 
forças com as três pessoas mais inteligentes que ele 
conhecia e começaram a Cloud Four.
Desde que cofundou a Cloud Four, teve a sorte 
de trabalhar em muitos projetos fantásticos, 
incluindo o Obama iPhone App. Ele é fundador e 
presidente da Mobile Portland, uma empresa sem 
fins lucrativos dedicada a promover a comunidade 
mobile em Portland, Oregon.
Jason é um orador e consultor requisitado na área 
de mobile. De qualquer modo, ele é mais obcecado 
com mobile agora do que em 2000 (desculpe-me, 
querida!).
Encontre-o blogando em http://cloudfour.com; 
em seu site pessoal, http://userfirstweb.com; e no 
Twitter como @grigs. Por favor, deixe um “olá”!
BOOK - Head First Mobile Web - 29-04-13.indb 8 02/05/2013 13:08:03
conteúdo
ix
Conteúdo (Sumário)
 Introdução xxi
1 Apresentando a mobile web: Web Design Responsivo 1
2 Responsividade responsável: Web Design Responsivo Mobile First 43
3 Um site mobile separado: Encarando circunstâncias menos incríveis 91
4 Decidindo a quem dar suporte: A quais dispositivos deveríamos dar suporte? 137
5 Bancos de Dados e Classes de Dispositivos: Faça o que tem que ser feito 151
6 Construa um aplicativo web para dispositivos móveis 
usando um framework: O Tartanator 217
7 Mobile web apps no mundo real: Super aplicativos para dispositivos móveis 267
8 Construa aplicativos móveis híbridos com PhoneGap: Virando nativo 313
9 Como ser um amigo do futuro: Fazendo (algum) sentido em meio ao caos 357
i Sobras: As seis melhores coisas (que não cobrimos) 373
ii Configure seu ambiente de servidor web: Tem que começar alguma hora 387
iii Instale o WURFL: Detectando dispositivos 397
iv Instale o Android SDK e suas ferramentas: Cuide do ambiente 403
 Índice 417
Conteúdo (A coisa real)
Introdução
 Seu cérebro na mobile web. Agora você está tentando aprender alguma coisa, 
enquanto seu cérebro está lhe fazendo o favor de se certificar que o aprendizado não será 
fixado. Seu cérebro está pensando: “Melhor deixar espaço para coisas mais importantes, 
como quais animais selvagens devo evitar e se atear fogo nesse BlackBerry Bold ativará ou 
não o sistema de combate a incêndios”. Então, como enganar seu cérebro para que ele pense 
que sua vida depende de entender sobre mobile web?
A quem se destina este livro? xxii
Sabemos o que está pensando xxiii
E sabemos o que seu cérebro está pensando xxiii
Metacognição: pensando sobre pensar xxv
Revisão Técnica xxx
Agradecimentos xxxi
BOOK - Head First Mobile Web - 29-04-13.indb 9 02/05/2013 13:08:03
conteúdo
x
apresentando a mobile web
Web Design Responsivo1 Olá! Pronto para mergulhar na mobile? Desenvolvimento Mobile Web é um estilo de vida radicalmente excitante. Há glamour e emoção, além de ser cheio de momentos 
Eureka! Mas também existe muito mistério e confusão. A tecnologia Mobile está evoluindo 
em uma velocidade alucinante, e ainda há tanto o que aprender! Segure firme. Começaremos 
nossa jornada mostrando-lhe uma maneira de fazer sites chamada de Web Design Responsivo 
(WDR). Você será capaz de adaptar sites para que pareçam ótimos em uma porção de 
dispositivos móveis, construindo-os com as habilidades da web que você já possui.
Junte-se à febre mobile 2
Algo estranho aconteceu a caminho do pub 4
Se os navegadores de celulares são tão bons... 5
O que há de tão diferente na mobile web? 6
Web Design Responsivo 10
Diferentes CSS em diferentes lugares 12
CSS media queries 13
A estrutura atual do site Splendid Walrus 15
Analisando o CSS atual 16
O que precisa ser mudado? 17
Identifique o CSS que precisa ser mudado 18
Passos para criar CSS mobile específicos 19
O que há de errado afinal com o layout de largura fixa? 26
Como o fluido é melhor? 27
Fique fluido 28
Continue sua conversão fluida 29
Mudança de Contexto 31
O que há de errado com essa figura? 32
Imagens (e mídias) fluidas 33
Lembre-se de ser Responsável 36
Isto é um site responsivo! 40
Design Responsivo também é um estado de espírito 41
styles.css
index.htmlindex.html
styles.cssstyles.css
BOOK - Head First Mobile Web - 29-04-13.indb 10 02/05/2013 13:08:05
conteúdo
xi
responsividade responsável
Web Design Responsivo Mobile First2 Que belo site mobile. Mas apenas uma beleza externa. Debaixo das aparências, eis uma coisa completamente diferente. Pode parecer um site mobile, mas 
ainda é um site para desktop com roupagem mobile. Se quisermos correr para transformar 
este site em mobile, devemos começar com mobile first. Começaremos dissecando o 
site em evidência para encontrar os ossos de desktop escondidos em seu armário mobile. 
Faremos uma faxina geral e começaremos do zero com realce progressivo, construindo 
desde o conteúdo básico até a visualização de desktop. Quando terminarmos, você terá 
uma página otimizada independentemente do tamanho da tela
Justo quando achou que era hora de comemorar... 44
Tem problema mesmo? Como podemos saber? 45
O que fazer quando as coisas não estão tão rápidas 47
Não deixe sua aparência enganá-lo, é uma GRANDE página 48
Há ouro lá nas colinas HAR 49
Encontre o que está retardando a velocidade da página 51
De onde veio aquele JavaScript do Google Maps? 53
Parece mobile, mas não é 55
Web Design Responsivo Mobile First 56
O que é Melhoria Progressiva? 57
Conserte as flutuações de conteúdo 60
Media queries para mobile first 61
 Surpresa! A página fica quebrada no Internet Explorer 62
 Um src para controlar todos os outros 68
Zoom in no marcador viewport <meta> 72
O direito de dar zoom? 73
Adicione o mapa de volta usando JavaScript 74
Construa um pseudo media query em JavaScript 76
Adicione o JavaScript na página On Tap Now 77
Estes widgets não são responsivos 79
Mova atributos iframe para equivalentes CSS 80
Remova atributos do JavaScript 81
A sobreposição do mapa está de volta 83
Deixe o conteúdo ser seu guia 84
Breakpoints ao seu socorro 87
 Um src para controlar todos os outros 68
BOOK - Head First Mobile Web - 29-04-13.indb 11 02/05/2013 13:08:05
conteúdo
xii
um site mobile separado
Encarando circunstâncias menos incríveis3 A visão de uma Web à parte e responsiva é tão bela... na qual cada 
site possui um layout que comanda todos os outros, fazendo maravilhas com uma abordagem 
mobile first. Hmm... que lindo. Mas o que acontece quando uma dose amarga de realidade 
vem à tona? Como sistemas antigos, dispositivos defasados ou reduções de orçamento dos 
clientes? E se, algumas vezes, ao invés de misturar suporte do desktop e mobile em apenas 
uma linda sopa, você precisasse mantê-los separados? Neste capítulo, voltaremos nossas 
atenções para os pequenos detalhes do detectar usuários mobile, dar suporte àqueles 
telefones antigos e construir um site mobile separado.
Encarando circunstâncias menos incríveis
Creature Comforts possui agentes no campo 92
Como os agentes podem conseguir e compartilhar as 
informações que precisam? 93
Mande os usuários de telefones a um site mobile otimizado 96
Detecte usuários mobile 97
Conhecendo melhor os user-agents 98
User-agents: a prole do Diabo? 101
Falando direto: a maioria dos sites tem um site mobile separado 104
Quando o que você realmente quer fazer é (re)direcionar 105
Dê uma olhada no script 106
Como funciona o script? 107
Faça um mockup mobile 108
Entrega especial...de fatores complicados 110
Nem todos os celulares são smartphones... nem de longe 113
Vamos simplificar: conheça o XHTML-MP 114
Por que iríamos querer usar aquela coisa velha? 115
Fique longe de apuros com o XHTML-MP 116
A propósito, rolagem é uma droga 119
Uma última bola curva 119
Chaves de acesso em ação 123
Então, estamos prontos? 124
O que deu errado? 124
Conserte os erros 125
CSS Mobile espertos 127
Hmm... algo está faltando 132
O visual do botão está lamentável! 133
Grande sucesso! 134
BOOK - Head First Mobile Web - 29-04-13.indb 12 02/05/2013 13:08:06
conteúdo
xiii
decidindo a quem dar suporte
A quais dispositivos deveríamos dar suporte?4 Não há horas suficientes num dia para testar todos os dispositivos. Em algum momento, temos que estabelecer um limite a respeito 
do que podemos dar suporte. Porém, como decidir? E aquelas pessoas que usam 
dispositivos que não são possíveis de serem testados – são deixadas de lado? Ou 
é possível criar páginas web de um jeito que possibilite suas devidas aberturas em 
dispositivos que você nunca ouviu falar? Neste capítulo, faremos uma mistura mágica 
de requerimentos de projeto e uso do público para nos ajudar a descobrir a quais 
dispositivos devemos dar suporte e a quais não.
Como saber quando estabelecer o limite? 138
Afaste-se do teclado por um instante 139
Coisas às quais você não dá suporte vs. coisas às quais você 
não pode dar suporte 140
Faça perguntas sobre seu projeto 142
Ingredientes para sua poção mágica mobile 144
Afaste-se de seu armário de ferramentas e dados 145
Como saber se meus clientes têm a coisa certa? 150
BOOK - Head First Mobile Web - 29-04-13.indb 13 02/05/2013 13:08:06
conteúdo
xiv
bancos de dados e classes de dispositivos
Faça o que tem que ser feito5 Estabelecer um limite para os dispositivos aos quais damos suporte não quer dizer que daremos conta de alguns 
problemas irritantes. Como descobrimos o suficiente sobre os navegadores 
mobile de nossos usuários para saber se estamos à altura deles antes mesmo de 
disponibilizarmos algum conteúdo a eles? Como evitar um conteúdo (mal) construído para 
o menor denominador comum? E como organizar tudo isso sem perder a cabeça? Neste 
capítulo, entraremos no reino das capacidades dos dispositivos, iremos aprender a 
acessá-los com um banco de dados do dispositivo e, finalmente, descobrir como uni-los 
em classes de dispositivos para conservarmos nossa sanidade.
Um botão de pânico para estudantes amedrontados 152
Fontes de dados de dispositivos móveis 
ao seu socorro 154
Conheça o WURFL 155
WURFL e suas capacidades 156
WURFL: Código API inteligente 159
Podemos criar uma página de navegação também 160
Uma Página de Navegação: configurando 
nosso ambiente 161
Uma sequência rápida para melhorar sua página de navegação 168
Ponha as capacidades para trabalhar 170
Inicialize o dispositivo e prepare as informações 172
Esta coisa é mobile? 172
Torne a página um pouco mais 
inteligente com WURFL 176
O botão de pânico: para celulares apenas 177
Classes de dispositivos 181
A figura acabou de ficar muito maior 182
Avalie a homepage usando uma roupagem mobile 183
Agrupe os requisitos em múltiplas facetas mobile 184
Concluindo nossas classes de dispositivos 185
Familiarizando-se com a função de combinação 191
O que está acontecendo naquela instrução switch? 192
Use a função de combinação para testar capacidades 193
Preenchendo os vazios nos testes de 
classe de dispositivos 200
Precisamos de uma rede de segurança maior 211
Um salto no tempo 212
BOOK - Head First Mobile Web - 29-04-13.indb 14 02/05/2013 13:08:07
conteúdo
xv
construa um aplicativo web para dispositivos móveis 
usando um framework
O Tartanator6 “Queremos um aplicativo!” Há apenas um ou dois anos, esta declaração geralmente significava uma coisa: desenvolvimento de código nativo e remanejamento para 
cada plataforma que quisesse dar suporte. Mas nativo não é a única jogada. Atualmente, 
aplicativos de web para navegadores mobile possuem certa popularidade – especialmente 
agora que os famosos HTML5 e seus companheiros, CSS3 e JavaScript, estão por aí. Vamos 
nos aprofundar no mundo da mobile web e levar um framework mobile – ferramentas de 
código feitas para ajudá-lo a terminar rapidamente seu trabalho – para dar uma volta!
HTML5... aplicativo... o que será que essas palavras significam? 219
Como os sites “tradicionais” comportam-se normalmente 220
Como os sites “com cara de aplicativo” comportam-se normalmente 221
O plano mestre para a fase 1 do Tartanator 224
Por que usar frameworks de aplicativo web para dispositivos móveis? 225
Nossa escolha para o Tartanator: jQuery Mobile 226
Construa uma página básica com jQuery Mobile 228
Sinalize o resto da página 229
O atributo data-* HTML5 231
Criando links para múltiplas páginas com o jQuery Mobile 234
Nós demos a você uma ideia para começar com a lista 241
Arraste o resto dos tartans 243
Filtre e organize uma lista 244
Adicione uma barra de ferramentas no rodapé 249
Torne a barra de ferramentas atraente 250
Finalize a estrutura 251
Hora de fazer aqueles formulários de construção dos tartans 253
Traduza os padrões de tartans para um formulário 255
Construa um formulário HTML5 256
Está na hora de adicionar alguns campos básicos 257
Listas dentro de listas permitem que os usuários adicionem cores 258
Pares de ingredientes cor-tamanho: o campo de seleção de cores 259
Pares de campos cor-tamanho: o campo tamanho 260
Criar um link até o formulário 262
BOOK - Head First Mobile Web - 29-04-13.indb 15 02/05/2013 13:08:09
conteúdo
xvi
mobile web apps no mundo real
super aplicativos para dispositivos móveis7 A mobile web se sente como aquela criança talentosa na sala de aula. Sabe, meio fascinante, que é capaz de coisas maravilhosas, mas é também 
problemática, imprevisível e misteriosa. Tentamos manter seu gênio hiperativo controlado, 
sendo diligentes ao coagir e estabelecer limites, porém agora chegou a hora de desenvolver 
alguns dos talentos naturais da mobile web. Podemos usar melhoria progressiva para 
florescer a interface em navegadores mais precoces e transformar a conectividade errática 
desde um fardo até um recurso, ao manejar um amável modo offline. E podemos chegar 
à essência da mobilidade usando a geolocalização. Vamos fazer disto um super aplicativo 
para mobile web!
Parece legal... 268
Aplicativos para dispositivos
móveis no mundo real 270
Preparar, apontar, melhorar! 274
Faça um formulário melhor 275
Um widget para gerenciar a lista de cores e tamanhos 276
Uma olhadela por debaixo da capa 277
Então, essa é a melhoria do frontend... 278
...e agora o backend 280
Os dois lados do generate.php 281
Uma última coisa! 282
Offline é importante 284
Uma receita básica para criar uma cache manifest 285
Infelizmente, o diabo está nos detalhes 286
Sirva a manifest como o tipo de conteúdo correto 287
A vitória é nossa (finalmente) 297
Como funciona a Geolocalização 298
Como perguntar aos navegadores compatíveis 
com W3C onde eles estão 299
Comece com a página Encontre Eventos 
(Find Events): a linha de base 301
Vamos integrar a geolocalização 303
Nada encontrado 309
BOOK - Head First Mobile Web - 29-04-13.indb 16 02/05/2013 13:08:09
conteúdo
xvii
construa aplicativos móveis híbridos com PhoneGap
Caça ao Tartan: virando nativo8 Às vezes, é preciso usar o aplicativo nativo. Isso acontece porque é necessário ter acesso a coisas não disponíveis nos navegadores mobile (ainda). Ou 
talvez seu cliente simplesmente tem que ter um aplicativo da App Store. Ansiamos 
por este futuro brilhante, quando teremos acesso a tudo que queremos no navegador, 
e os aplicativos web para dispositivos móveis compartilharão desse fascínio que os 
aplicativos nativos desfrutam. Até lá, temos a opção do desenvolvimento híbrido – 
continuamos escrevendo nosso código usando padrões web, e usando uma biblioteca 
para preencher as lacunas entre nosso código e as capacidades nativas do dispositivo. 
Aplicativos nativos multiplataforma construídos a partir de tecnologias web? Não é 
uma concessão tão ruim assim, né?!
A oportunidade bate à porta novamente 314
Como os aplicativos híbridos funcionam? 317
Preencha a lacuna web-nativo com PhoneGap 318
Familiarize-se com o PhoneGap 321
Como o aplicativo vai funcionar? 322
Mantenha-se informado sobre tartans descobertos 323
Anatomia do projeto Caça ao Tartan 324
Baixe seus aplicativos 328
Escolha sua aventura 329
Quem viu o quê? Armazene os tartans encontrados 334
O que o localStorage pode fazer por nós? 335
Verifique o que um browser suporta 339
Use uma função para mostrar quais tartans foram encontrados 340
Os métodos toggle e toggleClass 341
Você encontrou um tartan, hein?! Prove! 344
Alicie o PhoneGap para tirar fotos 345
O PhoneGap está quase pronto para seu primeiro clique 347
Agora estamos prontos para a API mediaCapture 348
Como lidaremos com o sucesso? 349
Sempre fica um pouco diferente na vida real 350
É só um pouco anônimo 351
Acertamos na mosca! 354
BOOK - Head First Mobile Web - 29-04-13.indb 17 02/05/2013 13:08:09
conteúdo
xviii
como ser um amigo do futuro
Fazendo (algum) sentido em meio ao caos9 Web Design Responsivo. Detecção de dispositivo. Aplicativos web para dispositivos móveis. PhoneGap. Espere... qual 
deveríamos usar? Há um número estonteante de jeitos de se desenvolver uma 
mobile web. Frequentemente, os projetos envolverão técnicas múltiplas usadas de 
maneira combinada. Não há apenas uma resposta certa. Mas não se preocupe. A chave 
é aprender a seguir o fluxo. Abraçar a incerteza. Adotar uma atitude de ser amigo do 
futuro e navegar com a maré, confiante em sua flexibilidade e pronto para se adaptar a 
qualquer coisa que o futuro lhe reservar.
E agora? 358
É complicado 361
Um manifesto amigável ao futuro 362
Se você não pode ser à prova do futuro, seja amigável ao futuro 364
Aplicativo hoje, página amanhã 365
É uma longa jornada: Aqui estão algumas orientações 366
Misture um grupo de benfeitorias mobile 369
Olhe para o futuro 371
 
 
 
 
 
 
 
 
 
 
 
• 
 
• 
• 
• 
 
• 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
BOOK - Head First Mobile Web - 29-04-13.indb 18 02/05/2013 13:08:10
conteúdo
xix
sobras
As seis melhores coisas 
(que não cobrimos)
 Parece sempre que há algo faltando? Entendemos 
perfeitamente... Justo quando pensou que tinha terminado, ainda há mais. Não 
poderíamos deixá-lo sem alguns detalhes extras, coisas que simplesmente seriam 
impossíveis de serem tratadas no decorrer do livro. Pelo menos, não se você quiser ser 
capaz de carregar esse livro sem uma mala com rodinhas. Então, dê uma olhada e veja o 
que (ainda) pode estar faltando.
1. Testando em dispositivos móveis 374
2. Eliminando bugs remotamente 376
3. Determine quais navegadores suportam o quê 382
4. APIs de Dispositivos 384
5. Lojas e distribuidores de aplicativos 385
6. RESS: design REsponsivo + componentes do Server-Side 386
i
configure seu ambiente de servidor web
Tem que começar alguma hora
 Você nem consegue soletrar “mobile web” sem o “web”. Não há 
como fugir. Você irá precisar de um servidor web se quiser desenvolver para a mobile web. 
Isso vai além de apenas completar exercícios ao longo deste livro. Você precisa colocar em 
algum lugar suas coisas de web-hosted, não importa se usar um serviço terceirizado de 
web hosting, um centro de dados corporativo ou seu próprio computador. Neste apêndice, 
vamos acompanhá-lo em seus passos para estabelecer um servidor web local em seu 
computador e pôr o PHP para funcionar usando softwares abertos.
O que precisamos de você 388
Apenas disponível localmente 389
Windows e Linux: Instale e configure XAMPP 390
Iniciando com o XAMPP 391
Pessoal da Mac: está na hora do MAMP 392
Confira se está conectado à porta certa 393
Acesse seu servidor web 394
phpInfo, por favor! 396
ii
BOOK - Head First Mobile Web - 29-04-13.indb 19 02/05/2013 13:08:10
conteúdo
xx
Instale o WURFL
Detectando dispositivos
 O primeiro passo para resolver mistérios de detecção de 
dispositivos é um trabalho bem extenso. Qualquer detetive decente 
sabe que precisamos colher pistas e informações de nossas testemunhas. Primeiro, 
precisamos investigar os cérebros da operação: a API PHP WURFL. Depois, rastreamos 
a força bruta: informação de capacidade para milhares de dispositivos em um único 
XML data file. Mas será necessário um pouco de coação para conseguir que os dois 
desembuchem a história toda, então ajustamos um pouco as configurações e tomamos 
nota cuidadosamente.
Quem tem o cérebro? 398
E quem tem os músculos? 399
Pondo os dois para trabalharem juntos 400
Uma pequena faxina no filesystem 401
Tome nota! 402
iii
instale o Android SDK e suas ferramentas
Cuide do ambiente
 Para ser o mestre dos testes em aplicativos Android, é 
preciso estar atento ao ambiente. Seu computador deverá ser 
transformado em um pequeno e lindo ecossistema onde você poderá agrupar aplicativos 
Android para e de dispositivos virtuais (emulados) e reais. Para torná-lo o pastor de 
sua ovelha Android, mostraremos como fazer o download do Android software 
development kit (SDK) – kit de software de desenvolvimento para Android, como 
instalar algumas ferramentas de plataforma, como criar alguns dispositivos virtuais e 
como instalar e desinstalar aplicativos.
Vamos baixar o Android SDK 404
Consiga as ferramentas certas para o trabalho 405
Crie um novo dispositivo virtual 408
Encontre o PATH certo 413
Índice 417
iv
BOOK - Head First Mobile Web - 29-04-13.indb 20 02/05/2013 13:08:10
você está aqui  xxi
Seu cérebro na mobile web. Agora você está tentando aprender alguma 
coisa, enquanto seu cérebro está lhe fazendo um favor ao se certificar que o aprendizado 
não emperre. Seu cérebro está pensando, “Melhor deixar espaço para coisas mais 
importantes, como quais animais selvagens devo evitar e se atear fogo nesse BlackBerry 
Bold ativará ou não o sistema de sprinkler”.
Então, como enganar seu cérebro para que ele 
pense que sua vida depende de entender sobre mobile web?
Como usar este livro
Introdução
Seu cérebro na mobile web. Agora você está tentando aprender alguma 
coisa, enquanto seu cérebro está lhe fazendo um favor ao se certificar que o aprendizado 
Não acredito que 
colocaram isso 
em um livro sobre 
mobile web!
Nesta seção, responderemos a 
questão fatídica: “Então, por 
que eles colocaram ISSO num l
ivro de Mobile Web?
BOOK - Head First Mobile Web - 29-04-13.indb 21 02/05/2013 13:08:11
como usar este livro
xxii introdução
A quem se destina este livro?
Quem provavelmente deveria se afastar deste livro?
Se responder “sim” a todas as perguntas abaixo:
este livro é pra você.
este livro não é para você.
[Nota do marketing: este livro é para qualquer um que possua um cartão de crédito. Ou dinheiro. Dinheiro é muito bom também. - Daniel]
1 Você possui experiência anterior em web design e 
desenvolvimento?
2 Você quer aprender, entender, lembrar e aplicar 
importantes conceitos de mobile web, de maneira 
que seja possível tornar suas páginas mobile mais 
interativas e animadas?
3 Você prefere uma conversa estimulante em um 
jantar festivo a uma palestra acadêmica seca e 
entediante?
1 Você é completamente novato em desenvolvimento web?
2 Você já está desenvolvendo apps para mobile web ou sites e 
está procurando por um livro de referência para mobile web?
3 Você tem medo de tentar coisas diferentes? Você prefere 
fazer um tratamento de canal a persistir numa sugestão de 
que pode haver mais de uma maneira verdadeira de construir 
na web? Você acredita que um livro técnico não pode ser 
sério se possuir um pub com tema de morsas e um app 
chamado Tartanator em seu interior?
Isto certamente ajudará se você já possui alguma manha com scripts também. Não estamos falando em ser um 
especialista, mas você não deveria sentir um pânico visceral ao ver um fragmento de JavaScript.
Se responder “sim” a qualquer destas perguntas:
BOOK - Head First Mobile Web - 29-04-13.indb 22 02/05/2013 13:08:11
introdução
você está aqui  xxiii
Sabemos o que está pensando
“Como isto pode ser um livro sério sobre desenvolvimento de mobile web?”
“Por que todos esses gráficos?”
“Posso realmente aprender desta maneira?”
E sabemos o que seu cérebro está pensando
Seu cérebro anseia por novidade. Está sempre procurando, escaneando, 
esperando por algo diferente. Foi construído desta forma, e isso ajuda a 
mantê-lo vivo.
Então, o que seu cérebro faz com todas essas coisas rotineiras, comuns, 
normais que você encontra por aí? Tudo que ele puder fazer para interferir 
no seu verdadeiro trabalho – gravar coisas que importam. Ele não se 
incomoda em guardar as coisas chatas; elas nunca passam pelo filtro 
do “isto obviamente não é importante”.
Como seu cérebro sabe o que é importante? Digamos que você saia 
para uma caminhada matinal e um tigre pule em cima de você. O 
que acontece em seu corpo e cabeça?
Os neurônios queimam. As emoções redobram seus esforços. A 
química surge.
E é aí que seu cérebro sabe...
Isto deve ser importante! Não se esqueça!
Mas imagine que você está em casa ou numa biblioteca. É uma zona 
segura, aconchegante e livre de tigres. Você está estudando. 
Preparando-se para uma prova. Ou tentando aprender algo 
assuntos técnico e complicado que seu chefe pensa 
que irá lhe tomar uma semana, 10 dias no máximo.
Só há um problema: seu cérebro está tentando lhe 
fazer um grande favor. Está tentando se certificar 
que este conteúdo obviamente sem importância não 
está ocupando recursos escassos. Recursos que são mais 
bem aproveitados armazenando coisas realmente 
importantes. Como tigres. Como o perigo do fogo. 
Como o fato de que você nunca deverá praticar 
snowboard de bermuda.
E não há uma maneira simples de dizer ao seu 
cérebro: “Ei cérebro, muito obrigado, mas não 
importa quão chato seja este livro e quão pouco 
esteja sendo registrado em minha escala Richter 
emocional neste instante, realmente quero que 
você mantenha essas coisas por aí.”
Ótimo. Só mais 
umas 450 páginas 
entediantes.
Seu cérebro pensa que ISTO é importante.
Seu cérebro
 pensa que 
ISTO não é 
importante 
para ser gua
rdado.
BOOK - Head First Mobile Web - 29-04-13.indb 23 02/05/2013 13:08:11
como usar este livro
xxiv introduçãoxxiv introdução
Entendemos que o leitor do “Use a
 Cabeça!” é um aprendiz.
Então, o que é preciso pa
ra aprender algo? Primeiro
, é preciso que você ente
nda e depois se 
certifique de não esquece
r. Não é uma questão de 
empurrar fatos em sua ca
beça. Baseado nas 
últimas pesquisas em ciê
ncia cognitiva, neurobiolo
gia e psicologia educacio
nal, para aprender é 
preciso muito mais do qu
e textos numa página. Sa
bemos o que liga seu cér
ebro.
Alguns dos princípios de 
aprendizado do “Use a C
abeça!”
Torne-se visual. Imagen
s são muito mais memori
záveis do que palavras so
ltas e tornam o 
aprendizado muito mais e
ficiente (melhora de mais
 
de 89% em estudos 
de lembrança e 
transferência). 
Isso também torna 
as coisas mais 
compreensíveis. 
Ponha as palavras de
ntro 
ou próximas aos gráf
icos a 
que elas estão relacionad
as, em vez de no fim ou 
em outra página. Assim, 
os aprendizes estarão du
as vezes mais aptos a res
olverem problemas 
relacionados ao conteúdo
. 
Use uma linguagem i
nformal e personaliza
da. Em estudos recentes
, 
estudantes foram 40% m
elhores em testes pós-ap
rendizado se o conteúdo
 
estivesse falando diretam
ente ao leitor, usando um
a linguagem em primeira
 
pessoa e coloquial, em v
ez de utilizar um tom form
al. Conte histórias ao invé
s 
de dar uma palestra. Seja
 mais informal. Não se le
ve tão a sério. A que voc
ê 
daria mais atenção: a um
a companhia agradável n
uma festa ou uma palest
ra?
Leve o aprendiz a pen
sar mais profundame
nte. Em outras palavras, 
a 
menos que você flexibiliz
e ativamente seus neurô
nios, nada demais aconte
ce 
em sua cabeça. Um leito
r deve ser motivado, eng
ajado, curioso e inspirado
 
a resolver problemas, tira
r conclusões e gerar nova
s tecnologias. E para isso
 
são necessários desafios
; exercícios e questões q
ue provoquem o pensar; 
e 
atividades que envolvam
 ambos os lados do céreb
ro e múltiplos sentidos.
Atraia – e mantenha – 
a atenção dos leitores
. Todos nós já tivemos 
a experiência do “quero m
uito aprender isto, mas nã
o consigo ficar 
acordado para passar da p
rimeira página”. Seu céreb
ro presta atenção a 
coisas que estão além do 
comum: interessantes, es
tranhas, atrativas, 
inesperadas. Aprender um
 assunto novo, complicado
 e técnico não tem 
que ser chato. Seu cérebr
o aprenderá muito mais rá
pido se não for.
Toque suas emoções. S
abemos que sua habilidad
e para lembrar-se 
de algo é amplamente dep
endente de seu conteúdo
 emocional.
Lembra--mos daquilo com 
o que nos importamos. Lem
bramos quando 
sentimos algo. Não, não es
tamos falando de histórias 
de quebrar o 
coração sobre um menino 
e seu cão. Estamos falando
 de emoções 
como surpresas, curiosidad
e, diversão, “mas que m...!
”, e o sentimento 
de “eu sou o bom!” que su
rge quando resolvemos um
 quebra-cabeça, 
aprendemos algo que todo
s os outros pensam ser dif
ícil, ou percebemos 
que sabemos algo que Bob
, o engenheiro, “sou mais t
écnico que você”, não sabe
.
Cuidado M
obile Web!
 
Aí vamos n
ós!
atividades que envolvam
 ambos os lados do céreb
ro e múltiplos sentidos.
Atraia – e mantenha – 
a atenção dos leitores
.
a experiência do “quero m
uito aprender isto, mas nã
o
consigo ficar 
acordado para passar da p
rimeira página”. Seu céreb
ro presta atenção a 
coisas que estão além do 
comum: interessantes, es
tranhas, atrativas, 
inesperadas. Aprender um
 assunto novo, complicado
 e técnico não tem 
que ser chato. Seu cérebr
o aprenderá muito mais rá
pido se não for.
Toque suas emoções.
de algo é amplamente dep
endente de seu conteúdo
 emocional.
Lembra--mos daquilo com 
o que nos importamos. Lem
bramos quando 
sentimos algo. Não, não es
tamos falando de histórias 
de quebrar o 
coração sobre um menino 
e seu cão. Estamos falando
 de emoções 
que sabemos algo que Bob
, o engenheiro, “sou mais t
écnico que você”, não sabe
.
BOOK - Head First Mobile Web - 29-04-13.indb 24 02/05/2013 13:08:12
introdução
você está aqui  xxv
Metacognição: pensando sobre pensar
Se você realmente quer aprender, e aprender mais rápido e mais profundamente, preste 
atenção em como você presta atenção. Pense em como você pensa. 
Aprenda como você aprende. 
A maioria de nós nunca fez um curso de metacognição ou teoria 
de aprendizado enquanto estávamos crescendo. Esperavam de nós 
que aprendêssemos, mas raramente nos ensinavam a aprender.
Porém, supomos que, se está segurando este livro, você realmente quer 
aprender sobre desenvolvimento mobile web. E, provavelmente, não quer gastar 
muito tempo com isso. Já que quer construir mais sites e apps no futuro, você 
precisa lembrar do que lê. Para isso, é preciso que entenda. Para extrair o máximo 
deste livro, ou qualquer livro ou experiência de aprendizado, responsabilize-se 
por seu cérebro. Seu cérebro neste assunto.
O truque é fazer com que seu cérebro veja o 
material novo que está aprendendo como Realmente 
Importante, crucial para seu bem-estar, tão importante 
quanto um tigre. Do contrário, você estará numa 
constante batalha, tendo seu cérebro fazendo seu 
melhor para manter longe o novo conteúdo.
Então, como é que você faz com que seu 
cérebro trate o desenvolvimento mobile 
web como se fosse um tigre faminto?
Há o caminho lento e entediante, ou o mais rápido e efetivo. O modo lento trata-se de 
absoluta repetição. Obviamente, sabe-se que somos capazes de aprender e lembrar mesmo 
dos tópicos mais maçantes se ficarmos martelando a mesma coisa para dentro do cérebro. 
Com repetição suficiente, seu cérebro diz: “Isto não parece importante, mas ele continua 
revendo repetidamente a mesma coisa; então, imagino que deva ser.”
A maneira mais rápida é fazer qualquer coisa que aumente a atividade cerebral, principalmente 
diferentes tipos de atividade cerebral. As coisas da página anterior são uma parte importante 
da solução, e todas elas, comprovadamente, provaram ajudar seu cérebro a trabalhar a seu 
favor. Por exemplo, estudos mostram que pôr palavras dentro de figuras que as descrevam 
(ao contrário de colocá-las em qualquer lugar na página, como uma legenda ou no corpo 
do texto) faz com que seu cérebro tente criar sentido em como as palavras e a figura se 
relacionam, e, como consequência, seus neurônios entram em polvorosa. Mais neurônios na 
ativa = mais chances de seu cérebro entender que isso é algo que valha a pena prestar atenção, 
até mesmo memorizar.
Linguagem coloquial ajuda, pois as pessoas tendem a prestar mais atenção quando 
percebem que estão em uma conversa, desde que queiram prosseguir e chegar até seu fim. 
O mais incrível é que seu cérebro não se importa se a “conversa” for entre você e seu livro! 
Por outro lado, se a linguagem escrita é formal e seca, seu cérebro capta a informação como 
se estivesse experienciando uma palestra, sentado em uma sala cheia de aprendizes passivos. 
Nem há a necessidade de estar acordado.
Contudo, imagens e linguagem coloquial são apenas o começo.
BOOK - Head First Mobile Web - 29-04-13.indb 25 02/05/2013 13:08:13
como usar este livro
xxvi introdução
Aqui está o que NÓS fizemos:
Usamos imagens, porque seu cérebro está conectado para linguagem visual, 
não textual. Na opinião do seu cérebro, uma imagem, realmente, vale mais 
que mil palavras. E quando texto e imagens trabalham juntos, encaixamos o 
texto dentro das figuras, pois seu cérebro trabalha mais efetivamente quando o 
texto está do lado de dentro da coisa a que o texto se refere, de forma contrária 
ao que ocorre numa legenda ou enterrada em algum lugar do texto.
Usamos redundância, dizendo a mesma coisa de diferentes maneiras, com 
diferentes tipos de mídia e múltiplos sentidos para aumentar a chance de que o 
conteúdo seja decifrado por mais de uma área de seu cérebro.
Usamos conceitos e imagens de maneiras inesperadas, pois seu cérebro é 
conectado em novidades. Também usamos imagens e ideias com, ao menos, 
algum conteúdo emocional, por seu cérebro estar sintonizado para prestar 
atenção à bioquímica das emoções. Aquilo que faz com que você sinta algo 
é mais provável de ser lembrado, mesmo que este sentimento não seja nada 
mais que um pequeno humor, surpresa ou interesse.
Usamos uma linguagem coloquial personalizada, pois seu cérebro está 
sintonizado para prestar mais atenção quando crê que você está em uma 
conversa do que se ele pensar que você é um ouvinte passivo em uma 
apresentação. Seu cérebro faz isso mesmo quando você está lendo.
Incluímos porções de atividades, porque seu cérebro sintoniza-se para 
aprender e lembrar mais quando você faz coisas do que quando você lê a 
respeito. E fizemos exercícios desafiadores, mas possíveis de serem feitos, 
pois é o que a maioria prefere. Utilizamos múltiplos estilos de aprendizado, pois 
você deve preferir procedimentos passo a passo, ao passo que outra pessoa 
queira entender um apanhado geral primeiro, e alguém apenas queira ver 
um exemplo. Mas, independente de sua preferência de aprendizado, todos se 
beneficiam ao ver o mesmo conteúdo representado de diversas formas.
Incluímos conteúdo para ambos os lados do cérebro, pois quanto mais seu 
cérebro se engaja, mais você se torna propenso a aprender e lembrar, fazendo 
com que fique focado por mais tempo. Já que trabalhar um lado do cérebro, 
frequentemente, significa dar ao outro lado uma chance de descansar, você 
pode ser mais produtivo aprendendo por um período de tempo maior.
E incluímos histórias e exercícios que apresentam mais de um ponto de vista, 
pois seu cérebro sintoniza-se no aprendizado mais profundo quando é 
forçado a fazer avaliações e julgamentos.
Pusemos desafios, com exercícios e perguntas que nem sempre possuem apenas 
uma resposta certa, pois seu cérebro está acostumado a aprender e lembrar 
quando tem que trabalhar em algo. Pense nisso: você nunca conseguirá que 
seu corpo fique em forma apenas assistindo as pessoas na academia. Porém, 
demos nosso melhor para nos assegurar que quando você estiver trabalhando 
duro, isso esteja entre as coisas certas a se fazer. Que você não esteja gastando 
um dendrito a mais processando um exemplo difícil de ser compreendido, de 
gramática complexa, carregado de jargões, ou com texto conciso.
Usamos pessoas. Em histórias, exemplos, figuras, etc., pois, bem, você é uma 
pessoa. E seu cérebro presta mais atenção a pessoas do que a coisas.
 das figuras, pois seu cérebro trabalha mais efetivamente quando o das figuras, pois seu cérebro trabalha mais efetivamente quando o das figuras, pois seu cérebro trabalha mais efetivamente quando o 
BOOK - Head First Mobile Web - 29-04-13.indb 26 02/05/2013 13:08:13