Você está na página 1de 25

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


Elogios sobre outros livros da série

“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

BOOK - Head First Mobile Web - 29-04-13.indb 2 02/05/2013 13:08:01


Elogios sobre outros livros da série

“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

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


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...

Lyza Danger Gardner


Jason Grigsby

Rio de Janeiro, 2013

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

Lyza

Jason

Lyza Danger Gardner (@lyzadanger) é uma Em 2000, Jason Grigsby comprou seu primeiro
desenvolvedora. Ela constrói , quebra e hackeia celular. Tornou-se obcecado com a maneira que o
coisas na web desde 1996. Curiosamente, Lyza mundo poderia se tornar um lugar melhor se todos
realmente nasceu e cresceu em Portland, Oregon, pudessem ter acesso ao mundo das informações em
a cidade onde todos querem estar, mas parece que seus bolsos. Quando sua esposa, Dana, conheceu-o,
ninguém é de lá. ele tinha as paredes de seu apartamento cobertas
com loucos sonhos mobile. Até hoje Jason continua
Lyza começou cedo na faculdade e acabou fazendo
sem entender como ela se casou com ele.
um curso em duas áreas distintas: um bacharelado
em Artes e Letras pela Portland State University, Aqueles sonhos mobile deram com a cara na
seguido por um programa de mestrado em Ciência porta da realidade – WAP era uma porcaria. Jason
da Computação na Universidade de Birmingham trabalhou na Web até 2007, quando o iPhone
(Reino Unido). mostrou que aquela era a hora certa. Juntou
forças com as três pessoas mais inteligentes que ele
Lyza escreveu diversos aplicativos para web
conhecia e começaram a Cloud Four.
(desenvolvimentos no lado servidor, tá pensando o
quê?!), derrotou astutos sistemas de gerenciamento Desde que cofundou a Cloud Four, teve a sorte
de conteúdo, otimizou sites mobile, bateu vários de trabalhar em muitos projetos fantásticos,
APIs e se preocupou muito com banco de dados. incluindo o Obama iPhone App. Ele é fundador e
Fascinada com a maneira com que a tecnologia presidente da Mobile Portland, uma empresa sem
mobile tem mudado as coisas, agora ela gasta fins lucrativos dedicada a promover a comunidade
muito tempo pensando a respeito do futuro da web, mobile em Portland, Oregon.
mobile e outras tantas coisas.
Jason é um orador e consultor requisitado na área
Desde a cofundação da Cloud Four, uma agência de mobile. De qualquer modo, ele é mais obcecado
de mobile web em Portland, em 2007, Lyza tem com mobile agora do que em 2000 (desculpe-me,
mergulhado fundo, expandido os horizontes da querida!).
Terra dos Dispositivos, explorando os defeitos
Encontre-o blogando em http://cloudfour.com;
e caos dos navegadores mobile e a mobile web.
em seu site pessoal, http://userfirstweb.com; e no
Possui também um conjunto estranho de hobbies
Twitter como @grigs. Por favor, deixe um “olá”!
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.

viii

BOOK - Head First Mobile Web - 29-04-13.indb 8 02/05/2013 13:08:03


conteúdo

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

ix

BOOK - Head First Mobile Web - 29-04-13.indb 9 02/05/2013 13:08:03


conteúdo

1
apresentando a mobile web
Web Design Responsivo
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
index.html 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
styles.css
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

BOOK - Head First Mobile Web - 29-04-13.indb 10 02/05/2013 13:08:05


conteúdo

2
responsividade responsável
Web Design Responsivo Mobile First
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

xi

BOOK - Head First Mobile Web - 29-04-13.indb 11 02/05/2013 13:08:05


conteúdo

3
um site mobile separado
Encarando circunstâncias menos incríveis
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

xii

BOOK - Head First Mobile Web - 29-04-13.indb 12 02/05/2013 13:08:06


conteúdo

