Mobile HTML5

Estelle Weyl

Novatec

Authorized Portuguese translation of the English edition of titled Mobile HTML5, ISBN 9781449311414 © 2013 Estelle Weyl. This translation is published and sold by permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.

Tradução em português autorizada da edição em inglês da obra Mobile HTML5, ISBN 9781449311414 © 2013 Estelle Weyl. Esta tradução é publicada e vendida com a permissão da O'Reilly Media, Inc., detentora de todos os direitos para publicação e venda desta obra. © Novatec Editora Ltda. [2014].

Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.

Editor: Rubens Prates Tradução: Aldir José Coelho Corrêa da Silva Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-354-3 Histórico de impressões: Julho/2014

Primeira edição

Novatec Editora Ltda.

Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Email: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

capítulo 1

Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

Se você é como eu, durante anos detestou as versões do Internet Explorer que foram lançadas. Esses navegadores estavam cheios de falhas. No entanto, falhavam da mesma forma em todos os lugares enquanto existiram.1 Todos sabemos que o IE6 era péssimo, mas ele era péssimo sempre da mesma forma. Quando descobrimos como criar polyfills2 para o IE6, conseguimos controlá-lo.

No cenário dos dispositivos móveis também temos falhas, mas elas ocorrem de formas novas, mais diversificadas e em constante mudança. Diferentes versões dos navegadores em dispositivos distintos podem dar suporte a muitos recursos novos, porém de maneiras diferentes. Ou podem dar suporte a um recurso sem conseguirmos usá-lo. Por exemplo, um dispositivo moderno poderia ou não dar suporte ao localStorage. Os dispositivos que dão suporte ao localStorage podem ou não permitir que você grave nele. Mesmo se o navegador permitir que você faça leituras no localStorage, essas leituras podem demorar e prejudicar o desempenho.

E até mesmo se o navegador permitir que você grave, o próprio localStorage pode ter alcançado o limite de armazenamento.

Não podemos abordar aqui todas as peculiaridades existentes em todos os navegadores para todos os sistemas operacionais e dispositivos. Mesmo se as conhecesse (e eu não as conheço), elas ocupariam um livro inteiro, e esse livro estaria desatualizado antes que eu terminasse sua redação. Na verdade, o livro que você tem em mãos já está desatualizado. O cenário está sempre mudando.

Não há como produzir um livro que esteja atualizado porque quando ele vai para a impressão – ou até mesmo quando você termina um capítulo – o cenário já 1 O IE6 foi pioneiro ao ser lançado em 2001. Como quase monopolizava o mercado de navegadores, havia pouca competição, e ele nunca foi atualizado.

2 N.T.: No desenvolvimento web, polyfill é um código baixável que fornece recursos que não vêm no navegador web.

31

32

Mobile HTML5

mudou. Embora alguns dos navegadores, recursos, telefones e sites mencionados possam já estar obsoletos, as melhores práticas ensinadas neste livro devem ser relevantes durante mais alguns anos. Um princípio que norteia o livro é o de que se você usar as melhores práticas e codificar de acordo com padrões, seu código funcionará nos dispositivos atuais e em todos os dispositivos futuros.

Incluí o suporte que o navegador dá a recursos, mas não a falta de suporte, já que o esperado é que todos os navegadores caminhem na direção certa. A particularidade que um navegador apresenta hoje pode já estar resolvida amanhã.

Pelos motivos citados, para usar um recurso, você precisa não só detectar sua existência como também testá-lo para saber se consegue realmente usar o recurso suportado.

Este livro usa marcação que é independente de dispositivo, sistema operacional e navegador e não usa bibliotecas JavaScript. Decidi não usar a biblioteca, codificando em vanilla JavaScript3, para assegurar que você aprenda o código real.

Codificando em vanilla JavaScript, espero eliminar qualquer confusão que possa haver quanto a um método ser nativo ou de um framework.

Isso não significa que você não deva usar bibliotecas. Pelo contrário! Bibliotecas de código-fonte aberto são ótimos locais para descobrirmos as peculiaridades dos navegadores. Os projetos de código-fonte aberto têm centenas, às vezes milhares, de colaboradores. Esses colaboradores são milhares de olhos desenvolvendo e testando uma grande quantidade de dispositivos, encontrando peculiaridades, relatando-as, e introduzindo correções nas bibliotecas para a manipulação das peculiaridades ou o fornecimento de paliativos e polyfills. Esses milhares de olhos também relatam bugs, alertando os fornecedores de navegador sobre o que não está funcionando para que esses bugs possam ser corrigidos em versões futuras.

Bibliotecas populares de código-fonte aberto e polyfills de APIS JavaScript para HTML5 são os melhores recursos para descobrirmos rapidamente várias peculiaridades dos navegadores e suas soluções. Devem ser considerados uma parte importante de sua caixa de ferramentas de desenvolvimento. Mesmo se você não usá-los, leia o código-fonte para conhecer os bugs que outras pessoas descobriram nos navegadores móveis.

A melhor maneira de conhecer HTML5, CSS3 e as APIs JavaScript associadas enquanto lemos sobre o assunto é codificar. Então, codifiquemos.

3 N.T.: Vanilla JavaScript refere-se ao JavaScript nativo, sem o uso de bibliotecas.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

33

CubeeDoo: Jogo Móvel em HTML5 Aprendi HTML5 e CSS3 marcando (mark up) um aplicativo web para um único navegador móvel e tirando o máximo dele. Minha primeira incursão em CSS3 foi um aplicativo web que era um mashup de Twitter/Major League Baseball chamado Pickleview, escrito no fim de semana em que o iPhone foi lançado em 2007. Na época, o Safari para iPhone era o navegador mais avançado do mercado (exceto talvez pelo Opera). Ao programar o aplicativo para um único navegador, não precisei me preocupar com o IE6, o IE7 ou o Firefox 2 (o Chrome ainda não existia). Por volta de 2007, esse era o estado da web.

