PHPrtica31/07/2010

PatrocnioRealizaoApoio

Termo de Uso

Voc pode

copiar, distribuir, exibir e executar a obra

criar obras derivadas

Sob as seguintes condies Atribuio. Voc deve dar crdito ao autor original, da forma especificada pelo autor ou licenciante.

Para cada novo uso ou distribuio, voc deve deixar claro para outros os termos da licena desta obra.

Qualquer uma destas condies podem ser renunciadas, desde que Voc obtenha permisso do autor.

Nada nesta licena prejudica ou restringe os direitos morais do autor.

Qualquer direito de uso legtimo (ou "fair use") concedido por lei, ou qualquer outro direito protegido pela legislao local, no so em hiptese alguma afetados pelo disposto acima.Este um sumrio para leigos da Licena Jurdica (na ntegra). http://creativecommons.org/licenses/by/2.5/br/

Contedo programtico

Identificando o dispositivo mvel e seus recursosIsMobile

Tera-WURFL

Integrao com GateWay para envio de SMScURL

Criao de Site MobileA procura do padro Site Mobile

Criando um site institucional simples.

Criao de QR Code

Identificando o dispositivo mvel 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 solues que encontrei para PHP, todas se baseiam nas informaes obtidas pela varivel pr-defina a $_SERVER, que nada mais que um array que guarda as informaes do servidor e do ambiente de execuo. Entre os valores est a HTTP_USER_AGENT que armazena uma string com informaes como o browser e o sistema operacional do usurio e temos tambm a HTTP_ACCEPT que tem uma lista de MIME-Types 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; en-US; 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 mvel, no caso um Nokia E71, vai imprimir:

