Manual de Introducción al diseño web para iniciación de webmasters

Este artículo es recopilación del manual on line “Introducción al diseño web” del portal www.desarrolloweb.com con lo que en ningún momento pretendemos plagiar ningún contenido.

Introducción al diseño web

Primeros pasos para aquellas personas que deseen crear su propia página web, desde el punto de vista del diseñador. Motivación a seguir, programas a utilizar, etc.

Listado de los capítulos:

1.- Prólogo a los primeros pasos en el diseño web
Consideraciones a tener en cuenta a la hora de diseñar una página web.

2.- Introducción al diseño web
Datos a tener en cuenta a la hora de empezar en el diseño web, pues la web es un canal de publicación con características muy especiales.

3.- El color en la web
El color es uno de los elementos más poderosos de que disponemos a la hora de comunicar emociones en un sitio web. La mayoría de estas emociones son percibidas de un modo sutil e inconsciente.

4.- Características especiales de la publicación web
Diferencias específicas de la publicación de contenidos en la web con respecto a otros medios como podrían ser la televisión.

5.- ¿Algo más sobre el diseño web?
Es importante tomarnos el trabajo en serio al hacer una página web: redactar sin faltas y organizar la información debidamente.

6.- Herramientas para profesionales del diseño web
Herramientas que podemos utilizar para diseñar una página web con excelentes resultados. Algunas recomendaciones importantes y otras para trabajos más específicos.

7.- Diseño adecuado
El diseño gráfico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que representa. Luego podemos entrar a debatir otros aspectos del diseño.

8.- Diseño Web. Problemas generales
Los princiapales problemas que nos podemos encontrar a la hora de decidir el diseño para nuestra web.

9.- Conclusión a la introducción al diseño web
Últimos apuntes de interés para el diseño de páginas web.

10.- Diapositivas de la conferencia Diseño web para dispositivos móviles
Diapositivas o slides de la conferencia impartida en febrero de 2012, en México, sobre diseño web para dispositivos móviles.

11.- La importancia de la web móvil
Algunos datos de interés que nos pueden motivar para aprender a diseñar webs para dispositivos móviles.

12.- Características del uso de la Internet Móvil
El uso de Internet en dispositivos móviles es diferente del uso que se realiza en ordenadores personales.

13.- Taller de Responsive Web Design
Vídeo del taller de Responsive Web Design emitido en directo el 24 de abril de 2012, tratando el diseño adaptable a todos los dispositivos.

14.- Vídeo: Fundamentos de Responsive Web Design
Sesión 1 de 3 de Responsive Web Design preparatoria para el curso que vamos a organizar en DesarrolloWeb.com y EscuelaIT, donde veremos los fundamentos del diseño adaptable y diversos trucos útiles con CSS.

15.- Vídeo: Medidas e imágenes relativas en Responsive Web Design
Vídeo que trata sobre medidas relativas en las CSS e imágenes flexibles para realizar Responsive Web Design.

16.- Webcast de Diseño Web
Grabación en vídeo de la emisión en directo sobre diseño web abordando el proceso desde cero, Wireframing, clientes y formatos de trabajo, concepción estética.

17.- Diseño web adaptativo
Cómo adaptar tus diseños para reproducirlos con éxito en distintos formatos y dispositivos.

18.- Diseño web con crowdsourcing
¿Qué es el crowdsourcing? Detallamos algunos ejemplos de su utilización en el diseño de webs.

19.- Prototipado en el proceso de diseño web
Cómo debe realizarse el prototipado de un sitio web, durante el proceso de diseño. Selección de herramientas que nos sirven para proyectar las secciones de una web, conocido como prototipado, mockup o wireframing.

1.- Prólogo a los primeros pasos en el diseño web
Consideraciones a tener en cuenta a la hora de diseñar una página web.

Hace unos días, durante una cena, mi padre me preguntó qué era exactamente eso de los chats, “o lo que quiera que la gente hace cuando se escribe a través de Internet”. Es un hombre un tanto suspicaz ante las nuevas tecnologías, de manera que me vi obligado a lidiar en tres frentes a la vez, añadiendo además el hecho de que la pregunta, planteada con intenciones solapadas, sonó como un aldabonazo y me desconcertó unos segundos. Las tres líneas de ataque de las que hablo eran las siguientes: una, la que me obligaba a describir de manera superficial las bases tecnológicas de los chats, ya que mi padre los había comparado con sistemas de comunicación más convencionales, y yo debía establecer las distancias adecuadas. En segundo lugar, le expliqué los elementos de la práctica, como por ejemplo la interfaz típica de un software de chat o las funciones básicas: flujo de texto en tiempo real y transmisión de archivos, así como el modo en que los chats se organizan y pueden ser disfrutados en diversas salas; se conoce que cosas muy elementales. En tercer lugar le sugerí la utilidad de los chats, sus ventajas frente a otras formas de comunicación a distancia y le expliqué, de forma más general ya, que pese a su postura, Internet constituye en gran medida el sistema sanguíneo del futuro, aunque en el mejor de los casos se trate arterias de fibra de carbono… De ahí pasamos a conversar acerca de cuestiones mucho más diversas en torno a la Red, pero esto ya no tenía importancia. Un tema u otro era un asunto de formas.

En realidad, yo no siento mucha atracción por los chats genéricos, y si acaso opto por aplicaciones de mensajería instantánea. Pero aquella conversación me reveló algunas de las bases que, después, me ayudarían a responder a una usuaria en cierto foro de diseño web. Su pregunta era: “Aunque no sé mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia página web. ¿Por dónde empiezo?”

Desde luego eso era toda una declaración de intenciones y no existía, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e íntimo, como lo es la navegación en Internet; ¿dónde voy si me conecto a la Red? Pues eso depende de ti. Es más: lo probable es que muy pronto ya ni siquiera dejes que otros usuarios compartan y fisguen en tu historial. De la misma manera, una vez que empezamos a diseñar, decidimos que nadie puede entrometerse en nuestra forma de trabajar. ¿Cierto?

Entonces, ¿quiere esto decir que no hay una especie de protocolo de principiantes? Oh, sí que hay un protocolo, un camino de baldosas que todos solemos seguir para llegar a nuestro destino (naturalmente, el destino de cada usuario es distinto, y mientras más diferente e ingenioso, mayor será el aprendizaje).

2.- Introducción al diseño web
Datos a tener en cuenta a la hora de empezar en el diseño web, pues la web es un canal de publicación con características muy especiales.

Como en el caso de los chats, podemos considerar que existen tres directrices elementales que sirven de guías. Una de ellas es el conocimiento tecnológico de Internet; estamos obligados a saber cómo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestión de las líneas telefónicas y, desde luego, considerando los diversos navegadores que hay en el mercado, además de prestar atención a la necesidad de instruirnos, aunque sea un poco, en el lenguaje HTML. Es muy difícil tomarse en serio a alguien que no tiene constancia de que, echando un vistazo al código fuente de una página, hallará etiquetas tan básicas como y . Estos conocimientos técnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra página principal, si no sabemos que dicha imagen podría tardar un minuto en cargarse… Y a día de hoy ésa sí es una verdad infalible.
En segundo lugar, estamos obligados a saber trabajar. No es más difícil que eso; si trabajas en modo código, debes dominar el HTML y, mejor aún, el HTML y otros lenguajes de uso común en la Red. Si empleas software de tipo WYSIWYG (lo que ves es lo que obtienes, en español), debes ser capaz de conocer las funciones de tu programa. Desde luego que detenerse a leer las instrucciones es aburrido, y provoca lo que se conoce como “curva de aprendizaje”, pero es la única manera de llegar a entender y desarrollar todas las posibilidades técnicas e imaginativas que te permiten las diferentes aplicaciones del mercado. Si usas DreamWeaver, aprende DreamWeaver; puede que conozcas FrontPage, por ejemplo, pero eso no conduce a ninguna parte. Son programas distintos que necesitan procesos de instrucción diversos.

Al componer nuestros diseños, hemos de conocer cuáles son los efectos psicológicos que producen y cómo debemos elegir y combinar nuestra gama para que esa comunicación emocional resulte positiva o, de otro modo, corremos el riesgo de que nuestra página web luzca como el chándal de la selección olímpica de España en Londres 2012.
Si bien es cierto que el color es un arma de comunicación, también lo es que podemos prescindir de él. Hay periódicos, películas, libros, fotografías y hasta páginas web en blanco y negro que cumplen sobradamente su objetivo y que incluso pueden ser estéticamente impactantes.

El color es subjetivo: cada persona, dependiendo de sus rasgos culturales o sociales, su estado de ánimo u otras circunstancias personales, lo va a interpretar de manera distinta. De hecho, el pigmento ni siquiera es una propiedad intrínseca de un objeto. Desde este punto de vista (nunca mejor dicho), el color no existe y es sólo la forma que nuestra retina (y cerebro) tiene de percibir las cosas, dependiendo de la longitud de onda de la luz reflejada. En realidad, yo me alegro de que así sea porque para ser algo inexistente, coloreado queda el mundo bastante chulo, ¿no crees?

Los ordenadores actuales disponen de una paleta de más de dieciséis millones de colores. Demasiadas opciones. Son tantos que ni siquiera las mujeres han sido capaces de ponerles nombres a todos. Pero no te preocupes, la mayoría son indistinguibles para la vista y además, cómo se represente un color en la pantalla va a depender de qué modelo de computadora, tarjeta gráfica o pantalla tengas, de qué sistema operativo y navegador estés usando o de cómo hayas calibrado tu monitor. Este aspecto es de gran importancia cuando se diseñan páginas web corporativas, ya que tu cliente puede que se ponga un poco tiquismiquis a la hora de representar un color determinado, coincidente con un código Pantone de su libro de estilo corporativo. Si bien en un folleto impreso podemos reproducir una tonalidad con bastante precisión, al trabajar para un medio digital, tendremos que conformarnos con aproximaciones.

En esta página puedes testar cómo de bueno eres diferenciando los matices cromáticos.

El sistema que utiliza nuestro hardware para recrear los colores se llama RGB, acrónimo anglosajón que toma el nombre de los colores a partir de los cuales derivan todos los demás: rojo, verde y azul (Red, Green, Blue). El RGB tiene una gama cromática más amplia que la utilizada habitualmente para impresión, llamada cuatricromía (CMYK) y que se basa en cuatro planchas que se superponen. Cada color RGB tiene una nomenclatura hexadecimal en el código HTML. Por ejemplo, el azul se representa como #0000FF.

En los últimos diez años, la tecnología ha dado enormes pasos en materia óptica, y tanto las tabletas como los dispositivos móviles de última generación, disponen de soporte con mayor profundidad de color que los antiguos monitores mamotreto que utilizábamos hasta hace bien poco para nuestros equipos de sobremesa. Esto quiere decir, por si te lo estabas preguntando, que hoy por hoy puedes pasar olímpicamente de la estridente paleta Web-Safe para tus diseños en la Web.

