Gustavo Barbosa » Meritia http://gustavobarbosa.com.br/blog de tudo um pouco... ou não Fri, 19 Feb 2010 17:05:20 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Mundo Mobile http://gustavobarbosa.com.br/blog/mundo-mobile/ http://gustavobarbosa.com.br/blog/mundo-mobile/#comments Wed, 29 Oct 2008 12:44:05 +0000 Gustavo Barbosa http://gustavobarbosa.com.br/blog/?p=27 Tanto se fala de mobile: aplicações móveis, WAP, versão web para iPhone e iPod Touch, Mobile Marketing e etc. Tive meu primeiro contato com essa área recentemente pela empresa na qual trabalho atualmente, Meritia. Vou dar umas dicas de como desenvolver um wap, abordarei alguns conceitos de mobile e mostrarei como é fácil desenvolver uma versão web para iPhone e iPod Touch e uma página WAP.

Apple - iPhone

Sugestão, caso você for desenvolver uma versão para iPhone/iPod Touch , sugiro que desenvolva uma para WAP também, porque ainda a maioria dos acessos de internet móvel são de celulares com BlackBerry, Palm e outros smartphones.

Primeiro, vamos aos programas que irão precisar.

  • Recomendo que usem o navegador Firefox, pois iremos usar plugins compativeís apenas com Firefox.
  • Editor de (X)HTML, CSS e JavaScript. Recomendo o Notepad++, para quem não tenha editor pago (ex: dreamweaver).

Plugins para o Firefox:

- User Agent Switcher: Ele troca o User Agent do seu browser, ou seja, caso você queira que o seu browser seja reconhecido como algum modelo de celular específico para entrar em alguma página WAP ou até mesmo pegar internet de graça da Vex e AT&T, no aeroporto Santos Dummont ou em qualquer outro HotSpot da Vex ou AT&T ,é só você instalar o User Agent Switcher no Firefox do seu notebook e trocar para iPhone. #fikdik ;D

Ta bom Gustavo, mas eu instalei o User Agent Switcher aqui e não tenho nenhum User Agent cadastrado ? #comofas

Gerei um XML com uma lista dos meus User Agent mais usado, agora é só fazer o download e importar o XML. Vá em Ferramentas > User Agent Switcher > Options > Options.. Clique em User Agents > Import > Caminho onde salvou o XML e pronto, já pode escolher de celular wap 1.0 , wap 2.0 e até iPhone.

- XML para download com os User Agent que uso. Download aqui

Caso não tenha o User Agent que queira, achei esse site http://www.user-agents.org/, que foi o melhor que encontrei.

- Modify Headers: Define seu MSISDN, através do MSISDN , dá para saber sua região, exemplo, no wap de um site de notícias ao invés de mostrar a previsão do tempo de todas as cidades, ele pega seu msisdn e mostra apenas a previsão da sua região. E através do Modify Headers você pode trocar seu MSISDN, adicionando um número qualquer com DDD (ex: 3188778877), podendo até colocar um de outro país.

Pronto, e agora ? Vamos ao WAP.

Tipos de WAP:

- WAP 1.0 : Apenas aparelhos mais antigos que possuem essa versão, é muito restrita, utiliza WML e não suporta CSS.

Exemplo de código de página WAP 1.0:

<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>
<wml>
<head>
<meta http-equiv=”Cache-Control” content=”max-age=0?/>
<meta http-equiv=”Cache-Control” content=”no-cache”/>
</head>
<card id=”home” title=”Gustavo Barbosa”>
<p>
<img src=”img/logo.gif” alt=”” />
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</card>
</wml>

Reparem que há muitas mudanças, não podemos utilizar a tag <div> nem style dentro das tag’s, a tag <html> é substituida pela <wml> e a <body> por <card>.

– WAP 2.0: É a versão utilizada hoje para a maioria dos celulares que não são smartphones. Nesta versão ja tivemos grandes melhorias, ja podendo usar estilização nas tags a linguagem é o (X)HTML MP (Mobile Profiles), quer saber mais sobre (X)HTML MP visite http://www.developershome.com/wap/xhtmlmp/. O grande pesar é que não suporta Scripts, Frames e CSS. O que temos que ficar atentos é ao tamanho da página que não pode ultrapassar de 10kb, pois alguns celulares, principalmente os da Motorola, a página estoura quando ultrapassa os 10kb e assim não da para visualizar e muito menos navegar. Vou colocar apenas o DTD utilizado no (X)HTML MP, pois o resto é igual ao (X)HTML 1.0 .

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>


