En este blog de diseño web, hemos hablado varias veces de lo importante que puede resultar tener la web adaptada para su navegación en terminales móviles, y en particular en iPhone.
Lo ideal sería tener una web adaptada a cualquier tipo de navegador, pero es muy grande la diferencia de usabilidad que existe entre el usuario que accede a nuestro contenido a través de su pantalla de ordenador y el que lo hace a través de un terminal móvil. El tamaño de pantalla, la falta de ratón, incluso el tiempo de dedicación, mucho menor que el que pueda tener un usuario desde casa, son algunos de los factores que nos obligan a tener nuestra web adaptada a estos terminales móviles.
A continuación vamos a ver cómo detectar si el usuario accede a nuestra web con un iPhone, iPod Touch o un iPad.
DETECTAR NAVEGACIÓN CON IPHONE, IPOD O IPAD
Una vez tomada la decisión de que necesitamos una adaptación de nuestros contenidos para iPhone, lo que tenemos que hacer es colocar un código en la cabecera de nuestras páginas, de este modo, cada vez que un usuario acceda a través de su iPhone a nuestra página, será redirigido a la adaptación que hemos diseñado para él.
El código es el siguiente:
<script type=»text/javascript»> if ((navigator.userAgent.indexOf(‘iPhone’) != -1) | (navigator.userAgent.indexOf(‘iPod’) != -1) )
| (navigator.userAgent.indexOf(‘iPad’) != -1) )
{
/* iPhone user */
window.location.href=»iphone/»;
}
</script>
Lo único que debéis cambiar es el window.location y sustituir «iphone/» por la url en la que tengáis colocada vuestra adaptación web para iPhone.
Más información sobre diseño web para iPhone
Fantástico.
Hola, y sabéis donde puedo encontrar plantillas web para iPhone y iPad?
Totalmente de acuerdo contigo, además fíjate que Apple inventa y los demás luchan por ocupar el segundo puesto 😉
Yo creo que el iPhone ha marcado una nueva generación en la tecnologia y en la telefonia
Muy bueno el código, me sera muy útil en algo que estoy haciendo.
no estaria de mas echarle un vistazo, pero ya cuesta bastante revisar los nevagadores habituales. Mas trabajo para cuando nos aburramos 😀
Aqui un video sobre diseño web
http://www.youtube.com/watch?v=-rNV0Ji7u-g
excelente el tiempo cada vez le da mas importancia a los que siempre creyeron en la era de la conectividad, esto todo los días se pone mejor
Hay que adaptarse a todos los dispositivos, es justo lo que andaba buscando.
Me gustaria saber como varía en el tiempo el porcentaje de los usuarios que migran de pc de escritorio a laptop y posteriormente a moviles, porque de esa proporcion se sabe lo importante que es este post.
Gracias.
Suerte!
Joaquin
muy interesante el tema, en estos dias es muy importante estar en todos lados, y no esta de mas simplemente mostrarnos en las pc si no en dispositivos portatiles como los Iphone….
saludos
El mundo cada ves es mas pequeño y el internet enorme la publicidad en el ipad será de gran utilidad para todos , no solo para el que maneje el articulo si no los que vendemos , también.
Sinceramente creo que es de vital importancia adaptar las webs a iphone, incluso apostar por desarrollar una app para iphone, tenemos que tener mucho cuidado con el uso de flash, ya que el iphone actualmente no lo permite, optaría por utilizar otro script para remplazar flash por imagen o directamente ocultarlo. Un saludo
Justo lo que andaba buscando, el incremento de usuarios que navegan desde teléfonos cada dia aumenta, y es importante brindar una via de comunicación que sea fácil de cargar en los teléfonos.
Alguien sabe como detectar si es un teléfono? no solo iphone sino un teléfono en general
Gracias
No funciona tu codigooo!!!!
Es muy util esta informacion que comparten espero publiquen mucha mas y muy pronto gracias
realmente es importante mantenernos actualizados en todos estos temas y que bueno es poderlos compartir para estar a la vanguardia de la tecnologia pues es en lo que trabajamos.
interesantisimo!, estabamos buscando algo asi para un cliente, se agradece!
Muy buen post, muchas gracias. Como lectura complementaria recomiendo la nueva API de jquery para dispositivos móviles JQUERY MOBILE:
http://jquerymobile.com/
Un saludo!
De verdad que está muy interesante este nuevo diseño.
Excelente, muy útil, en mi estudio estamos empezando a testear nuestros últimos desarrollos para las nuevas tecnologías como ipad y iphone
Sin duda un tema muy interesante. Algo a tener en cuenta por los diseñadores que quieran estar al dia. Tanto para diseñadores web como diseñadores gráficos.
Llevo intentadolo con plantillas de wordpres….. ni se sabe de tiempo, vamos a probar a ver si funciona por que artito me tienen. Entre que tiene que ser compatible con android, iphone, symbian, navegadores, pfffffffff.
Me guardo este snippet de código que me viene muy bien, muchas gracias por el post y compartir el código.
La mayoría de web que diseño se ven perfectas en iPhone, iPod, iPad por que suelo respetar los estándares dentro de lo posible, pero detectar y diseñar a medida y específicamente para cada aparato suena muy bien.
Este es un aporte muy interesante, y un tema a tomar en cuenta por todos los Webmasters, gracias.
te han pirateado el post…
http://tecnogeek.net/2010/08/diseno-web-para-iphone-ipod-ipad-detectar-navegador/#more-48
Saludos,
Roberto
Un tema tan interesante como actual, no sólo para los diseñadores de estas páginas sino incluso para las personas gomosas que constantemente están en el mundo web. Porque son muchos los usuarios que no sólo están en una PC ni en un computador portátil, sino que usan los celulares, los ipods, en fin, para poder estar conectadas a la Internet, y esto me parece bastante útil y también revolucionario.