El color, en su más amplia acepción, tiene tres dimensiones básicas:

Tono: se trata de la propiedad que hace distintos a los colores entre sí. Los primarios son el amarillo, el rojo y el azul; siendo el verde, naranja y violeta los secundarios.
Saturación: es el grado de pureza de un color con respecto al gris. Por ejemplo, tus pantalones vaqueros tienen un azul menos saturado después de unos cuantos lavados.
Luminosidad: indica cuan brillante u oscuro es un color.
Como he comentado antes, la percepción depende de cada uno, así que, para gustos, los colores. No obstante, podemos atribuir algunas características más o menos comunes que te ayudarán a escoger la coloración más indicada para cada proyecto:
Blanco: pureza, pulcritud, limpieza, luz.
Úsalo para fondos y para facilitar la lectura. Va bien con cualquier otro color.
Gris: neutral, formalidad, tristeza, equilibrio.
Estupendo para complementar al negro y al blanco. Puedes jugar con diferentes tonos de gris para combinar con todos los demás colores.
Negro: caro, elegante, misterio, sobriedad, duelo.
Ideal para productos de gama alta y para añadir contraste. El negro es la ausencia de color y permite a los tintes adyacentes cobrar mayor protagonismo.
Rojo: fiesta, pasión, peligro, ansiedad, calor, estímulo, provocación, agresión.
Úsalo para llamar la atención, pero siempre en dosis moderadas.
Azul: pasivo, frío, suave, unidad, confianza, frescor.
Combínalo con naranjas, verdes o metálicos. Tiende a contraerse, a hacer una superficie más pequeña.
Amarillo: calor, animación, cobardía, mentira, visibilidad, enfermedad, luz.
Combina bien con otros colores, y como el rojo, es ideal para resaltar. De hecho, la bandera española se diseñó roja y amarilla para poder ser bien visible en el mar a largas distancias. Además es un color cálido y expansivo.
Verde: ecológico, alimento, paz, envidia, celos, calma, equilibrio.
Combina bien con el azul o el marrón y activa la creatividad (R. Wiseman, 2009).
Naranja: energía, juego, estímulo, atención, salud, alegría.
Procura no abusar de este color, muy dominante y expansivo al ser la mezcla de rojo y amarillo.
Violeta: nobleza, espiritualidad, riqueza, psicodelia, misterio.
Mézclalo con colores suaves y poco dominantes para crear un efecto equilibrado.
Rosa: dulce, femenino, suavidad, debilidad, infancia. Ideal para proyectos en donde la mujer es el público objetivo principal, aunque en grandes dosis resultará cursi. Nunca lo utilices para la web de un grupo de heavy metal.
La web www.colormatters.com realizó una encuesta a escala mundial entre más de 130.000 sujetos para determinar qué efectos producen los colores en la gente. He aquí algunos de sus resultados:

Color preferido: azul
Color menos afín: amarillo oscuro
Calidad: oro
Poder: rojo
Buena suerte: verde
Mala suerte: negro
Barato: marrón
Delicioso: rojo
Sexy: rojo
Tecnología punta: plateado
Deidad: blanco
Dignidad: azul oscuro
Recuerda que todos estos conceptos no dejan de ser en cierto grado asociaciones abstractas, basadas en su mayor parte en el bagaje cultural de cada uno. Por ponerte un ejemplo, el color del luto en la cultura occidental es el negro, aunque no siempre fue así: en la época medieval, la realeza vestía de blanco en los funerales. En china también éste es el color utilizado para las exequias. En Egipto es el naranja, en Brasil y Tailandia el violeta y en la India es el marrón.
Para un acercamiento más científico a la teoría del color, podemos echar mano de la rueda del color. También es un punto de partida útil para saber cómo se relacionan entre sí a la hora de realizar nuestros diseños. En la rueda se disponen los colores del espectro y se unen el rojo y el violeta de los extremos, formando un círculo.

La rueda muestra los colores complementarios enfrentados, de modo que cada color tiene a su “negativo” en el lugar opuesto. He aquí una versión esquemática. Los colores primarios están representados un poco más grandes (puede que ya te hayas dado cuenta de que en el modelo RGB, se utiliza como primario el verde en lugar del amarillo) y los terciarios un poco más pequeños.

Complementarios: úsalos sin miedo para crear contraste. Por ejemplo, el violeta y el amarillo. Otra opción menos drástica consiste en elegir un color y los dos más cercanos de su complementario.
Análogos: son los dos adyacentes en la rueda. Mezclados, que no revueltos, son una apuesta segura.
Tríadas: se consiguen seleccionando tres colores equidistantes entre sí, por ejemplo, los tres primarios constituyen una tríada. Se trata de una mezcla equilibrada.
Para terminar, un último consejo: no llenes de colorines tu página sin ton ni son. Aparte de que corres un significativo riesgo de que te quede una horterada, a tus visitantes les costará centrar el foco en lo verdaderamente importante y se les cansará la vista. Hazme caso, la humanidad te estará agradecida.

4.- Características especiales de la publicación web
Diferencias específicas de la publicación de contenidos en la web con respecto a otros medios como podrían ser la televisión.

En tercer lugar es fundamental saber que Internet no es una conferencia telefónica, un CD-ROM o televisión a la carta. La Red sufre limitaciones propias y disfruta también de posibilidades más extensas y personales. Así, cuando diseñamos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras páginas que de un programa de TV, incluso aunque ambos traten el mismo tema.
Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del día debe elegir entre ver la vida de los elefantes en televisión, o buscar información en Internet a propósito de lo mismo. Nosotros tenemos la obligación de diseñar una página web al respecto. ¿Tomaríamos inspiración de la televisión? Quizás alguna, pero si sabemos lo que nos conviene, no pasaríamos de ahí. Por ejemplo, la tele se encuentra a un mínimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele también le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. El web apenas podría hacer eso, en condiciones estándar de conexiones de 56kb. Pero nosotros podemos crear enlaces a páginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisión, no…

La pregunta, sintetizada, es ésta: ¿qué damos al navegante para hacerle fiel a nuestros contenidos aunque tan sólo sea durante una sesión? Le damos personalización, le damos contenidos, le damos libertad, le damos ingenio, le damos belleza, le damos oportunidades, le damos buen gusto, le damos comodidad, le damos datos, le damos síntesis, le damos gráficos, le damos información detallada, le damos esquemas, le damos conocimientos en tres palabras o sabiduría en textos de tres kilómetros, le damos todo y más, le damos, en fin, lo que sea que busca. ¿Estamos en condiciones de hacer estas cosas? Más nos vale.

5.- ¿Algo más sobre el diseño web?
Es importante tomarnos el trabajo en serio al hacer una página web: redactar sin faltas y organizar la información debidamente.

Hay más cosas, cierto. El diseño enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseño. Más allá del aprendizaje técnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como decía, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseño gráfico de los sitios web, desde las imágenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un párrafo mal escrito. ¿Es que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigmáticos, pero siempre llamativos y eficientes.
Hace poco visitaba un sitio web de cierta gran empresa y terminé preguntándome si la redacción había corrido a cargo de algún narrador extranjero. El texto era breve y directo, pero cometía fallos gramaticales tan evidentes que era lo que más llamaba la atención; incluso más que el bonito y “efervescente” diseño. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarán como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.)

Miremos, analicemos, aprendamos de los demás. Es un proceso basado en la febril actividad de nuestro ratón. Tendremos que hacer clic cientos, miles de veces, antes de que el efecto de los maestros del web deje huella en nosotros. Para empezar podemos observar los estudios y casos de grandes empresas del medio como Adobe y Macromedia, que incluyen secciones ex profeso muy interesantes; y también tenemos la oportunidad de mirar las páginas de las agencias de publicidad y diseño; con frecuencia sus mejores trabajos están hechos para sí mismos, y no para sus clientes.

Después necesitas el software que interpretará tus deseos, inquietudes y talentos y les dará la forma que quieras en el mejor de los casos, de manera que puedas transferirlo todo a un servidor web abierto al público. Tampoco aquí existe acuerdo. Todo dependerá de si trabajas en modo html 1st Page 2000 es una aplicación reconocida y gratuita o WYSIWYG, cuyo espectro es también muy amplio, desde el popular y doméstico FrontPage de Microsoft, hasta los profesionales y valiosos DreamWeaver o GoLive!, pasando por los accesibles pero potentes Namo Web Editor o NetObjects Fusion…

Tampoco viene mal disponer de algún programa de diseño gráfico. De una manera elemental podemos decir que los hay de dos tipos más o menos puros, y un tercer tipo mixto. En uno de los casos se trata de aplicaciones de dibujo vectorial, es decir, aquellas que generan gráficos desde cero mediante herramientas de trazado geométrico, fundamentalmente, pero también a mano alzada; dicho de una forma más llana, hablamos de dibujos de líneas y curvas. Pero no nos confundamos. Estos programas son madre de muchas de las mejores ilustraciones que vemos tanto en la Red como en publicidad impresa y en los envases de productos cotidianos. Actualmente se asume que Adobe Illustrator es el mejor en este campo; sin embargo, compite con el clásico indiscutible CorelDraw, además de con Macromedia Freehand. Y, no obstante, existen alternativas baratas y eficientes, bien criticadas y admiradas en los medios, como ZonerDraw 4 o Xara.

El segundo de los casos cuando hablamos de gráficos es el retoque fotográfico; o lo que es lo mismo, el trabajo de diseño visual sobre imágenes que normalmente combinan fotografías reales con objetos diseñados y efectos visuales. También Adobe y Corel se disputan el pastel, de momento favorable al primero. Sus estrellas son Photo Shop y Photo Paint. Las alternativas más accesibles suelen ser Paint Sho Pro de Jasc y Ulead Photo Impact.

Una tercera opción es el software que combina retoque fotográfico y dibujo vectorial; cada vez más, ésta es una posibilidad que traen de serie todos los grandes programas, de manera que no hace falta cambiar de aplicación para mezclar los modos de trabajo gráfico.

7.- Diseño adecuado
El diseño gráfico, industrial, de identidad, debe ser adecuado al producto, persona, empresa que representa. Luego podemos entrar a debatir otros aspectos del diseño.

¿Qué significa adecuado?

El diseño es una representación formal y por tanto suele ser el primer punto de contacto entre la persona y el producto / servicio / persona.

Para que un diseño sea adecuado se disponer de la información necesaria para conocer al cliente, mercado, consumidores, producto / servicio.
Con esta información realizar los prototipos necesarios.
Desarrollar el diseño final.

Estilos Vs. Adecuación

Hay diseñadores / consultores / “gurús” que defienden un estilo frente a la adecuación del diseño a la necesidad.