Em 2010, refiz o exercício de codificação com os mais modernos HTML5 e CSS3 em um único navegador. Alguns amigos e eu criamos um jogo de memória com animações, armazenamento, recursos offline e todos os novos recursos que podiam ser encontrados no Chrome 12 em um desktop que não existiam no Safari 3.1 para dispositivos móveis. Usando um único navegador e aproveitando novas tecnologias, consegui codificar módulos HTML5, CSS3 e JavaScript mais recentes que ainda não eram usados em produção devido à necessidade de suporte a navegadores legados. De 2007 a 2010, alguns navegadores já tinham avançado bastante. Outros (IE, estou falando de você), nem tanto.

Em 2013, a maioria dos navegadores já dava suporte ao HTML5 e ao CSS3. Como desenvolvedores, ficamos estagnados por ter de dar suporte a navegadores mais antigos para desktop, como o Internet Explorer 9 e versões anteriores. No universo móvel, temos nosso próprio “IE6.” Até certo ponto, estamos sendo refreados por feature phones4 e smartphones executando o Android 2.3. Mas até mesmo os navegadores de feature phones e o Android 2.3 dão suporte a muitos recursos modernos.

Para aprender a codificar HTML5, CSS3 e as APIs JavaScript associadas, esqueça temporariamente os navegadores antigos. Juntos, aprenderemos o que é possível fazer com as tecnologias mais novas. Coloquei a maioria dos recursos com amplo suporte em navegadores modernos nos exemplos de código deste livro.

O CubeeDoo, como mostrado na figura 1.1, é um jogo de memória totalmente codificado em front-end. Uso exemplos de código desse jogo, junto a uma réplica nativa de aplicativo de configurações de iPhone (como visto na figura 9.3) em todo o livro. O jogo foi marcado com elementos HTML5. Alguns dos temas incluem ícones correspondentes criados com o conteúdo gerado. As transformações, transições e animações, junto com aos gradientes, aos cantos arredondados e a outros recursos do CSS são usados para criar a aparência do jogo. O jogo também inclui o 4 N.T.: Feature phone é um telefone móvel que no momento da fabricação não é considerado um smartphone por não ter vários recursos, porém fornece mais do que apenas os serviços móveis padrão.

34

Mobile HTML5

SVG, o JSON, o webSQL, que é obsoleto mas tem suporte em dispositivos móveis, o local-Storage, o sessionStorage, atributos de dados, formulários HTML5, áudio, consultas de mídia e URIs de dados.

Figura 1.1 – Captura de tela do jogo de memória CubeeDoo.

O código deste livro não usa frameworks de nenhum tipo. Como mencionado, tudo foi codificado em vanilla JavaScript, HTML5 e CSS. O objetivo é ensinar as APIs reais e não polyfills. Em produção, provavelmente você vai querer usar polyfills, mas, para usá-los de maneira eficaz, precisa entender o que fazem.

Este livro lhe ensinará isso. Ele aborda o CSS3, o HTML5 e as APIs associadas.

O foco é o aprendizado das tecnologias em um cenário móvel. Vivemos em um mundo de dispositivos móveis, mas não há uma “web móvel”. Há somente a web.

E se você se ativer apenas a desktops, a versão da web que criar pode não funcionar para a crescente população que só a acessa via dispositivos móveis. Olhando só para os desktops, lidará apenas com o mínimo denominador comum que corresponde às versões mais antigas do Internet Explorer.

Não devemos levar à produção um aplicativo que só funcione em um navegador.

No entanto, para conhecer as tecnologias que estão surgindo, ignorar navegadores “mais antigos” pode lhe dar a oportunidade de aprender, desafiar a si próprio, pensar de maneiras novas e levar sua atividade ao limite. Pegue o que aprender neste livro e, usando um único navegador, codifique tirando o máximo dele. Experimente. Você voltará a se encantar com o desenvolvimento web.

Você só precisa de um navegador, um IDE e algum tempo.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

35

Ferramentas de desenvolvimento Antes de começar a desenvolver seu primeiro aplicativo web móvel, você vai querer equipar seu ambiente de desenvolvimento com as melhores “ferramentas do mercado”. Tenho boas notícias! Você já tem essas ferramentas.

Como acompanhamento para este livro, você só precisa de um computador com um editor de texto e um navegador. Não precisa nem mesmo de um telefone, embora um dispositivo móvel seja muito útil.

Editor de texto Você deve desenvolver em um editor de textos sem formatação ou em um ambiente de desenvolvimento integrado (IDE). Um IDE é um software que geralmente inclui um editor de texto, um depurador e outros recursos ou plug-ins, como um protocolo de transferência de arquivos (FTP), que você pode precisar para executar a tarefa. As pessoas têm seus IDEs preferidos. Escolha o que mais lhe agradar. Prefiro o Sublime Text, mas você pode usar o TextMate, Dreamweaver, Eclipse, WebStorm ou o que lhe deixar satisfeito. Embora você só precise de um editor de textos sem formatação, verá que usar um IDE pode ajudá-lo a organizar e otimizar seu processo de desenvolvimento. Recomendo que selecione um IDE e o conheça bem. Os IDEs podem ser ferramentas muito poderosas que tornam agradável desenvolver – é quase uma diversão.

Navegador Você também precisa de um navegador. Prefiro desenvolver no Chrome Canary, que é a versão beta do Google Chrome. Prefiro esse navegador por causa do depurador.

Todos os navegadores modernos têm depuradores, mas o depurador do Chrome é um dos melhores e o depurador do Canary fornece informações e dá acesso a todos os novos acessórios antes mesmo de entrarem na versão de um navegador.

