Prepara tu sitio para iPhone

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.

JavaScript:

  1. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  2.     if (document.cookie.indexOf(«iphone_redirect=false») == –1) {
  3.         window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
  4.     }
  5. }

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.

PHP:

  1. if(strstr($_SERVER[‘HTTP_USER_AGENT’],‘iPhone’) || strstr($_SERVER[‘HTTP_USER_AGENT’],‘iPod’)) {
  2.     header(‘Location: http://yoursite.com/iphone’);
  3.     exit();
  4. }

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):

PHP:

  1. <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:

PHP:

  1. <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.

CSS:

  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  2.     -webkit-text-size-adjust:none;
  3. }

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)

CSS:

  1. window.onload = function initialLoad() {
  2.     updateOrientation();
  3. }
  4.  
  5. function updateOrientation(){
  6.     var contentType = «show_»;
  7.     switch(window.orientation){
  8.         case 0:
  9.     contentType += «normal»;
  10.     break;
  11.  
  12.     case –90:
  13.     contentType += «right»;
  14.     break;
  15.  
  16.     case 90:
  17.     contentType += «left»;
  18.     break;
  19.  
  20.     case 180:
  21.     contentType += «flipped»;
  22.     break;
  23.     }
  24.     document.getElementById(«page_wrapper»).setAttribute(«class», contentType);
  25. }

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:

CSS:

  1. @media screen and (max-device-width: 480px){
  2.     /* Todo el CSS para iPhone va aqui */
  3. }

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.

CSS:

  1. @media screen and (max-device-width: 480px){
  2.     img{
  3.         max-width:100%;
  4.         height:auto;
  5.     }
  6. }

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:

JavaScript:

  1. window.addEventListener(‘load’, function() {
  2.     setTimeout(scrollTo, 0, 0, 1);
  3. }, 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:

HTML:

  1. <a href=«tel:12345678900»>Llámame</a>
HTML:

  1. <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:

JavaScript:

  1. var myLinks = document.getElementsByTagName(‘a’);
  2. for(var i = 0; i <myLinks.length; i++){
  3.    myLinks[i].addEventListener(‘touchstart’, function(){this.className = «hover»;}, false);
  4.    myLinks[i].addEventListener(‘touchend’, function(){this.className = «»;}, false);
  5. }

Tras añadir el código anterior puedes aplicar algo de estilo CSS:

CSS:

  1. a:hover, a.hover {
  2.     /* el efecto hover que sea*/
  3. }

Fuente: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía para Administrar WordPress

¿Te gustó este post? ¡Compártelo!

Bitacoras.com
TwitThis
Facebook
Meneame
Google Bookmarks
del.icio.us
Live
Technorati
Ping.fm
Wikio
Turn this article into a PDF!
E-mail this story to a friend!
Print this article!

Via http://feedproxy.google.com/~r/AyudaWordpress/~3/BjzCMyD6pd8/

Related Posts with Thumbnails
Digg Delicious

Tagged with: • •  

Comments are closed.

Premium WordPress Themes