decidindo a quem dar suporte

4
A quais dispositivos deveríamos dar suporte?
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

xiii

BOOK - Head First Mobile Web - 29-04-13.indb 13 02/05/2013 13:08:06


conteúdo

5
bancos de dados e classes de dispositivos
Faça o que tem que ser feito
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

xiv

BOOK - Head First Mobile Web - 29-04-13.indb 14 02/05/2013 13:08:07


conteúdo

construa um aplicativo web para dispositivos móveis

6
usando um framework
O Tartanator
“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

xv

BOOK - Head First Mobile Web - 29-04-13.indb 15 02/05/2013 13:08:09


conteúdo

7
mobile web apps no mundo real
super aplicativos para dispositivos móveis
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

xvi

BOOK - Head First Mobile Web - 29-04-13.indb 16 02/05/2013 13:08:09


conteúdo

8
construa aplicativos móveis híbridos com PhoneGap
Caça ao Tartan: virando nativo
À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

xvii

BOOK - Head First Mobile Web - 29-04-13.indb 17 02/05/2013 13:08:09


conteúdo

9
como ser um amigo do futuro
Fazendo (algum) sentido em meio ao caos
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

xviii

BOOK - Head First Mobile Web - 29-04-13.indb 18 02/05/2013 13:08:10


conteúdo

i
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

ii
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

xix

BOOK - Head First Mobile Web - 29-04-13.indb 19 02/05/2013 13:08:10


conteúdo

iii
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

iv
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

xx

BOOK - Head First Mobile Web - 29-04-13.indb 20 02/05/2013 13:08:10


Como usar este livro

Introdução
Não acredito que
colocaram isso
em um livro sobre
mobile web!

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

o fatídicadeixar
não emperre. Seu cérebro está pensando, “Melhor ão, por para coisas mais
: “Entespaço
Nesta se onderemos a questã
resp animais selvagens
ção, quais Web?e se atear fogo nesse BlackBerry
Mobileevitar
importantes, como m livro de devo
nu
que eles colocaram ISSO
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?

você está aqui  xxi

BOOK - Head First Mobile Web - 29-04-13.indb 21 02/05/2013 13:08:11


como usar este livro

A quem se destina este livro?


Se responder “sim” a todas as perguntas abaixo:

1 Você possui experiência anterior em web design e Isto certamente ajudará


desenvolvimento?
se você já possui alguma
2 Você quer aprender, entender, lembrar e aplicar manha com scripts
importantes conceitos de mobile web, de maneira também. Não estamos
que seja possível tornar suas páginas mobile mais falando em ser um
interativas e animadas? especialista, mas você
não deveria sentir um
3 Você prefere uma conversa estimulante em um pânico visceral ao ver um
jantar festivo a uma palestra acadêmica seca e
entediante?
fragmento de JavaScript.
este livro é pra você.

Quem provavelmente deveria se afastar deste livro?


Se responder “sim” a qualquer destas perguntas:

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?

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]

xxii introdução

BOOK - Head First Mobile Web - 29-04-13.indb 22 02/05/2013 13:08:11


introdução

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ére


ISTO é imbpro pensa que
ortante.
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 Ótimo. Só mais
segura, aconchegante e livre de tigres. Você está estudando. umas 450 páginas
Preparando-se para uma prova. Ou tentando aprender algo entediantes.
assuntos técnico e complicado que seu chefe pensa
c é re b r o pensa quete
que irá lhe tomar uma semana, 10 dias no máximo. Seu tan
o é impor
ISTO nãr guardado.
Só há um problema: seu cérebro está tentando lhe para se
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í.”

você está aqui  xxiii

BOOK - Head First Mobile Web - 29-04-13.indb 23 02/05/2013 13:08:11


como usar este livro