Se você não tiver um computador da Apple, não poderá desenvolver facilmente aplicativos nativos sensíveis ao toque para iPhone, iPad ou iPod. Se não tiver o Windows 8, será difícil desenvolver o que é formalmente conhecido como aplicativo de estilo Metro. Não se preocupe! Para o que estamos aprendendo, só é preciso um navegador moderno. Não importa o sistema operacional ou o dispositivo.

Você pode testar todos os exemplos deste livro em telefones e tablets Windows, Unix e Android e em Macs – a escolha é sua.

36

Mobile HTML5

O IDE e o navegador desktop serão suas principais ferramentas para o desenvolvimento web móvel. Seu aplicativo móvel será visualizado e depurado no navegador desktop durante todo o processo de desenvolvimento. Há recursos que o navegador desktop não conseguirá emular, entre eles a precisão da renderização móvel, o desempenho do JavaScript, limites de memória e largura de banda e a disponibilidade das APIs. No entanto essas diferenças podem ser superadas com outras ferramentas e com a execução de testes diretamente em dispositivos reais ou virtuais.

Embora seja mais agradável desenvolver no navegador favorito, você deve ter em seu kit de ferramentas vários navegadores disponíveis para teste. Vai precisar de acesso ao Internet Explorer para testar mais facilmente o ambiente do Windows Phone. O Safari ou o Google Chrome permitirão que você teste o Android, o Bada, o Blackberry e o iOS. Você também vai precisar do Firefox para dispositivos Gecko. Atualmente, o Opera é necessário para o teste de todos os dispositivos que executam o mecanismo de renderização Presto, mas, já que o Opera Mobile 14 é baseado no Chromium e o Opera e o Chrome mais recentes estão no Blink5, os navegadores necessários ao desenvolvimento têm de ser atualizados para corresponder ao cenário em que você está desenvolvendo.

Caso ainda não o tenha feito, baixe o Safari se estiver em um Mac ou o Internet Explorer mais recente se estiver no Windows. Baixe também o Chrome, o Firefox e o Opera em seu dispositivo, mesmo se estiver no Unix. Você também pode baixar builds do Chrome Canary, Aurora, Opera Next e WebKit Nightly para fazer testes nas próximas versões dos principais navegadores. Esses eram os navegadores para desktop usados quando o texto foi escrito, mas o cenário está sempre mudando.

Ferramentas de depuração Os navegadores vêm com ferramentas de desenvolvimento. As ferramentas de desenvolvedor são ferramentas embutidas no navegador que permitem que você inspecione e depure seu código-fonte. Usando-as, você pode manipular o Document Object Model (DOM), editar e depurar código JavaScript, editar e depurar CSS, analisar solicitações de recursos e auditar o desempenho de conteúdos e aplicativos da web em conteúdo ao vivo.

Geralmente as ferramentas de desenvolvedor ficam ocultas porque a maioria dos usuários que não é desenvolvedor não utiliza esses recursos do navegador. Com frequência, os dispositivos móveis têm alguns recursos de depuração em seu 5 O Blink é um fork do componente WebCore do WebKit criado na revisão 147503. É o mecanismo de navegação do Chrome desde a versão 28; no Opera, começou na versão 15 e está presente em outros navegadores posteriores baseados no Chromium.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

37

navegador. Essas ferramentas de depuração limitadas costumam estar disponíveis via interface de configurações do dispositivo. Embora a depuração de nível de dispositivo possa estar disponível, é bem mais fácil depurar aplicativos nas ferramentas muito mais robustas que você pode acessar em seu desktop.

Depuradores desktop Se você já desenvolve sites na web há algum tempo, provavelmente está familiarizado com o Firebug6, o F12, o Web Inspector e/ou o DragonFly. O Firebug é uma extensão da Mozilla. O F12, o Web Inspector e o DragonFly vêm com o Internet Explorer, o Chrome/Safari e o Opera, respectivamente. Todas essas ferramentas de desenvolvedor permitem a depuração, a edição e a monitoração de CSS, HTML, DOM e JavaScript de websites e possibilitam a análise de recursos como solicitações HTTP, armazenamento local e consumo de memória.

O Firebug está disponível em getFirebug.com. As ferramentas de desenvolvedor do Safari podem ser encontradas no menu Desenvolver, mas têm de ser disponibilizadas via Preferências → Avançado, marcando-se a opção Mostrar menu Desenvolver na barra de menus. No Chrome, você pode abrir as ferramentas de desenvolvedor via Exibir → Desenvolvedor → Ferramentas do Desenvolvedor.

Você também pode abrir os depuradores do Chrome, do Safari, do Firebug e do Opera usando Command-Option-I ou Control-I. O F12 e o Firebug também podem ser abertos com um clique em F12. Essas ferramentas são as melhores ferramentas dos navegadores para a depuração de CSS, JavaScript e HTML. Seria interessante você se familiarizar com o Web Inspector, o Error Console e o User Agent Switcher. Esses depuradores nos permitem inspecionar o CSS, o HTML, o JavaScript, o DOM e os cabeçalhos de uma página web. Independentemente de você usar o Web Inspector, o Firebug, o DragonFly, o F12, as Ferramentas do Desenvolvedor ou alguma combinação dessas ferramentas, é preciso conhecer melhor suas ferramentas de depuração. Seu depurador será seu melhor amigo. É provável que você tenha vários anos de experiência no uso de ferramentas de depuração de navegador para aplicativos desktop, logo, elas não serão examinadas detalhadamente aqui. No entanto, mesmo se já faz uso delas há uns cinco anos, talvez só conheça uma parcela mínima das impressionantes capacidades dos depuradores. Recomendo que se aprofunde por sua própria conta, explorando cada milímetro usando os recursos de clique comum ou clique com o botão direito.