Versão Web para iPhone e iPod Touch

Hoje os grandes bancos e sites estão fazendo sua versão para os famosos gadgets da Apple.

Ex:

- Bradesco
- Banco do Brasil
- Itaú
- Hands
- Uol
- Terra

Lembrando que para alguns não conseguirão visualizar a versão iphone caso não estejam com o User Agent do iPhone.

Vamos ao Safari Mobile que é o browser padrão dos gadgets da Apple:

- O que Suporta ?

  • HMTML 4.01
  • HTML 5
  • XHTML 1.0
  • CSS 2.1
  • Parte do CSS 3
  • Javascript 1.4
  • Ajax
  • DOM

- Limites:

Para códigos:

  • 10Mb para arquivos Javascripts e XML
  • O tempo de execução de um Javascript é limitado a 10 segundos. Se passar de 10 segundos, o Safari pára a execução em algum lugar aleatório do seu código.
  • Javascripts alocados limitados a 10Mb
  • Máximo de 8 documentos abertos de uma vez

Para imagens:

  • Limite máximo do tamanho de GIF, PNG e TIFF são 2 Megapixels
  • A decodificação máxima dos tamanhos de JPGs são 32 Megapixels. Utilizando SubSampling
  • O tamanho máximo de GIFs animados deve ser menor que 2MB. Para arquivos animados maiores, só é mostrado o primeiro frame.

O grande segredo na verdade é que todos se baseam em um framework para fazer sua versão iPhone/iPod Touch, inclusive muitos dos sites citados como exemplo acima. Link do framework: http://code.google.com/p/iui/ . Framework muito bom para aprender como utilizamos alguns efeitos JavaScript e CSS, porém , muito limitado para fazer uma versão iPhone/iPod Touch, sugiro para os usuários mais experientes usarem o framework apenas para consulta.

Efeito de deslize com CSS:

.divSlide {
    -webkit-animation-name: "slide-me-to-the-right";
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
    from { left: 0px; }
    to { left: 100px; }
}

Fiz um exemplo de página de iPhone para este post, aproveitei e fiz pra mim ^^ ! Os efeitos que usei foram todos
por JavaScript, não usei o css que postei acima.
Link: http://gustavobarbosa.com.br/iphone/



ps: Como é meu primeiro post explicativo, provavelmente está um pouco confuso, portanto, caso tenham alguma
a acrescentar, sugestões, critícas , observações e whatever, deixem um comentário.
ps²: Ficou faltando algumas coisas, no decorrer do tempo vou editando.

Fontes e links:
http://ajaxian.com/archives/iphone-safari-flick-navigation-by-example
http://developer.apple.com/webapps/
http://www.developershome.com/wap/xhtmlmp/
http://code.google.com/p/iui/
]]> http://gustavobarbosa.com.br/blog/mundo-mobile/feed/ 1 Vagas de estágio na meritia http://gustavobarbosa.com.br/blog/vagas-de-estagio-na-meritia/ http://gustavobarbosa.com.br/blog/vagas-de-estagio-na-meritia/#comments Fri, 15 Aug 2008 14:19:55 +0000 Gustavo Barbosa http://gustavobarbosa.com.br/blog/?p=12 Estamos precisando de duas pessoas para a área de produção que morem em Belo Horizonte – MG, que tenham conhecimento em CSS, (X)HTML que sigam os padrões WEB (W3C), disponibilidade de 8h diárias. Estamos com uma vaga também na área de desenvolvimento, que tenha conhecimentos sólidos em JAVA , de preferência com experiência na área de mobile e disponibilidade de 8h diárias.

Enviar currículo para jobs [at] meritia [dot] com [dot] br.

]]> http://gustavobarbosa.com.br/blog/vagas-de-estagio-na-meritia/feed/ 0