User agent: Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaE71-3/200.21.118; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413 HTTP Accept: text/html,text/css,multipart/mixed,application/java-archive, application/java, application/x- java-archive, text/vnd.sun.j2me.app-descriptor,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/x-nokia-widget, */*

Nota-se a diferena entre os valores, de browser, sistema operacional e mime-type listados pelo user agent. Agora s pegar essas informaes, comparar e descobrir se um dispositivo mvel. Mas comparar com o que? Vamos a um exemplo Faa voc mesmo para esclarecer essa dvida.Vamos codar :)Voc pode ficar alternando o valor da string $user_agent para testar, da pra frente com voc, ou voc faz a sua prpria soluo ou pode utilizar alguma pronta e adaptar para a sua necessidade.IsMobileDetecta qual dispositivo mvel est acessando seu site. Recursos: Interface para voc implementar o seu cdigo de log

Suporte para identificao dos principais dispositivos mveis do mercado, como iPad, HTC (Android), Nokia, BlackBerry e etc

Vamos codar :)Esse foi um exemplo utilizando a classe IsMobile, para identificar se o usurio est acessando o seu site de um iPad ou um celular Nokia. Por ser uma classe fica mais fcil e organizando de voc implementar em um site/sistema que j esteja funcionando, tambm j vem um array populado com os principais dispositivos mveis do mercado, uma interface para implementar log e agora seguindo o Coding Standards da PEAR .Tera-WURFLNesse exemplo ns identificaremos se o celular um iPhone, e alteramos o CSS do site de acordo com o tamanho do display do dispositivo.Vamos codar :)O que torna essa identificao avanada, a possibilidade saber todo os recursos que o dispositivo mvel tem, como tamanho da tela, se tem suporte a bluetooth, mp3, acesso via wi-fi, 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 informaes.Integrao com GateWay para envio de SMS

O termo integrao gateway vem de empresas que prestam o servio de integradora entre a sua aplicao e a operada no envio de dados (sms, mms e etc). A integradora a empresa que responsvel pela tarifao do SMS, que verifica junto a operadora se o cliente tem crdito, gerencia e supervisiona o envio do sms, reportando para a sua aplicao 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 vrios tipos diferentes de servidor com vrios tipos diferentes de protocolos, libcurl atualmente suporta os protocolos http, https, ftp, gopher, telnet, dict, file, e ldap. libcurl tambm suporta certificados HTTPS, HTTP POST, HTTP PUT, upload com FTP (isto tambm pode ser feito com a extenso de ftp do PHP), upload baseado em formulrio HTTP, proxies, cookies, e autenticao usurio+senha. fonte: http://br2.php.net/manual/pt_BR/intro.curl.php

Vamos criar o exemplo em cima do seguinte cenrio:

Temos uma aplicao web, que a sua principal funcionalidade gerenciar o estoque de uma empresa que vende ar-condicionados em Campo Grande MS, os negcios vo de vento em popa. A empresa quer aplicar uma nova estratgia de venda, mandar os vendedores irem ao centro da cidade oferecer ar-condicionados as lojas. Prem a empresa trabalha sempre com um baixo nmero de itens no seu estoque e precisa sempre ficar cuidando o estoque para fazer um novo pedido ao fornecedor e no vender um ar- condicionado a pronta entrega e no ter ele disponvel para o cliente.Portanto uma nova demanda foi criada para essa aplicao web, sempre que um novo pronto chegar ao estoque ou quando estiver com saldo zero, enviar um sms para os vendedores avisando. Isso tem que ser automtico, sem necessitar o preenchimento de um formulrio. Como fazer? Entrar em contato com uma empresa integradora e fechar uma quantidade de crditos suficientes para o envio de sms a todos os vendedores.

Adicionar no formulrio de cadastro dos vendedores o nmero do celular como obrigatrio

Inserir na regra de negcio que efetua a entrada e sada de itens do estoque o exemplo que vamos estudar a seguir.

Vamos codar :)

Criei uma pgina para receber essa requisio e apenas retornar o que foi enviado, para podermos testar essa requisio e saber se todas as informaes foram enviadas corretamente. Segue abaixo o retorno da requisio que fizemos acima: [texto]Podemos manipular as informaes do cabealho da nossa requisio, vou mostrar um exemplo aonde vamos definir o valor do HTTP_USER_AGENT, s adicionar as seguintes opes na nossa requisio: [codigo]E muda as informaes do cabealho da nossa requisio para:[texto]A manipulao do valor do HTTP_USER_AGENT j nos d a opo de retornar a mensagem em um formato especifico caso seja um dispositivo mvel. s implementar alguma das solues de identificao de mobile nas regras de negcio da pgina que recebe as requisies.

Criao de Site MobileA porta que mais est aberta no mundo do Desenvolvimento Mobile Web com certeza essa. A criao/customizao de sites para mobile. E nessa onda de demandas que comeam a surgir os problemas e as solues.A procura do padro Site MobileCom a natural evoluo e popularizao da internet, os sites foram mudando e criando padres de layout ao longo dos anos, estamos prximos da criao de mais um padro, o padro mobile, mas antes de chegar nessa discusso, vamos fazer um tour pelos padres j consagrados na internet.

Padro Portal

O consagrado template de portal, querem colocar tudo dentro dele, toda informao possvel tinha que entrar no site, menus imensos e muito mais contedo do que voc poderia absorver durante anos. Mas essa a inteno de portais, te manter no site o maior tempo possvel.Padro Abertura e/ou site todo em FLASH

Foi a poca aonde as crianas aprenderam a usar o giz de cera e a cola glitter. No queria retratar esse padro, queria poder apagar ele da histria, mas querendo ou no ele foi importante, foi o momento aonde os designers foram vencidos pelo bom senso. At ento eles comemoravam vitria com os layouts pulando e piscando. Mas se pudessem ver o futuro

Futuro aonde a simplicidade e clareza foram ganhando mais espao, o site precisava ter um objetivo claro, o portal muito genrico, sites com aberturas em flash j no so mais novidades, e ningum mais tinha pacincia, todos querem acesso rpido e fcil ao contedo. 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.E foi a que comeou a era dos blogs, cada um poderia escrever sobre o assunto que tem conhecimento, voc no precisa mais ficar garimpando em portais para encontrar a pessoa que falam sobre determinado assunto, hoje voc vai direto no blog dela.

Padro Blog

O formato blog trouxe um objetivo claro e direto para um site. Voc pode selecionar mais facilmente a informao que quer consumir e interagir direto com escritor, algo bem interessante para quem produz contedo para a internet, agora com esse formato ficou muito mais fcil receber um feedback do usurio.

Padro Web 2.0Aqui foi a grande sacada da web, que tornou a rede mundial de computadores em uma rede mundial de usurios. Finalmente as pessoas esto se conectando e compartilhando conhecimento. E a Web 2.0 isso, possibilitar ao usurio total interao e participao no seu site. Deixar ele selecionar qual contedo ele acha relevante, o que ele quer ler e acessar.

Junto com essa tendncia, antigos padres 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 padro de portal, e como ele est muito mais interativo e funcional.

Padro Mobile ?Ainda estamos evoluindo para isso, mas acredito que por um bom tempo teremos vrios padres mobile, pela diversidade de dispositivos mveis que temos no mercado. Isso leva a construo de sites com diferentes layouts, vou citar os dois exemplos mais populares, que so os Smartphones e Touchscreens, s lembrando que essa diferena no tcnica, apenas para ilustrar a diferena esttica entre esses dois celulares.

Smartphone

A primeira coisa que o usurio visualiza ao acessar o site da Empresa Awei um mapa da sua localizao e seu telefone. E apenas mais duas opes para conhecer um pouco da empresa e um formulrio de contato, pouca informao, porm objetiva. Considere Smartphones celulares como Nokia E71, Blackberry e etc.Touchscreen

Com mais espao o display e com mais recursos no browser, podemos aprimorar a experincia do usurio no nosso mobile site, adicionando opes para interagir com o mapa de localizao da empresa por exemplo. fato que o Iphone parmetro de celular touchscreen para os outros, ento levamos ele como base para esse padro, pois tendncia que os demais sigam grande parte da tima usabilidade que o Iphone trouxe.

Estamos muito longe do padro ?

Os sites mobile ainda no tem atrativos suficientes para prender a ateno do usurio por muito tempo, conta com a limitao 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 padres que vimos passaram por uma evoluo ou extino, o dos sites mobiles sero muito mais rpidos para evoluir ou sumir do mercado, por conta da rpida evoluo dos aparelhos.

O importante para quem trabalha com desenvolvimento mobile web acompanhar muito de perto a evoluo dos aparelhos e a movimentao do mercado, isso no difcil, s assinar meia dzia de feeds que voc fica atualizado, sigam as referncias desse post, acredito ser um bom comeo.Criando um site institucional simplesVamos seguir o padro mobile que foi apresentado acima, para atender tanto smartphones, quanto celulares touchscreen. Adicionando as informaes bsicas da sua empresa.Antes de entrar no cdigo, 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/aplicao mobile

http://validator.w3.org/mobile/ Gerao de QR Code

Foi criado pela empresa japonesa Denso-Wave em 1994. o QR Code ou Cdigo de Barras 2D uma matriz bi-dimensional que tem grande capacidade de armazenamento.A sua vantagem diante de outros cdigos de barras justamente na capacidade de armazenamento que pode chegar at Numricos (Max. 7,089 characters), Alfanumricos (Max. 4,296 characters), Binrios (8 bits Max. 2,953 bytes) e Kanji/Kana (Max. 1,817 characters).Alm disso o cdigo de barras pode ser lido mesmo com imagens de baixa resoluo com cmeras de celular em formato VGA, sem contar que essa tecnologia possui um alto nvel de correo de erro na imagem, ele recupera os dados armazenados caso a imagem esteja danificada em at 30%.Segundo a prpria empresa que criou, voc livre para usar o Qr Code, a patente no ser praticada.

Aqui est o dito cujo:

Como criar ?Instalando um pacote PEAR, ento voc pode instalar rodando o comando pear install Image_QRCode-0.1.1, agora se voc boiou sobre essa instalao visite a pgina no site da PEAR sobre como instalar usando o pear. Eu prefiro fazer o download do pacote todo mesmo, s entrar na pgina de download do projeto e baixar o arquivo compactado. Depois de baixar s descompactar ele e voc vai ter a seguinte estrutura:

No diretrio data temos os arquivos necessrios para gerao do QR-code, assim como na pasta image. Em doc temos um arquivo com exemplos prticos 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 mgica acontece, sugiro que voc edite o arquivo de uma navega por ele para voc entender como funciona.Colocando para funcionar

Vamos codar:)

PHP QR Code Generator

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

Entre no grupo PHP-MaranhoVisite o nosso site

Iniciando no Desenvolvimento Mobile WebPHPrtica PHP Maranho / 31-07-2010

Jera Software gil www.jera.com.br
Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes PorKaria - Pgina de