Examinaremos a guia Timeline das ferramentas do desenvolvedor no capítulo 14.

6 O Firefox vem com as ferramentas de desenvolvimento web, mas a maioria dos desenvolvedores usa o Firebug, um complemento para o Firefox.

38

Mobile HTML5

Viewport móvel Para simular o viewport móvel, você pode simplesmente redimensionar a janela do navegador desktop para o tamanho do viewport que deseja testar. O viewport do navegador desktop é a janela do navegador. No dispositivo móvel, o viewport é o que se vê, mas não necessariamente o que é gerado na tela, porém o redimensionamento da janela deve chegar bem perto para a maioria dos testes que você precisará fazer.

Quando você redimensionar seu navegador manualmente, poderá obter tamanhos aleatórios. No painel Overrides da janela Settings, como mostrado na figura 1.2, as Ferramentas do Desenvolvedor do Chrome fornecem vários tamanhos de dispositivo predefinidos. Acesse a janela de configurações do Web Inspector clicando na roda dentada no lado inferior direito das Ferramentas do Desenvolvedor.

Figura 1.2 – Painel Overrides encontrado nas configurações das Ferramentas do Desenvolvedor do Chrome.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

39

Quando você selecionar um dispositivo no menu de seleção do User Agent, o Chrome mudará o agente do usuário para o agente do dispositivo selecionado e criará um viewport dentro da janela do navegador com o tamanho do dispositivo selecionado. Isso lhe dará um viewport de navegador com o mesmo tamanho do viewport do dispositivo selecionado.

Se o seu dispositivo não estiver listado, simplesmente insira a largura e a altura dele nas duas caixas de entrada de medidas do dispositivo. Você pode se alternar entre as dimensões dos modos paisagem e retrato clicando no botão de alternância à direita das medidas. Acesse ScreenQueri.es para visualizar os tamanhos exatos das telas dos dispositivos. Você também pode ativar a emulação de eventos de toque ou usar o thumbs.js como polyfill de TouchEvent.

As ferramentas do desenvolvedor do Chrome também permitem que você sobreponha a geolocalização para emular uma longitude e uma latitude específicas e, mesmo se o seu laptop tiver um giroscópio, é possível emular a orientação de um dispositivo.

Após ter desenvolvido o primeiro estágio de seu aplicativo com seu navegador desktop, você vai querer testá-lo em um dispositivo móvel. O principal obstáculo para o teste em um dispositivo móvel é que você não terá acesso aos inspetores poderosos com os quais se acostumou em seu desktop. É por isso que os inspetores web remotos são tão úteis.

Depuração remota Há ferramentas para a depuração remota do navegador móvel via navegador desktop. Os depuradores remotos permitem que o navegador desktop se comunique com dispositivos externos para executar e capturar código remotamente.

Da mesma forma que na depuração comum, você pode usar esses depuradores remotos para inspecionar seu HTML e CSS, manipular seu DOM e fazer edições dinâmicas e depurar seus scripts.

O mecanismo do navegador Opera está sendo substituído. Embora não saibamos o que o futuro nos reserva, o Opera tem suportado a depuração remota de seu navegador móvel por meio do depurador desktop Opera Dragonfly desde 2008.

Ele tem permitido a inspeção remota de HTML e CSS, a atualização do DOM, a inclusão de pontos de interrupção e o que mais possa ser feito com o Dragonfly no desktop.

40

Mobile HTML5

O WebKit começou a dar suporte à depuração remota por meio da porta USB com o Android 4 e o iOS 6. Para usar o Chrome para depurar remotamente, você deve iniciá-lo na linha de comando com um flag, em vez de usar seu ícone: chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile

ou /Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

Para depurar o navegador móvel Firefox, adicione a API Debug, que antes era a extensão do Crossfire, ao Firebug. É claro que o estado atual está sempre mudando e melhorando. Mantenha-se atualizado com o Protocolo de Depuração Remota do Browser Testing and Tools Working Group se essa for uma discussão que lhe empolgue.

Ferramentas de depuração do Android O SDK do Android inclui as bibliotecas de API e ferramentas de desenvolvedor necessárias à construção, ao teste e à depuração de aplicativos para Android. Você pode depurar aplicativos web diretamente a partir de seus dispositivos ou de emuladores que o SDK permite criar, como visto na figura 1.3.

O download do SDK a partir de http://developer.android.com/sdk/ fornece o Android Debug Bridge (ADB) e recursos de depuração, monitoração de console e criação e inicialização do emulador.

Entre os recursos baixados, encontre a pasta de ferramentas e abra android para acessar adb. O ADB fornece vários recursos de gerenciamento de dispositivos, inclusive a movimentação e sincronização de arquivos para o emulador, a execução de um shell Unix no dispositivo ou emulador e o fornecimento de um meio geral de comunicação com emuladores e dispositivos conectados.

Se preferir, o plug-in ADB é uma extensão do Chrome que executa um daemon ADB e permite a depuração remota para dispositivos móveis sem ser necessário baixar o SDK. Na mesma pasta de ferramentas, abra Monitor para acessar o Android Debug Monitor. O monitor contém um console por meio do qual você pode depurar seus aplicativos, inclusive visualizando qualquer console.log()s que tiver adicionado ao seu site. Os dispositivos que estão sendo depurados são listados no painel de dispositivos que aparece à esquerda na figura 1.4, e o log do console fica na parte inferior.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

Figura 1.3 – Emulador do Android 4.2.2 sendo executado no OS X.

Figura 1.4 – O Android Debug Monitor.

41

42

Mobile HTML5

Quando o monitor for aberto, no menu Window você encontrará o Android Virtual Device Manager, como mostrado na figura 1.5. Por meio dessa janela você pode criar novos emuladores para teste de dispositivos e iniciá-los, como mostrado na figura 1.3.

