Introdução ao Desenvolvimento Mobile Web no LinguAgil

Iniciando no Desenvolvimento Mobile Web#LinguAgil / 17/09/2010

#LinguAgil17/09/2010

Jera Software Ágil – www.jera.com.brCurso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” Página 1 de 18

http://www.jera.com.br/


Termo de Uso

Você pode

copiar, distribuir, exibir e executar a obra

criar obras derivadas

Sob as seguintes condições

Atribuição. Você deve dar crédito ao autor original, da forma especificada

pelo autor ou licenciante.

• Para cada novo uso ou distribuição, você deve deixar claro para outros os termos da licença desta obra.

• Qualquer uma destas condições podem ser renunciadas, desde que Você obtenha permissão do autor.

• Nada nesta licença prejudica ou restringe os direitos morais do autor.


Qualquer direito de uso legítimo (ou "fair use") concedido por lei, ou qualquer outro direito protegido pela legislação local, não são em hipótese alguma afetados pelo disposto acima.Este é um sumário para leigos da Licença Jurídica (na íntegra). http://creativecommons.org/licenses/by/2.5/br/



Conteúdo programático

• Identificando o dispositivo móvel e seus recursos

◦ IsMobile

◦ TeraWURFL

• Integração com GateWay para envio de SMS

◦ cURL

• Criação de Site Mobile

◦ A procura do padrão Site Mobile

◦ Criando um site institucional simples.

• Criação de QR Code




Identificando o dispositivo móvel e seus recursos

Esse é o problema mais comum e provavelmente o primeiro em que você vai se deparar no desenvolvimento mobile web. De todas as soluções que encontrei para PHP, todas se baseiam nas informações obtidas pela variável prédefina a $_SERVER, que nada mais é que um array que guarda as informações do servidor e do ambiente de execução.

Entre os valores está a HTTP_USER_AGENT que armazena uma string com informações como o browser e o sistema operacional do usuário e temos também a HTTP_ACCEPT que tem uma lista de MIMETypes suportado pelo User_Agent .

Vamos a um exemplo:

Vamos codar :)

Acessando de um computador normal, no caso o meu, vai imprimir:

