Mundo Mobile

Gustavo Barbosa — Wed, 29 Oct 2008 12:44:05 +0000

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.

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:

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.

Reparem que há muitas mudanças, não podemos utilizar a tag

nem style dentro das tag’s, a tag é substituida pela e a por .

– 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 .

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/

Vagas de estágio na meritia

Gustavo Barbosa — Fri, 15 Aug 2008 14:19:55 +0000

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.

Mudanças

Gustavo Barbosa — Thu, 31 Jul 2008 02:03:05 +0000

Pra descontar o atraso (sic), vai um post repleto de novidades. Primeiramente, uma notícia muito boa, sai da Vale. Depois de estar cansado de programar VB para Excel, finalmente, estou ingressando no mercado web. Recebi uma ligação na terça-feira (29/07) com uma proposta tentadora de estágio, apartir de 01/08 estou oficialmente na Meritia, especializada em aplicações e sistemas para dispositivos móveis. Confesso que fiquei muito feliz pois não estava esperando que esse ano eu saísse de meu antigo emprego.

A outra notícia é que comecei a fazer o tema do meu blog essa semana, mas infelizmente vou ter que deixar ele um pouco de lado pois, próximo mês vou estar totalmente sem tempo , ou seja, vai demorar um pouco (sic) ainda para ficar pronto.

Estou pensando seriamente em participar do Intercon 2008 que será no dia 25/10 em São Paulo, essa semana já devo começar a olhar transporte, hospedagem e etc. O único pesar é que vou sem notebook =/, meu macbook pro só chega em dezembro/08 (Buahh).

Blog, sim ou não ? eis a questão

Gustavo Barbosa — Sun, 13 Jul 2008 14:01:10 +0000

Primeiramente, meu nome como eu acho que todos já devem ter descoberto, é Gustavo Gonçalves Barbosa, tenho 17 anos, faço curso técnico em informática com o ensino médio e estou no 3º ano (se tudo der certo o último =D ) do colégio COTEMIG e atualmente estou fazendo estágio de informática na VALE, pretendo prestar vestibular nas áreas de informática, como Ciências da Computação (UFMG e CEFET) e Sistemas de Informação (PUC e UFV). Tenho vontade de seguir carreira na área de analise de sistemas ou desenvolvimento tanto web quanto de aplicativos.

Comecemos pelo título do blog, confesso que tive relutância para criar meu blog, pois desde novo eu vim acompanhando a evolução dos blogs e nunca vi nada que me interessava assim, ao ponto, que me desse vontade de criar um. Eram aqueles flogs onde postavam fotos, ai vinha gente que criticava , brigas, mostrando o guarda-roupa nas fotos, enfim nada de muito interessante né.

Mas, até que de uns tempos para cá eu venho acompanhando alguns blogs que me chamaram atenção, porque realmente postam alguma coisa, foram eles que me inspiraram á ter esse blog, alguns deles são: matheuseduardo, aurélio, flávio veloso, caio cesar, fabio seixas, marco gomes entre outros. Foi ai que me deu vontade de ter um, não só para expor pensamentos, idéias e conhecimentos, mas também para poder interagir um pouco mais com a blogosfera.

Gustavo Barbosa » Desenvolvimento Móvel

Mundo Mobile

Versão Web para iPhone e iPod Touch

Vagas de estágio na meritia

Mudanças

Blog, sim ou não ? eis a questão