PLATAFORAS Y RESOLUCIONES

VARIEDAD DE PANTALLAS

Diseñando para Móviles (diseño para múltiples tamaños de pantalla)

• Diseño Web,
• Web Móvil

por Álvaro Brito

En este artículo os enseñaremos y aprenderéis como conseguir un Diseño Web 100% Móvil, se explicará paso a paso las distintas estrategias para lograr el objetivo de; diseñar una Web totalmente válida para la gran mayoría de dispositivos móviles, usando las técnicas y tecnologías que podrás ir viendo a continuación.

Imaginemos que tenemos que encagarnos de crear un diseño de un sitio web para móviles. Es probable que, a menos que estemos diseñando para un solo dispositivo, rápidamente nos vamos a encontrar con un problema común que experimentan todos los diseñadores que trabajan con dispositivos móviles, averiguar cuales son realmente las proporciones de pantalla de un dispositivo móvil.

Por ejemplo:

• El iPhone es de 320 píxeles de ancho por 480 píxeles de alto.
• Muchos dispositivos de Nokia N-Series son 240 píxeles de ancho por 320 píxeles de alto.
• Los dispositivos más nuevos a menudo apoyan un modo apaisado donde la anchura y la altura se invierte de forma espontánea.
• Los dispositivos de Nokia más populares disponen de pantallas que van de 176 por 208 píxeles hasta 352 por 416 píxeles.
• Las resoluciones de pantalla Blackberry variar desde 160 x 160 píxeles hasta a 324 x 352 píxeles.

Este artículo se destina a ayudar a desarrollar el diseño de estrategias eficaces para orientarlo a una amplia gama de dispositivos móviles y tamaños de pantalla. Con este fin, comenzamos con un esquema de dos cuestiones clave que se encontrará en el diseño para las pequeñas pantallas: la diversidad en la pantalla y el tamaño del píxel.

Esperar y gestión de la diversidad

En este punto, probablemente te estarás preguntando “… ¿es realmente necesario para el diseño de todos estos tamaños diferentes de pantalla?”, o “… es lo que realmente necesitamos para crear un diseño para cada dispositivo?”. Dependiendo de los requerimientos de negocio del proyecto, puede ser totalmente factible diseñar sólo para un tamaño de pantalla o dispositivo. Sin embargo, si los requisitos determinan que debe ser utilizado por la mayoría de los dispositivos, vamos a tener que encontrar la manera de hacer frente a esta diversidad.

Las cosas pueden no ser tan malas como parecen. Al diseñar para la web móvil, podemos suponer que las páginas se desplazan hacia arriba y hacia abajo como lo hacen los navegadores. Esto, de alguna forma elimina la necesidad de preocuparse por la altura de la pantalla, lo que nos permite centrar nuestros esfuerzos principalmente en tratar con la diversidad en anchos de pantalla del dispositivo. AfortunadamenteDeviceAtlas Explorer nos proporciona un medio rápido para comprobar que el ancho de la pantalla en “se rompe” a través de los miles de dispositivos móviles conocidos.

Los gráficos anteriores indican, que la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles con muchos de los valores restantes, 120, 130, 160, 208 y 220 píxeles, no demasiado divergentes de estos tres valores centrales. Esto nos deja con unos cuantos dispositivos, tanto en los extremos altos y bajos, con una anchura de 96, 101, 320 y 320 + píxeles. Mientras que los dispositivos con un ancho de pantalla de menos de 128 píxeles pueden parecer un pequeño porcentaje de la totalidad, cuando se combina (96, 120, 101 y 84 píxeles) que suman hasta 469 dispositivos!. Más de la mitad del número de dispositivos de 240 píxeles o alrededor del 10% de todos los dispositivos conocidos.

Tambien debemos señalar que en este momento, menos del 5% de los dispositivos tienen resolucionessuperiores a 320 píxeles de ancho. Esperamos que esto cambie en los próximos años, ahora estamos viendo las resoluciones de pantalla más pequeña (128, 176, etc), y dando paso a las más grandes (240 +), como se ilustra en el gráfico siguiente:

Teniendo en cuenta que el tamaño de pantalla es importante, también hay un parámetro adicional a considerar: la dimensión física de la pantalla.

El problema de los Píxeles

Durante años, los diseñadores han realizado principalmente plantillas Web para monitores comunes. El tamaño de pantalla medio es de 1024 x 768 pixels, y aunque el tamaño físico de las pantallas varían, las dimensiones totales normalmente son como resultado una densidad de píxeles de alrededor de 85 ppp (píxeles por pulgada). Últimamente, sin embargo, el panorama ha empezado a mostrar el cambio, sobre todo con los nuevos dispositivos portátiles:

• Netbooks, como el Asus Eee PC 900 tienen un rango de 9 pulgadas en diagonal con una resolución en torno a 1024 x 600 píxeles dándoles la densidad de píxeles de alrededor de 133 ppp.
• El iPhone de Apple tiene una resolución de pantalla de 320 x 480 píxeles que al combinarse con sus 3.6″ de diagonal de pantalla los resultados nos llevan a, una densidad de píxeles de 160 ppp.
• El E60 de Nokia tiene una resolución de pantalla de 416 x 352 píxeles y un minúsculo 2,2″ de diagonal de pantalla dándole una densidad de píxeles de más de 240 ppp!

Cuando se combina con la necesidad de apoyar muchos dispositivos, esta gran variación en la densidad de píxeles introduce un nuevo problema, el impacto del tamaño de píxels en el diseño.

La siguiente ilustración simula la misma imagen de 100 x 100 píxeles en dispositivos con la densidad de píxeles de 72, 144 y 240 píxeles por pulgada. Observemos cómo el tipo y los detalles finos se pierden como se representa en las imágenes más pequeñas.

Esto significa que debemos de dar solución a una amplia gama de píxeles. Sin embargo, es importante tener en cuenta que no todos los píxeles son creados iguales, y cuando sea posible:

• Determinar la gama completa de densidades de píxeles, necesitará ser soportada.
• Revisa tus diseños para estos dispositivos, para garantizar su visualización en todos ellos.
• Diseñar y definir los elementos de la maquetación en unidades relativas, como el em y en porcentajes.

Con un desarrollo y estrategia teniendo en cuenta los tamaños de pantalla, conseguiremos construir sitios Web escalables para una amplia gama de dispositivos móviles.

A continuación definiremos las diferentes estrategias para conseguir una Web para múltiples pantallas. No solo para dispositivos móviles sino también para pantallas de escritorio:

APUNTES TEXTUALES DEL LIBRO

Mobile Design and development

Brian Fling

El móvil moderno es un primo lejano del teléfono, ya que une comunicación con información dentro de un mismo dispositivo. Puede ser conectado a internet, puede enviar y recibir SMS y mensajes de voz, se pueden adquirir bienes y servicios y sirve como geo localizador. De hecho, el teléfono móvil moderno es capaz de hacer casi todo lo que se realiza con un ordenador de mesa, pero tiene mayor relevancia significativa para nuestras actividades diarias.

La era del smartphone

los smartphones tienen todas las mismas capacidades de un teléfono, como hacer llamadas telefónicas, el envío de SMS, tomar una foto, y el acceso a la web móvil, la mayoría de los teléfonos inteligentes se distinguen
en que utilizan un sistema operativo común, un mayor tamaño de pantalla, un teclado QWERTY o el lápiz para la interaccion, y Wi-Fi u otra forma de conectividad inalámbrica de alta velocidad. 

La era táctil

“El cambio ocurre porque hay una brecha entre lo que es y lo que debería ser”. Craig McCaw

Los dispositivos móviles de la era táctil son un medio completamente nuevo, capaz de ofrecer una nueva manera de interactuar y entender la información. Los dispositivos deson capaces de aprovechar la ubicación, el movimiento y el conocimiento colectivo de la humanidad, para proporcionar a la vida de las personas un mayor significado.

El ecosistema móvil