El estilo sea “neutro”, “barroco”, “limpio”, “alemán”, “americano” no es más que un estilo y por tanto no puede ser el punto de partida para el desarrollo del diseño.

El punto de partida debe ser el entendimiento de la necesidad del cliente.

Las necesidades del cliente pueden depender de multitud de factores y no se pueden generalizar. Cada momento, cada región, cada canal, cada precio, cada consumidor, hace que la necesidad sea diferente.

La mejor herramienta que puede demostrar el diseñador es la comprensión y entendimiento para luego poder realizar la solución gráfica.

Diseño

La adecuación del diseño frente al estilo hace que los valores del mismo sean algo más universales y duraderos.

Es decir, si uno defiende un estilo (neutro, barroco) se puede ver comprometido por la realidad del entorno.

Los valores del diseño con los que me siento identificado suelen ser del estilo:
Ayuda.
Cumple.
Duradero.
Se integra (con las personas, sistemas, usuarios).
El diseño debe ayudar a las personas.
La ayuda puede ser de muchos tipos, puede ayudar a la gente a ganar más dinero, a leer con más facilidad, a saltar más alto, a pasar un buen rato.

El diseño cumple su función
El diseño debe cumplir la función asignada. El diseño es una “utilidad” para llegar a un fin.

Duradero.
Lo efímero nos lleva al consumismo desmedido. Tender a que el diseño sirva hoy, mañana, dentro de 10 años. Esta lección me ha llevado tiempo aprenderla.

Integrado
Este concepto hace referencia a que el diseño se ha de integrar en los procesos naturales de las personas. No hay que crear nuevos obstaculos, sino dotar a las personas de mejores herramientas.

Diseño no es diseño gráfico y no es diseño industrial

En muchas conversaciones se cita “diseño” aplicándolo sin mucho criterio a disciplinas que pasan por el diseño industrial, gráfico, identidad…

Visto desde fuera no pasa nada, pero desde dentro es como si hablando de deportes se citara el futbol, las barras paralelas y la natación como si fueran la misma cosa. Supongo que una cosa es ser espectador de sillón y otra subirse a una barra paralela a dar dos mortales.

Diseño gráfico. Comunicación
Color. Forma. Tipografía. Imágenes.

Diseño industrial. Producto.
Procesos industriales. Ergonomía. Materiales.

“Diseño”. Proceso “creativo”.
El proceso creativo de resolver un problema se puede llamar “diseño” pero es un término tan vago que por lo general no quiere decir nada.

Buscar soluciones sin ataduras

El diseño debe adecuarse a la resolución del problema, evitando que un estilo nos condicione una forma de pensar o buscar soluciones.

8.- Diseño Web. Problemas generales
Los princiapales problemas que nos podemos encontrar a la hora de decidir el diseño para nuestra web.

Uso de Flash

Las Facilidades y Utilidades que presenta flash son innumerables a la hora de interactividad, e impacto visual. Por otra parte la interactividad mejora notablemente en conexiones de cliente/servidor en sus últimas versiones, desafortunadamente las webs 100% flash pueden traer algunos problemas en la incorporación a buscadores.

Interactividad

El diseñador a la hora de buscar una solución a la interactividad deberá tomar en cuenta a que público está orientado el sitio. Unos de los principales problemas que se presenta en la interactividad, es la complejidad que el diseñador le agrega al site, y sin opción de volver atrás, o mostrar un mapa del site, logrando así que el usuario navegue secciones de subsecciones y quede perdido dentro de la página. Una página deberá ser lo que se llama APT (a prueba de tontos) así logra el objetivo deseado, que el usuario encuentre su búsqueda.

Incompatibilidad

En este tema entramos en una dura lucha entre los exploradores más famosos del mercado, pero a la hora de ser útil en este rubro, se puede invocar a flash ya que se ejecuta con su proyector y muy rara vez tendrás problemas. Hay que tener mucho cuidado cuando se hacen páginas dinámicas, con php, asp, etc… Y también con los CSS que se va a incluir en la hoja de estilo, esto te puede traer algunos dolores de cabeza ya que los exploradores interpretan diferente y algunos dejan pasar de largo código y otros no, o definen código diferente. Entonces ahí se entra en una disputa no solo con el cliente que quiere que su sitio se vea en todos los navegadores, sino también con uno mismo al intentar hacer que las cosas funcionen en varios navegadores. Una solución viable es conocer a fondo los exploradores mas usados en el mercado, y saber como interpretan código.

Formularios Web

Estoy seguro que a la mayoría le molesta completar formularios Web. Estos mismos si bien son útiles, pueden lograr que un usuario deje de hacer su consulta y se retire del sitio. En mi opinión estos formularios deben ser absolutamente claros y concisos, y por supuesto evitar hacer preguntas inútiles, sin olvidar que el formulario debe ser corto. (Preferencia general de los usuarios). Es útil configurar una auto respuesta para que le quede al usuario un comprobante de lo consultado, ya que este mail puede causar un visita futura.

Uso desconsiderado de Ventanas

Actualmente nos encontramos invadidos por las publicidades en pop-ups, evite el uso de pop-ups en el sitio, primero porque ya los exploradores más vendidos traen una herramienta para bloquearlos y resulta molesto para el visitante tener que activarlo para ver el material que busca.

9.- Conclusión a la introducción al diseño web
Últimos apuntes de interés para el diseño de páginas web.

¿Existe vida más allá de los gráficos estáticos?

En realidad sí. La opción más común es Flash de Macromedia, que permite crear películas realmente complejas e interactivas combinando ilustraciones embebidas, gráficos vectoriales, sonidos y ActionScript, el lenguaje de comandos específico de Flash, amén de otras posibilidades muy bien conocidas. Adicionalmente está disponible el formato vectorial SVG, del que es accesible un manual en Desarrollo Web.

Conclusión

En conclusión, el trabajo del desarrollador web (esa especie de alquimista obligado a dominar y combinar variables tan dispares, y a veces de apariencia incompatible, como la usabilidad y el atractivo de cara al usuario, y la efectividad técnica de cara a la empresa que paga sus honorarios, como por ejemplo en el caso de tiendas on-line), este trabajo, decía, es un proceso largo que requiere un enorme grado de instrucción y aprendizaje técnico, pero también generosas dosis de intuición y anticipación. A fin de cuentas, la Red muta y crece cada poco tiempo, y no podemos quedar atrás. Buena suerte.

Por dónde continuar

En DesarrolloWeb.com se ha publicado otro manual de diseño que seguro que resultará interesante para aquellos que quieran profundizar en el tema: Curso práctico de diseño web.

Podemos concer algunos programas interesantes para el diseño en la categoría de diseño de la sección de programas.

También tenemos otros contenidos sobre diseño clasificados en nuestro directorio, donde encontraremos otros manuales, categorías, artículos y enlaces a otras webs.

Esperamos que esta introducción al diseño haya resultado interesante.

Por medio de este artículo estoy compartiendo con todos los interesados las diapositivas de la conferencia que realicé el 25 de febrero de 2012 en la Ciudad de México, para el evento Mejorando.la/conferencia. En ese segundo día del evento hablé sobre el diseño web para dispositivos móviles, un tema que tiene mucha transcendencia en estos momentos.
La web estuvo tradicionalmente dominada por los ordenadores de escritorio, tanto laptop como desktop. Sin embargo la tendencia actual hace suponer que en 2014, osea, dentro de muy poco, habrá más dispositivos móviles conectados a Internet que ordenadores con sistemas operativos tradicionales. Por ello, y por muchos otros motivos que explico en la conferencia, para nosotros desarrolladores nos resulta especialmente importante actualizar nuestras técnicas de diseño y maquetación, de modo que los resultados que obtengamos sean compatibles también con la web móvil.

Ante el planteamiento explicado en el párrafo anterior, nace esta conferencia en la que pretendo mostrar cuáles son las corrientes de diseño más actuales que nos permiten encarar un desarrollo que sea compatible con la web en movilidad. Para explicar todo ello con el detalle que nos permite la duración limitada de la exposición, se desarrollaron los siguientes puntos:

1) Importancia de la web móvil
Donde mostramos por medio de una serie de gráficas hasta que punto la web móvil es importante y le va ganando terreno a la web focalizada para ordenadores de escritorio.

2) Características y usabilidad del diseño móvil
Cuáles son las características que se suponen deseables para las webs bien construidas para dispositivos móviles.

3) Documentos HTML optimizados para móviles
Un rápido vistazo a los elementos que deben tener las páginas web optimizadas para dispositivos móviles y que nos permiten cambiar la forma como éstos interpretan una página web.

4) Responsive Web Design
Este es el item más relevante de la exposición, en el que se explica el concepto Responsive Web Design, que propone hacer sitios web que se ven correctamente en todos los dispositivos y ordenadores de escritorio. Se repasan diversos elementos adicionales como las CSS3 Media Queries, one web, imágenes fluidas, etc.

5) Recursos útiles: Frameworks y librerías para el diseño y animación en la web móvil
Un recorrido a algunos de los recursos más destacables para hacer diseño web y animación para dispositivos móviles y para implementar las bases del Responsive Web Design. En este punto se comentan desde frameworks CSS preparados para diseño web móvil (algunos que se basan en Responsive Web Design y otros que se quedan a medio camino), librerías Javascript para creación de sitios enfocados para móviles, pollyfils para implementar Media Queries en navegadores que aun no las soportan, librerías para hacer imágenes fluidas, softwares para animación en móviles, etc.

En definitiva, mucho material para poco tiempo de charla. Con ello se explicó muchas veces con demasiada velocidad, pero sin dudas lo iremos viendo en DesarrolloWeb.com con más detenimiento en diversos artículos.

El vídeo de la conferencia se puede ver en un artículo publicado aquí en DesarrolloWeb.com.

El PDF con las transparencias lo he puesto a disposición en el siguiente enlace: Slides de la conferencia de diseño web móvil.

11.- La importancia de la web móvil
Algunos datos de interés que nos pueden motivar para aprender a diseñar webs para dispositivos móviles.

A la hora de diseñar un sitio web cada día debemos tener más en cuenta que esté optimizado también para móviles. En este artículo pretendo ponerlo de manifiesto a partir de una serie de informaciones que seguramente nos servirán a todos.
Muchos de los datos que voy a dar serán de sobra conocidos por los lectores, quizás alguno de ellos resulte más revelador, pero en realidad hoy pocas personas desconocen que la web móvil está tomando mayor fuerza cada mes que pasa. Quizás aun menos de los lectores carezcan en la actualidad de algún tipo de dispositivo móvil, con el que poder acceder a Internet, ya sea smartphone o tablet, con lo cual todavía les resultará más patente la necesidad de hacer un contenido web que se vea correctamente en todos los aparatos que puedan llegar a consumirlo.

