4
Curso de diseño práctico de contenidos editoriales para iPad
Introducción
2011 by Ignacio Lirio for publicarendigital.com
5
Curso de diseño práctico de contenidos editoriales para iPad
Diseño contextual para dispositivos A la hora de afrontar el diseño de contenidos digitales, debemos tener en cuenta un factor que no es tan crucial cuando trabajamos con medios convencionales en papel. Se trata del diseño contextual, donde estos contenidos deben adaptarse a un contexto específico en el dispositivo digital que les mostrará, además de las circunstancias adicionales de donde, como y cuando se consultar estos contenidos. En resumen, el conjunto de las variables contextuales para contenidos digitales, sobre todo si son para dispositivos móviles serán: • • • •
El tamaño o resolución de la pantalla Las posibilidades interactivas del hardware Las particularidades del formato de archivo Las circunstancias del momento y el lugar de la lectura
A ser posible todas se tendrán en cuenta, dado a que lo que estaremos diseñando será una experiencia de usuario integral.
El tamaño o resolución de la pantalla Hacía unos años no había que tener tanto cuidado de la resolución de la pantalla del lector que visualizaba unos contenidos, dado que no había demasiada variedad de tamaños de pantalla. En el caso de los contenidos digitales pioneros, o sea las páginas web, al principio estos (estamos hablando básicamente de texto e imágenes) estaban optimizados para una resolución de pantalla de 640 x 480 píxeles (VGA) que era la mayoritaria (alrededor de 1994 ). Después vino la optimización para 800 x 600 px, después para 1024x768 px, etc.
Detalle del pie de página de una web “antigua” donde se recomienda una resolución de 800x600
Hoy día nos encontramos una variedad de tamaños y resoluciones de pantallas: tanto de ordenador 2011 by Ignacio Lirio for publicarendigital.com
6
Curso de diseño práctico de contenidos editoriales para iPad
como en teléfonos móviles, tabletas PC, etc. que hace muy dificil optar optar por una maquetación de unos contenidos con unas posiciones y medidas “fijos”, ya que si lo hacemos así, para las pantallas más grandes estaremos dejando mucho espacio en blanco y para pantallas pequeñas nuestro contenido quedará recortado e incompleto. Esto tambiuén afecta al tamaño de la tipografía, ya que un texto que es perfectamente legible para la pantalla de un ordenador puede ser ilegible en la pantalla de un teléfono (por ejemplo). Así pues tenemos que diseñar nuestros contenidos de tal forma que podamos estar seguros de que se verán íntegramente con independencia del tamaño de la pantalla del dispositivo en el cual se visualizarán, preveyendo una escala óptima de éstos o hacer que fluyan de manera adeucada por la pantalla. En la siguiente tabla hay una pequeña muestra de los diferentes tamaños y resoluciones de pantalla para algunos dispositivos que hay actualmente en el mercado: Dispositivo
Resolución (ppi)
iPod Touch / iPhone 3ª generación
163
iPod Touch / iPhone 4G
326
iPad 1ª generación
132
iMac
109
MacBook Pro
113
HTC Desire
252
Samsung Galaxy Tab
171
Cómo medir la resolución de un dispositivo La resolución de la pantalla de un dispositivo se mide en ppi (pixels por pulgada). Teniendo en cuenta que podemos conocer, mediante la información que nos proporciona el Sistema, la altura o la anchura en píxeles (px) de nuestro dispositivo (o consultando a las especificaciones técnicas) y sabiendo que 1 pulgada = 2,54 cm. se trata de traducir tamaños el píxeles (unidades dependientes de dispositivo) a unidades físicas (lo que acaba “viendo” el ojo humano). Así pues, si por ejemplo tenemos un ordenador portátil a una resolución de 1280x800 px y medimos físicamente (con una regla mismo) la anchura en cm. que hace esta pantalla (esta medida no puede cambiar, la resolución la podemos cambiar) y nos da cuanto 28,6 cm, esto nos daría el siguiente: 1280 px / 28,6 cm = 44,8 px / cm (aprox.) 44,8 px / cm X 2,54 cm / 1” = 113 ppi 2011 by Ignacio Lirio for publicarendigital.com
7
Curso de diseño práctico de contenidos editoriales para iPad
que es, por ejemplo, la resolución máxima de pantalla de un MacBook Pro de 13”
En resumen, cuando tenemos una pantalla de las características de un MacBook Pro (MBP), sabemos que tiene una pantalla de 13 pulgadas repartidas en 1280px de ancho por 800px de altura (ver ilustración) De aquí podemos extraer la siguiente información: • Resolución de la pantalla: 113 ppi (como se ha calculado antes) • Proporción de la pantalla (“aspect ratio”): 800 / 1280 = 0.625 = 16.10 o también 16:10 se podría decir. La proporción también es importante, ya que también varía bastante entre dispositivos (compárese el resultado de 16:10 con el de 16:9 de la TDT o el 4:3 de la TV antigua ...)
Efectos de les resoluciones sobre el contenido Este hecho de que las resoluciones de pantalla sean tan diferentes, tiene implicaciones a la hora de el elaborar los contenidos. Por ejemplo, una imagen se verá escalada según la pantalla que sea, o los textos serán o no legibles. La clave consiste siempre en no perder de vista la transformación de medidas relativas a la resolución a medidas reales. Es decir, pasar de píxeles a milímetros o centímetros. Ejemplo 1: Una fotografia o gráfico que ocupe un área cuadrada de 300x300 píxels, se verá con un tamaño de 67 mm en una pantalla de 113 ppi 300 px / 113 px = 2,65” x 2,54 cm = 6,7 cm = 67 mm a partir de aquí, para saber el tamaño físico del mismo objeto en otras pantallas, solo hace falta saber la proporción relativa de la resolución de estas pantallas con respecto a la que tomemos como referencia (en este caso hemos tomado una de 113 ppi como cualquier otra). He aquí algunos ejemplos adicionales:
2011 by Ignacio Lirio for publicarendigital.com
8
Curso de diseño práctico de contenidos editoriales para iPad • iPhone 3ª generación (resolución 163 ppi): 113/163 = 0,69 x 67mm = 46,5 mm • iPad 1ª generación (res.: 132 ppi): 113/132 = 0,85 x 67 mm = 57,4 mm • iPhone 4 (res.: 326 ppi): 113/326 = 0,35 x 67 mm = 23,2 mm
Con este cálculo comparativo, sin embargo, no sería suficiente, porque aunque parece claro que a mayor la resolución más pequeño nos hace el tamaño físico, este dato no sirve de mucho si no tenemos en cuenta el tamaño físico de la pantalla. Es decir, hoy en día tenemos que el iPhone 4 por ejemplo tiene casi el doble de resolución que su “hermano pequeño” de 3 ª generación, pero el tamaño físico de la pantalla ha quedado gairegé igual (iPhone 3 fa 115,5 x 62,1 mm ; iPhone 4 fa 115,2 x 58,6 mm) ¿Qué quiere decir esto? Que el mismo recuadro de 300px de anchura ocuparia 46,5 mmm en el iPhone 3 y 23,3 mm en el iPhone 4, es decir, un 40% y un 20% del área de la pantalla, respectivamente. Una gran diferencia relativa.
el mismo cuadrado visto en un iPhone 3 (izq.) vs. en un iPhone 4 (derecha) [simulado]
Ejemplo 2: el mismo concepto hay que utilizarlo en tipografías. La diferencia fundamental aquí es la unidad que utilizamos en tipografía, los puntos, que tenemos que trasladar como siempre en unidades físicas teniendo en cuenta el filtro de la resolución del dispositivo que hay de por medio. ¿Se leería óptimamente un texto maquetado en, por ejemplo, una Helvetica a 11pt dentro de un iPhone 4? Un tamaño de 11 pt, según la definición más estándar de punto (1 punto = 1 / 72 de pulgada) equivaldría a una altura de letra de impresión de 3,8 mm. aproximadamente Entonces se trataría de pasar de este tamaño físico al tamaño en píxeles para ver si sería legible o no. Un tamaño de 3,8 mm en una pantalla de iPhone 4 equivaldría a 3,8 mm = 0,15” , a 326 ppi = 49 px / 960 px (altura iPhone 4) = = 5,1% de l’altura de pantalla = 5,7 mm aproximadamente. 2011 by Ignacio Lirio for publicarendigital.com
9
Curso de diseño práctico de contenidos editoriales para iPad
El mismo cálculo para un iPad nos daría... 3,8 mm = 0,15” , a 132 ppi = 20 px / 1024 px (altura iPhone 4) = = 2% de l’altura de pantalla (19,1 cm) = 3,7 mm aproximadamente. Mientras que para un iPod Touch de 3G nos daría... 3,8 mm = 0,15” , a 163 ppi = 24 px / 480 px (altura iPhone 4) = = 5% de l’altura de pantalla (10 cm) = 5 mm aproximadamente. Aunque estos resultados son aproximaciones, ya nos dan suficiente información. Por ejemplo, aunque encontramos que el tamaño físico, visible de la letra es muy similar en un iPhone / iPod de 3 ª generación que en un iPhone 4 (unos 5 mm de altura), en el caso de los primeros disponemos sólo de con apenas 24 píxeles para dibujar los caracteres, versus los 49 píxeles del iPhone 4. Es claro pues que las letras iPhone 4 quedarán mucho más nítidas y bien representadas y por tanto mucho mejor legibles que en su hermano pequeño. En esta comparativa, con lo que peor se verían las letras sería el iPad, ya que tiene menos resolución y una Helvetica a 11pt equivaldría a un espacio de sólo 3,7 mm de altura y utilizando sólo 20 píxeles, lo que, con el efecto de ‘anti-aliasing’ (suavizado) reduce las letras a poco más que manchas.
en un iPhone 4 la misma letra ocuparía más pantalla relativa y más superficie, y se vería más nítida (simulació)
Las diferentes formas de interactuar con los dispositivos Otro factor clave a la hora de hacer un diseño contextual consiste en cómo interactúa el usuario con los contenidos. Este factor a menudo nos obligará a adaptar el diseño de la aplicación y / o de los contenidos.
2011 by Ignacio Lirio for publicarendigital.com
10
Curso de diseño práctico de contenidos editoriales para iPad
Por ejemplo, a un iPhone / iPod / iPad el usuario básicamente interactúa con las huellas en la pantalla, en vez del teclado o el ratón. Esto implica algunos cambios en el diseño, como por ejemplo: • Los enlaces de texto o botones deben estar suficientemente espaciados, dado que los clics interactúan con un punto y las huellas con un área extendida. • Algunos conceptos como “pasar el cursor por encima” a una pantalla táctil desaparecen o se transforman, dado que no se puede pasar ningún cursor por encima. • A menudo los contenidos pueden ser interrumpidos por otras funcionalidades del dispositivo, como notificaciones o llamadas de teléfono.
2011 by Ignacio Lirio for publicarendigital.com
11
Curso de diseño práctico de contenidos editoriales para iPad
Diseño de contenidos vs. desarrollo de aplicaciones La volatilidad de las tecnologías digitales, tanto de hardware como de software hace que sea altamente ineficiente centrar la edición de contenidos ligado a un solo soporte o algunos apoyos. Por ejemplo, si utilizamos las herramientas de desarrollo nativas de Apple para meter unos contenidos dentro de un iPad, estamos ligando diseño contenido, o mejor dicho contenedor a contenido. Esto hace que nos sea difícil adaptar estos contenidos a otro dispositivo que utilice otro sistema, aunque la experiencia de usuario con el otro dispositivo sea idéntica (por ejemplo, iPad vs. tabletas Android) Para evitar esto, y para preparar los contenidos de tal forma que se puedan adaptar fácilmente dentro de un dispositivo u otro, debe adaptarse una estrategia de separar diseño de contenidos (incluida gran parte de la interactividad) del vehículo que los muestre (combinación hardware y software). Y dentro del diseño de contenidos, separar el contenido del diseño.
“H
ay que separar los contenidos del vehículo que los contiene, y dentro de los contenidos el propio contenido del diseño que le da forma.”
¿Cuáles son los contenidos? Estamos hablando básicamente de textos, imágenes, vídeos, animaciones, sonido y elementos interactivos. ¿Qué tecnología es hoy en día capaz de reproducir estos contenidos y que sea compatible de forma transparente a varios dispositivos? Por un lado tendríamos el PDF, un formato universal para reproducir documentación en ordenadores. Los contenidos de los PDF se pueden llegar a adaptarse fácilmente a varias pantallas, pero no ocurre lo mismo con las funcionalidades. Por ejemplo, un PDF con vídeos o formularios no se podría reproducir en un iPad. Por otra parte tendríamos la tecnología multimedia de Adobe Flash (SWF) que permite reproducir animaciones, vídeos, botones, etc. y que actualmente puede ser compatible con un cierto% de teléfonos móviles y mesitas Android, pero es incompatible con iPad / iPhone. Finalmente tenemos que todos los dispositivos, incluido el iPad, disponen de navegadores web. En el caso del iPad se trata del Safari, un navegador basado en el motor WebKit, al igual que el navegador de las tabletas Android, y que permite reproducir páginas web que contienen claro imágenes, textos, formularios, pero además animaciones, videos y sonido gracias que es compatible con el nuevo estándar HTML5 y tiene un CSS compatible con animaciones. Así pues, se trata de diseñar contenidos multimedia interactivos usando HTML5, CSS y Javascript compatibles y después ubicarlos dentro de una aplicación personalizando un visualizador web oportunos en cada caso (que es una parte que se puede externalizar fácilmente). 2011 by Ignacio Lirio for publicarendigital.com