El  ecosistema móvil es totalmente único y como Internet  se compone de muchas partes diferentes, las cuales deben trabajar de forma integrada. Sin embargo, con la tecnología móvil, las partes son diferentes, porque se pueden utilizar dispositivos móviles para acceder a Internet, lo que significa que no sólo es necesario comprender las múltiples facetas de la Internet,  también hay que entender el ecosistema movil.

Los operadores, Los operadores pueden ser referidos como operadores de redes móviles (MNO), proveedores del servicio móvil, operadores inalámbricos, operadores de teléfonos móviles, o las empresas de celulares.

Redes, operan en redes inalámbricas.  la tecnología celular es una radio
que recibe una señal de una antena. El tipo de la radio y la antena determina la
capacidad de la red y los servicios que puede permitir en él.

Dispositivos, como llamaremos a los teléfonos, en la industria de las llamadas telefónicas como los teléfonos o terminales.

Plataformas, el primer deber de una plataforma móvil es facilitar el acceso a los dispositivos. Para ejecutar el software y servicios en cada uno de estos dispositivos se necesita una plataforma  o una programación básica
idioma en el que todo el software que está escrito

Sistemas operativos, solo los corren los teléfonos inteligentes. A medida que la tecnología se reduce los dispositivos necesitan un apoyo ofrecido por los sistemas operativos. Los sistemas operativos suelen tener los servicios básicos o kits de herramientas que permiten a las aplicaciones funcionar desde hablar o controlar los datos y compartir  servicios o información

Aplicaciones

Marcos de aplicaciones se utilizan para crear aplicaciones, como un juego, un navegador web, una cámara o un reproductor de medios de comunicación. Aunque los marcos están bien estandarizados, los dispositivos
no lo estan. 

El mayor desafío de la implementación de aplicaciones es saber el dispositivo específico atributos y capacidades. 

Servicios. Los servicios incluyen tareas tales como el acceso a Internet, el envío de un mensaje de texto, básicamente  cualquier cosa que el usuario está trate de hacer. Lo que hace del entorno móvil un espacio complicado para diseñar y desarrollar, ya que el usuario debe recorrerlo con  el fin de lograr una simple tarea.

¿POR QUÉ MÓVILES?

los dispositivos móviles están proliferando en todo el mundo, ya que podemos realizar una gran cantidad de tareas diferentes con ellos. El móvil es la "próxima gran cosa"  de los próximos 10 años.

Los dispositivos móviles ya han superado la mayoría de los medios de comunicación incluyendo las computadoras. Hoy en día, más personas acceden a la Web a través de un dispositivo móvil a través de una computadora.

MÓVIL
El séptimo medio masivo de comunicación, por supuesto, es la tecnología móvil. La industria móvil en realidad comenzó al mismo tiempo que la Web, sino que tomó mas años para que lo consideremos un medio de comunicación.

Tomi Ahonen señala, móvil tiene cinco ventajas únicas:
"El primero verdaderamente personal los medios de comunicación"
"El primero en los medios de comunicación".
"El primero en llevar todos los medios de comunicación"
"Los medios de comunicación sólo con un canal de pago interno".
"En el punto de impulso creativo"

Todavía hay muchos retos de compatibilidad a través de múltiples dispositivos móviles de hoy, en web, JavaScript y hojas de estilo en cascada (CSS), que producen inconsistencias cuando los usuarios ven el mismo código a través de múltiples navegadores. Pero, afortunadamente, la web móvil está basado en estándares, especificaciones, los principios y mejores prácticas acordados por la comunidad móvil.
El teléfono suma la utilidad combinada de la telefonía fija, Internet, informática,
tarjeta de crédito, y la televisión. El teléfono tendrá un impacto mas en su vida de lo que podemos imaginar, debido a su multi-funcionalidad de los aspectos, y su alcance.

