Vocês já ouviram falar sobre o Initializr! ?

Ele é um gerador de código que ajuda você a começar seu projeto em HTML5. Ele é baseado no Boilerplate e foi criado por Jonathan Verrecchia (@verekia) com o objetivo de ampliar o uso do HTML5.

Em contato com o Jonathan, combinei com ele de traduzir a documentação oficial do Initializr do francês para o português, para ajudar a divulgar ainda mais essa tremenda ferramenta e quem sabe com isso ver o uso do HTML5 mais e mais em novos projetos.

Segue a tradução da documentação abaixo.
Você encontra a versão original em francês no seguinte link: http://www.html5-css3.fr/html5/initializr-generateur-template-html5-boilerplate.

Conheça esses projetos e começe já a trabalhar com HTML5!
Grande Abraço!

Initializr – Um gerador baseado nos templates Boilerplate HTML5

Initializr permite a você gerar um template baseado no Boilerplate, montando um rascunho de um HTML5 funcional em segundos.

Você pode customizar seus templates como precisar, para evitar começar um projeto com um código muito pesado. Todo o processo do projeto de design e as opções disponíveis estão detalhadas neste artigo.

Se você está começando agora com HTML5 e quer ter uma geral do que tem por trás dessa tecnologia, eu recomendo que você leia uma introdução ao HTML5 antes de seguir em frente.

Boilerplate HTML5

Boilerplate é uma poderosa e confiável ferramenta de templates criada e mantida por Paul Irish (Google) e Divya Manian.

Boilerplate consiste de um grupo de arquivos HTML, CSS e JavaScript, usados para iniciar com o pé direito em um projeto HTML5.

Ele também inclui ferramentas muito úteis, como o Modernizr, JQuery, e um reset CSS.

Também inclui outras ferramentas não tão necessárias como um Profiling JQuery, Código Google Analytics, Funções Javascript para loggin,

um arquivo de configuração para Flash cross domain, Configuração IIS server e Nginx, Páginas de teste, scripts ANT… Bem, quando você for iniciar seu projeto com Boilerplate, você vai precisar de algum tempo para selecionar as partes que você quer e não quer no seu projeto.

Initializr – Um Boilerplate leve e personalizável

A proposta com o initializr é ter o Boilerplate sem essas ferramentas raramente usadas com HTML5 para poder começar um projeto rápido e tão confiável quanto o Boilerplate. O código gerado pelo Initializr é totalmente baseado no Boilerplate, que tem uma força inegável. Initializr oferece diferentes opções para customizar seu template. Aqui estão os detalhes:

HTML / CSS

Por padrão, o Boilerplate entrega a você uma página em branco. Initializr permite a você gerear um conteúdo inicial como base, para te ajudar a começar rapidamente. A página exemplo trás o tema do site da Initializr, com uma página estruturada com um clássico cabeçalho, um rodapé, um menu para navegação, um bloco lateral, e uma estrutura similar a um blog com alguns posts.

Javascript

O Boilerplate inclui a excelente biblioteca de Javascript jQuery. E no Initializr nós também encontramos essa biblioteca, disponível em forma minimizada ou não. Ou também o direito de não incluir ela, ou não incluir nenhum Javascript. Vamos atentar para um ponto: Estamos falando do seu Javascript. Nada no Modernizr ou no HTML5shiv vai garantir uma compatibilidade 100% com todos os navegadores. Então não esqueça de testar isso posteriormente.

Compatibilidade

Html5Shiv

Navegadores modernos suportam totalmente as novas tags do HTML5. Mas versões do Internet Explorer 8, e anteriores a ele, precisam de uma ajudinha para exibir essas novas tags, que por padrão não são reconhecidas. Esta pequena ajuda é chamada HTML5shiv. Ele é um pequeno arquivo javascript que vai permitir ao Internet Explorer reconhecer essas tags graças a uma função createElement():

document.createElement("header");

Todos os novos itens são automaticamente criados antes do conteúdo da página ser completamente exibido. Isso torna obrigatório colocar o HTML5shiv no Head da sua página ao invés de colocar no rodapé, que é o recomendado para todos os outros javascripts.

Modernizr

