Introdução ao Desenvolvimento Mobile Web no LinguAgil

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

#LinguAgil
17/09/2010

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

#LinguAgil  / 17/09/2010

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/


#LinguAgil / 17/09/2010

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


#LinguAgil / 17/09/2010

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/MIDP
2.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


#LinguAgil / 17/09/2010

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.

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

TeraWURFL
Nesse 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 :)


#LinguAgil / 17/09/2010

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 :)


#LinguAgil / 17/09/2010

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.br
REMOTE_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.8
SERVER_NAME = labs.porkaria.com.br
REMOTE_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.


#LinguAgil / 17/09/2010

Criação de Site Mobile
A 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 Mobile
Com 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


#LinguAgil / 17/09/2010

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.


#LinguAgil / 17/09/2010

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.


#LinguAgil / 17/09/2010

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.


#LinguAgil / 17/09/2010

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


#LinguAgil / 17/09/2010

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.


#LinguAgil / 17/09/2010

Criando um site institucional simples
Vamos 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 :)


#LinguAgil / 17/09/2010

Testando o seu site/aplicação mobile
A 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/


#LinguAgil / 17/09/2010

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:


#LinguAgil / 17/09/2010

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:)


#LinguAgil / 17/09/2010

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/


Introdução ao Desenvolvimento Mobile Web no LinguAgil

Recommandé

Recommandé

Contenu connexe

Similaire à Introdução ao Desenvolvimento Mobile Web no LinguAgil

Similaire à Introdução ao Desenvolvimento Mobile Web no LinguAgil (20)

Plus de Bruno Fernandes "PorKaria"

Plus de Bruno Fernandes "PorKaria" (20)

Introdução ao Desenvolvimento Mobile Web no LinguAgil