Escolar Documentos
Profissional Documentos
Cultura Documentos
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
“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
“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)
“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
“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
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
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
ix
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.
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
xi
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.
xii
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.
xiii
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.
xiv
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!
xv
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!
xvi
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é?!
xvii
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
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.
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.
xix
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.
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.
Índice 417
xx
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?
xxii introdução
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
xxvi introdução