O Modernizr, é um sensor de suporte das funcionalidades HTML5 e CSS3, que inclui o HTML5shiv. Ele é um arquivo javascript que irá criar um objeto contendo propriedades modernizr para cada funcionalidade, indicando se ela funciona ou não no seu navegador.

if (Modernizr.geolocation){
  // A geolocalização é suportada
}
else {
  // A geolocalização não é suportada
}

Modernizr também adiciona classes CSS para o HTML, para que você possa facilmente indicar um estilo alternativo se certas propiedades CSS3 não forem suportadas.

.multiplebgs header {
  /* Backgrounds múltiplos são suportados */
}
.no-multiplebgs header {
  /* Backgrounds múltiplos não são suportados */
}

Modernizr é bem abrangente na detecção de suporte a HTML5 e CSS3, mas é importante entender que ele não adiciona nenhuma característica faltante (como faz o HTML5shiv em relação as tags). Ele é a ferramenta selecionada por padrão para compatibilidade do Initializr.

A configuração do servidor

O Initializr traz um arquivo de configuração para o servidor, também gerado pelo Boilerplate. Portanto é possível selecionar um arquivo .htaccess para servidores Apache, web.config para Microsoft IIS, ou nginx.conf para Servidores NGinx. É importante notar que por padrão, esses arquivos vão re-escrever a URL da página, removendo o “www” para montar URLs curtas.

Se você preferir manter o seu “www”, você pode remover as seguintes linhas no caso do .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

É apenas um clique no botão!

Após fazer suas escolhas com relação a configuração, um simples clique no botão Download! fará o download de seus arquivos.

Se você manter as configurações padrão, você terá uma estrutura de projeto completa e pronta para uso, como a mostrada abaixo:

Uma rápida olhada no arquivo index.html e você pode ver que o código traz muita coisa do Boilerplate:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">

  <title>Your website name</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <link rel="stylesheet" href="css/style.css?v=2">

  <script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>

<!-- Código da página exemplo do Initializr -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
  <script src="js/script.js"></script>
  <!--[if lt IE 7 ]>
  <script src="js/libs/dd_belatedpng.js"></script>
  <script> DD_belatedPNG.fix('img, .png_bg');</script>
  <![endif]-->
</body>
</html>

O arquivo style.css traz em torno de 200 linhas, os primeiros 3 quartos disso um CSS Reset. Se você estiver procurando onde colocar os seus estilos no meio desse código CSS, role o arquivo para baixo até você encontrar o seguinte comentário:

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

Por último, o arquivo script.js contém um simples teste para ver se a biblioteca JQuery está sendo carregada. Nesse arquivo você pode escrever seu código JavaScript.

TODO.txt

Um arquivo todo.txt também é incluído para te mostrar que tarefas você tem de fazer para começar seu projeto e como usar alguns truques de HTML5 presentes no Boilerplate. Por exemplo, você e lembrado para não esquecer de substituir a linguagem se sua página não estiver em inglês, ou para criar uma  página 404.html no seu arquivo se configuração do servidor para fazer um redirecionamento em erros 404.

Indo mais longe

A versão do Boilerplate que vem no Initializr é mais leve que a original. Se você precisa de um entendimento mais profundo do template ou de informações mais detalhadas de todos os arquivos, você pode ver a explicação oficial do Boilerplate em um vídeo feito por Paul Irish em inglês:

Eu também lhe convido a visitar o site oficial do Boilerplate, onde você vai encontrar algumas dicas para melhorar seu site , dicas de compatibilidade e performance.

Hoje trago um artigo pesado e extenso, mas acredito que vá ajudar o pessoal que precisar em várias frentes. Vou Tratar aqui de JQuery, JQuery Validation, a diferença entre síncrono e assíncrono, como fazer ajax síncrono usando JQuery e também soluções para problemas em um dia de trabalho no mundo do desenvolvimento.

Bom, que o JQuery é um dos frameworks mais usados para javascript e que facilita muito a sua vida você já deve saber. E que o plugin para JQuery, JQuery Validation, é uma excelente maneira de validar seus formulários do lado cliente, você também deveria saber.

Veja um exemplo:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">