Figura 1.5 – O Android Virtual Device Manager permite a criação de emuladores de um número limitado de dispositivos selecionáveis ou um número ilimitado de configurações definidas de forma independente.

weinre O weinre, abreviação de web inspector remote, é um poderoso depurador remoto que permite a inspeção e depuração de JavaScript, HTML e CSS. Ele faz parte do projeto PhoneGap; você pode usá-lo localmente ou hospedado em debug.phonegap.com. O weinre também é a base do Adobe Edge Inspect, descrito na seção da página 44.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

43

O weinre é um depurador remoto que permite que você conecte a janela atual de seu navegador móvel a uma versão básica do inspetor remoto do WebKit. Atualmente ele se beneficia do Node.js e do WebSockets.7 Quando este texto foi escrito, tratava-se de um depurador de poucos recursos.

Com o weinre, temos uma visualização em tempo real do DOM e acesso ao console JavaScript, mas não há pontos de interrupção ou rastreamentos de pilha disponíveis. O console JavaScript lista erros como esperado, logo, é mais difícil depurar, mas pode ser feito.

Usando o weinre O weinre pode ser instalado via Java ou JavaScript. Para instalar com JavaScript, baixe e instale o Node.js, que inclui o npm, o gerenciador de pacotes do Node.

Na linha de comando, insira: npm -g install weinre

para instalar o weinre. Agora você pode iniciar o weinre na linha de comando digitando: weinre

Por padrão, o servidor weinre será executado em localhost:8080 até ser interrompido com Control-C, o computador ser reinicializado ou o servidor ser interrompido.

Para poder depurar, adicione um script do weinre ao aplicativo com: <script src=”http://localhost:8080/target/target-script-min.js#anonymous”></script>

Em qualquer navegador WebKit no desktop, você pode abrir http://localhost:8080/ client/#anonymous para acessar o depurador. O inspetor será exibido na janela inteira do navegador com uma aparência muito semelhante à das Ferramentas do Desenvolvedor do Chrome, mas com funcionalidade limitada e menos guias.

Na guia Remote, você encontrará uma lista das janelas dos navegadores móveis atuais disponíveis para depuração que estão sendo executados na mesma rede de seu script weinre. As guias Elements, Resources, Network, Timeline e Console, como mostrado na figura 1.6, são semelhantes às do inspetor web de desktop. Você pode notar que as guias Sources, Profiles e Audit estão ausentes desse depurador básico (no entanto, talvez sejam trazidas de volta no futuro).

7 Originalmente, era baseado em Java. Antes do WebSockets, usava o CORS, o JSON e o XHR.

44

Mobile HTML5

Figura 1.6 – Depurador do weinre.

Adobe Edge Inspect e Ghostlab Para simplificar o processo de depuração do design, automatizando virtualmente as etapas iniciais para você, o Adobe Edge Inspect permite que a depuração seja feita de uma maneira semelhante a do weinre, no qual ele foi baseado. Ele faz isso ocultando as tarefas de iniciar o servidor, inserir o URL no navegador e adicionar scripts à marcação.

Você pode instalar o Adobe Edge Inspect em todos os seus dispositivos remotos e como uma extensão do navegador Chrome em seu desktop. Com o dispositivo que está sendo testado e o desktop na mesma rede, você pode criar uma conexão com o dispositivo.

Abrindo o Edge em seu dispositivo móvel, você obterá um passcode do dispositivo para ser inserido na extensão do Edge no navegador desktop. Para ativar o Edge em seu navegador desktop, primeiro abra o aplicativo e cadastre-se na Adobe.

Após se cadastrar, clique no ícone do Edge como extensão de navegador, como mostrado na figura 1.7, que solicita ao navegador que procure dispositivos na rede.

Quando ele encontrar seu dispositivo, adicione o passcode dele à janela do Edge.

O passcode vai garantir que você dê permissão apenas para seu computador e o dispositivo móvel se comunicarem, impedindo que computadores não desejados controlem seu dispositivo e seu computador controle os telefones de outras pessoas.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

45

Uma vez que uma conexão for estabelecida entre seu computador e um ou mais dispositivos, você poderá controlar que página será carregada em todos os seus dispositivos móveis ao mesmo tempo. A guia aberta atualmente no Chrome será recuperada e exibida nos dispositivos móveis conectados via Edge Inspect.

Figura 1.7 – Adobe Edge Inspect conectando um Nexus 7 e o Google Chrome para depuração.

Para depurar uma página web a partir de um dispositivo, navegue até a página que deseja depurar no Chrome ou no dispositivo. Quando você clicar no menu do Adobe Edge Inspect como extensão do Chrome, clique nos sinais < > próximos ao dispositivo que deseja depurar. O weinre será iniciado em sua máquina local e o dispositivo e o nome da página web serão listados como um link ativo sob a guia Remote, que é a guia da extrema esquerda exibida na figura 1.6.

A versão gratuita do Adobe Edge Inspect só permite a interação com um único dispositivo de cada vez. A assinatura mensal permite controlar todos os dispositivos ao mesmo tempo. Ela também ajuda a capturar telas.

Se estiver em um Mac e quiser testar vários dispositivos, o Ghostlab também permite testar múltiplos dispositivos. Se estiver pensando em comprar um dos dois, a taxa única do Ghostlab pode ser mais econômica do que a assinatura mensal do Adobe Edge.

Depuração de JavaScript com o Aardwolf Se depurar JavaScript for sua maior preocupação, você pode testar o Aardwolf.

Trata-se de um depurador remoto com o qual podemos executar e capturar JavaScript. O Aardwolf funciona reescrevendo o código no servidor e adicionando hooks de depuração. Semelhante ao weinre com um back-end Node.js, ele usa