APLICACIONES WEB MÓVILES Y NATIVAS
APLICACIONES: La web móvil ha sido históricamente  horrenda en la forma de crear una experiencia atractiva. La experiencia creada  de forma inmediata es algo engañosa, como el trato con los nativos.
La fragmentación que existe en todos los dispositivos, ya que si se trata de API nativas o móvil navegadores web, es un obstáculo que no se puede evitar. Pero como la mayoría de las cosas en el ecosistema móvil, la cuestión de qué camino elegir se reduce al dinero.
El principio de ubicuidad: La web móvil es la única plataforma a largo plazo. Hay  Cuatro razones principales para apoyar la creencia: la fragmentación, la Web, el control, y el consumidor expectativas
La Web: Es el único medio de información, aplicaciones y servicios que ha ido a la distancia de los últimos 15 años. Se centra en la tecnología de navegadores web de escritorio,   la única aplicación nativa que importa es el navegador.
Control: La Distribución de la aplicación móvil no puede y no será probablemente bajo el control del desarrollador. Los vendedores ambulantes de la aplicación siempre tienen que depender de intermediarios para llevar sus productos al mercado y tomar una rodaja de sus ganancias. Este ha sido el caso desde el comienzo la descarga de aplicaciones móviles.
Las expectativas de los consumidores: Los consumidores esperan que todo funcione solo., Esperan que su móvil tenga alguna aplicación que sea de su agrado, pero si no es compatible con su dispositivo en particular no solo la venta esa perdida. .

Ubicuidad en la Web Móvil: La web móvil es la única plataforma que está disponible y funciona en todos los dispositivos móviles, comparten el mismo conjunto de normas  y protocolos con los demás, así como la  web de escritorio.
 La web móvil es el único canal de distribución móvil a disposición de los desarrolladores que pueden controlar.
La web móvil es la mejor plataforma para aprender, El mas barato de producir. 
La palabra clave es "calidad".
La web móvil no ha tenido mucho en los últimos años. A pesar de la web móvil tiene sus propios desafíos con la fragmentación de dispositivos, el nivel de complejidad para adaptarse a estos desafíos para producir la mejor experiencia posible es mucho menor que con las aplicaciones nativas.  

MOBILE 2.0:

En pocas palabras, es  sólo una etiqueta para la segunda generación de la industria de la web. El sufijo 2.0 en la tecnología implica que un producto es nuevo y mejorado,
reinventado para ser mejor y tal vez más relevante.

Cada uno de estos principios sirve para transformar la web en un medio más ágil y centrado en el usuario para la entrega de información a las masas.

Siete principios de la Web 2.0:

La Web como plataforma:Por el contexto móvil, esto significa "escribir una vez, desplegar en todas partes " 

El aprovechamiento de la inteligencia colectiva:Los proyectos como WURFL -un repositorio de código abierto de perfiles de dispositivo proporcionado por  la comunidad .

Los datos son los siguientes: Intel incide

Los móviles de este principio  Puede incluir los datos que buscamos,
los datos que creamos, y los datos sobre o alrededor de nuestras instalaciones físicas.

Fin del ciclo de liberación de software:Largos ciclos de desarrollo y pruebas de gran peso en los proyectos móviles, disminuyendo todas las esperanzas de rentabilidad. 

Modelos de programación ligera: Dado que la tecnología móvil está prácticamente construida por  Java, el uso de modelos ligeros es a menudo visto con cierto escepticismo, la disminución de la generales de programación requerida significa más innovación se produce con mayor rapidez.

Software por encima del nivel de un único dispositivo: Tenemos que acercarnos  a un nuevo software.

Ricas experiencias de usuario:Una gran experiencia del usuario es  ayuda a la gente  a pasar menos tiempo con el software y más tiempo viviendo sus vidas. 

EL ÚLTIMO PRINCIPIO DE MOBILE 2.0 

es reconocer que estamos en una nueva era del consumo. El  consumo de ayer no se parece en nada al consumidor de hoy.  La gente del mercado de hoy no ven a sí mismos como consumidores, sino como creadores. 

Como red portátil los dispositivos se vuelven más poderosos, lo que nos permite capturar, grabar y compartir contenido en el momento, estamos en condiciones de agregar un nuevo tipo de contexto al contenido.