En el momento de escribir estas líneas DesarrolloWeb.com no tiene un diseño optimizado para móvies, pero lo tendrá en breve! No obstante, eso no quiere decir que yo como director del proyecto piense que no se debe diseñar para móviles, muy al contrario. Al hacer este estudio de diseño web para dispositivos, que vamos a ir publicando en diversos artículos, me he terminado de convencer de esta necesidad y tengo un compromiso conmigo mismo de cambiar la situación. Espero que a vosotros también os convenza de ello.

El desarrollo tecnológico y el hardware dominador de cada década
A lo largo de las pasadas décadas diversos sistemas han tomado fuerza puntual, para dejar paso luego a distintos tipos de máquinas más avanzadas y por tanto con mayores capacidades de procesamiento o mayores posibilidades de penetrar en el mercado de consumo.
En la siguiente gráfica se puede ver retrospectivamente la historia de los equipos informáticos para la computación a lo largo de su relativamente corto periplo entre nosotros. Podremos comprobar como cada década más o menos existe un dominador del mercado.

La fuente de esta información es Morgan Stanley y en el estudio nos muestran que en realidad la etapa dominada por los dispositivos ya pasó. De hecho, aun no sabemos qué tipo de hardware va a dominar la presente década o si simplemente los dispositivos van a continuar creciendo sin definirse otro formato de máquina para la computación.

Pero la siguiente gráfica, obtenida del mismo estudio de Morgan Stanley, es todavía más reveladora.

Como se puede ver, tanto Internet para ordenadores de escritorio como Internet para teléfonos móviles está en crecimiento. Sin embargo, debido las pendientes de ambos usos de la Red, en un breve espacio de tiempo el número de usuarios de la Internet Móvil habrá superado al de los usuarios de ordenadores de escritorio. El cruce entre las dos líneas de crecimiento se prevé para 2014. No falta nada!

Importancia de la optimización de sitios web para móviles
Hay otra infografía que también nos ofrece unas gráficas interesantes, sobre todo para quienes nos dedicamos a hacer webs, para ver hasta qué punto trae fuerza este crecimiento de usuarios de Internet en movilidad. Se llama Crecimiento de la importancia de la optimización web para móvil y de ella he extraído otras imágenes sobre las que deseo llamar la atención.

Esta primera gráfica no nos dice demasiado. Efectivamente, el crecimiento supera un 1000% en un año y medio, aunque no deja de ser un todavía pequeño porcentaje (7%) del tráfico en general. Claro que la gráfica termina en octubre de 2011 y continuando esa tendencia, durante 2012 cambiará bastante. Sin embargo, cabe dar una mayor atención a los siguientes datos que nos aporta el estudio.

La imagen habla por si misma, pero por concretar alguna cosa, vemos que del top 500 de Alexa, solo aproximadamente el 22% de los sitios tienen un sitio optimizado para dispositivos móviles. Si nos limitamos a los comercios online, menos del 5% tienen un sistema de compras construido pensando en la Internet Móvil. Esos datos contrastan con los siguientes de la infografía, en los que vemos hasta qué punto una versión para móviles provoca un mayor grado de satisfacción del usuario, así como una tasa de retorno más elevada. El 85% de los usuarios se sentiría más comprometido con un comercio online optimizado para móviles y el 51% sería más favorable a hacer negocios con un sitio que tuviera versión para dispositivos en movilidad.

Conclusión
Podríamos aportar infinidad de datos estadísticos por los cuales convencernos para actualizar nuestros conocimientos para la web móvil. Quizás estaría un poco de más, puesto que realmente todos nos hacemos a la idea que cada día el mundo de los dispositivos en movilidad va ganando fuerza.
No es una cuestión de dificultad, como veremos en adelante, pues con los conocimientos que ya tienes te resultará muy sencillo llegar a entender las particularidades del diseño para la web móvil. Tampoco es una cuestión de dejar de lado a los ordenadores de escritorio, para centrarnos exclusivamente en los dispositivos móviles, sino en hacer las cosas de manera que funcionen correctamente en cada uno de los sistemas que pueden consumir un sitio web. Existen diversas vías para ello y con diversas filosofías. También es algo que estudiaremos con calma en lo sucesivo.

Quizás sí es una cuestión de tiempo, pues tanto lo necesitarás para reciclar tus habilidades, como lo deberás invertir para producir sitios con esos detalles ,que los optimicen atendiendo a las características de cada dispositivo. El tiempo es algo que te pertenece y no te podemos regalar, pero al menos sí vas a tener todo el apoyo de DesarrolloWeb.com para conseguir los objetivos y para ello estaremos publicando en los próximos meses mucha documentación que te servirá para aprender todo aquello que necesitas para comenzar a desarrollar webs en distintos tipos de dispositivos.

De momento este artículo se queda por aquí. Esperamos al menos haber provocado tu interés para aprender a diseñar webs para móviles. Por supuesto, que esas ganas de aprender se transformen en un breve espacio de tiempo en conocimientos que te ayuden en tu día a día como desarrollador.

12.- Características del uso de la Internet Móvil
El uso de Internet en dispositivos móviles es diferente del uso que se realiza en ordenadores personales.

En el artículo anterior explicamos algunos detalles acerca de la necesidad y urgencia que tenemos los desarrolladores de reciclar nuestros conocimientos, de modo que podamos comenzar a diseñar webs que se comporten bien en dispositivos móviles. Realmente no dejan de ser una serie de datos estadísticos, con la simple intención de motivarnos en el aprendizaje.
En este artículo vamos a entrar a comentar algunos otros datos interesantes, sobre las características del uso de la Internet Móvil, pero que no dejan de ser meramente teóricos. Por esa razón todavía vamos a retrasarnos antes de ponerse manos a la obra. Cuento con vuestra paciencia. Quizás lo que voy a comentar en las siguientes líneas no dejen de ser verdades que como usuario de un smartphone ya habrás experimentado, no obstante siempre está bien traerlas a la palestra y concretarlas en nuestro conocimiento.

¿Quién no ha usado su teléfono móvil mientras que camina por la calle? Si nunca has cometido esta temeridad, pues felicidades por no estar tan enganchado a la tecnología. Quizás tu esperanza de vida sea mayor que la mayoría de tus colegas, pero con más razón tendrás que prestar atención a lo siguiente. Pasear con móvil en la mano es un claro ejemplo de cómo el uso de los móviles es distinto al uso de Internet en ordenadores de escritorio, pero hay más. A continuación voy a dar tres detalles que a mi juicio condicionan sobre manera el uso que las personas hacemos de los dispositivos móviles.

Generalmente estás haciendo otras cosas
Cuando estamos trabajando con un ordenador de escritorio, ya sea un laptop o desktop, generalmente estamos totalmente centrados en lo que está pasando por la pantalla. Al trabajar con el ordenador personal solemos estar sentados cómodamente en una silla y una mesa y con todos los sentidos en nuestra máquina. Sin embargo, el uso de Internet en un dispositivo móvil no suele ser así. Las personas cuando usamos los móviles estamos haciendo mil cosas diferentes. Los hay que usan Internet en sus dispositivos de movilidad mientras comen, mientras ven la televisión o mientras caminan por la calle.
Con ello, queda patente que nuestros sentidos encuentran estímulos de la vida real mientras se conectan con el mundo online. En muchas ocasiones es hasta más crítico para ellos lo que están viendo en la pantalla de la TV que los artículos que están simplemente hojeando en su móvil. Es más importante el plato que tienen delante que las actualizaciones de Facebook de sus amigos, que están revisando mientras come.

En la anterior imagen podemos ver un dato interesante recogido en una infografía de Microsoft Tag. El 86% de los usuarios de móviles se conectan a Internet mientras ven sus programas de televisión. A vista de ese dato queda patente que debemos construir webs para móviles bajo otra perspectiva de la que se usa para los ordenadores de escritorio.

Pero volviendo al caso de caminar usando el móvil, pensemos que una situación como esa, no solo conlleva que el usuario esté fijándose en otras cosas, como un semáforo en rojo, cruzarse con otras personas sin atropellarlas ni ser atropellado, etc. También puede perder el foco de nuestro sitio web por otros asuntos como recibir el reflejo del sol sobre la pantalla del teléfono o la llegada de avisos en aplicaciones de mensajería.

Se conectan para ver algo concreto, con menor tiempo para consumirlo
Como segundo detalle cabe destacar tenemos la objetividad del uso de la Internet móvil. Es decir, las personas que se conectan a Internet en un dispositivo de movilidad no lo hacen sencillamente porque quieran pasar el rato. Bueno, quizás en muchos casos así sea, pero generalmente desean obtener algo concreto. Si fuera para hacer largas horas de ocio, quizás preferirían conectarse en sus ordenadores, con una gran pantalla y unas interfaces para entrada de datos más cómodas, como el teclado.
El caso es que, en muchos casos, nos conectamos a Internet porque queremos saber la dirección concreta de un lugar al que nos dirigimos. O bien porque no sabemos llegar a una dirección y queremos ver la ruta en un mapa. Quizás simplemente porque queremos el teléfono de algún proveedor o porque queremos “matar” 10 minutos de espera, comunicando con nuestros amigos y seguidores, antes de sentarnos en la silla de tortura del dentista.

En definitiva, casi siempre que nos conectamos a Internet en el móvil es porque queremos hacer algo concreto, pero lo que es más importante, queremos una respuesta rápida, porque nuestro tiempo para obtenerla también es más reducido. Por ello, al construir un sitio para móviles no tenemos que pensar que nuestro usuario tiene tiempo de navegar por 10 páginas antes de encontrar aquello que busca. A ser posible, se lo tenemos que entregar de una manera rápida y objetiva.

Velocidad de conexión y planos de datos limitados
Hoy, afortunadamente, la velocidad de conexión a Internet por telefonía móvil es razonablemente buena, no obstante, las conexiones de Red de nuestra oficina u hogar continúan siendo sensiblemente mejores. Eso es algo que debemos tener en cuenta a la hora de planificar un sitio web optimizado para móviles. Unido a la objetividad que sería deseable en la respuesta, según el punto comentado anteriormente, hace que nuestro sitio para móviles se deba diseñar ajustando al máximo la cantidad de bytes a transferir en los accesos.
Además, los planos de datos para los teléfonos móviles también tienen algo que nos debe motivar a reducir al máximo el peso de las webs enfocadas a este tipo de dispositivos de acceso. No es otra cosa que la cantidad de transferencia mensual que tu paquete de datos te disponibiliza. Aunque las operadoras en muchos casos se empeñen en decirnos cosas como “ofrecemos internet ilimitada de 500Mb”, la realidad es que hacen más gracia que otra cosa.