46

Mobile HTML5

chamadas XHR síncronas para permitir a parada em pontos de interrupção. Você pode usar o Aardwolf para percorrer seu código remotamente, com o suporte a objetos de inspeção, pontos de interrupção e pilhas de chamadas.

Depurador do BlackBerry 10 Embora o weinre seja excelente, o depurador que vem com o Blackberry 10 é mais poderoso.

Como o weinre, o BlackBerry Browser usa uma arquitetura cliente-servidor para tornar a funcionalidade do Web Inspector disponível. Diferentemente do weinre, nesse caso, o BlackBerry Browser age como um servidor web e serve a página web em HTTP por uma conexão USB ou WiFi. O conteúdo é inspecionado remotamente em um navegador desktop. Você pode usar qualquer navegador desktop baseado no WebKit que esteja na mesma rede WiFi para navegar até o endereço IP e o número de porta usados pelo BlackBerry Browser e começar a inspecionar o código.

Para usar o inspetor, você deve ativar a depuração nas opções do BlackBerry Browser. Uma vez que o Web Inspector for ativado, o navegador ou o aplicativo exibirá o endereço IP e o número de porta que ele usará para servir o conteúdo.

Para ativar o Web Inspector no BlackBerry 10, no aplicativo do navegador, dê um toque para baixo a partir do canto superior para exibir a barra de menus. Clique no ícone de configurações e em Developer Tools para ativar o Web Inspector. Se estiver usando o tablet, isso pode ser feito em Options → Privacy & Security. O navegador exibirá o endereço IP e o número de porta necessários à conexão a partir de seu navegador desktop. Se solicitado, digite a senha de seu dispositivo para concluir o processo de ativação. Clique em Back para salvar e voltar à janela do navegador.

Agora você pode abrir uma conexão com o BlackBerry Browser para inspecionar remotamente as páginas exibidas.

Ferramentas de teste É melhor executar seus sites em dispositivos reais, mas é impossível testar em todos os dispositivos, já que há milhares deles, com novos surgindo o tempo todo.

Portanto é recomendável que você teste em um grupo de dispositivos representativo, abordando diferentes configurações de sistemas operacionais, navegadores, tamanhos de dispositivos e recursos, como diferentes resoluções de tela, restrições de memória e acesso de banda larga.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

47

Pode ser caro e demorado testar em dispositivos reais. Além das ferramentas de depuração abordadas na seção anterior, há várias ferramentas que ajudam a elevar ao máximo as habilidades de teste.

Emuladores e simuladores Um emulador é um software que duplica ou emula as funções de um dispositivo (ou de vários dispositivos) móvel em um computador, de modo que o comportamento emulado lembre bastante o comportamento do dispositivo real. Esse enfoque na reprodução exata do comportamento é a diferença entre emulação e simulação. Na simulação, um modelo abstrato do sistema operacional móvel é simulado.

Os emuladores possibilitam que softwares móveis sejam usados em seu desktop, permitindo que você execute e depure seu código sem ter todos os dispositivos.

Mesmo se estiver testando em emuladores e simuladores, você também não poderá testar em emuladores de todos os dispositivos. Os emuladores e simuladores apenas dão uma ajuda e aceleram o processo de desenvolvimento e depuração.

Você ainda deve testar em um conjunto de dispositivos móveis diferentes.

Quando você executar seu site em um simulador, estará executando-o em um aplicativo de simulação em seu desktop. Alguns simuladores são para dispositivos individuais e outros nos permitem selecionar que dispositivo queremos emular.

Por exemplo, o iOS Simulator permite que você selecione o iPhone ou o iPad. Via menus, você pode alterar a orientação entre retrato e paisagem. Há botões virtuais para representar os botões do dispositivo. E, em dispositivos não sensíveis ao toque, você pode usar seu mouse para imitar eventos de toque.

O simulador não replica exatamente o hardware do dispositivo e não há garantia de que seu aplicativo funcionará de maneira idêntica no dispositivo real. Há certas bibliotecas que serão compiladas e vinculadas adequadamente quando usadas no simulador (porque na verdade estão sendo executadas no desktop), mas não serão compiladas quando você usá-las no dispositivo.

Geralmente os simuladores e emuladores incluem um SDK completo para o teste de aplicativos nativos em um ambiente nativo falso. Para testar nosso código, queremos emuladores e simuladores que contenham um navegador, e cada emulador e simulador tem o seu. Provavelmente você vai querer baixar e testar seu site nos navegadores dos emuladores e simuladores a seguir:

48

Mobile HTML5

Android Emulator O emulador gratuito do Android para Windows, Mac OS e Linux está disponível junto com o SDK em http://developer.android.com. Como descrito em “Ferramentas de depuração do Android” na página 40, baixe o SDK básico e, em seguida, baixe cada Android OS separadamente. O download fornece um comando de terminal do Android no Mac/Linux e um aplicativo SDK Setup.exe para Windows.

O emulador do Android permite que você limite a memória para o dispositivo virtual para simular melhor o telefone. No Android Virtual Device Manager, selecione o dispositivo e clique em Edit (mostrado na figura 1.5). No hardware, clique em New e selecione o tamanho da RAM do dispositivo no menu suspenso Property.

iOS Simulator Só disponível para Mac OS X, o iOS Simulator oferece um ambiente de simulação gratuito que inclui o Mobile Safari. Prepare-se porque o SDK do iPhone tem cerca de 2 GB, logo, seu download é bem demorado.

Trata-se de um simulador e não de um emulador. Não há emulação de hardware ou indicadores de desempenho. Ele verifica como seu código está funcionando e como o site está sendo gerado, mas geralmente não consegue medir o desempenho do site.

