Impresionante la recopilación realizada por Cats who code sobre códigos con los que adaptar tu sitio a la visualización en iPhone. Como creo que es de un gran interés para desarrolladores y usuarios avanzados y que, por supuesto, son aplicables a WordPress, aquí los tienes con alguna adaptación a nuestro entorno:
Detectar iPhones e iPods usando Javascript
Al desarrollar para iPhone o iPod Touch lo primero que hay que hacer es detectarlo para que, luego, le apliquemos códigos o estilos. El siguiente código d etecta iPhones o iPods usando Javascript, y los redirige a una página específica para iPhone.
-
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
-
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
-
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
-
}
-
}
Fuente: http://davidwalsh.name/detect-iphone
Detectar iPhones e iPods usando PHP
Aunque el código anterior funciona de maravilla puede que Javascript esté desactivado en el iPhone. Si fuera el caso puedes usar PHP para detectar iPhones o iPods Touch.
Fuente: http://davidwalsh.name/detect-iphone
Definir el ancho de iPhone como viewport
En muchas ocasiones visitas una web con tu iPhone y la ves en miniatura. La razón es que el desarrollador olvidó definir el viewport (o no sabe que existe). La declaración de width=device-width te permite definir el ancho del documento al ancho de la pantalla del iPhone. Las otras dos declaraciones son muy útiles si estás desarrollando un sitio "solo para iPhone". En caso contrario puedes borrar estas dos declaraciones.
Definir un viewport es fácil: Simplemente inserta el siguiente meta en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa):
-
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Insertar un icono específico para iPhone
Cuando un usuario añade tu web a su página de inicio el iPhone usa una captura de pantalla de tu sitio como icono. Pero tu puedes ofrecer un icono específico, lo que es mucho mejor.
Definir un icono personalizado para iPhone es fácil: Simplemente pega el siguiente código en la sección "head" de tu sitio (fichero "index.php" de la plantilla activa). La imagen debe ser de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:
-
<rel="apple-touch-icon" href="images/template/engage.png"/>
Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Evitar que Safari ajuste el tamaño de texto al rotar
Cuando rotas el iPhone, Safarie ajusta el tamaño de texto. Si por algún motivo prefieres evitar este efecto solo tienes que usar el siguiente CSS, que tendrás que añadir a tu hoja de estilos (fichero "style.css" de tu plantilla activa).
La declaración -webkit-text-size-adjust es una propiedad CSS exclusiva de webkit que permite controlar el ajuste de texto.
-
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-
-webkit-text-size-adjust:none;
-
}
Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Detectar la orientación del iPhone
Como el iPhone permite ver la página en vertical o apaisdo puede que necesites detectar en qué modo el documento será visible.
Esta función Javascript detecta la orientación actual del iPhone y aplica una clase CSS específica para cada modo de orientación. Fíjate que en este ejemplo la clase CSS se añade al ID del page_wrapper. Remplázalo por el nombre de ID deseado (línea 24)
-
window.onload = function initialLoad() {
-
updateOrientation();
-
}
-
-
function updateOrientation(){
-
var contentType = "show_";
-
switch(window.orientation){
-
case 0:
-
contentType += "normal";
-
break;
-
-
case -90:
-
contentType += "right";
-
break;
-
-
case 90:
-
contentType += "left";
-
break;
-
-
case 180:
-
contentType += "flipped";
-
break;
-
}
-
document.getElementById("page_wrapper").setAttribute("class", contentType);
-
}
Fuente: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Aplicar estilos CSS solo para iPhones/iPods
Si buscas un modo limpio de aplicar clases CSS solo para iPhone puedes usar el siguiente código:
-
@media screen and (max-device-width: 480px){
-
/* Todo el CSS para iPhone va aqui */
-
}
Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
Redimensionar imágenes automáticamente para iPhones
En las webs actuales la mayoría de las imágenes suelen ser de un ancho superior a 480px. Al ser de este tamaño la pantalla del iPhone puede que las imágenes más grandes se vean incorrectamente, incluso destrozando el diseño de tu sitio.
Pues bien, usando el siguiente código CSS podrás redimensionar automáticamente las imágenes que sean de un ancho mayor de 480px, el ancho estándar del iPhone, con lo que nunca se verán más anchas y no desconfigurarán tu sitio al visualizarse en un iPhone.
-
@media screen and (max-device-width: 480px){
-
img{
-
max-width:100%;
-
height:auto;
-
}
-
}
Fuente: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
Ocultar la barra de tareas por defecto
La barra de tareas es útil pero a veces ocupa demasiado sitio, que vendría estupendo para mostrar mejor tu web. Si quieres que Safari oculte la barra por defecto cuando un usuario de iPhone visite tu sitio solo tienes que añadir el siguiente Javascript:
-
window.addEventListener('load', function() {
-
setTimeout(scrollTo, 0, 0, 1);
-
}, false);
Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/2
Usar enlaces especiales
Al igual que con los enlaces "mailto", tan útiles para que te envíen emails, si se visualiza tu web con un iPhone puedes añadir otro tipo de enlaces que ejecutarán acciones, gracias a la función de teléfono de este miniordenador de bolsillo.
Si quieres ofrecer enlaces para que te llamen o te envíen un SMS puedes usar códigos html de este tipo:
-
<a href="tel:12345678900">Llámame</a>
-
<a href="sms:12345678900">Mándame un SMS</a>
Fuente: http://articles.sitepoint.com/article/iphone-development-12-tips/3
Simular la clase pseudo :hover
Como no se usa ratón en el iPhone no se utiliza la pseudo clase :hover. Sin embargo, usando Javascript puedes simular la clase pseudo :hover cuando el usuario apoye el dedo sobre un enlace:
-
var myLinks = document.getElementsByTagName('a');
-
for(var i = 0; i <myLinks.length; i++){
-
myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
-
myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
-
}
Tras añadir el código anterior puedes aplicar algo de estilo CSS:
-
a:hover, a.hover {
-
/* el efecto hover que sea*/
-
}
Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
También te puede interesar :
Hoy sale a la venta en medio mundo el iPhone 3G y es un día estupendo para hacer una relación de ...
Desde all4wordpress han liberado hace unos días esta estupenda plantilla con aspecto de iPhone y ...
Cuando hace un par de días anunciábamos la disponibilidad de WordPress para iPhone en la iTunes ...
gracias!!
13 comentarios en “Prepara tu sitio para iPhone”
y digo yo: ¿no tendria que ser iphone quien se adaptase? al final vas a tener que hacer tu web para iphone, explorador de windowz, firefox, blackberry y algún otro chisme del futuro... lo gigo des de mi inopia... no se?
Mira, no te falta razón uri. Al final esto es como la guerra de navegadores, que o diseñas para todos o pierdes audiencia y ¿alquien quiere perder audiencia de los lectores que se conectan a tu web desde un iPhone?, precisamente estos, los que te eligen para conectarse desde su móvil. Yo creo que no.
Además, si hay un smartphone desde el que se navega bien es un iPhone, ahí tiene su lógica darle un trato preferente a la hora de que tu página se vea bien ahí (además de en los navegadores normales claro).
Muy buena entrada, seguir asi!!! Cada vez sois mejores redactando!
Saludos!
[...] Diseñar para dispositivos móviles un mundo aparte (y un mundo que se viene), por eso vale la pena recorrer estos post también: Best Practices To Develop Perfect Websites for iPhone and Mobile Devices (Woorkup), Designing for the Mobile Web (sitepoint), Mobile Web Design Tips and Resources (Freelance Review), A Guide to Mobile Web Design Tips and Tricks (Mashable) y Diseño web mobile: no olvidemos los teléfonos celulares (BADD), Prepara tu sitio para iPhone (Ayuda WordPress) [...]
Hola Fernando,
La pregunta es, ¿será mejor tener una web o WordPress que además de poderse leer en un navegador de PC esté preparada para los terminales móviles, o tener una web para cada cosa, o sea, por poner un ejemplo, un WordPress con una plantilla para navegadores de PC y otro WordPress con una plantilla específica para navegadores móviles? Comento esto pues hay dominios específicos para este tema en concreto.
No, si al final nos tendremos que comprar un iPhone
…vaya fregado…
No hace falta Rasuji. Si configuramos bien nuestro WP podremos ofrecer a cada visitante la versión que mejor se adapta al dispositivo desde el que se conecte. Además, hay plugins que ofrecen versiones móviles si no se tienen ganas de tocar código.
Y si, ¡cómprate ya un iPhone!
[...] Prepara tu sitio para iPhone ayudawordpress.com/prepara-tu-sitio-para-iphone/ por chefwww hace 2 segundos [...]
Fabuloso aporte, felicitaciones, sigan asi.
El futuro de los móviles y portátiles es la completa fusión entre ambos.
Está muy bien que nos vayamos preparando para lo que viene.
Brutal post, enhorabuena
Hola precisamente ando en un iPhone y el blog se adapta de lujo, aunque creo que Apple debió dar menos trabajo a los webmasters y crear un Safari que se adaptara bien a cualquier página, ya que alratO también tendremos que adaptar las pagunas a la iPad y cada diapositivo que se lanze, lo cual se me hace excesivo trabajo. Como quiera que sea siempre hay desarrolladores de plugins que facilitan el trabajo de los mas flojos e inexprtos en el desarrollo de scripts
Safari está basado en Webkit (Chrome también), de código libre, y el trabajo de verdad no lo da Safari sino IE y otros. De hecho ahora mismo ni Firefox es fiable (mucho menos para desarrolladores). No es esa la cuestión creo yo.
Pero si que se debería seguir algún estándar para facilitarnos la vida.
Solamente quiero agregar, AGUANTE OPERA, (si tambien en su versión para mobiles). Y lo de Firefox es cierto, se esta quedando atras con los estandares (y encima esta cada vez mas pesado).
Escribe un Comentario