Sobre ese asunto de la Internet Móvil limitada hay unas diapositivas que tienen incluso un par de momentos de humor negro, con los que uno no sabe si reír o llorar. Son de donde he extraído la imagen anterior y están accesibles para cualquier interesado en la materia. El mencionado trabajo se llama “El final del ancho de banda ilimitado”.

Conclusión
No me cabe duda que todavía habrá otros patrones que ilustren el comportamiento típico de los usuarios que se conectan a Internet en sus dispositivos móviles, sin embargo, los vistos en este artículo nos dan ya una buena idea de cómo las costumbres difieren de las que venimos desempeñando en ordenadores tradicionales.
Con estas ideas y nuestro sentido común estoy seguro que cualquier lector podría hacerse ya una lista de buenas ideas para desempeñar su próximo sitio web optimizado para móviles. No obstante, continuaremos en esta línea en el siguiente texto, que dedicaremos a explicar las reglas de usabilidad más importantes a la hora de diseñar webs enfocadas a dispositivos móviles.

13.- Taller de Responsive Web Design
Vídeo del taller de Responsive Web Design emitido en directo el 24 de abril de 2012, tratando el diseño adaptable a todos los dispositivos.

Responsive Web Design es una corriente de diseño que hoy resulta revolucionaria pero que a buen seguro en el futuro será algo de lo más normal. Se trata de un modelo de trabajo por el que se diseñe un único sitio que se adapte perfectamente a todos los dispositivos que puedan consumirlo, desde ordenadores de escritorio a netbooks, tablets, telétonos móviles, televisores, etc. En definitiva, se trata de construir la web para que se vea correctamente y aproveche las particularidades de todo dispositivo que hoy exista, o pueda existir en el futuro.
Bajo esta temática tenemos un material muy interesante para todos los lectores de DesarrolloWeb.com, en un taller de Responsive Web Design emitido en directo el día 24 de abril de 2012 y que ahora puedes ver en diferido en este mismo artículo de DesarrolloWeb.com.

En el taller se vieron de modo general varias de las claves del diseño adaptable, como ejemplos de sitios que funcionan optimizados para diversos dispositivos, atributos CSS que nos sirven para poder adaptar los elementos a varias resoluciones de pantalla, así como las mediaqueries e CSS3, que serían el colofón para la implementación del responsive.

También se nombraron algunos paquetes y librerías para facilitar la vida de los desarrolladores, entre otras muchas cosas. Finalizó el evento con la típica ronda de preguntas, donde los asistentes masacraron literalmente al ponente con muchas dudas interesantes para todos los que queremos hacer la web de la última generación, la Internet Multidispositivo.

El ponente que estuvo a cargo de esta charla fue @Wakkos, experto convencido de la web como un único ente que tiene que visualizarse correctamente en todos aquellos medios donde se pueda llegar a consumir. El conductor de la charla fue @alvarezmiguelan, el director de DesarrolloWeb.com y el que os escribe estas líneas.

Sin más, os dejo con el webcast de Responsive Web Design, que estoy seguro encantará a todos los que nos dedicamos a construir sitios web.

{youtube}http://www.youtube.com/watch?v=sCvhhBySYzE{/youtube}

Esta es la primera de las tres sesiones gratuitas que vamos a impartir en DesarrolloWeb.com sobre Responsive Web Design, en la que hemos repasado algunos aspectos teóricos y diversos aspectos prácticos sobre las hojas de estilo en Cascada.
A lo largo de una hora y 20 minutos Daniel Martínez nos ofrece diversas guías para comenzar a pensar en Responsive cuando encaramos el diseño de una web. El objetivo es que se adapte a todos los dispositivos que puedan visitarla, independientemente de sus características. Además, yo ofrezco una introducción en la que explico cuál es el objetivo de estas tres sesiones y la dinámica que vamos a implementar para ellas y en el curso que realizaremos en breve.

En cuanto a contenido sobre Responsive Web Design, aunque esta ha sido una sesión mayormente teórica, el ponente nos ha dejado diversos trucos y análisis de las posibilidades de Responsive, como son los siguientes:

Nuevas maneras de navegar por Internet, cómo debemos encarar el trabajo de diseñar una web en la Internet Multidispositivo
Cómo utilizan Responsive sitios web de referencia y los diferentes layouts que se adaptan a dispositivos según su anchura
Estilos CSS para adaptar las cajas a distintas anchuras, min-width y max-width
Diferencias entre Float e Inline-block
Modelo de caja en CSS3 y mejoras con el atributo box-sizing
Trucos para compatibilizar algunos atributos de CSS en Internet Explorer
Luego pasamos a una ronda de preguntas en la que los asistentes participaron con diversas preguntas en las que Daniel que fue aportando muchas otras ideas y trucos relacionados con el contenido visto previamente.
Entre las preguntas que se realizaron se tocaron asuntos relacionados con el modelo de caja, resoluciones necesarias a tener en cuenta al hacer responsive, compatibilidad de CSS con exploradores viejos, tamaños de imágenes para distintos dispositivos, etiquetas semánticas del HTML5, proporciones deseables al asignar espacios para maquetar una web, etc.

En definitiva, se realizaron diversas aproximaciones a la temática del Responsive Web Design que servirán para poder comprender mejor esta nueva manera de concebir el diseño de un sitio web. Aclaramos por último que estas son nuestras primeras pruebas en la retransmisión de aulas en vívo a través de GoToMeeting, que salieron bastante dignas aunque hay diversos aspectos que se mejorarán en siguientes entregas.

Muchas gracias a todos por vuestra atención y recordar que para más información de nuestro curso de Diseño web adaptable a todas las plataformas podéis consultar la siguiente URL:

http://www.escuela.it/cursos/responsive-web-design/

Por último, antes de dejaros con la grabación, proporcionamos un enlace para descargar el código de los ejemplos realizados por Daniel a lo largo de este vídeo.

{youtube}http://www.youtube.com/watch?v=XlmylrWlENU{/youtube}

15.- Vídeo: Medidas e imágenes relativas en Responsive Web Design
Vídeo que trata sobre medidas relativas en las CSS e imágenes flexibles para realizar Responsive Web Design.

En este vídeo vamos a seguir con las sesiones sobre Responsive Web Design, abordando la manera de hacer sitios que se adapten a las características de cada dispositivo. Es la segunda entrega de unas clases impartidas por el diseñador Daniel Martínez @Wakkos.
A lo largo de más de una hora, veremos muchas cosas que, estamos seguros, serán de mucha utilidad a todos aquellos que se dedican al diseño web en cualquiera de sus expresiones. Esto es porque, en realidad, aunque todo el material que se va a ofrecer está pensado para hacer webs adaptables a los dispositivos, son básicamente consejos de hojas de estilo en cascada que todos debemos conocer.

Para profundizar en este nuevo modelo de diseño web, Responsive Web Design, hablaremos sobre algunos de los asuntos más consultados, como las unidades CSS o las imágenes flexibles.

Nota: Estas sesiones están siendo realizadas en vivo entre un grupo de participantes reducido, aunque la grabación está mediante esta entrega a disposición de todos los interesados en aprender diseño web multidispositivo.
Comenzamos explicando qué son las medidas relativas de las CSS, las conocidas por las siglas “em” y las medidas de porcentaje. Estas medidas son las más básicas en los diseños “responsive”, sin embargo y aunque debemos amar lo relativo y odiar lo absuluto, no debemos olvidarnos de otras medidas como los píxeles, que nos servirán para hacer cosas como asignar la anchura máxima o mínima a un elemento.

Luego explicaremos muchos aspectos relacionados con las unidades y cómo aplicarlos a tamaños de fuentes tipográficas y a tamaños de los elementos. Veremos que las unidades relativas basan su tamaño en una proporción del contenedor padre, y cómo podemos definirlas de un modo que nos resulten cómodas de calcular. Aquí, calculadora en mano, se explicarán algunas fórmulas que nos harán entender cómo se deben especificar las unidades “em”, junto con algunas referencias destacadas a webs que tratan sobre las medidas relativas y el uso de las mismas en el Responsive Web Design.

Luego se verá de qué manera trabajar con imágenes flexibles, es decir, que se redimensionan para ocupar todo el espacio disponible en el contenedor. Se explicará de qué manera asignar las dimensiones de las imágenes y cómo evitar algunos efectos indeseables como el pixelado que se produce al estirarlas.

A continuación se pasará a la ronda de preguntas donde se tocarán aspectos de diverso calado, como presentaciones “slider” adaptables, librerías para adaptar imágenes, frameworks CSS, imágenes de background, sprites CSS, el modo de definir medidas relativas sin perder la noción del nivel de anidación de etiquetas, la posibilidad de usar medidas absolutas en algunos casos en diseños responsive, etc.

{youtube}http://www.youtube.com/watch?v=r77y7OwkbhE{/youtube}

16.- Webcast de Diseño Web
Grabación en vídeo de la emisión en directo sobre diseño web abordando el proceso desde cero, Wireframing, clientes y formatos de trabajo, concepción estética.

Estamos realizando una aproximación al diseño web de la mano de profesionales del mundo del diseño, en una serie de emisiones en directo en DesarrolloWeb.com. Hemos comenzado con este vídeo que ahora os presentamos, en el que hemos abordado el proceso de diseño desde cero.
En la transmisión, realizada en directo el pasado 4 de julio de 2012, estuvimos charlando de muchas de las tareas que se plantean en los primeros pasos de un diseño web. Nos hemos centrado en el prototipado de la web y cómo presentarlo al cliente, lo que se denomina en lenguaje de los diseñadores el “wireframe”.

A lo largo de casi dos horas de programa hemos explicado cómo debe de ser el prototipo de una web que sería presentado al cliente para su validación, junto con muchas guías de trabajo con el cliente en los primeros pasos de todo encargo que puedan realizarnos. Asimismo, hemos abordado muchos detalles del trato con el cliente, para llevar negociaciones en vías de conseguir que nos adjudiquen un trabajo. Hablando de estos asuntos nos hemos entretenido un buen rato, y es que existen muchas personas que tienen dudas al respecto sobre la operativa que sería más aconsejable de implementar.

También hemos charlado bastante sobre cuáles son las tendencias de diseño que actualmente están protagonizando la web, como el minimalismo o el Responsive Web Design. Temas que dan mucho para hablar y de los cuales casi todos tenemos una opinión, pues ahí se entra mucho en los gustos de cada persona. Lo que sí existe es una línea de trabajos creados por ilustres diseñadores de los cuales hemos comentado alguna que otra propuesta.

El webcast ha corrido a cargo de Daniel Martínez, @Wakkos, que nos ha ofrecido una vez más su animada participación y sus siempre útiles consejos y guías de diseño. Además, en esta ocasión hemos tenido el placer de contar con dos profesionales del mundo del diseño web que se han ofrecido a abrir la emisión en directo y resolvernos alguna de las preguntas más habituales que todos los que no pertenecemos tan directamente al mundo del diseño nos hacemos.