do “U se a C abeça!” é um aprendiz.
Entendemos qu e o le ito r
e depois se
ciso que você entenda
cis o par a apr en de r algo? Primeiro, é pre cab eça . Baseado nas
Então, o que é pre
é um a qu est ão de empurrar fatos em sua ender é
uecer. Não educacional, para apr
certifique de não esq iva , ne uro biologia e psicologia
ciênci a cog nit
últimas pesquisas em liga seu cérebro.
ina. Sabemos o que
cis o mu ito ma is do que textos numa pág
pre
se a Cabeça!”
de aprendizado do “U
Alguns dos princípios palavras soltas e tornam
o
ns são mu ito ma is memorizáveis do que elh ora de ma is
age is eficiente (m
Torne-se visual. Im aprendizado muito ma
de 89% em estudos
eb!
de lembrança e obile W
C uidado M s !
s nó
transferência). Aí vamo
Isso também torna
as coisas mais
compreensíveis.
dentro
Ponha as palavras
ao s gr áficos a
ou próximas
ou tra pág ina . Assim,
rel aci on ada s, em vez de no fim ou em
que elas estão olverem problemas
diz es est arã o du as vezes mais aptos a res
os apren
do.
relacionados ao conteú recentes,
lizada. Em estudos
um a lin gu ag em informal e persona se o con teúdo
Use pós-aprendiza do
% melhores em testes meira
estudantes foram 40 ling uag em em pri
nd o dir eta me nte ao leitor, usando uma ao invés
estivesse fala mal. Conte histórias
e col oq uia l, em vez de utilizar um tom for io. A qu e voc ê
pessoa o se leve tão a sér
dar um a pal est ra. Seja mais informal. Nã ta ou um a pal est ra?
de vel numa fes
uma companhia agradá
daria mais atenção: a outras palavras, a
a pe ns ar ma is profundamente. Em ce
Leve o aprendiz s, nada demais aconte
voc ê flex ibil ize ativamente seus neurônio ins pir ado
menos que do, engajado, curioso
e
leitor deve ser motiva ias. E para isso
em sua cabeça. Um rar nov as tec no log
tirar conclusões e ge uem o pensar; e
a resolver problemas, e questões que provoq
de saf ios ; exe rcíc ios
são necessários e múltiplos sentidos.
e env olv am am bo s os lados do cérebro tivemos
atividades qu leitores. Todos nós já
rai a – e ma nte nh a – a atenção dos o ficar
At s não consig
muito aprender isto, ma
a experiência do “quero ina .
” Se u cér ebro presta atenção a
da primeira pág
acordado para passar tes estranhas, atrativ
, as,
do comum: interessan
coisas que estão além com plic ado e téc nic o não tem
um assunto novo,
inesperadas. Aprender is rápido se não for.
Se u cér ebr o aprenderá muito ma
que ser chato.
ilidade para lembrar-se
s. Sabemos que sua hab
Toque suas emoçõe teúdo emocional.
dependente de seu con
de algo é amplamente os. Lembramos quando
--m os daq uilo com o que nos importam
Lem bra tórias de quebrar o
estamos falando de his
sentimos algo. Não, não falando de emoções
o e seu cão. Estamos
coração sobre um menin .!”, e o sentimento
sas , cur ios ida de, diversão, “mas que m..
como sur pre os um quebra-cabeça,
surge quando resolvem
de “eu sou o bom!” que ser difícil, ou percebem
os
todos os outros pensam
aprendemos algo que ê”, não sab e.
u mais técnico que voc
Bob, o engenheiro, “so
que sabemos algo que

xxiv introdução

BOOK - Head First Mobile Web - 29-04-13.indb 24 02/05/2013 13:08:12


introdução

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.

você está aqui  xxv

BOOK - Head First Mobile Web - 29-04-13.indb 25 02/05/2013 13:08:13


como usar este livro

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.

xxvi introdução

BOOK - Head First Mobile Web - 29-04-13.indb 26 02/05/2013 13:08:13

Você também pode gostar