Se você só quiser ver qual a aparência do design, sem emulação ou simulação, há muitas ferramentas como o iPhoney e o iPadPeek que simplesmente abrem o site em um navegador que parece um modelo de dispositivo mais antigo.

BlackBerry Simulator Os simuladores do BlackBerry para o sistema operacional Windows incluem o servidor proxy, plug-ins para Eclipse e Visual Studio para desenvolvedores web e os simuladores propriamente ditos.

Windows Phone Emulator O Windows Phone Emulator só está disponível em computadores baseados em Windows. Trata-se de um aplicativo desktop que emula um dispositivo Windows Phone. Você pode baixar o SDK do Windows Phone em http://dev. windowsphone.com/en-us/downloadsdk. A versão atual e informações sobre instalação podem ser encontradas em http://bit.ly/16t5utu.

Atualmente, a imagem de emulador padrão no Visual Studio é o Emulator WVGA 512 MB, que emula um telefone Windows Phone 8 com memória restrita.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

49

Firefox OS Simulator O complemento Firefox OS Simulator para o navegador Firefox é o emulador do sistema operacional Firefox, fornecendo um ambiente como o desse sistema que tem a aparência de um telefone móvel. Após instalá-lo, acesse Desenvolvedor web Firefox OS Simulator em seu navegador Firefox para desktop.

Opera Mobile Emulator O Opera Mobile Emulator para Windows, Mac e Linux pode ser baixado de www.opera.com/developer/tools.

Opera Mini Simulator Um aplicativo completo da versão atual do Opera Mini como um applet Java está disponível em www.opera.com/mini/demo.

Esses são os sistemas operacionais móveis predominantes. A maioria dos sistemas operacionais móveis, como o Symbian e o WebOS, tem SDKs que podem ser carregados em seu desktop, permitindo que você simule seu ambiente. Dependendo do mercado que pretende atingir, você deve testar todos os sistemas operacionais que seu público-alvo poderia usar. Para ver mais emuladores, visite http://www. mobilexweb.com/emulators.

Ferramentas online Para avaliar rapidamente as estatísticas vitais dos dispositivos que afetam as consultas de mídia básicas, abra http://www.quirksmode.org/m/tests/widthtest.html no navegador do dispositivo.