Los dos colaboradores que nos han acompañado, aportando sus experiencias en la antesala de este webcast, son Luis Terán @luteran78 y Erick Ojitoz @ErickOjitoz, que han ofrecido su visión en temas de diseño y desarrollo como los CMS, cuáles son los elementos más imporantes en todo diseño web, las herramientas online que forman parte de sus favoritos y los trabajos de referencia en los que ellos se inspiran.

Sin más, os dejamos con este vídeo que está repleto de joyitas y cantidad de información útil para las personas que se dedican al diseño web, pero también para cualquier freelance en general. Esperamos que disfrutéis de la emisión tanto como nosotros hemos disfrutado realizándola.

En breve tendréis más novedades, si queréis!! para ello, como proponemos al final del vídeo, os animamos a tuitear a @Wakkos o a @deswebcom para decirnos si os apetece que realicemos otro webcast sobre este tema, y sobre los asuntos que os gustaría que abordásemos en la siguiente emisión. Os lo agradeceremos sinceramente 🙂

{youtube}http://www.youtube.com/watch?v=apl3zblFQmw{/youtube}

17.- Diseño web adaptativo
Cómo adaptar tus diseños para reproducirlos con éxito en distintos formatos y dispositivos.

La cosa empezó con un artículo de Ethan Marcotte llamadoResponsive Web Design, en la revista “A List Apart”. De forma resumida, el artículo proponía una alternativa viable en un ambiente de dispositivos, navegadores, tamaños y orientaciones de pantalla en permanente evolución, mediante la creación de sitios web flexibles, fluidos y adaptativos. En lugar de dar respuesta a las necesidades actuales de una versión web de escritorio adaptada a las resoluciones de pantalla más corrientes combinada con una versión específica para móviles (que en muchas ocasiones es “específica” para un tipo único de móvil), su idea consistía en abordar el problema de otra forma: utilizar presentaciones flexibles y fluidas que se adapten a prácticamente todas las pantallas.

Conceptos básicos

Hay tres características técnicas que suponen el eje de un diseño web con estas capacidades:

Consultas de tipos de medios ylistenersde consulta de tipos de medios
Un diseño de página flexible, basado en cuadrícula, que utilice tamaños relativos
Contenidos e imágenes flexibles aplicando cambios de escala dinámicos o mediante CSS

Los diseños web realmente adaptativos exigen la implementación de estas tres técnicas.
El punto clave es la adaptación a las necesidades del usuario y las capacidades del dispositivo. Supongamos un usuario de un dispositivo móvil que visita nuestro sitio web con una pantalla pequeña. Tener en cuenta las necesidades del usuario no significa simplemente adaptar el contenido al tamaño de la pantalla, sino considerar también lo que va a querer hacer este usuario en primer lugar cuando visite nuestro sitio web y después mostrarle el contenido en función de ese criterio. Quizás tengamos que presentar la información en un orden distinto. No debemos suponer que el usuario no va a querer acceder a toda la información del sitio web porque utiliza el móvil. Es posible que tengamos que cambiar el tipo de letra o las áreas de interacción para dar una mejor respuesta en un entorno de pantalla táctil. Todos estos factores influyen en el que denominamos “diseño adaptativo”.

Aunque los dispositivos móviles están alterando el panorama actual de las pantallas, con la aparición de pantallas cada vez más compactas, no debemos pasar por alto lo que está ocurriendo en el otro extremo del espectro. Las pantallas también son ahora cada vez más grandes. El que tengamos que dar servicio a ambos segmentos no puede obligar a los diseñadores a renunciar a innovar en alguno de ellos.

Consultas de Medios (Media Queries)

Desde la aparición de CSS 2.1, las consultas de medios se vienen utilizando para aplicar reglas CSS específicas para pantalla e impresora. Los tipos de medios reconocidos eran:

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”printfriendly.css” media=”print” />

¡Y aquí se acaba todo! Por suerte, el W3C ha mejorado en CSS lasconsultas de medioscon lo que ha dado un enorme paso adelante.

Hoy en día podemos utilizar las consultas de medios para adaptar estilos a capachttp://www.desarrolloweb.com/webcast-html5.phpidades concretas y aplicar distintos estilos en función de las capacidades que nos devuelve la consulta. Podemos incluso combinar consultas que busquen la existencia de algunas características concretas, utilizando operadores semánticos como AND y NOT. Entre esas características se incluyen la anchura, altura, anchura máxima, altura máxima, altura del dispositivo, orientación, formato de pantalla, resolución y algunas más.

Hay tres maneras de implementar las consultas de medios:

Utilizar la regla @import para importar reglas de estilo desde otras hojas de estilo:
@import url(style600min.css) screen and (min-width: 600px);
Colocar las consultas de medios directamente en la hoja de estilo, como se ve en el ejemplo siguiente, que es la manera más frecuente de hacerlo:
#nav
{
float: right;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width: 200px;
}
#nav li
{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
Incluir una consulta en un atributo de medios en un vínculo a una hoja de estilos externa:
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 800px)” href=”style800.css” />

Dada la naturaleza de CSS (en cascada), los estilos por defecto se definen al principio, seguidos de las reglas y estilos que satisfacen la consulta de medios. Los estilos definidos al principio se aplicarán en cascada sobre los estilos coincidentes con la regla, pudiendo sobrescribirse por completo.

Las imágenes siguientes son ejemplos de un diseño web adaptativo que emplea consultas de medios. En las imágenes 1 y 2 se muestra un escritorio con Internet Explorer 9 en dos resoluciones distintas. En la imagen 3 se ve el mismo sitio adaptativo en un Windows Phone, también con Internet Explorer 9.

Imagen 1: la navegación aparece a la izquierda

Imagen 2: en una pantalla a 800×600, la navegación se pasa a la parte superior

Imagen 3: la misma página web en un Windows Phone

Si quieres ver más ejemplos de diseños web adaptativos que aprovechan plenamente la potencia de las consultas de medios, puedes visitarhttp://mediaqueri.es/, un sitio web para entusiastas que puede llegar a ser adictivo, como se ve en la imagen 4.

Imagen 4: una lista de sitios que utilizan consultas de medios

Listeners de Consultas de Medios

Dando un paso más allá con las consultas de medios, el grupo de trabajo del Modelo de Objeto CSS (CSSOM) en el W3C, ha creado también unos listeners para las consultas de medios que nos proporcionan un API para resolver los cambios en las consultas. En vez de tener que buscar cambios a intervalos regulares o cargar varias versiones de un mismo recurso, podemos utilizar esta API, por ejemplo, para descargar imágenes de un tamaño específico cuando se dispara un evento de consulta de medios.

A día de hoy, Firefox y la Preliminar de Plataforma de Internet Explorer 10 implementan listeners para consultas de medios. Puedes ver la demo “CSS3 Media Queries & Media Query Listeners” en el sitio web IE Test Drive.

Unas palabras sobre el Viewport

Cuando se hacen pruebas con consultas de medios en navegadores de móviles, se ve que, en realidad, no se están aplicando las consultas de medios correctamente. Cuando esto sucede es porque el navegador del móvil está haciendo algo en tu nombre para mostrar la página de la mejor manera posible en una pantalla más pequeña.

Así que podríamos pensar que no hay manera de saber la resolución auténtica, pero sí que hay una forma: la que nos ofrece la etiqueta META Viewport. Esta etiqueta controla las dimensiones lógicas y el factor de escala de la ventana del navegador del móvil (sin elementos de control). Si configuramos la anchura con el mismo valor que la anchura del dispositivo, podemos resolver el problema:

Entre las propiedades del viewport tenemos también los llamados “maximum-zoom” e “initial-scale”.

Cuadrículas flexibles

La presentación en formato de cuadrícula flexible es una de las piezas clave del diseño adaptativo. El término “cuadrícula”, se utiliza aquí en sentido amplio y no implica que tengamos que utilizar ninguno de los marcos de trabajo en cuadrícula posibles. Lo que quiere decir en este caso es que se utiliza CSS para el posicionamiento y descripción de márgenes y espacios y para la implementación de distintasmodalidades de presentación de página webde una manera innovadora. La estructura visual de la página y el tamaño de los textos se suelen indicar en píxeles. A los diseñadores les encantan los píxeles. A Photoshop le encantan los píxeles. Pero un pixel puede ser un punto en un dispositivo y ocho puntos en otro. ¿Cómo podemos entonces crear un diseño web adaptativo si todo se basa en píxeles? Puede que no te guste la respuesta: tenemos que abandonar los diseños y estructuras basados en píxeles y empezar a usar porcentajes o la unidad de medida em para indicar tamaños

Basando los tamaños de texto, anchuras y márgenes en porcentajes o en em (una unidad de medida basada en el tamaño del punto de la fuente), podemos conseguir reconvertir un tamaño fijo en uno variable o relativo. Esto quiere decir que vamos a tener que usar algo de matemáticas para conseguir un sistema con un tamaño de cuadrícula y texto flexibles. Pero la fórmula para calcular el valor em es muy sencilla: target ÷ contexto = resultado

Pongamos que el contexto normal del tamaño de fuente en el cuerpo de la página es de 16 píxeles. Si el diseñador indica que H1 tiene que tener 24 píxeles, podemos calcular lo siguiente: 24 ÷ 16 = 1.5

Esto da como resultado la siguiente regla CSS:

h1{
font-size: 1.5em;
}

Siempre debemos tener presente el contexto. Siguiendo con este mismo ejemplo, si tenemos un vínculo dentro de H1 que tiene que aparecer con 12 píxeles, utilizaremos el valor actual de H1 como contexto. El contexto ahora es de 24 píxeles, por lo que el cálculo de contexto para “H1 a” sería: 12 ÷ 24 = 0.5

Y el estilo CSS resultante:

h1 a{
font-size: 0.5em;
}

También podemos usar porcentajes. El algoritmo de cálculo es el mismo, pero en este caso con valores de 0 a 100 por ciento.

Las cuadrículas flexibles aplican esta estrategia. Podemos encontrar diversos marcos de diseño que nos ayudan a crear cualquier cuadrícula, comoFluid Grid SystemoFluid 960 Grid System(una versión “fluida” del 960 Grid System). Incluso más: algunos grupos dentro del W3C han remitido nuevas especificaciones para conseguir mejores cuadrículas, con más flexibilidad y resultados más útiles.

Estructura visual de cuadrícula CSS3

