Introdução ao Desenvolvimento Mobile Web no LinguAgil

2.683 visualizações

Publicada em

Mini-curso apresentado no LinguAgil 2010 em Salvador - BA

Publicada em: Tecnologia
1 comentário
0 gostaram
Estatísticas
Notas
  • Apostila interessante, porém, comentário infeliz sobre designers, não conheci um designer por formação que gostasse de coisas pulando e piscando, nem mesmo os mais antigos, se conheceu não era um designer autêntico. Como diria um antigo professor meu, design não é arte, cria com objetivo!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.683
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
63
Comentários
1
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao Desenvolvimento Mobile Web no LinguAgil

  1. 1. 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
  2. 2. Iniciando no Desenvolvimento Mobile Web #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/ Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 2 de 18
  3. 3. Iniciando no Desenvolvimento Mobile Web #LinguAgil  / 17/09/2010 Conteúdo programático • Identificando o dispositivo móvel e seus recursos ◦ IsMobile ◦ Tera­WURFL • 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 Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 3 de 18
  4. 4. Iniciando no Desenvolvimento Mobile Web #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 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 móvel, 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 diferença entre os valores, de browser, sistema operacional e mime­type  Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 4 de 18
  5. 5. Iniciando no Desenvolvimento Mobile Web #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 . Tera­WURFL 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 :) Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 5 de 18
  6. 6. Iniciando no Desenvolvimento Mobile Web #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  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 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 :) Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 6 de 18
  7. 7. Iniciando no Desenvolvimento Mobile Web #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 = 009955­6677  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 = 009955­6677  mensagem = Acabou de chegar uma caixa de whisky  Informações do Cabeçalho  HTTP_USER_AGENT = Mozilla/5.0 (X11; U; Linux i686; en­US; 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.  Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 7 de 18
  8. 8. Iniciando no Desenvolvimento Mobile Web #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 Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 8 de 18
  9. 9. Iniciando no Desenvolvimento Mobile Web #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. Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 9 de 18
  10. 10. Iniciando no Desenvolvimento Mobile Web #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. Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 10 de 18
  11. 11. Iniciando no Desenvolvimento Mobile Web #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. Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 11 de 18
  12. 12. Iniciando no Desenvolvimento Mobile Web #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 Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 12 de 18
  13. 13. Iniciando no Desenvolvimento Mobile Web #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. Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 13 de 18
  14. 14. Iniciando no Desenvolvimento Mobile Web #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 :) Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 14 de 18
  15. 15. Iniciando no Desenvolvimento Mobile Web #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/  Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 15 de 18
  16. 16. Iniciando no Desenvolvimento Mobile Web #LinguAgil  / 17/09/2010 Geração de QR Code Foi criado pela empresa japonesa Denso­Wave em 1994. o QR Code ou Código de Barras  2D é uma matriz bi­dimensional 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: Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 16 de 18
  17. 17. Iniciando no Desenvolvimento Mobile Web #LinguAgil  / 17/09/2010 Como criar ? Instalando É um pacote PEAR, então você pode instalar rodando o comando pear install  Image_QRCode­0.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 QR­code, 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:) Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 17 de 18
  18. 18. Iniciando no Desenvolvimento Mobile Web #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/ Jera Software Ágil – www.jera.com.br Curso Desenvolvimento Mobile Web, apostila criada por Bruno Fernandes “PorKaria” ­ Página 18 de 18

×