APUNTES DEL LIBRO

 La psicología de los objetos cotidianos

DONALD A. NORMAN

Traducción de Fernando Santos Fontenla NEREA

“los diseñadores son gente bastante capaz- Pueden inventarse un ejemplo bastante plausible para casi cualquier cosa. Por eso introducen elementos, muchísimos elementos, que duran mucho tiempo. El resultado final es que existen unas interfaces muy complejas para cosas que esencialmente son muy sencillas”

Principios fundamentales del diseño para la gente: 1) aportar un buen modelo conceptual, y 2) hacer que las cosas sean visibles.

La visibilidad indica la topografía entre los actos que se desea realizar y el funcionamiento real.

las partes idóneas deben ser visibles, y deben comunicar el mensaje correcto

La prestación, se refiere a las propiedades percibidas y efectivas del objeto, en primer lugar a las propiedades fundamentales que determinan cómo podría utilizarse el objeto.

La topografía natural, con lo cual me refiero a aprovechar las analogías físicas y las normas culturales, lleva a una comprensión inmediata. Por ejemplo, un diseñador puede utilizar la analogía espacial: para elevar un objeto, llevar el mando hacia arriba.

Las cosas son visibles. La topografía es buena, las relaciones entre los mandos y lo que éstos controlan son naturales. A menudo, los mandos son únicos, tienen funciones únicas. La retroalimentación es buena. El sistema es comprensible. En general, las relaciones entre las intenciones de los usuarios, los actos necesarios y los resultados son sensatas, no arbitrarias, y significativas

Un dispositivo es fácil de utilizar cuando existe una cierta visibilidad del conjunto de actos posibles, de modo que los mandos y las imágenes explotan la topografía natural. Los principios son sencillos, pero raras veces se incorporan en el diseño. Un buen diseño exige atención, planificación, reflexión

La retroalimentación  el envío de vuelta al usuario de información acerca de qué acto se ha realizado efectivamente y qué resultado se ha logrado

Paradoja de la tecnología

La tecnología ofrece las posibilidades de hacer que la vida resulte más fácil y más placentera; cada nueva tecnología aporta mayores beneficios. AI mismo tiempo, surgen nuevas complejidades que agravan nuestras dificultades y frustraciones. El desarrollo de una tecnología tiende a seguir una curva de complejidad en forma de U: empieza muy alto; va cayendo hasta un nivel bajo y confortable, y después vuelve a subir. Los dispositivos innovadores son complejos y difíciles de utilizar.

Sicología de las  cosas cotidianas

Si es posible cometer un error, alguien lo cometerá. El diseñador debe suponer que van a cometerse todos los errores posibles y realizar su diseño con objeto de reducir al mínimo la posibilidad de error, para empezar, o sus efectos, una vez que se ha cometido. Los errores deben ser fáciles de detectar, deben tener unas consecuencias mínimas y, de ser posible, sus efectos deben ser reversibles.

La idea básica es bien sencilla. Para lograr algo, hay que empezar con alguna idea de lo que se desea: del objetivo a alcanzar. Entonces hay que hacer algo con el mundo, es decir, realizar un acto para moverse uno mismo, o manipular a alguien o a algo. Por último se verifica para ver si se ha alcanzado el objetivo. De forma que hay cuatro cosas diferentes que tener en cuenta: el objetivo, lo que se hace al mundo, el mundo en sí y la verificación del mundo. El acto o la acción en sí tiene dos aspectos principales: hacer algo y verificar. Califiquémoslos de ejecución y evaluación

Un objetivo es algo que lograr, a menudo expuesto de forma vaga. Una intención es un acto específico realizado para alcanzar el objetivo. Pero ni siquiera las intenciones son lo bastante específicas para controlar los actos.

EL CONOCIMIENTO EN LA CABEZA Y EN EL MUNDO

1 IM información está en el mundo. Gran parte de la información que necesita uno para realizar una tarea puede hallarse en el mundo.