ElCSS3 Grid Layout(que también se conoce como Alineamiento de Cuadrícula o simplemente “Grid”), nos proporciona un sistema de cuadrícula típico basado en CSS, similar a lo que utilizan de manera habitual los desarrolladores de XAML o Silverlight. En el momento en que escribo este artículo, la especificación está en la fase de “Borrador del Editor”. Permite definir regiones en la estructura de la página, con columnas y filas, desplazamiento, espacios, márgenes interiores, plantillas de cuadrícula y otros elementos, imponiendo una independencia total entre los aspectos correspondientes al HTML y los de CSS. A diferencia de las tablas de HTML que son parte del contenido, el Grid nos permite incorporar primitivas de HTML dentro de regiones de la cuadrícula independientes del contenido real.

La combinación del Grid CSS3 con las consultas de medios es una potente solución para crear aplicaciones fluidas y adaptativas.

¿Cómo funciona el Grid? Empezamos por configurar el bloque de pantalla como “grid” (será necesario utilizar los prefijos de fabricante en CSS, ya que aún no es una recomendación de CSS3. En este momento, solo la Preliminar de Plataforma de Internet Explorer 10 soporta esta especificación, así que verás que en los ejemplos que muestro aquí aparece el prefijo de fabricante -ms-). Vamos a ver estos tres ejemplos de creación de vistas distintas en función del tamaño de pantalla. Las consultas de medios sirven para aplicar distintos estilos de cuadrícula dependiendo de la anchura.

En el primer ejemplo, el código HTML que define el contenido consiste en una cabecera y tres bloques de texto distintos (imagen 5).

Figura 5: definición del contenido del Grid
1. <div id=”mygrid”>
2. <header id=”myheader”>
3. <h1>Hello world</h1>
4. </header>
5. <div id=”block1″>
6. <h2>Lorem Ipsum section 1</h2>
7. <p>
8. Phasellus venenatis sem vel velit tincidunt tincidunt.
9. Curabitur gravida, ante sit amet [… …]
10. </p>
11. </div>
12. <div id=”block2″>
13. <h2>Lorem Ipsum section 2</h2>
14. <p>
15. Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
16. Suspendisse [… …].
17. </p>
18. </div>
19. <div id=”block3″>
20. <h2>Lorem Ipsum section 3</h2>
21. <ul>
22. <li>Curabitur ultrices tristique purus, sed pellentesque
23. magna scelerisque ut.</li>
24. <li>[… …] </li>
25. </ul>
26. </div>
27. </div>

Empezamos por colocar los bloques de contenido unos debajo de otros de manera que se puedan ver en smartphones (ver figura 6). Podemos añadir color de fondo, como se muestra en la imagen 7, para que se vea más claramente que estamos trabajando con elementos del grid.

Figura 6: código CSS para la presentación de bloques de contenido
@media only screen and (max-width : 480px) {
#mygrid {
display: -ms-grid;
margin: 3px;
-ms-grid-columns: 100%; /*one column taking full width */
-ms-grid-rows: 70px auto auto auto; /*4 rows */
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
#block1 {
-ms-grid-row: 2; /*place into row 2 / column 1*/
-ms-grid-column: 1;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
#block3 {
-ms-grid-row: 4;
-ms-grid-column: 1;
}
}

Imagen 7: bloques de contenido con colores de fondo

En el segundo ejemplo, una consulta de medios sirve para aplicar estilos definidos para tamaños de pantalla superiores a 481 píxeles (es decir, por encima de la anchura normal del smartphone). Podemos utilizar el Grid para definir dos columnas y mover los bloques a las posiciones deseadas (ver imagen 8). Los resultados se muestran en la imagen 9.

Figura 8 Definición de la presentación en pantalla más grande
@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
#mygrid {
display: -ms-grid;
-ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
-ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction
of available space*/
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 2;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 3;
-ms-grid-column: 2;
background-color: #726E6E;
}
#block3 {
-ms-grid-row: 2; /*block 3 can go into row 2*/
-ms-grid-column: 4;
background-color: #515050;
}
}

Imagen 9: un nuevo diseño con dos columnas adyacentes

El tercer ejemplo de cuadrícula se muestra en pantallas con anchura superior a 1.220 píxeles. Definimos ungridcon una cabecera ancha, que abarca varias columnas y después definimos tres columnas, cada una ocupando una parte del espacio disponible con una columna de 10 píxeles de separación entre medias (ver figura 10). Los resultados se muestran en la figura 11.

Figura 10: diseño para pantallas más anchas
@media only screen and (min-width: 1220px) {
#mygrid {
display: -ms-grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr;
-ms-grid-rows: 100px 1fr;
margin: 5px;
}
#myheader {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
background-color: #EEB215;
}
#block1 {
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color: #B2B0B0;
}
#block2 {
-ms-grid-row: 2;
-ms-grid-column: 3;
background-color: #726E6E;
}
#block3 {
-ms-grid-row: 2;
-ms-grid-column: 5;
background-color: #515050;
}
}

Imagen 11: Tres columnas paralelas con una cabecera común

La especificación Grid es una incorporación muy interesante para realizar diseños web adaptativos.

Hay otras dos nuevas especificaciones CSS que también merece la pena comentar: elFlexible Box Layout Module(Flexbox) y elMulti-column Layout Module. Ambas son demostraciones de un elevado grado de compromiso con el objetivo de crear sitios web adaptables a cualquier dispositivo y formato.

Flexbox, que en este momento es un borrador de trabajo del W3C, incorpora soporte para cuatro nuevos modos de presentación: block, inline, table, y positioned. Permite diseñar páginas complejas con posiciones relativas y tamaño constante, aunque cambie el tamaño de la pantalla.

El módulo de presentación en múltiples columnas (Multi-column Layout Module) se encuentra actualmente en fase de recomendación candidata en el W3C. Esta solución se orienta a aquellos contenidos que han de restituirse en forma de columnas y que van saltando de una columna a la siguiente (como ocurre, por ejemplo cuando se escriben textos en Microsoft Word, en varias columnas). Puedes ver un ejemplo interactivo de presentación en varias columnas en estelaboratorio.

Imágenes y contenidos multimedia flexibles

El último punto a analizar con respecto a los diseños web adaptativos es el relativo a las imágenes y contenidos multimedia flexibles. Básicamente, esta funcionalidad nos permite adaptar imágenes y otros contenidos como vídeo o similares para que se carguen de forma distinta dependiendo del dispositivo, bien cambiando de escala o bien usando la propiedad “overflow” de CSS.

El escalado en CSS es bastante fácil de implementar, tanto para las imágenes como para el vídeo. Podemos establecer el valor de anchura máxima (max-width) al 100 por ciento y después el navegador comprimirá o expandirá la imagen dependiendo del tamaño del contenedor. Podemos entregar la imagen en la mayor calidad y tamaño posible y después CSS se encargará de adaptar la imagen al tamaño adecuado.

img, object {
max-width: 100%;
}

Una alternativa al cambio de escala de las imágenes es el recorte de las mismas, con CSS. Por ejemplo, aplicando la propiedad overflow:hidden podemos recortar dinámicamente las imágenes de manera que quepan en sus contenedores si dichos contenedores cambian de tamaño para adaptarse a un nuevo entorno de pantalla.

Puede que, de todas formas, no sea suficiente con disponer de opciones para cambiar la escala de las imágenes o recortarlas mediante CSS. ¿Es realmente necesario agotar todo el ancho de banda de una conexión de móvil porque no tenemos una versión más ligera de una imagen? Si queremos dar el mejor servicio a los usuarios, debemos entender la “flexibilidad” de las imágenes como el uso de imágenes alternativas también, o incluso no utilizar imágenes en algunos casos. Algunas personas de la comunidad de diseño web han publicadosolucionesbasadas en JavaScript y cookies y podemos esperar que sigan apareciendo más ejemplos de esto, a medida que vayan madurando los diseños web adaptativos y se conviertan en la práctica estándar para la creación de sitios web de calidad.

Navegadores antiguos

¿Qué podemos decir de los navegadores antiguos que no soportan las consultas de medios? ¿Qué hacer con las versiones de Internet Explorer anteriores a IE8, que tienen problemas a la hora de aplicar escalas a las imágenes? Las soluciones en forma de polyfills nos pueden ayudar.

Resumiendo

Subirnos al carro del diseño web adaptativo no es cosa de tomárselo a la ligera. Tened en cuenta qué queréis conseguir y si tiene o no sentido ligar el diseño a una versión concreta para escritorio o dispositivo móvil.

Los diseños web adaptativos empiezan a dar ahora sus primeros pasos. Los diseñadores web van a seguir ofreciendo opiniones muy variadas y recomendarán diversas alternativas, por ejemplo empezar diseñando para móviles en primer lugar, o cómo encajar todas esas decisiones dentro del proceso de diseño, o si se deben segregar todos los componentes en cada uno de los distintos tamaños de pantalla, y así sucesivamente. Y la conversación se mantendrá mientras sigan apareciendo en el mercado nuevos tamaños de pantalla y factores de forma.

Los estándares de HTML y CSS están evolucionando para ayudar a los diseñadores de sitios web a resolver estos problemas. Está claro que habrá que adoptar algún tipo de diseño web adaptativo para dar respuesta a estos retos, y también está claro que los estándares seguirán evolucionando a medida que se vayan descubriendo alternativas mejores para dar cobertura a un mundo tan variopinto de navegadores y dispositivos como el que tendremos probablemente.

Os indico aquí algunos recursos adicionales:

18.- Diseño web con crowdsourcing
¿Qué es el crowdsourcing? Detallamos algunos ejemplos de su utilización en el diseño de webs.

Uno de los aspectos principales a resolver en el desarrollo de sitios web es el del diseño gráfico, lo que supone que, en la mayoría de los casos, sea necesario que un programador y un diseñador trabajen en conjunto. Esto muchas veces puede ser una limitación para los desarrolladores freelance, que tienen que crear webs para clientes y deben encontrar un diseñador disponible. El crowdsourcing es una buena herramienta para resolver este problema.

¿Qué es el crowdsourcing?
Para quienes no lo conocen, el crowdsourcing es una modalidad de trabajo online que permite que cualquier persona con una necesidad o problema a resolver pueda realizar una convocatoria abierta a una comunidad grande y anónima de personas, de forma tal que esa comunidad brinde una solución, de manera rápida y económica. Es en el mundo del diseño donde el crowdsourcing ha probado ser de mayor utilidad, y en la actualidad es común que se utilice para el diseño de logos, banners, webs, papelería y más.
Pero el crowdsourcing no nació del diseño, sino del mundo de la programación. Más concretamente, del software de código abierto u open source. Jeff Howe, editor de la revista Wired y especialista en crowdsourcing, señala que el crowdsourcing es “la aplicación de los principios del open source a campos por fuera del software”. También lo define, de forma más descriptiva, como “el acto de tomar un trabajo tradicional hecho por un agente designado (generalmente un empleado), y derivarlo a un indefinido y generalmente grande, grupo de personas, en la forma de un llamado abierto.”