function init()
{
	$("#form").validate({
		rules:
		{
			nome:{required: true},
			senha:{required: true, minlength: 5}
                }
	});
}

$(document).ready(init);

</script>

</head>
<body>

<form id="form">

	<p>
		<label for="nome">Nome</label>
		<input type="text" name="nome" id="nome" />
	</p>

	<p>
		<label for="senha">Senha</label>
		<input type="password" name="senha" id="senha" />
	</p>

</form>

</body>

Com essas poucas linhas você já tem um formulário com campo obrigatório para nome e campo obrigatório para senha exigindo um mínimo 5 caractéres.Ao não seguir qualquer uma das regras, o plugin insere uma Label com uma mensagem de erro.

Você tem opções para personalizar essa mensagem, além de outras várias opções oferecidas pelo plugin.
Você pode dar uma conferida nessas opções pela documentação e exemplos no site oficial do plugin aqui.

Primeiro Problema

O plugin JQuery Validation é gringo; Internacional se você preferir assim dizer.
Na sua condição de estrangeiro, ele não conhece o que é CPF.
Ele não tem um método para entrada e validação de CPF, o que é muito comum nos formulários de cadastro aqui no Brasil.

Por sorte, o JQuery validation tem uma maneira muito fácil de você inserir novos métodos a ele.
Com uma rápida busca na internet chegamos em vários blogs que nos trazem a solução, como é o caso do TidBits escrito pelo Danilo Augusto, que falou sobre isso em seu post Coleção de métodos para o plugin validate do Jquery.

Primeiro vamos adicionar um campo para o CPF.
Vamos também separar o arquivo .js para ficar mais organizado a coisa toda, separando o que é Html do que é javascript.

Nosso Html vai ficar assim:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<!-- default.js será o arquivo separado do javaScript -->
<script src="default.js" type="text/javascript"></script>

<form id="form">

	<p>
		<label for="nome">Nome</label>
		<input type="text" name="nome" id="nome" />
	</p>

	<p>
		<label for="senha">Senha</label>
		<input type="password" name="senha" id="senha" />
	</p>

	<p>
		<label for="cpf">CPF</label>
		<input type="text" name="cpf" id="cpf" />
	</p>

</form>

Ok, adicionamos o Input para o CPF em nosso HTML.
Agora vamos adicionar o método para o Jquery Validation no nosso arquivo default.js, seguindo o exemplo que pegamos no Blog do Danilo.

function init()
{
	$("#form").validate({
		rules:
		{
			nome:{required: true},
			senha:{required: true, minlength: 5}
	       }
	});
}

jQuery.validator.addMethod("verificaCPF", function(value, element) {
value = value.replace('.','');
value = value.replace('.','');
cpf = value.replace('-','');
while(cpf.length < 11) cpf = "0"+ cpf;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = 11;
for (i=0; i<11; i++){
	a[i] = cpf.charAt(i);
	if (i < 9) b += (a[i] * --c);
}
if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
b = 0;
c = 11;
for (y=0; y<10; y++) b += (a[y] * c--);
if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
return true;
}, "Informe um CPF válido.");

$(document).ready(init);

Agora falta chamar o método para o seu campo.
Para isso adicione a seguinte validação no seu código javascript:

$("#form").validate({
	rules:
	{
		nome:{required: true},
		senha:{required: true, minlength: 5},
		cpf:{required: true, verificaCPF: true}
       }
});

Repare:
Chamamos o método verificaCPF, e passamos o valor que queremos, no caso, true para que seja um CPF válido.
Faça seus testes.

Segundo Problema

Legal! Temos o formulário validando, inclusive com um campo de CPF, sem muito trabalho pois estamos contando com o JQuery Validation. Mas então nos surgi outro problema. No seu banco de dados você tem um campo onde CPF tem de ser único.

E para ajudar seu usuário, além de mostrar se o CPF é válido ou não, você quer mostrar se é um CPF cadastrado ou não.
E então, como fazemos ?

Para pesquisas no banco de dados sem refresh na página a resposta é fácil não? Ajax!
Mas como juntar isso no Jquery validation?

Você conhecendo a facilidade do Ajax no Jquery, pode sair logo de cara transformando o seu método de validação de CPF para o seguinte:

jQuery.validator.addMethod("verificaCPF", function(value, element) {

value = value.replace('.','');
value = value.replace('.','');
cpf = value.replace('-','');

while(cpf.length < 11) cpf = "0"+ cpf;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = 11;

for (i=0; i<11; i++)
{
	a[i] = cpf.charAt(i);
	if (i < 9) b += (a[i] * --c);
}

if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }

b = 0;
c = 11;

for (y=0; y<10; y++) b += (a[y] * c--);

if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }

if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;

var verifica = false;
$.get('verificaCpf.php', {cpf : cpf}, function(data){
	if(data == 0) verifica = true;
});

if(!verifica) return false;

return true;
}, "CPF inválido ou já cadastrado!");

Vamos ver o que foi feito aqui. Acompanhe da linha 30 em diante.
Adicionamos uma variável dentro do nosso método chamada “verifica”, e definimos o valor de false para ela.

Em seguida fazemos uma chamada para um arquivo PHP através de Ajax.
Esse arquivo PHP deve fazer uma consulta no seu banco de dados pelo CPF digitado.
Por ser algo simples de fazer e para não estender ainda mais esse post ,não vou tratar desse código PHP aqui.

Para entendimento, basta saber que nosso código PHP retorna o número de linhas onde encontrou aquele CPF.
Esse valor vai vir para o javascript pela variável data.
Repare que é feito uma comparação na resposta do Ajax, que, caso o número de linhas encontradas no banco seja 0, mudamos a variável para true. E fim do Ajax.

Em seguida, verificamos a variável “verifica”.
Se ela for diferente de verdadeira, o método verificaCPF retorna false e será acusado erro em seu formulário.

Ufa! Certo. Vamos testar?
Problemas acontecem não? Está sempre retornando erro.
O que está acontecendo?

Terceiro Problema

Vamos entender:
Seu código PHP é chamado. Ele vai lá no banco de dados, faz a consulta e está retonando o resultado.
Mas enquanto isso, o código javascript já continuou sua execução, e quando a resposta do ajax chegar, a execução do método terá acabado. Com isso ele vai retornar o valor que tinha na variável, false.

Isso acontece, pois o ajax padrão do JQuery, como foi usado acima, é assíncrono.
Você está se perguntando o que é isso? Vou tentar ser claro.
É o fato de não importar quando a resposta do ajax vai vir. Não precisar de sincronismo, compreende?

Porém veja que esse é exatamente o nosso problema aqui. Precisamos desse sincronismo.
Precisamos da resposta do nosso Ajax antes de continuar a execução do código.

Como fazer?
Vamos fazer o Ajax Síncrono.
A execução do javascript só pode continuar depois da resposta do ajax.

Procurando pela internet, achei alguns desenvolvedores falando que não é possível fazer ajax síncrono com JQuery. Isso não é verdade. É uma das primeiras coisas que encontramos na documentação.

Veja como fazer:

jQuery.ajax({
	    url: 'verifica_cpf.php?cpf='+cpf,
	    async: false,
	    success: function(data) {
	       if(data == 0) verifica = true;
	   }});

Passando o valor false para a propiedade async do ajax, temos nosso ajax síncrono.
Repare que o código segue o padrão JQuery e é fácil de entender.
Ao invés de passar as variáveis em uma propiedade, as adicionei no padrão GET diretamente na url.
Uma opção a isso seria usar a propiedade data.

Substituindo esse trecho de código no lugar do nosso ajax assíncrono anterior, temos nosso problema corrigido.

Uma observação importante, é você reparar que a execução dá página dá uma travada enquanto espera a resposta do javascript. Fique atento para não deixar de dar uma resposta em situações de erro ou sucesso. Caso contrário sua página vai ficar travada nesse ponto.

Quarto problema

Não não…brincadeira… hahaha

Legal! Acredito que chegamos finalmente ao final.
Dúvidas? Dicas para melhorar todo esse processo? Não deixem de comentar pessoal…
Grande Abraço!