2 No hace falta una gran precisión. Raras veces se necesitan precisión, exactitud y totalidad de conocimiento

3. Existen restricciones naturales. El mundo limita el comportamiento permisible

4. Existen restriccionesculturales. Además de las imposiciones naturales, físicas, la sociedad ha ido creando muchas convenciones artificiales que rigen lo que es el comportamiento social aceptable.

Las personas son seres explicativo. Las explicaciones y las intrepretaciones de los acontecimientos son fundamentales para la actuación humana, tanto en la comprensión del mundo como en el aprendizaje y el recuerdo. En este aspecto, los modelos mentales desempeñan un papel importante. Los modelos mentales simplifican el aprendizaje, debido en parte a que los detalles del comportamiento necesario se pueden derivar cuando se necesitan. Pueden ser inapreciables para hacer frente a situaciones imprevistas

EL CARÁCTER DE LAS TAREAS COTIDIANAS

La mayor parte de las tareas de la vida cotidiana son rutinarias y exigen poco pensamiento o planificación sencilla: somera o estrecha. Las actividades de ocio deben ser anchas y profundas, pues las realizamos cuando tenemos tiempo y ganas de invertir el esfuerzo.

TEORIA DE DISEÑO

El diseñador no debe pensar en una simple dicotomía entre errores y comportamiento correcto; por el contrario, debe tratarse toda la interacción como una actividad cooperativa entre la persona y la máquina, una actividad en la cual pueden surgir malentendidos por ambas partes. Esta teoría es mucho más fácil de aplicar en algo como un ordenador, que tiene la capacidad de adoptar decisiones propias, que con cosas como puertas y centrales de energía, que no tienen esa inteligencia. Pero la teoría del sistema centrado en el usuario sigue siendo válida.

— Hacer disponible el conocimiento necesario. No obligar a que todo el conocimiento se halle en la cabeza, pero dejar margen para que el funcionamiento sea más eficiente cuando el usuario haya aprendido las operaciones, se haya metido el conocimiento en la cabeza.

— Utilizar la capacidad de las presiones naturales y las artificiales: físicas, lógicas, semánticas y culturales. Utilizar funciones forzosas y topografías naturales.

— Reducir las lagunas de ejecución y evaluación. Hacer que las cosas sean visibles, tanto para la ejecución como la evaluación. Desde el punto de vista de la ejecución, hacer que las opciones sean muy claras. Desde el punto de vista de la evaluación, hacer que los resultados de cada acto sean evidentes.

«El diseño es la aplicación sucesiva de limitaciones hasta que sólo queda un producto único .»

DISEÑO CENTRADO EN EL USUARIO

EL DISEÑO DEBERÍA:

• Facilitar la determinación de qué actos son posibles en cada momento dado (utilizar limitaciones).

• Hacer que las cosas sean visibles, comprendido el modelo conceptual del sistema, los diversos actos posibles y los resultados de esos actos.

• Hacer que resulte fácil evaluar el estado actual del sistema.

• Seguir las topografías naturales entre las intenciones y los actos necesarios; entre los actos y el efecto consiguiente, y entre la información que es visible y la interpretación del estado del sistema.

HACER LAS COSAS MAL

• Hacer que las cosas sean invisibles..

• Ser arbitrario.

• Ser incoherente:

• Hacer que las operaciones no sean inteligibles.

• Ser descortés.

    • Hacer que las operaciones resulten peligrosas.

Hacer que las cosas sean visibles desde el punto de vista de la ejecución de un acto, con objeto de que la gente sepa lo que es posible y cómo deben realizarse los actos; hacer que las cosas sean visibles desde el punto de vista de la evaluación con objeto de que la gente sepa cuáles son los resultados de sus actos. Y hay más. El sistema debe prever actos que correspondan a intenciones. Debe prever indicaciones del estado del sistema que sean fácilmente perceptibles e interpretables y que correspondan a las instrucciones y las expectativas. Y, naturalmente, el estado del sistema debe ser previsible (o audible) y fácilmente interpretable. Que los resultados de un acto sean evidentes.