Las áreas de aplicación son infinitas. Además del diseño, otro campo en el que el crowdsourcing es cada vez más utilizado es en el del periodismo, a través de lo que se conoce como “periodismo ciudadano”: cualquier individuo puede aportar noticias, fotografías, videos, información e incluso redactar artículos periodísticos o de opinión que, luego de ser aprobados por un editor, pueden ser publicados. Diarios de la talla de USA Today, The New York Times y The Guardian han implementado exitosamente el crowdsourcing.

Otro de los casos paradigmáticos y sorprendentes es el de ReCaptcha, la famosa comprobación anti-SPAM en la cual debemos leer y copiar una serie de letras y/o números para verificar que somos personas y no un software automatizado para completar formularios. Lo que muchos desconocen sobre ReCaptcha es que, cada vez que ingresamos lo que vemos en pantalla, estamos realizando una contribución anónima: estamos escribiendo dos palabras de un libro digitalizado. Cerca de 200 millones de Captchas son digitalizados en el mundo cada mes. Son 150 mil horas de trabajo cada día.

Casos de crowdsourcing
La mayor y más reciente novedad del crowdsourcing es que no sólo lo están utilizando emprendedores, sino también grandes empresas y agencias publicitarias para externalizar trabajo. En algunos casos, la implementación es exitosa y son excelentes ejemplos a seguir. En otros, algunas falencias en la idea original terminan condicionando el resultado en forma negativa.
Un ejemplo muy renombrado de crowdsourcing exitoso es el sitio web ideastorm.com, creado por Dell en 2007 como una forma de recibir continuamente críticas, sugerencias y nuevas ideas para sus productos. Allí, cualquier persona puede publicar sus iniciativas y votar las de los demás. Un caso muy similar es el de Starbucks: mystarbucksidea.force.com, que funciona bajo el mismo principio.

Ejemplos menos felices de la utilización del crowdsourcing son, por ejemplo, el reciente concurso lanzado por Toronto 2015 Pan American Games (toronto2015mascot.ca). Se trata de un concurso dirigido a niños, en los que se les propuso crear la nueva mascota oficial de los juegos. De 4.000 ilustraciones se han elegido 6 personajes finalistas, entre los cuales el público votará al mejor. La modalidad del concurso ha despertado muchas críticas, debido a que los 6 coloridos personajes resultantes son señalados como “extraños”. Otro fallido importante fue el de Linkedin, la afamada red social profesional, que lanzó una convocatoria para traducir la plataforma a lenguajes diferentes del inglés. Linkedin propuso, en su convocatoria, varias posibles remuneraciones que los participantes recibirían por el trabajo de traducción, pero ninguna de las opciones contemplaba el pago en dinero, lo que provocó indignación y una momentánea”crisis” de imagen, que sólo pudo ser superada retirando la convocatoria.

Crowdsourcing y diseño gráfico
¿Cómo funcionan los sitios que conjugan crowdsourcing y diseño? En el caso de, por ejemplo, un trabajo de diseño web, simplemente es necesario escribir lo más detalladamente posible qué es lo que se necesita (cantidad de páginas, función, formato de entrega, adjuntar imágenes a utilizar, logo de la marca, etc.), indicar el plazo de entrega y cuál es el monto que se está dispuesto a pagar por el trabajo. La fijación del plazo de entrega y del presupuesto de antemano por parte del cliente agiliza el proceso: una vez que el plazo de entrega termina, el cliente simplemente elige la mejor propuesta de diseño y el creador del diseño ganador es premiado con el pago prometido.
Existen actualmente varias opciones para quienes desean recurrir al crowdsourcing para obtener sus diseños. Para quienes deseen trabajar con diseñadores de habla hispana, la plataforma en español por excelencia es Choosa, una web que cuenta con una comunidad de actualmente más de 30.000 diseñadores gráficos. Además de Choosa, existen Adtriboo, 12designer, Wilogo y la versión en español de 99designs.

Los tipos de trabajo que pueden obtenerse es muy variada, y contempla prácticamente todos los rubros del diseño: diseño de logos, sitios web, landing pages, banners, papelería, tarjetas personales, packaging, etiquetas, emails y newsletters, sobres, invitaciones, pósters, carteles, camisetas, e incluso ilustraciones.

El prototipado de sitios web nos permite definir de una manera rápida y sencilla los bloques o secciones que va a tener cada una de las páginas de un sitio web, de modo que podamos jerarquizar la información y definir los bloques de contenido.

Este paso previo lo realizamos en una reunión con el cliente, o varias, en su oficina, la nuestra o tomando un café en cualquier local. Lo importante es que estas secciones salgan después de analizar su negocio y el objetivo que se persigue ante la construcción del sitio web. En este caso el diseñador debe permanecer como observador, limitándose a aconsejar al cliente y asegurarse que no se queda nada fuera.

Aunque el prototipado es uno de los pasos previos a la realización creativa que se usará para implementar un diseño, su idea no es ofrecer una guía sobre la estética, sino sobre el contenido que debe representarse. Por ello, el diseño de los bloques no debe contener detalles, como titulares o fotografías, sino simplemente quedarse en la definición de las partes de un sitio, dando énfasis en los bloques y su estructura y no en los elementos que irán dentro.

Para que el prototipo sea lo más ajustado a los intereses de la web y sea de verdad útil en los siguientes pasos, se debe realizar primero un proceso de jerarquización más elemental. Según nos comentaba Daniel Martínez en el programa#designIO sobre El proceso de Diseño Web, el primer paso sería jerarquizar la información en un listado de elementos, escrito en simple texto, donde podemos utilizar encabezamientos de varios niveles para definir cuáles son más importantes que otros. Podemos usar el propio lenguaje HTML para ello, comenzando por definir lo que sería el H1, y analizando las secciones principales del sitio, lo que serían los H2 y así hacia adentro, viendo si hay otras clasificaciones importantes para aplicar el H3, utilizando otros encabezados hasta la profundidad que deseemos.

Herramientas “offline” de prototipado

Las herramientas de prototipado deben ser sencillas de manejar y rápidas para la obtención de resultados. En muchos de los casos simplemente con papel y lápiz será más que suficiente y si estamos sentados con el cliente, posiblemente sea lo que más a mano tengamos. Los bloques se definen con cuadrados, círculos, rectángulos u otras formas primitivas y se deben realizar anotaciones a los lados para conseguir darles un significado.

La mano alzada es suficiente para todo lo que necesitamos y una libreta de hojas en blanco que podamos arrancar fácilmente para deshacernos de ellas o archivarlas junto con otra documentación del proyecto, si es que han funcionado bien. Las encontramos en cualquier papelería, pero si lo deseas, puedes hacerte con una serie de herramientas muy divertidas y que pueden llamar la atención de nuestros amigos e impresionar a los clientes, haciendo que parezcamos diseñadores más profesionales. Aunque dudo realmente de su utilidad o si resultarán verdaderamente necesarias, son muy atractivas.

Nota:Este tipo de herramientas se conocen en inglés como “Stencil” y su traducción en español sería Estarcido y sus variantes se usan desde la prehistoria. Debemos haber usado cosas similares en en todas las etapas de nuestra la formación e incluso se utilizan el arte moderno.

Puedes encontrar unas cuantas utilidades muy atractivas tipo “stencil”, enfocadas exclusivamente al prototipado de sitios web y aplicaciones, las de la imagen anterior y muchas otras, en el sitio webhttp://www.uistencils.com

Pero no hay necesidad de ponerse tan “pijos” y con mucho menos la tarea del prototipado se verá resuelta. En Internet podremos encontrar diversos “templates” de los que partir para hacer mockups de sitios web, permitiendo también demostrar que somos profesionales con recursos divertidos y propios para nuestros objetivos.

Estos templates los puedes imprimir en tu impresora y llevarlos contigo a la cita con el cliente, tienen formas diferentes, con marcos que parecen un navegador y donde podremos pintar los recuadros del sitio web, o con otros que imitan la forma de teléfonos móviles donde podemos dibujar el aspecto que tendría la página en dispositivos con pantallas pequeñas.

En este sitio encontrarás hojas para imprimir con aspecto de navegador.http://www.raincreativelab.com/paperbrowser/

También nos resultarán útiles estasplantillas para hacer prototipos en iPhone, que también podemos descargar en PDF.

Obviamente no necesitamos todas estas utilidades, pero podrán resultarnos de utilidad y darán más valor a nuestras reuniones con el cliente, así como otras plantillas más elaboradas que nos permiten, no solo hacer el prototipo de una página, sino de los procesos que los visitantes realizarán para efectuar las acciones deseadas en el sitio, como suscribirse, realizar la compra de productos, etc.

Puedes ver una plantilla para el diseño de escenarios en este sitio web:http://www.uxarray.com/2009/03/06/scenario-taskflow-and-grid-sketchsheets/

Herramientas online para prototipado

Muchas personas prefieren las herramientas tradicionales para el diseño del wireframing, pero las herramientas online también nos ofrecen posibilidades interesantes que merece la pena tener en cuenta, sobre todo pensando en que no siempre tenemos la ocasión de estar frente a frente con el cliente o con el resto del equipo de diseño. Entre las ventajas podemos destacar enviarlas por email de manera más profesional que haciendo la foto a una hoja de papel, compartirlas con un grupo de trabajo para que todos puedan editarlas sobre el mismo proyecto, acceso a diversas herramientas para diseñar componentes de interfaz de usuario una manera más rápida y más detallada, etc.

Nota:En mi opinión en reuniones físicas es más sencillo usar lápiz y papel, porque no pierdes tiempo teniendo que aprender los juegos de herramientas que hay disponibles en cada software online, por ejemplo, si tienen aquellos botones que necesitas, si los usas correctamente. En papel es más sencillo que un diseñador plasme en instantes una estructura, o que el cliente se suelte y participe dando su opinión o su boceto. Al partir de un papel vacío y con únicamente el lápiz en la mano es más fácil no tener distracciones y pensar solamente en el proyecto que tenemos en mano, sin vernos en la necesidad de sacar partido a la herramienta y acabar introduciendo elementos de dudosa utilidad para un proyecto.

En los pasados años han aparecido decenas de herramientas online para hacer mockups wireframing, para todos los gustos y necesidades. Es de suponer que después de un tiempo perduren las que hayan encontrado un modelo de negocio en la comercialización de la herramienta, por lo que no voy a liarme a ofrecer tropecientos enlaces a herramientas que son muchas veces casi idénticas. Una rápida consulta en Google te dará resultados como Axure, Pidoco o Moqups

Casi todas tienen la posibilidad de usarlas de manera gratuita y obtener distintos beneficios o eliminar limitaciones pagando una cantidad. También existen contrapartidas en aplicaciones de escritorio de código libre y completamente gratuitas como Pencil Proyect.

Fuente: http://www.desarrolloweb.com/manuales/33/

Publicado en : Web y Marketing digital