User agent: Mozilla/5.0 (X11; U; Linux i686; enUS; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5

HTTP Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Acessando de um dispositivo móvel, no caso um Nokia E71, vai imprimir:

User agent: Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaE713/200.21.118; Profile/MIDP2.0 Configuration/CLDC1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413

HTTP Accept: text/html,text/css,multipart/mixed,application/javaarchive, application/java, application/x javaarchive, text/vnd.sun.j2me.appdescriptor,application/vnd.oma.drm.message, application/vnd.oma.drm.content,application/vnd.oma.dd+xml,application/vnd.oma.drm.rights+xml, application/vnd.oma.drm.rights+wbxml, application/xnokiawidget, */*

Notase a diferença entre os valores, de browser, sistema operacional e mimetype




listados pelo user agent.

Agora é só pegar essas informações, comparar e descobrir se é um dispositivo móvel. Mas comparar com o que? Vamos a um exemplo “Faça você mesmo” para esclarecer essa dúvida.

Vamos codar :)

Você pode ficar alternando o valor da string $user_agent para testar, daí pra frente é com você, ou você faz a sua própria solução ou pode utilizar alguma pronta e adaptar para a sua necessidade.

IsMobileDetecta qual dispositivo móvel está acessando seu site. Recursos:

• Interface para você implementar o seu código de log • Suporte para identificação dos principais dispositivos móveis do mercado, como

iPad, HTC (Android), Nokia, BlackBerry e etc

Vamos codar :)

Esse foi um exemplo utilizando a classe IsMobile, para identificar se o usuário está acessando o seu site de um iPad ou um celular Nokia. Por ser uma classe fica mais fácil e organizando de você implementar em um site/sistema que já esteja funcionando, também já vem um array populado com os principais dispositivos móveis do mercado, uma interface para implementar log e agora seguindo o Coding Standards da PEAR .

TeraWURFLNesse exemplo nós identificaremos se o celular é um iPhone, e alteramos o CSS do site de acordo com o tamanho do display do dispositivo.

Vamos codar :)



http://pear.php.net/manual/en/standards.php


O que torna essa identificação avançada, é a possibilidade é saber todo os recursos que o dispositivo móvel tem, como tamanho da tela, se tem suporte a bluetooth, mp3, acesso via wifi, modelo do browser e por aí vai. Sem falar que ele importa todos os dados do arquivo xml WURFL para uma base de dados mySQL, facilitando muito o acesso aos dados e rapidez no retorno das informações.

Integração com GateWay para envio de SMS

O termo “integração gateway” vem de empresas que prestam o serviço de “integradora” entre a sua aplicação e a operada no envio de dados (sms, mms e etc). A integradora é a empresa que é responsável pela tarifação do SMS, que verifica junto a operadora se o cliente tem crédito, gerencia e supervisiona o envio do sms, reportando para a sua aplicação o sucesso ou qualquer falha no envio do sms.

cURL “O PHP suporta a libcurl, uma biblioteca criada por Daniel Stenberg, que permite a você conectar e comunicar com vários tipos diferentes de servidor com vários tipos diferentes de protocolos, libcurl atualmente suporta os protocolos http, https, ftp, gopher, telnet, dict, file, e ldap. libcurl também suporta certificados HTTPS, HTTP POST, HTTP PUT, upload com FTP (isto também pode ser feito com a extensão de ftp do PHP), upload baseado em formulário HTTP, proxies, cookies, e autenticação usuário+senha. ”

fonte: http://br2.php.net/manual/pt_BR/intro.curl.php

Vamos criar o exemplo!

Vamos codar :)



http://br2.php.net/manual/pt_BR/intro.curl.php

http://wurfl.sourceforge.net/


Criei uma página para receber essa requisição e apenas retornar o que foi enviado, para podermos testar essa requisição e saber se todas as informações foram enviadas corretamente.

Segue abaixo o retorno da requisição que fizemos acima:

nome = Alziro da Silva celular = 0099556677 mensagem = Acabou de chegar uma caixa de whisky

InformaÃ§Ãµes do CabeÃ§alho SERVER_NAME = labs.porkaria.com.brREMOTE_ADDR = 189.59.101.203

Podemos manipular as informações do cabeçalho da nossa requisição, vou mostrar um exemplo aonde vamos definir o valor do HTTP_USER_AGENT, é só adicionar as seguintes opções na nossa requisição:

Vamos codar :)

E muda as informações do cabeçalho da nossa requisição para:

nome = Alziro da Silva celular = 0099556677 mensagem = Acabou de chegar uma caixa de whisky

InformaÃ§Ãµes do CabeÃ§alho HTTP_USER_AGENT = Mozilla/5.0 (X11; U; Linux i686; enUS; rv:1.9.2.8) Gecko/20100723 Ubuntu/9.10 (karmic) Firefox/3.6.8SERVER_NAME = labs.porkaria.com.brREMOTE_ADDR = 189.59.101.203

A manipulação do valor do HTTP_USER_AGENT já nos dá a opção de retornar a mensagem em um formato especifico caso seja um dispositivo móvel. É só implementar alguma das soluções de identificação de mobile nas regras de negócio da página que recebe as requisições.




Criação de Site MobileA porta que mais está aberta no mundo do Desenvolvimento Mobile Web com certeza é essa. A criação/customização de sites para mobile. E nessa onda de demandas que começam a surgir os problemas e as soluções.

A procura do padrão Site MobileCom a natural evolução e popularização da internet, os sites foram mudando e criando padrões de layout ao longo dos anos, estamos próximos da criação de mais um padrão, o “padrão mobile”, mas antes de chegar nessa discussão, vamos fazer um tour pelos padrões já consagrados na internet.

Padrão Portal




O consagrado template de portal, querem colocar tudo dentro dele, toda informação possível tinha que entrar no site, menus imensos e muito mais conteúdo do que você poderia absorver durante anos. Mas essa é a intenção de portais, te manter no site o maior tempo possível.

Padrão Abertura e/ou site todo em FLASH

Foi a época aonde as crianças aprenderam a usar o giz de cera e a cola glitter. Não queria retratar esse padrão, queria poder apagar ele da história, mas querendo ou não ele foi importante, foi o momento aonde os designers foram vencidos pelo bom senso. Até então eles comemoravam vitória com os layouts pulando e piscando. Mas se pudessem ver o futuro…

Futuro aonde a simplicidade e “clareza” foram ganhando mais espaço, o site precisava ter um objetivo claro, o portal é muito genérico, sites com aberturas em flash já não são mais novidades, e ninguém mais tinha paciência, todos querem acesso rápido e fácil ao conteúdo. Sites em flash até causam o efeito “UAU!” só que todos sabemos que na primeira vez isso é legal, na segunda nem tanto, na terceira já é um saco.



http://www.peixinhodourado.com/admin/produtos/cola%20glitter.jpg


E foi aí que começou a era dos blogs, cada um poderia escrever sobre o assunto que tem conhecimento, você não precisa mais ficar garimpando em portais para encontrar a pessoa que falam sobre determinado assunto, hoje você vai direto no blog dela.

Padrão Blog

O formato blog trouxe um objetivo claro e direto para um site. Você pode selecionar mais facilmente a informação que quer consumir e interagir direto com escritor, algo bem interessante para quem produz conteúdo para a internet, agora com esse formato ficou muito mais fácil receber um feedback do usuário.




Padrão Web 2.0

Aqui foi a grande sacada da web, que tornou a rede mundial de computadores em uma rede mundial de usuários. Finalmente as pessoas estão se conectando e compartilhando conhecimento. E a Web 2.0 é isso, possibilitar ao usuário total interação e participação no seu site. Deixar ele selecionar qual conteúdo ele acha relevante, o que ele quer ler e acessar.

Junto com essa tendência, antigos padrões se adaptaram a essa realidade, como por exemplo os portais, basta você acessar um portal como o G1 e ver o quanto ele mudou daquele antigo padrão de portal, e como ele está muito mais interativo e funcional.

Padrão Mobile ?

Ainda estamos evoluindo para isso, mas acredito que por um bom tempo teremos vários “padrões mobile”, pela diversidade de dispositivos móveis que temos no mercado. Isso leva a construção de sites com diferentes layouts, vou citar os dois exemplos mais populares, que são os “Smartphones” e “Touchscreens”, só lembrando que essa diferença não é técnica, é apenas para ilustrar a diferença estética entre esses dois celulares.



http://www.phpmobile.com.br/2009/05/19/o-que-e-um-multimidia-movel/


Smartphone

A primeira coisa que o usuário visualiza ao acessar o site da Empresa Awei é um mapa da sua localização e seu telefone. E apenas mais duas opções para conhecer um pouco da empresa e um formulário de contato, pouca informação, porém objetiva. Considere Smartphones celulares como Nokia E71, Blackberry e etc.

Touchscreen




Com mais espaço o display e com mais recursos no browser, podemos aprimorar a experiência do usuário no nosso mobile site, adicionando opções para interagir com o mapa de localização da empresa por exemplo. É fato que o Iphone é parâmetro de celular touchscreen para os outros, então levamos ele como base para esse padrão, pois é tendência que os demais sigam grande parte da ótima usabilidade que o Iphone trouxe.

Estamos muito longe do padrão ?

Os sites mobile ainda não tem atrativos suficientes para prender a atenção do usuário por muito tempo, conta com a limitação de browsers e com isso os sites possuem pouca interatividade e ainda estamos brigando com os designers pelo bom senso no layout. Só que assim como todos os padrões que vimos passaram por uma evolução ou extinção, o dos sites mobiles serão muito mais rápidos para evoluir ou sumir do mercado, por conta da rápida evolução dos aparelhos.

O importante para quem trabalha com desenvolvimento mobile web é acompanhar muito de perto a evolução dos aparelhos e a movimentação do mercado, isso não é difícil, é só assinar meia dúzia de feeds que você fica atualizado, sigam as referências desse post, acredito ser um bom começo.




Criando um site institucional simplesVamos seguir o padrão mobile que foi apresentado acima, para atender tanto smartphones, quanto celulares touchscreen. Adicionando as informações básicas da sua empresa.

Antes de entrar no código, vou criar um wireframe da tela que iriamos desenvolver, que é a tela inicial do site, que será essa:

Agora vamos codar :)




Testando o seu site/aplicação mobileA W3C tem uma iniciativa chamada de “Mobile Web Initiative”, que gerou a ferramenta W3C mobileOK Checker, que tem como objetivo validar e ajudar os desenvolvedores de sites mobile.

Exemplo:

http://m.jera.com.br

URL: http://validator.w3.org/mobile/



http://validator.w3.org/mobile/

http://m.jera.com.br/


Geração de QR Code

Foi criado pela empresa japonesa DensoWave em 1994. o QR Code ou Código de Barras 2D é uma matriz bidimensional que tem grande capacidade de armazenamento.

A sua vantagem diante de outros códigos de barras é justamente na capacidade de armazenamento que pode chegar até Numéricos (Max. 7,089 characters), Alfanuméricos (Max. 4,296 characters), Binários (8 bits – Max. 2,953 bytes) e Kanji/Kana (Max. 1,817 characters).

Além disso o código de barras pode ser lido mesmo com imagens de baixa resolução com câmeras de celular em formato VGA, sem contar que essa tecnologia possui um alto nível de correção de erro na imagem, ele recupera os dados armazenados caso a imagem esteja danificada em até 30%.

Segundo a própria empresa que criou, você é livre para usar o Qr Code, a patente não será praticada.

Aqui está o dito cujo:




Como criar ?

InstalandoÉ um pacote PEAR, então você pode instalar rodando o comando pear install Image_QRCode0.1.1, agora se você boiou sobre essa instalação visite a página no site da PEAR sobre como instalar usando o pear. Eu prefiro fazer o download do pacote todo mesmo, é só entrar na página de download do projeto e baixar o arquivo compactado. Depois de baixar é só descompactar ele e você vai ter a seguinte estrutura:

No diretório data temos os arquivos necessários para geração do QRcode, assim como na pasta image. Em doc temos um arquivo com exemplos práticos e temos até uma pasta com tests, que beleza hein ?

Mas o principal é a classe que está no arquivo QRCode.php e lá que a mágica acontece, sugiro que você edite o arquivo de uma navega por ele para você entender como funciona.

Colocando para funcionar

Vamos codar:)



http://pear.php.net/package/Image_QRCode/download

http://pear.php.net/manual/en/installation.php


PHP QR Code Generator

O serviço não só gera o QR Code, como o código que foi usado para sua geração.

URL: http://labs.porkaria.com.br/phpqrcode/



http://labs.porkaria.com.br/phpqrcode/

Technology

Introdução ao Desenvolvimento Mobile Web no LinguAgil