Diseñando nuestra web para el iPhone – Parte 2
Nota: Esta es la segunda parte del tutorial Diseñando nuestra web para el iPhone. Si no has leído las partes anteriores, es muy recomendable que lo hagas, comenzando por la primera. También os aviso de que si bien voy a explicar cómo diseñar para el iPhone, para comprender estos tutoriales son necesarios unos mínimos conocimientos de HTML y CSS, siendo recomendable tener alguna idea de Javascript (tampoco es necesario ser experto, ya que yo mismo soy un novato).
En esta segunda parte nos centraremos en las medidas que debe tener nuestro diseño, detectar rotaciones (giros a la derecha o a la izquierda), definir un icono para nuestra web, personalizar el zoom máximo y daré unas pinceladas sobre la cabecera. Para ello revisaremos algunas páginas diseñadas específicamente para el iPhone, como Yahoo y Google (versión iPhone), deviantART, Coosh o Please fix the iPhone.
Medidas
Vayamos por partes. Antes de comenzar a hacer nada debemos tener claro el tamaño que tendrá el diseño. En la imagen de la izquierda podéis ver las medidas de los diferentes contenidos que muestra el iPhone: la barra de estado (está siempre visible, tiene 20px de alto y ocupa siempre todo el espacio horizontal de la pantalla), el campo de la URL (se oculta al hacer scroll hacia debajo, ocupa todo lo posible en el eje horizontal y 60px en el vertical), la barra de botones (al igual que la barra de estado, no se puede ocultar, ocupa 44px en la vertical y todo lo posible en la horizontal), lo cual deja un espacio de 320px x 356px de contenido propio de la página (320 en el eje horizontal y 356 en el vertical).
Si colocamos el iPhone en posición horizontal (apaisado), algunas medidas variarán (ver imagen de la derecha): la barra de estado y el campo de la URL permanecen como antes, mientras que la barra de botones para a ocupar sólo 32px en el eje vertical, con lo cual el contenido visible ocupa un espacio de 480px x 208px.
Cuando se diseña una web suele ser necesario tener en cuenta las diversas resoluciones de pantalla en las que se visualizará la página, sin embargo una de las cosas buenas para los diseñadores (y en algunos casos malas para los usuarios) es que la resolución es fija, así que basta con diseñar específicamente para estas medidas: nuestro diseño sólo se verá en un dispositivo un determinado navegador y una resolución de pantalla de 320px x 480px.
Detectando los giros, asignando icono y personalizando zoom
Al poderse girar el iPhone hay dos posibilidades: que se esté visualizando la página con el dispositivo en vertical o que se visualice con el iPhone en horizontal, lo cual hace que sea necesario detectar estos giros para poder mostrar u ocultar cierto contenido en cada caso.
Por ejemplo, si queremos que en la versión horizontal se vea algo más de contenido en los laterales (por aprovechar el espacio), será necesario detectar el cambio de posición y ajustar el diseño en consecuencia. Otro caso en el que necesitemos saber si se ha producido un giro es en el caso de los formularios: un campo de texto se puede alargar cuando el iPhone está en posición horizontal y se debe acortar cuando está en posición vertical, pura lógica.
Parar ello recurriremos a Javascript, con el cual podemos detectar fácilmente estos giros.
[javascript]
function updateOrientation()
{
switch(window.orientation)
{
case 0:
tamanio_cuadro_texto = "200px";
tamanio_contenedor_a = "150px";
break;
case -90:
tamanio_cuadro_texto = "360px";
tamanio_contenedor_a = "300px";
break;
case 90:
tamanio_cuadro_texto = "360px";
tamanio_contenedor_a = "300px";
break;
case 180:
tamanio_cuadro_texto = "200px";
tamanio_contenedor_a = "150px";
break;
default:
tamanio_cuadro_texto = "200px";
tamanio_contenedor_a = "150px";
break;
}
document.getElementById("cuadro_texto_1").style.width = tamanio_cuadro_texto;
document.getElementById("a").style.width = tamanio_contenedor_a;
}
[/javascript]
Es un código bastante sencillo, que se puede ampliar mucho más (el de arriba es sólo un pequeño ejemplo). Para hacer que funcione del todo tendremos que modificar la etiqueta body de nuestro HTML y añadirle los atributos onorientationchange y onLoad, que nos asegurarán que cada vez que se cargue la página o se cambie la orientación, se cambiará el tamaño por el adecuado (definido antes en el código Javascript), quedando así nuestra etiqueta body:
[html]
<body onorientationchange="updateOrientation();" onLoad="updateOrientation();">
[/html]
Otro punto interesante para hacer única nuestra página web es asignarle un icono. En principio el iPhone no muestra ningún favicon en el navegador, pero al añadir un enlace a una web en la página de inicio, podemos indicarle al navegador que tome como icono una imagen específica, en lugar de una previsualización de la página web (que es lo que toma por defecto). Para esto usaremos la etiqueta link con el atributo rel establecido en apple-touch-icon:
[html]
<link rel="apple-touch-icon" href="http://10.0.1.3:8888/sumolari/wp-content/themes/sumolari/ipo/img/favicon.png"/>
[/html]
Este icono debe ser una imagen con un tamaño cuadrado. No es necesario que le añadamos bordes curvos ni el toque luminoso, ya que los hará el iPhone directamente.
Por último, el iPhone permite hacer zoom en las páginas, sin embargo, como estamos diseñando específicamente para él, nos interesa mantenerlo bloqueado y ser nosotros quienes definamos el tamaño de las textos y los elementos. Con esto también logramos darle a la web un aspecto más similar al de una aplicación nativa. Para bloquear el zoom usaremos el meta-tag viewport, como en el siguiente ejemplo:
[html]
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
[/html]
Si os fijáis, este meta-tag define varias cosas, como la anchura máxima (width – recordad que una cosa es hacer scroll vertical, cosa que ocurre muy a menudo en equipos tanto sobremesa como móviles, y otra hacer scroll vertical: queda mucho más “profesional” e integrado en la plataforma el que la web tenga scroll vertical pero carezca de horizontal, probadlo vosotros mismos y veréis como notáis el cambio), la escala inicial (initial-scale), la escala máxima (maximum-scale) y la posibilidad de escalar por parte del usuario (user-scalable).
Cabeceras
Ya llegamos a lo que es el diseño en sí. Este apartado lo completaré en la próxima parte, ya que hay bastantes cosas que explicar y me gustaría dejarles una parte sólo a ellas. Para adentrarnos en el tema de las cabeceras me gustaría proponeros 5 páginas diseñadas para el iPhone como ejemplo de diseños.
 |
 |
 |
 |
|
|
|||
Como podéis ver, las 5 páginas se ajustan al tamaño horizontal del iPhone (que no al vertical). Las tres primeras páginas comparten el uso de pestañas, mientras que las dos últimas no hacen uso de ellas. La tercera página junto con la quinta intentan simular el aspecto de una aplicación nativa (usando parte del contenido visible para mostrar una barra de título similar a las de las aplicaciones nativas), mientras que la cuarta página utiliza un diseño más propio, siguiendo las líneas que utiliza el iPhone pero no intentando imitar tanto.
Así que deberemos decantarnos por un tipo de cabecera: con pestañas, simulando un aplicación nativa o que tenga un toque personal. A mí, de las que he visto hasta ahora, la que más me gusta es la de Yahoo. Creo que han dado en el clavo al mezclar un toque personal con el sistema de pestañas y la imitación (en parte) de la barra de título de una aplicación nativa.
Pero bueno, esto es todo por ahora. En la próxima parte me centraré por completo en lograr resultados parecidos a los de los ejemplos, es decir, me centraré en crear una cabecera con pestañas y una que simule la barra de título de una aplicación nativa.
One reply on “Diseñando nuestra web para el iPhone – Parte 2”