O W3C mobileOK Checker verifica o uso de práticas recomendadas em seu site e fornece informações e links que ajudam a torná-lo mais amigável a dispositivos móveis. O mobiReady é uma ferramenta online que se beneficia do W3C mobileOK Checker, exibindo os resultados de uma maneira com mais chances de convencê-lo a tomar medidas para tornar seu site mais adaptável a dispositivos móveis. Útil para o desenvolvimento web móvel, o teste de HTTP e a privacidade, o complemento Modify Headers para Firefox permite que você modifique – adicione, substitua e filtre – cabeçalhos de solicitações HTTP enviados para servidores web. Links que conduzem a esses recursos (e a todos os outros recursos listados neste livro) podem ser encontrados nos recursos de capítulos online (http://www. standardista.com/mobile/).

50

Mobile HTML5

Telefones Testar em dispositivos reais é uma etapa essencial do processo de desenvolvimento, mas comprar vários dispositivos móveis pode ser um investimento e tanto.

O redimensionamento de navegadores e o uso de emuladores não replicarão o desempenho real do site, os recursos do dispositivo, a densidade dos pixels e o impacto da rede móvel.

Se você estiver criando aplicativos nativos, obviamente precisará de dispositivos com os sistemas operacionais para os quais está desenvolvendo. Neste livro, estamos desenvolvendo com HTML5, CSS3 e JavaScript, sem usar código nativo, logo, nosso código funcionará em navegadores de todos os dispositivos. Embora estejamos desenvolvendo para o navegador, precisamos testar em muitos dispositivos, inclusive alguns em redes provedoras de telefonia. Teste sempre seu código nos dispositivos reais com conexões do mundo real, que incluem hotspots WiFi, conexões 3G, 4G e até mesmo EDGE. Ande de ônibus ou trem e tente acessar seu aplicativo em vários pontos enquanto se move pela cidade e pelas áreas periféricas e rurais entre as grandes cidades.

Laboratórios de navegador Testar em dispositivos móveis reais é uma parte do processo de desenvolvimento que não pode ser omitida. Há muitos laboratórios de navegador, portanto, tente encontrar um perto de você. Se não houver, junte-se a outras pessoas para criar um.

Se preferir ter seu próprio laboratório de dispositivos, você precisará de dispositivos com diferentes tamanhos, sistemas operacionais, recursos e navegadores.

Você pode criar seu próprio laboratório de dispositivos com uma seção mista do cenário de dispositivos móveis sem gastar muito. É impossível comprar todos os dispositivos, mas você deve tentar obter uma amostra com diferentes tamanhos, navegadores e sistemas operacionais.

Também há laboratórios de dispositivos virtuais como o DeviceAnywhere e o Remote Access da Nokia. São dispositivos reais que podem ser acessados remotamente. Já que são dispositivos reais, se alguém estiver usando um, você terá de esperar na fila.

iOS Na América do Norte, os dispositivos iOS representam somente 5% do tráfego geral na internet, com mais de 50% do tráfego móvel.8 Se ainda não tiver um dispositivo iOS em casa e seu aplicativo não se destinar apenas às populações pobres dos países subdesenvolvidos, invista em um.

8 http://bit.ly/HaW2PV e http://bit.ly/1diKHLb.

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

51

Adquira um dispositivo com o sistema operacional iOS mais recente e um com uma versão mais antiga. Você pode adquirir um dispositivo mais antigo no Craiglist ou no eBay por uma quantia módica. Atualmente, só 1,8% dos usuários do iOS, ou 0,13% dos usuários da internet, têm o iOS 5.

Quando adquirir um dispositivo, você precisará do navegador para trabalhar. Não há saída. Se preço for um problema, dispositivos com a tela arranhada podem ser adquiridos quase de graça. Um dispositivo deve ser um telefone. O outro pode ser um telefone, iPad ou iPod touch.

Uma vez que tiver adquirido seu(s) dispositivo(s) iOS, baixe o Opera Mini, que está disponível gratuitamente no iTunes.

Se todos os seus dispositivos iOS tiverem telas de alta resolução, certifique-se de que alguns dos outros dispositivos não tenham. Além disso, certifique-se de que nem todos os seus dispositivos sejam telefones – inclua um ou dois tablets.

Android O Android é o sistema operacional móvel mais popular e diversificado de todo o mundo. Ele é executado em vários dispositivos, inclusive telefones e tablets. Adquira pelo menos dois (de preferência mais) dispositivos Android: um smartphone de alta capacidade com um sistema operacional recente e um telefone mais barato executando uma versão mais antiga. Quando este texto foi escrito, embora já esteja ultrapassado, o Android 2.3 ainda estava sendo vendido nas lojas em dispositivos baratos ou era encontrado em dispositivos gratuitos, e atualmente essa é a versão mais popular, com 34% do mercado do Android, totalizando 2,3% dos usuários globais da Internet.9 Além de várias versões do sistema operacional Android, obtenha dispositivos de diferentes tamanhos, poder de processamento, resoluções e fabricantes. Em seu dispositivo Android, você pode adicionar outros navegadores, inclusive o Chrome, o Opera Mini e Mobile, o Firefox Mobile e o Dolphin Mini e HD.

Windows Se for investir em um dispositivo Windows, invista no sistema operacional mais recente. O Windows Phone 7 nunca foi muito popular, mas o Windows Phone 8 tem potencial para ser. Os dois têm a interface Metro UI. Além de testar o aplicativo para ver se sua marcação funciona, brinque realmente com o telefone Windows. A interação do usuário no dispositivo é bem diferente da do Android e do iOS. Talvez você queira ajustar algumas interações da UI para que correspondam melhor aos comportamentos padrão desenvolvidos com o uso do dispositivo Windows.

9 http://developer.android.com/about/dashboards/index.html.

52

Mobile HTML5

BlackBerry O dispositivo BlackBerry 10 tem o melhor depurador de todos os dispositivos móveis, mas definitivamente não tem a maior base de usuários.

Há mais dispositivos BlackBerry antigos no mercado do que dispositivos BlackBerry 10. Os usuários de BlackBerry tanto de dispositivos novos quanto de dispositivos mais antigos surfam na web. Recomendo obter um BB6 ou BB7.

Felizmente, os telefones mais antigos não são caros e é bom ter um dispositivo não sensível ao toque para testar seus sites.

Antes do BB6, o navegador não era baseado no WebKit. Há menos usuários desses dispositivos realmente antigos. Se houver a possibilidade de seu público-alvo usar um BB5 ou anterior, um terceiro dispositivo BlackBerry pode ser útil.

Nokia Com Nokia, estou me referindo ao sistema operacional Symbian e não ao Lumia Windows Phone.

O Symbian, o Series 40, o Samsung e, em menor escala, o Sony Mobile e o Motorola são mais comuns do que o Android, o iOS, o BlackBerry e o Windows em alguns países. Se eu sugerir um dispositivo específico, quando este texto for para a impressão, minha sugestão já estará desatualizada. Só é preciso saber que, internacionalmente, a Nokia é uma participante importante do mercado de dispositivos móveis, tendo grande alcance. Recomendo a obtenção de um feature phone com entrada D-pad e tela pequena para que você possa ter uma ideia do que um grande percentual dos habitantes do mundo todo verão ao acessar seu site.

Kindle Não se esqueça do Kindle Fire com seu navegador Silk baseado no WebKit.

WebOS O WebOS parou de ser fabricado, mas ainda está em uso. O Palm Pre ou o Pixi podem ser adquiridos por menos de 30 dólares.

Teste automatizado As ferramentas de teste que acabaram de ser listadas o ajudarão a fazer testes visual e manualmente. Para testar apropriadamente, você tem de girar, aplicar zoom, obter visões panorâmicas, clicar e ficar com raiva. Quanto à aparência, é

Capítulo 1 ■ Preparando o terreno para o aprendizado de HTML5, CSS3 e APIs JavaScript

53

preciso examinar a página renderizada em diferentes tamanhos de dispositivo, navegadores e sistemas operacionais. No que diz respeito a conteúdo estático, isso pode ser suficiente, e ferramentas como o Adobe Edge podem ajudar.

Para aplicativos web, provavelmente você terá de automatizar o teste. É preciso testar continuamente seu aplicativo para verificar se o código funciona mesmo, testando todos os eventos e resultados. Há várias bibliotecas de teste para JavaScript.

O Jasmine é um framework guiado por comportamento. O PhantomJS é um WebKit headless, e não uma biblioteca de teste, com suporte a vários padrões web, que incluem a manipulação do DOM, seletores CSS e o JSON. Você pode baixar um binário pré-compilado para qualquer sistema operacional no site do PhantomJS. Para se beneficiar do PhantomJS em testes automatizados executados no front-end, baixe o CasperJS. Para simular chamadas AJAX, você pode usar o Sinon.JS. Todos os sites fornecem documentação bem escrita para habilitá-lo a usar essas bibliotecas em testes no WebKit. Isso não resolve a execução de testes em dispositivos móveis.

Há ferramentas de teste online. Algumas, como o SauceLabs, permitem o teste em centenas de plataformas de sistemas operacionais/navegadores móveis e desktop.

Escolha o que é melhor para você e seu aplicativo – mas teste sempre.

Agora, passemos à codificação, para termos algo para testar.