Archive for the ‘Mobile’ Category

Fast status e vagas para produtores na Meritia

Posted in Meritia, Mobile, WAP on July 2nd, 2009 by Gustavo Barbosa / Comments Off
@meritia

@meritia

Este foi o time ‘workaholic’ que trabalhei por quase um ano, só tenho a agradecer pelo conhecimento e companheirismo gerado. Sai da Meritia pra poder estudar pro vestibular, vou tentar computação ou sistemas de inf. na ufmg e design na uemg.

Aproveitando o post abriu duas vagas para produtores lá:
A Meritia está com duas vagas para produtor HTML/CSS. Oportunidade de aprender a programar em Java, J2ME e iPhone em BH. Entrar em contato pelo @meritia ou mandar e-mail para curriculos@meritia.com.br.
Carga horária de 8 horas + bolsa de R$ 800 + VT.

Vídeo apresentação Wapstudio

Posted in Meritia, Mobile, WAP on January 21st, 2009 by Gustavo Barbosa / Comments Off

Vídeo abaixo mostra como e a importância de ter uma versão mobile de seu portal/site e o jeito mais fácil hoje é o Wapstudio.

Fechamento de 2008 e metas para 2009

Posted in Apple, Mobile on December 31st, 2008 by Gustavo Barbosa / 1 Comment »

Pessoal, estava fazendo algumas metas para 2009 e refletindo sobre as conquistas e perdas de 2008. Antes de mais nada, sei que não dei atenção para o blog neste ano e que se tudo der certo 2009 será diferente , com algumas novidades e mais conteúdo. Que todos tenham um Feliz 2009 , repleto de conquistas, com muita felicidade e saúde o/. Listei abaixo algumas coisas que conclui em 2008 e que me fazem tomar algumas mudanças e definir as metas de 2009, achei melhor não postar minhas metas , pois caso leiam isso aqui eu espero que vocês definam suas propriás metas baseado no que precisam e no que vão fazer para alcança-las.

Conclusões de 2008:

- Percebi que quanto menos tempo você tem, mais produtivo fica.

- Que temos que ficar bem com nosso corpo (sic): atividade física regularmente, alimentação saudável, menos refrigerante e caféina (quase impossível para os #geeks).

- Que nunca estamos satisfeitos.

- Nunca podemos ficar satisfeitos.

- Não adiar o que tem de fazer, se não , nunca fazemos.

- Que mobile é um setor que crescerá e passará a web em menos de 20 anos.

- Que Apple foi a empresa do ano.

- Evite comprar parcelado .

- Ou tenha um blog atualizado regularmente ou não tenha (sic). (2009 vai ser diferente por aqui)

- Nunca iremos parar de estudar.

- Que o que faculdade te proporciona é apenas nome, amigos e talvez algumas oportunidades, nada mais. Este item sei que muita gente não concorda, mas é fato. As pessoas que discordam por favor, assistam o vídeo abaixo , o palestrante é o professor da USP , Ph.D em Comunicação Digital, Luli Radfahrer , ele te dá algumas informações que te levam a pensar e chegar á essa conclusão.

ps: não estou lembrando tudo de cabeça, eu anotei em um caderno, depois passo por aqui e atualizo.

Mundo Mobile

Posted in Apple, CSS, Desenvolvimento Móvel, Meritia, Mobile, WAP, XHTML, iPhone, iPod Touch on October 29th, 2008 by Gustavo Barbosa / 1 Comment »

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/

Entries (RSS)