ScreenCast – Bate papo sobre desenvolvimento de sites para IPhone

flaviosilveira — Tue, 19 Jan 2010 22:48:03 +0000

Salve galera!

No meio do ano passado fiz um experiência na tentativa de fazer um Screencast com alguns estudos que fiz sobre o desenvolvimento de sites voltados para o IPhone.

De lá pra cá acabei me envolvendo em outras coisas e nem lembrei de publicar isso.

Agora está ai! Um bate papo com exemplos de quase 20 minutos de duração para quebrar alguns mitos de se criar sites para Iphone. Também mostro algumas ferramentas, frameworks para facilitar a vida e simuladores para você fazer os devidos testes.

Nesse Vídeo:
- Fazendo um site para IPhone no braço, HTML, JavaScript
- IWebKit – Framework para desenvolvimento de sites no IPhone
- Simuladores para testar: IPhoney, Iphone Simulator(XCode)
- IPhone Project do Aptana

Confiram!!

Alguns links:
- IWeb Kit
- Usando Iphone Simulator (Em inglês)

Valeu galera! Espero que curtam.
Qualquer dúvida entrem em contato pelo email ou twitter.
Aguardo os feedbacks.

Redirecionando usuários do IPhone para a versão mobile do seu site – JavaScript

flaviosilveira — Mon, 20 Jul 2009 00:40:53 +0000

As pessoas que me acompanham sabem que há pouco mais de um mês adquiri um IPhone.
A minha operadora me ligou oferecendo alguns pontos que valiam desconto na aquisição do aparelho. Não perdi tempo e corri lá buscar.

Desde então as minhas leituras diárias começaram a se voltar mais para IPhone.
Desenvolvimento de aplicativos, desenvolvimento de sites, ‘manhas’ para usar o aparelho, dicas para economizar bateria, e por ai vai.

O que trago hoje aqui faz parte dos meus estudos para criação de sites para o público que usa IPhone, que é, identificar que seu visitante está usando o aparelho e redirecioná-lo para a versão mobile do seu site.

A ideia é bem simples, e, para colocar ela em prática usamos JavaScript.

Primeiro crie um arquivo HTML e o prepare para receber um javaScript dentro das tags do cabeçalho.



::: Teste IPhone :::

Deixei apenas o necessário para o HTML funcionar acima.
Coloquei um título para constar, e abri as tags de script onde vai entrar o nosso JavaScript.

Em JavaScript temos um objeto que traz propiedades e métodos do nosso navegador, que é o navigator.
Você pode vê-lo em ação adicionando o seguinte código dentro das tags script:

alert(navigator);

Esse objeto tem propiedades que nos trazem dados como o nome do browser, sua versão, dizer se os cookies estão habilitados e outros.

A propiedade que vamos usar é a userAgent, que traz um conjunto de informações do browser e do dispositivo que está acessando, que é o que precisamos.

alert(navigator.userAgent);

Veja o resultado do código acima ao acessarmos a página. Repare nas informações retornadas:
No Firefox do Linux:

No Safari do Mac:

No Simulador do IPhone:

No própio IPhone:

Reparou que quando estamos lidando com o Iphone, essa informação aparece para a gente na propiedade do objeto ?
Caso estivessemos no IPod Touch, apareceria IPod ao invés de IPhone nas informações.

Agora basta fazer uma verificação para ver se a palavra Iphone ou Ipod está presente nas informações, e, se estiver, redirecionar para sua versão mobile.
Veja o código:

if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
{
alert('IPhone!!!');
//Essa linha redireciona você para o endereço que você colocar
document.location = "http://www.flaviosilveira.com";
}

Qualquer dúvida estamos aí…Abraços!!!

Flávio Silveira » IPhone – Desenvolvimento

ScreenCast – Bate papo sobre desenvolvimento de sites para IPhone

Redirecionando usuários do IPhone para a versão mobile do seu site – JavaScript