Muita gente me manda emails ou mensagens no twitter achando que eu escrevi o Plugin JQuery Price para JQuery, que ajuda você a formatar seus campos de texto com valores monetários, valores de preço. Se você ler bem certinho na página oficial do Plugin (http://meiaduzia.com.br/cuducos2/priceformat), e também no código ao baixar ele, verá que eu apenas colaborei com uma nova função do plugin, uma necessidade minha no início do ano de 2009.

O Autor do Plugin é o Eduardo Cuducos, Um tremendo Designer e Desenvolvedor Web do estado de Santa Catarina que conheci por meio desse Plugin. Aqui você pode conhecer mais dele ou seguir seu twitter (http://twitter.com/cuducos) para pegar suas idéias, sejam de designer, política ou pensamentos de vida, que também valem a pena.

Para usar o Plugin é fácil.
Na página oficial consta alguns exemplos bem explicativos.
Mas se você ainda tem dúvidas vou reproduzí-los aqui.

Primeiro crie seu Html com o campo que quer formatar.
Não preciso dizer para você carregar a JQuery e o Plugin JQuery Price preciso ?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jprice.js"></script>
<script type="text/javascript">

	function init()
	{

	}

	$(document).ready(init);

</script>

</head>
<body>

	<h1>Exemplo</h1>

	<label for="price">Valor:</label>
	<input type="text" id="price" />

</body>

Ok.
Reparem que eu já acrescentei um código JavaScript para chamar a funcão init assim que a página terminar de carregar. Isso evita que o JavaScript tente fazer algo com algum campo do Html que não esteja criado ainda. Uma outra solução para isso poderia ser colocar esse código ao final do Html.

Para o uso básico do Plugin, basta fazer a chamada do campo (no meu caso chamei pelo id) e acrescentar o método priceFormat veja:

function init()
{
	$('#price').priceFormat();
}

$(document).ready(init);

Com isso seu input já formata automaticamente os números inseridos nele para as configurações padrões do Jquery Price. Ah sim, ele impede que você digite letras e alfanuméricos nesse campo também.

Ficou legal não?
Mas você não quer esse valor em doláres, você está lidando com o seu Brasil Brasileiro.
Vamos personalizar isso então.

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.'
	});
}

Passando parâmetros para funcão em formato de array, conseguimos personalizar nosso input conhecendo algumas propiedades do plugin.

Com a propiedade prefix, alteramos o que vem antes dos números.
Repare que foi dado um espaço após o cifrão para ficar melhor visivelmente dentro do input.
Em seguida foi modificado o separador de centavos para uma vírgula e o separador de milhar para um ponto.

Muito fácil não ??

E chegamos ao momento mais esperado (Ou não).
Qual foi a minha colaboração com o Plugin ? Qual foi meu problema ?

Eu precisava limitar o valor que o usuário digitava.
Se você testar os exemplos que fizemos até aqui, verá que você pode inserir números até cansar.

Na época fiz um código meio xulo para resolver o problema, porque estava começando com JQuery e não tinha muita desenvoltura para alterar seus plugins. Mandei o código para o Cuducos que fez as devidas adaptações, não estragando a facilidade de uso do plugin.
Vamos a um exemplo:

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.',
		limit: 6
	});
}

Passando mais uma propiedade para o método, chamada limit, agora você só pode inserir 6 numerais dentro do seu input.

Um outro limitador que temos é o de casas para os centavos.

function init()
{
	$('#price').priceFormat({
		prefix: 'R$ ',
		centsSeparator: ',',
		thousandsSeparator: '.',
		limit: 6,
		centsLimit: 4
	});
}

Difícil ? Acredito que não certo ?
Experimente outros valores e confira os resultados.

Por hoje é isso pessoal.
Demos uma passada por todo o uso do plugin JQuery Price além de conhecer a história de como colaborei para o plugin. Espero ter tirado as dúvidas do pessoal que me manda emails e afins.

Agradecimentos imensos para o Eduardo Cuducos que adicionou meu nome dentro do projeto do plugin pela minha pequena colaboração, tornando o meu nome mais visível para a comunidade de desenvolvimento.

Qualquer coisa é só entrar em contato.
Abraços!

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.

<html>
<head>
<title>::: Teste IPhone :::</title>
<script type='text/javascript'>
</script>
</head>
<body>
</body>
</html>

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!!!