Tendencias en Diseño Web en 2013

Este artí­culo fue publicado originalmente en inglés en bypeople.com usando un sistema de edición colaborativa integrando Github con Wordpress. El Equipo de The Shock family: iconshock, wpthemegenerator y jqueryslidershock, responsables también por bypeople.com, se ha encargado de la creación y traducción al español del mismo, dejándolo aquí­, en WWWhatsnew.com, como una excelente guí­a para profesionales del diseño web.

Espero que os guste:

——

A continuación encontrará una guí­a completa de lo que está marcando tendencia en el ámbito del diseño web. Los campos de acción del diseño y el desarrollo web se están cruzando cada vez con más frecuencia y se ha hace importante cubrir la necesidad de entender los nuevos conceptos que conciernen a estos campos. Esperamos que esta guí­a sea un gran aporte para ayudarle enfocar el camino a seguir en el avance del diseño web.

Adaptación al diseño web responsivo

El diseño web responsivo (DWR) se ha convertido en la tendencia y el camino a seguir en el campo. Si aún no está familiarizado con el concepto, puede consultar la reseña de Ethan Marcotte para A List Apart; también recomendamos esta lista de recursos publicada por Brad Frost: Esto es responsivo.

Básicamente, el objetivo del diseño web responsivo es hacer que los sitios y las aplicaciones web se puedan adaptar a cada nuevo dispositivo y su respectiva resolución.

Sin embargo, el diseño web responsivo tiene sus debilidades; aún no es perfecto ya que sacrifica información a favor del diseño y no es lo suficientemente adaptativo. Es por esto que vamos a ver algunas de los desarrollos que están conduciendo a la evolución del diseño web responsivo.

RESS: La estrella naciente de la web

Como habí­amos mencionado, el diseño web responsivo ha mostrado varias debilidades en este momento ya que se encuentra en la mitad de su propio desarrollo; muchos esfuerzos se han concentrado en minimizar los problemas presentados e incluso resolverlos del todo. En conjunto de los intentos que surgen diariamente, RESS (combinación de las expresiones del inglés REsponsive web design, diseño web responsivo, y Server Side, del lado del servidor) pretende mejorar el rendimiento de la web al combinar los poderes de los lados del servidor y el cliente.

"La idea tras [RESS], es que podamos combinar las técnicas de diseño web responsivo y las técnicas del lado del servidor para traer una experiencia óptima a cada dispositivo. Esto significa que se atenderán solicitudes ligeramente diferentes a algunos dispositivos para una URL dada, pero aún usaremos técnicas de responsividad para todo lo que se muestre en dichos dispositivos."

Luke Wroblewski introdujo esta implementación en septiembre de 2011 luego de algunas aproximaciones de parte de él mismo a dicha técnica. Esta ha sido diseñada para mejorar la manera en la que se muestra el diseño de un sitio web en diferentes dispositivos, así­ como su rendimiento y usabilidad. En otras palabras, mejora completamente la experiencia del usuario; es por esto que RESS brilla como una estrella en ascenso.

Primero que todo expliquemos el flujo básico de una implementación de RESS: Se comienza obteniendo tanta información como sea posible acerca del dispositivo (tamaño, funciones, etcétera.); luego, se obtiene el lenguaje de marcado apropiado en el servidor: esto puede ser un menú desplegable para un sitio web para móviles y un menú horizontal para tamaños mayores o imágenes con los tamaños y métodos adecuados.

Cuando el marcado generado de forma especial se enví­a, se usan media queries y otras técnicas de diseño responsivo para asegurar que este lenguaje de marcado sea el adecuado para lo que se pretende lograr. En resumen, el lenguaje de marcado del lado del servidor creará el contenido que se mostrará y en paralelo a las técnicas de diseño web responsivo van a determinar de qué forma lo hará. Esto puede sonar fácil, pero en realidad requiere de una buena cantidad de planeación y código; aún así­, hacer esto correctamente dará los mejores resultados. El código fuente de RESS se puede encontrar en GitHub y esta guí­a le puede ayudar a comenzar a utilizarlo.

Consejos y técnicas para lograr un DWR más dinámico

No podemos ignorar que actualmente el diseño web responsivo se está volviendo más complejo; esto se debe al desarrollo rápido y continuo desarrollo de dicha tecnologí­a, en particular a lo que respecta a dispositivos móviles: es prácticamente imposible probar y diseñar para todos los dispositivos. La simplicidad comienza a ser aceptada poco a poco como regla principal; no hablamos simplemente de simplicidad visual sino también de una experiencia de usuario, código y maquetación más simples.

Este fenómeno estimula la tendencia de dar más importancia al contenido que es el núcleo de cada sitio. Dicho esto, revelaremos aquellos trucos y técnicas que se podrán convertir en tendencia en el área del DWR y definirí­an el siguiente paso en su evolución.

“Haz las cosas tan simples como sea posible, mas no simplistas.” Albert Einstein

La responsividad tendrá todo que ver con la tipografí­a

La tipografí­a y el manejo de los tipos de letra se han convertido paulatinamente en un factor importante para el diseño web debido a su naturaleza versátil; es bastante lógico pensar que la tipografí­a marcará pauta en el diseño responsivo. De hecho, la tipografí­a se ha vuelto más importante que nunca ya que esta es indudablemente efectiva al potenciar el rendimiento del sitio y resaltar su contenido.

Uno de los beneficios directos de concentrarse en la tipografí­a es la ganancia de simplicidad; desde que CSS introdujo el uso de tipos de letra personalizados los diseñadores web tienen más elementos para crear diseño web con foco en la tipografí­a. Sin embargo, se debe analizar el comportamiento de cada tipografí­a para que el diseño responda a las diferentes resoluciones. Adicionalmente, se deben tener en cuenta algunas reglas para el manejo apropiado de la tipografí­a.

Consideraciones para tener en cuenta:

• El usuario final puede cambiar el tamaño de la letra.
• Los tipos de letra se comportan de forma diferente a resoluciones diferentes; es importante considerar distintos tipos de letra.
• Los tipos de letra deben conservar siempre una buena estructura de legibilidad.
• Siempre debe haber un balance entre contenido y diseño. En otras palabras, la tipografí­a debe ser parte fundamental del diseño.

El contenido siempre debe ser  importante y la tipografí­a es la mejor manera de transmitir un mensaje; en consecuencia, darle gran importancia a su manejo en los diferentes escenarios de responsividad proporcionará más fuerza al contenido mostrado en pantalla.

La responsividad se centrará en resaltar el contenido

Es una realidad que el mundo del diseño web se ha visto asombrado y a la vez desafiado por la repentina tendencia de la navegación web a través de dispositivos móviles. La década de 2000 se caracterizó por una Internet atractiva y dinámica, aunque no lo suficientemente usable. Una de las principales razones de ser del diseño responsivo es adaptar esta tendencia de la estética hacia un estado de mayor usabilidad.

Es muy común ver cómo se le ha dado más importancia al diseño que al contenido, con lo cual nos podrí­amos enfocar en las siguientes soluciones que abordan la responsividad de manera adecuada sin disminuir el impacto visual del diseño. El primer paso consiste en establecer prioridades: ¿Cuál es el contenido más importante, el que debe mostrarse necesariamente sin importar la resolución? ¿Qué debe suceder con los anunciantes principales? ¿Qué imágenes ilustran realmente el contenido y cuáles son simplemente decorativas?

Tomar estos aspectos en cuenta es clave para dar más relevancia a los contenidos al crear diseños para resoluciones pequeñas. En dichos casos, una estructura más adecuada debe planearse, evitando la simplicidad y la práctica común de apilar elementos indiscriminadamente en una columna simple al cambiar el tamaño, relegando contenidos importantes a la parte baja del diseño.

Ahora que está claro el concepto de dar prioridad al contenido, revisemos otro concepto que puede convertirse en referente para este propósito inicial, el cual se basa en una solución muy completa llamada Coreografí­a del Contenido, publicada por Trent Walton. Su objetivo es reorganizar el diseño al establecer una jerarquí­a del contenido existente y reubicarlo en posiciones estratégicas, dependiendo de la resolución en que se mostrará. Puede implementarse fácilmente gracias a la implementación de media queries junto con el módulo Flex Box de CSS3, descrito en un artí­culo escrito por Chris Coyier.

 .alguna-clase {
 display: box // ¿deberí­amos usar flex, o la extraña propiedad flexbox?;
 display: -moz-box;
 display: -webkit-box;
}

A fecha de la redacción de este artí­culo, la sintaxis más soportada parece ser display:box; sin embargo esto podrí­a cambiar pronto dado que la sintaxis aprobada más reciente, e intuitiva, es display:flex.

ADVERTENCIA: Ninguna de estas notaciones funciona en IE.

Antes de continuar, puede revisar lo que Jordan Moore ha escrito acerca de esta curiosa solución en un simple pero completo artí­culo.

En la primera parte, se muestra una implementación de responsividad común y ordinaria, en la que el contenido simplemente se transpone una vez que la resolución cambia tomando en cuenta el orden original. En la segunda parte, la implementación de la Coreografí­a del Contenido realiza la organización apilando según relevancia, en lugar de mantener el orden original. Puede visitar este ejemplo práctico que describe cómo funciona este método.

Karen McGrane sugiere otra perspectiva interesante. En su charla, Adaptándonos al contenido adaptativo, Karen presenta la idea de abandonar una práctica que diseñadores y desarrolladores web han usado hasta ahora: la creación de muchos diseños que le permitan a un sitio web adaptarse a cualquier contenido posible. En lugar de esto, recomienda la creación de contenidos reusables, haciendo que todo el contenido comience a ser más flexible, lo que se traduce en un ahorro de tiempo y dinero.

Finalmente, todos estos conceptos traen consigo una importante definición sobre la maquetación, la cual pone a la web en ví­as de una solución independiente del dispositivo: no diseñar para toda resolución existente, simplemente crear un diseño que funcione en cualquier resolución.

La responsividad será indiferente a la resolución

La independencia es necesaria para la responsividad, debido a que el objetivo es ser tan versátil como sea posible, sin importar el dispositivo  Gradualmente, la práctica de que todo diseño se ajuste a cualquier resolución, en lugar a toda resolución existente, debe ser aceptada por todo aquel involucrado en el proceso de diseño.

Si quiere que su diseño se adapte a todo, desde la pequeña pantalla de un dispositivo móvil hasta monitores de la más alta definición, lo mejor serí­a usar vectores. Las imágenes SVG pueden ser una gran solución dado que este formato permite que los vectores se muestren en el navegador con todas las ventajas que esto conlleva; por ejemplo, una capacidad teórica de escalarse infinitamente sin mostrar un aliasing significativo. Sin embargo, este formato aún no cuenta con un soporte amplio y puede tardar bastante tiempo en cargar, representando una disminución en términos de rendimiento. Por lo pronto, usar esta solución con cierta moderación serí­a una mejor alternativa.

Ahora bien, la resolución sigue siendo el punto relevante, por lo cual se hace importante hacer pruebas en la mayor cantidad posible de dispositivos y para hacer esto de una manera más eficiente, Viljami Salminen ha creado una utilerí­a llamada previsualización remota. Esta utilerí­a basada en JavaScript permite cargar un URL en varios dispositivos a la vez, disminuyendo el tiempo destinado en el ajuste de plantillas a cualquier resolución para pruebas de diseño responsivo.

La responsividad tampoco dependerá de los dispositivos

La responsividad es algo más que un conjunto de contenedores que se organizan para mostrarse en varias resoluciones y orientaciones. La responsividad debe centrarse en mostrar el contenido apropiadamente en cualquier navegador y circunstancia. Para hacer esto no hay que adornar excesivamente el diseño con efectos o secuencias animadas. Simplemente se requiere un poco de planeación y buena ejecución del diseño.

El término web móvil comprende varios aspectos, entre los cuales están las soluciones que se diseñan para dispositivos portátiles como tabletas, consolas de videojuegos y teléfonos móviles. Sin embargo, estas soluciones rara vez incluyen algo diferente a HTML, CSS y en algunos casos JS. De esta manera la web continúa siendo la misma, independientemente del dispositivo en el que se muestre. Jeremy Keith ha publicado un artí­culo en relación a este tema: no existe una web móvil.

Del mismo modo, un proceso más eficiente de ingenierí­a web se deberí­a basar en las nuevas tecnologí­as; sin embargo, estar a tono con lo más reciente no es obligatorio en absoluto. Es aquí­ donde HTML5 comienza a cobrar más importancia al ser capaz de crear una web mucho más limpia que funcione sin depender de un dispositivo o caracterí­stica alguna.

Algunos aspectos de HTML5 pueden ayudar en gran medida a lograr este objetivo. Por ejemplo, la creación de opciones de contingencia permite evitar que se muestre un sitio web poco atractivo en aquellos momentos en los que todo puede fallar; aunque no mostrará todos los efectos y funciones, aún será usable y visualmente agradable. Christian Heilman ha presentado una gran cantidad de argumentos contundentes a favor de HTML5, como se muestra en Mantén la calma y confí­a en HTML5, una presentación que propone la creación de sitios web más eficientes, en lugar de simplemente inclinarse por la aplicación de un exceso de las más recientes técnicas, las cuales solo funcionan en un reducido número de navegadores.

Manejo dinámico de imágenes

El diseño web se está volviendo cada vez más exigente y uno de sus requisitos radica en hacer que todos los elementos sean responsivos y estén dirigidos a resaltar el contenido. Es por esto que el concepto del manejo dinámico de imágenes ha cobrado tanta fuerza. A continuación revisaremos en profundidad las nuevas técnicas que potenciarán este concepto.

Vectorización perfecta de imágenes. Un paso hacia la extinción del pixel

Las imágenes de mapa de bits y las imágenes vectorizadas tienen ciertas limitaciones bien conocidas que tienen un enorme impacto en el diseño web responsivo. En favor de la responsividad, serí­a realmente ideal trabajar sólo con imágenes vectorizadas, sin embargo, estas representan un alto costo para el desempeño y están muy limitadas a mostrar formas básicas.

No obstante, dos profesores británicos, John Patterson y Philip Willis, aseguran que el pixel está cerca a su final dentro de pocos años. Esta aseveración se sustenta con un códec que ellos están desarrollando el cual transforma imágenes de mapa de bits en vectores, incluyendo fotografí­as y videos. Su trabajo se llama VPI, acrónimo en inglés para imágenes fotográficas vectorizadas y VSV, secuencia de video vectorizada. Dicho trabajo consiste en convertir perfectamente las imágenes y videos a vectores. Como podemos ver en la siguiente comparación, la foto vectorizada tiene finalmente mejor calidad que la imagen de mapa de bits.

Comparación de la calidad final entre la imagen de mapa de bits (izquierda) y la foto vectorizada (derecha). Clic para aumentar. Fuente – Extremetech

Aunque aparentemente resulta asombroso, tiene un gran problema: el desempeño resulta muy lento debido a que el códec es muy pesado. De cualquier modo, este parece ser un gran paso a favor de resolver el problema de tener imágenes pixeladas, además de ser una interesante herramienta que podrí­a ayudar en procesos de diseño responsivo.

El futuro de las imágenes responsivas con JPEG2000 y WebP

Uno de los más mayores problemas al manipular imágenes de mapas de bits es la búsqueda por reducir la brecha entre calidad y tamaño; estos aspectos son inversamente proporcionales entre sí­, llevando a desarrolladores y diseñadores de todo el mundo a proponer e implementar varias soluciones; sin embargo, ha sido ampliamente aceptada porque la mayorí­a de las veces el balance calidad/tamaño en estas se pierde fácilmente.

David Bushell nos presenta la posibilidad de aumentar el soporte que tiene el formato SVG, que por ahora funciona bien para figuras e imágenes sencillas, pero no tanto para imágenes como fotografí­as y patrones complejos. Otra opción se centra en la creación de un nuevo formato, más fácil de usar; y ya existen algunas alternativas disponibles: los formatos JPEG2000 y WebP.

Comencemos con JPEG2000, desarrollado en el año 2000 por el Grupo conjunto de expertos en fotografí­a (Joint Photographic Experts Group – JPEG), desarrolladores del conocido formato JPEG, en un intento por mejorar la compresión de las imágenes. Algunas de las caracterí­sticas de este formato son:

• La compresión puede ser con o sin pérdida, en contraste a la compresión estándar de JPEG, que es únicamente con pérdida.
• La capacidad de mostrar una imagen en diferentes tamaños y resoluciones partiendo de un mismo archivo.
• La compresión resultante muestra una imagen mucho más clara que el JPEG estándar, evitando una apariencia desenfocada y pixelada.

Hay una solución similar en proceso de desarrollo por parte de Google, propuesta como un proyecto de código abierto. Es el formato WebP, el cual pretende tomar el lugar del dominante JPEG. WebP es compatible actualmente con Chrome y Opera, así­ como en editores como Pixelmator e ImageMagick, mientras que Photoshop y GIMP pueden manejar WebP a través de extensiones. Este formato supone una mayor tasa de compresión que el propio JPEG, la cual se puede ajustar según se requiera, manteniendo la calidad de la imagen. Adicionalmente, sus desarrolladores planean incluir soporte para canales alfa y así­ permitir el manejo de transparencias. Sin embargo, este formato no ha tenido una gran aceptación por parte de muchos profesionales, especialmente fotógrafos, quienes argumentan que este método de compresión desenfoca mucho las imágenes y en algunos casos la pérdida de información es tal que el color se muestra erróneamente.

A la izquierda, el resultado de la compresión WebP; a la derecha, una imagen PNG.

¿Y mientras tanto? Regresemos al presente.

Es importante tener en cuenta que la responsividad de las imágenes se ha concentrado en el tamaño, en verse bien en cada dispositivo. Ahora, con la aparición de dispositivos con resoluciones HiDPI (basados en la pantalla Retina de Apple), resulta natural que todo fabricante intente crear tecnologí­as similares e incluso superiores haciendo que los diseñadores concentren sus esfuerzos en crear imágenes para hiperresoluciones, como comenta Ben Frain. Esto tiene algo de cierto; sin embargo, a mayor resolución más pesada será la imagen y más pobre el desempeño.

Implementar en la web imágenes de altí­sima calidad, vectoriales y ligeras supone el uso de formatos como el SVG, el cual juega un papel fundamental gracias al soporte que se le ha venido dando por parte de los diversos navegadores. Dan Denney usa SVG en vez de PNG para ciertas ilustraciones, incluso aquellas con un gran nivel de detalle, obteniendo impresionantes resultados en resoluciones HiDPI. El desafí­o consistirá en cómo hacer que estas imágenes vectoriales sean responsivas, como lo expuso Joshua Sortino a comienzos de 2012.

Un estudio llevado a cabo por Daan Jobsis en el blog Netvlies compara imágenes pequeñas con poca compresión JPEG con imágenes inmensas con alta compresión. Como resultado se obtienen imágenes que se ven muy bien y que tienen tamaños de archivo similares. De hecho, en el caso de las imágenes inmensas, su tamaño en kilobytes llegaba a ser más bajo que el de las imágenes más pequeñas, lo cual es útil al mostrarlas en dispositivos de altí­sima resolución sin afectar el desempeño del sitio.

Ahora bien, ¿es realmente necesaria la creación de imágenes tan grandes? ¿Los dueños de estos dispositivos tendrán siempre a su alcance conexiones superrápidas capaces de mostrar esas imágenes a la velocidad del rayo? ¿Están los usuarios dispuestos a esperar suficiente tiempo para que estas imágenes se carguen y se muestren? La respuesta a estas preguntas tiene un rotundo no: el usuario promedio tiene un dispositivo promedio. Para ilustrar esto remitámonos a la competencia entre sistemas operativos móviles, encabezada por Android cuya versión 2.3, Gingerbread, es aún la más usada; esto puede demostrar cuán inútil puede resultar una potencial estandarización de estas prácticas.

El concepto de imágenes adaptativas, desarrollado por Matt Wilcox, puede ser la respuesta debido a que consiste en optimizar no solo las dimensiones, sino también el tamaño del archivo de imagen, mejorando la experiencia del usuario sin perder responsividad en el diseño y manteniendo la identidad estética del sitio.

Concluyendo, traigamos a colación una práctica bien interesante; un proyecto de Adam Bradley, miembro de  CDNConnect, el cual fue bautizado Focal Point. Su objetivo consiste en recortar y escalar sutilmente una imagen usando únicamente CSS mientras se mantiene el foco y el punto de interés del primer plano de dicha imagen. En contraste, muchas prácticas usadas recientemente se enfocan simplemente en reducir la imagen, haciendo que se pierda con frecuencia el contexto de las mismas. Esta técnica funciona gracias a un pequeño conjunto de reglas CSS, no requiere JavaScript y los editores de contenido tienen el control al poder decidir cómo se recortará la imagen simplemente editando el código CSS.

Esta atractiva práctica sirve para ilustrar nuestro argumento: junto al proceso de diseño, la ubicación del contenido se está convirtiendo en algo muy importante que necesita ser lo más equilibrado posible. Podemos, entonces, predecir que este principio se convertirá en un estándar en un futuro no muy distante.

Es hora de anunciar lo mejor de la responsividad

El mutuo beneficio presente en la relación entre los medios y la publicidad es innegable; bien sea que nos guste o no, esta relación debe ser siempre fuerte y sólida ya que ambos modelos de negocio dependen entre sí­ para triunfar y ser rentables. Dicha rentabilidad se ha visto afectada con la implementación del diseño responsivo debido a que varias piezas publicitarias cambian de sitio, pierden importancia o simplemente desaparecen cada vez que el tamaño de la resolución disminuye y el contenido se apila. Si fuera usted quien estuviera pagando por un espacio publicitario de primer plano, ¿le gustarí­a ver que su anuncio se pierda bajo una pila de contenido o que simplemente desapareciera una vez que el sitio se muestre en una pantalla más pequeña? No es eso por lo que ha pagado, ¿verdad? Terrible resulta que un anuncio termine en el fondo de una pila de contenido, ya que su CTR será verdaderamente bajo.

La publicidad también debe adaptarse a la responsividad reinante. De entrada, un gran problema puede aparecer: ¿Cómo evitar que se pierda el sentido y contenido de un anuncio al hacerlo responsivo? Se han propuesto algunas soluciones, aunque no han sido ampliamente implementadas; por ejemplo, en su blog, Mark Boulton sugiere vender paquetes de anuncios que incluyan diferentes soluciones para cada resolución en lugar de vender simples espacios publicitarios en un determinado lugar del sitio web.

Josh Clark expone otro concepto llamado Snap Banners que consiste en colocar un anuncio en la parte baja de la pantalla; al desplazarse un poco hacia abajo el anuncio se desplaza también hacia un cierto lugar de la pantalla. Si el usuario decide pulsar sobre este, el anuncio se desplegará y mostrará su contenido en pantalla completa.

Por otro lado,  Trent Walton sugiere cambiar la manera en que se crean los anuncios al hacer el texto de estos en HTML en lugar de ponerlo en las imágenes y así­ hacer que cada pieza publicitaria se adapte a las diferentes disposiciones del contenido.

El modelo de Josh Clark muestra como en cierto punto, el anuncio de la parte baja se desplaza con el contenido y le permite al usuario desplegarlo para ver su contenido en pantalla completa.

Dichas soluciones no están nada mal y son, de hecho, muy buenas implementaciones temporales hasta que se establezca un estándar de responsividad y es posible incluso predecir cuál podrá ser.

¿Qué tal suena adaptar el anuncio y además adaptar su posición y orientación? ¿Qué tal que al cambiar el tamaño, el anuncio no solo se reduzca con él sino que cambie a una versión más simple, con pocos detalles y más efectiva que se vea muy bien en cualquier resolución? Esta es la propuesta de Responsive Ads, cuyo nombre es Stretch, que aborda este concepto y muestra varios escenarios en los cuales esta técnica puede implementarse. Entre las principales ventajas de esta solución se puede destacar que el contenido del anuncio obtiene más importancia, favorecido por el hecho de que las piezas no están simplemente cambiando su tamaño sino que adaptan su texto a la resolución y orientación en que se muestra el sitio.

Diferentes ejemplos de cómo Stretch, desarrollado por Responsive Ads, se adapta dinámicamente a la pantalla dependiendo de la resolución.

Esta solución acabará también con el problema de tener anuncios escondidos o en el fondo de una pila de contenedores, ya que la ubicación de los anuncios variará dependiendo de la resolución. Así­, al mostrar el sitio en un dispositivo móvil, la visibilidad y la tasa de clics del anuncio serán similares a las dadas al mostrarse en una resolución mayor. Esto definirá muy probablemente el camino de la reconciliación entre la publicidad y el diseño web responsivo.

Transmita sus mensajes de una manera más inteligente: correo electrónico responsivo

No olvidemos que a pesar del esplendor actual de Internet, aquello que comenzó la revolución y ha jugado un papel muy importante en las comunicaciones fue el correo electrónico; por tanto no se debe mantener fuera de la corriente responsiva. Es exactamente esto lo que vamos a abordar a continuación.

En este caso, la mensajerí­a electrónica responsiva deberí­a mejorar la relación entre el mercadeo y el medio de comunicación de la web por excelencia porque su fin es causar un cierto impacto en el receptor y, por supuesto, llegar a tantos dispositivos con acceso a la web como sea posible. Varias discusiones al respecto se encuentran en curso e involucran las perspectivas del diseño y del mercadeo. Diversos temas entran en este análisis y van más allá del simple hecho de tener dispositivos diferentes.

Los clientes de correo electrónico han existido casi desde el comienzo de la Internet pública y con el extendido uso de dispositivos móviles, la cantidad de clientes existentes ha aumentado significativamente; el primer obstáculo que emerge radica en la búsqueda de un soporte universal. Debemos considerar cuál es la mejor manera de llegar a estos dispositivos. A continuación podemos referirnos a Jakob Nielsen, quien asegura que el diseño responsivo de boletines de noticias se convierte en parte clave de la usabilidad de estos, basándose en que los usuarios simplemente pueden ignorar el contenido de un correo electrónico si este no se ajusta y no se ve bien en aquellas pequeñas pantallas. Fallar en el logro de una buena experiencia móvil reducirá el impacto del boletí­n de noticias y evitará que alcance su objetivo.

Puede tomarse un minuto para ojear guí­a de Campaign Monitor, que incluye trucos y consejos a considerar en el momento de diseñar correos electrónicos responsivos. Además incluimos un conjunto de plantillas para diseño responsivo de correo electrónico cortesí­a de Zurb.

Lo fundamental aún funciona: mejorando los clásicos del DWR

Aún no es el fin para los dispositivos de escritorio, antes conocidos como computadoras personales y portátiles… ¿los recuerda? Es broma. De hecho, estoy usando uno en este momento y probablemente usted se encuentre leyendo este artí­culo en uno de ellos justo ahora. La cantidad de usuarios que navegan desde dispositivos no móviles es considerable de acuerdo a las estadí­sticas, entonces bien vale la pena que los diseñadores no olviden la existencia de estos dispositivos y su uso aún extendido.

Es por esto que una simple rejilla de 960px aún resulta genial (incluso una de 1200px)

Estudios revelan que muchos usuarios están cambiándose a monitores mucho más anchos, así­ que diseñar el la tradicional rejilla de 960px es aún una buena elección. No obstante, hay que tener en cuenta que los diseños basados en rejillas de 1200px se están volviendo cada vez más populares. Los monitores con resoluciones relativas a la proporción 16:9 se están utilizando más que los de proporción 4:3, lo que hará que valga la pena hacer uso de los espacios laterales que quedan libres.

Las estadí­sticas demuestran que la resolución 1024 í— 768 ha perdido popularidad, en contraste con la de 1366í—768 cuyo uso ha aumentado.

La idea del uso de las rejillas de 1200px no es nueva en lo absoluto  pero aún no ha sido completamente implementada debido a la creencia de que las resoluciones con proporción 4:3 aún son las más usadas en computadoras de escritorio y portátiles. Hay utilerí­as como esta plantilla que permiten crear contenido basándose en la rejilla de 1200px, aunque también se puede personalizar para empezar desde la de 960px u otra de cualquier ancho deseado. Otra herramienta es este sistema de rejillas basado en CSS que ajusta dinámicamente el contenido responsivo partiendo de un diseño de 1200px, haciéndolo una implementación adecuada para empezar. Dicho esto, si su objetivo es hacer cosas por lo grande y aprovechar las nuevas y más anchas resoluciones, debe romper el esquema de las proporciones 4:3 y acostumbrarse a esta idea que muy seguramente se convertirá en tendencia.

Aplicaciones web contra aplicaciones nativas. Desempeño contra responsividad

El constante cambio que sufre a diario Internet supone un cambio en la manera en que se navega a través de esta. Los tiempos de los sitios estáticos y puramente informativos son cosa del pasado, la gente ha hecho que Internet sea parte de sus vidas al funcionar como asistente, socio y hasta casi como un amigo. Todo esto trae consigo la proliferación de dispositivos que se conectan a la web. Cada uno tiene su propia manera de aprovechar la información y la interacción que la red ofrece.

Por tanto, la necesidad de tener aplicaciones enfocadas en tareas especí­ficas desarrolladas para cada dispositivo se convirtió en algo natural y muy extendido; así­, los fabricantes aprovecharon este incremento en la popularidad de dichos productos y los agruparon en tiendas en lí­nea. En esto está, a grandes rasgos, el inicio de las aplicaciones móviles nativas.

Por otro lado la responsividad logró una evolución gracias a la necesidad de hacer la web más fácil para el acceso a través de dispositivos móviles. El objetivo es hacer que estos sitios se vean y se sientan bien en pequeñas resoluciones, aunque en algunos casos, aun cuando el contenido se reorganiza para ser visible en dichos dispositivos, esto puede no ser lo suficientemente bueno ya que la usabilidad y la experiencia de usuario puede perder importancia  y es justo aquí­ en donde las aplicaciones móviles web cobran importancia.

Tanto las aplicaciones web como las nativas tienen objetivos similares y es por esto que existen desarrolladores que lanzan ambas versiones, como podemos ver en la siguiente comparación entre las aplicaciones nativa y web de Twitter:

Aplicación móvil nativa de Twitter (izquierda) y aplicación móvil web en el navegador Dolphin (derecha)

Ahora bien, el desempeño de una aplicación web depende mucho de su proceso de diseño. Una buena planeación traerá como resultado una aplicación completa, atractiva, rápida y responsiva. De esta manera, viene a ser más fácil lograr este escenario ideal si se tienen mejores herramientas para lograrlo; para tal fin, el desarrollador de Google Addy Osmani sugiere una guí­a orientada al uso de las herramientas para desarrolladores de Chrome Lí­nea de tiempo y Perfiles las cuales son de gran ayuda para los desarrolladores, permitiéndoles encontrar fallas y debilidades en el desempeño de sus aplicaciones, haciéndolas correr más fluidamente.

Una interesante perspectiva que justifica la creación y uso de las aplicaciones web fue presentada por Simurai en una corta participación para una conferencia, titulada Aplicaciones web flexibles en la que establece la diferencia entre sitios web y aplicaciones web y la utilidad de usar flexbox para acelerar y mejorar el proceso de desarrollo de tales aplicaciones.

CSS se convertirá en su mejor amigo, vislumbremos lo que el futuro le trae

Al comienzo todo era oscuridad. Luego, las técnicas avanzadas de estilo aparecieron y todo fue… solo un poco más claro. Estas tení­an aún muchas limitaciones ya que su disposición se diseñaba usando tablas que producí­an resultados llenos de rigidez, desperdiciando preciosos minutos de procesamiento.

Poco después, el diseño y la aplicación de esquemas flotantes apareció en escena y todo mejoró; estos se convirtieron en la base de lo que hoy conocemos como esquemas responsivos. Finalmente, esto hizo posible acomodar varias columnas una al lado de la otra, manipularlas fácilmente y reducir significativamente la cantidad de lí­neas de código HTML.

Sin embargo, toda esta evolución aún no está completa y se requiere que se implementen nuevos conceptos para resolver ciertas limitaciones como la ausencia de un valor center para la propiedad float, además de algunas dificultades con el manejo del contenido y de la altura de las columnas, entre otras. Vamos a identificar algunas posibles soluciones existentes así­ como las que pueden venir en camino.

El manejo de tipos de letra hace parte de la solución

La tipografí­a ha evolucionado al tiempo con la web, ha ganado nuevas caracterí­sticas, forzando a los equipos de desarrollo detrás de los navegadores a trabajar para hacer que estas se procesen correcta y estéticamente una al incluirse en los sitios web. Por ejemplo, se conoce que los tipos de letra OpenType tienen ligaduras entre determinados caracteres; no obstante esta caracterí­stica solo está incluida en aplicaciones de edición como Illustrator, InDesign y Photoshop de Adobe.

Veamos un truco que activa esta función en los navegadores más usados, una especie de atajo para que estos puedan procesar y mostrar esta función. Consiste en activar la propiedad font-feature-settings, asignarle el valor ‘liga’ y añadir los prefijos apropiados para cada navegador. De esta manera los navegadores mostrarán las ligaduras correspondientes al tipo de letra seleccionado. El código se verí­a así­:

h1 {
 font-feature-settings: 'liga';
}

En adición a este, hay otros trucos para usar caracteres de idiomas extranjeros incluidos en tipos de letra especí­ficos, diferentes a los existentes por defecto o a los tipos de letra de í­conos. La  propiedad unicode-range permite establecer un determinado rango en la que los caracteres especiales se mostrarán en el tipo de letra escogido. Las tablas Unicode también tienen espacios determinados en los que los diseñadores pueden añadir caracteres fuera del estándar y que los navegadores pueden procesar fácilmente.

Los esquemas son cada vez más orgánicos

Actualmente Internet tiene como finalidad adaptarse a todo: dispositivos, resoluciones, preferencias de usuarios, idiomas, limitaciones fí­sicas, zonas horarias, uso, abuso, desempeño lento o ultraveloz, limitaciones de código y de diseño, etcétera. Sin embargo, como la red no es lineal, debe comenzar a adaptarse a la esencia misma de la naturaleza; necesita ser orgánica. Las siguientes implementaciones están aún en etapa de desarrollo y se deben mantener fuera del alcance de personas de mentalidad cerrada. Dichas las advertencias, les presentamos las exclusiones y regiones CSS.

Exclusiones: fluyendo alrededor de estructuras orgánicas

Esta implementación permite que el texto fluya o rodee figuras orgánicas e irregulares. Las exclusiones son una primera aproximación al proceso de diseñar esquemas más orgánicos, tal como sucede en revistas impresas, proporcionando un fuerte elemento en favor de la distribución del texto, especialmente útil cuando se pretende integrar todos los elementos dentro del diseño en lugar de tener elementos enteramente ilustrativos pero que se vean totalmente aislados del resto de los elementos. Esta idea presentada por Adobe busca que las formas irregulares y la alineación de texto se complementen mutuamente.

Exclusiones CSS en acción – tal como se ve en Chrome Canary

La figura de un ave representada por medio de exclusiones – tal como se ve en Chrome Canary

Regiones: acabando con los conceptos de la diagramación lineal

Complementando el concepto anterior, el equipo de Adobe ha estado trabajando en otra curiosa técnica para la distribución del texto llamada Regiones. Estas permiten que un bloque de texto, semánticamente codificado, fluya dentro de elementos (cajas).

A la izquierda podemos ver un bloque de texto marcado semánticamente; en el medio las delimitaciones de las regiones en las que el texto fluirá; a la derecha cómo dicho texto fluyen en las regiones delimitadas.

El siguiente video muestra un aparte de una charla del equipo de desarrollo de Google en el SXSW de 2012, en el cual se demuestra esta técnica.

Charla en SXSW, una breve muestra sobre regiones CSS por Paul Irish (comienza en 1h50m57s)

Esta implementación, aún en desarrollo, cambiará la forma en la que se diseña la web. Elementos redondeados, orgánicos e irregulares cobrarán mayor importancia y uso, y aunque tanto las exclusiones como las regiones no representan un avance significativo en cuanto a responsividad, se volverán tendencias al añadir más elementos al diseño web.

Preprocesadores CSS y HTML

Una de las formas más fáciles de escribir código HTML y CSS es usando atajos; función que desempeñan los preprocesadores que usan una sintaxis más refinada y muchas veces completamente diferente al lenguaje original. Veamos algunos de estos útiles preprocesadores y adentrémonos en el mundo de los atajos.

HAML – Un padre para los lenguajes de marcado

HAML es un lenguaje de marcado muy liviano el cual describe el lenguaje XHTML al seguir algunos principios básicos en su implementación; el código a través de HAML debe tener sangrado correcto y la estructura del XHTML resultante debe ser lo suficientemente clara. HAML trajo consigo el desarrollo de SASS; es muy común decir que HAML es a HTML lo que SASS es a CSS. HAML se utilizaba con Ruby originalmente pero también tiene una implementación para PHP.

/* HAML */
!!! 5
%html{lang: 'en'}
 %head
 %title Hello World
 %body
 %h2 Hello World, this is HAML
/* HTML Compiled */
 <!DOCTYPE html>
 <html lang = 'en'>
 <head>
 <title>Hello World</title>
 </head>
 <body>
 <h2>Hello World, this is HAML</h2>
 </body>
 </html>

SASS – Hacia la victoria con un CSS más simple

Inspirado en la sintaxis de HAML, SASS es un metalenguaje creado para trabajar muy eficientemente con CSS y se vale de algunas caracterí­sticas como las variables, anidación, mixins y propiedades heredadas. SASS cuenta con dos sintaxis diferentes: la más antigua es la sintaxis sangrada que reemplaza muchos elementos como los punto y coma, así­ como las llaves, por lí­neas sangradas. La más nueva es SCSS, cuya sintaxis es similar a las implementaciones comunes de CSS y usa elementos que se omiten en la sintaxis sangrada. Ambos tienen varias ventajas:

La sintaxis sangrada. No tiene muchos punto y coma, comas y llaves; su legibilidad es óptima y se ve bastante entendible para cualquier persona al usar sangrí­as para separar los bloques de código. En resumen, es poco abstracto y más conciso, comparado a las implementaciones más novedosas.

/* SASS Sangrado */
#main
color: blue
font-size: 0.3em
a
 font:
 weight: bold
 family: serif
 &:hover
 background-color: #eee

La sintaxis Sassy CSS. Sassy es una palabra inglesa para definir frescura en el comportamiento y es lo que SCSS quiere proyectar. Es una opción fresca, muy cercana al CSS original. usa llaves para separar bloques de código, lo cual permite crear una mejor documentación sobre lí­nea, volviéndola muy expresiva.

/* style.scss */
#fixed-header {
 font-size: 15px;
 background-color: $fixedHeaderBg;
 width: 80%;
 height: 15px;
 padding: 4px 1px;
 z-index: 99;
 font-family: 'open sans';
 ul li {
 float: left;
 margin-right: 8px;
 a {
 text-decoration: none;
 color: $fixedHeaderText;
 }
 &.skip-header {
 a {
 background-color: $fixedHeaderText;
 color: $fixedHeaderBg;
 padding: 3px 3px;
 }
 }
 }
}
/* style.css */
#fixed-header {
 font-size: 15px;
 background-color: #ffaa00;
 width: 80%;
 height: 15px;
 padding: 4px 1px;
 z-index: 99;
 font-family: 'open-sans';
}
#fixed-header ul li {
 float: left;
 margin-right: 8px;
}
#fixed-header ul li a {
 text-decoration: none;
 color: #bbb;
}
#fixed-header ul li.skip-header a {
 background-color: #000;
 color: #fafafa;
 padding: 3px 3px;
}

LESS – Una mejora a CSS con doble cara

Less es un lenguaje dinámico de hojas de estilo y al tiempo una extensión para CSS, el cual funciona de manera similar a SASS. Sin embargo, Less es capaz de trabajar tanto del lado del cliente como del lado del servidor al proporcionar variables, anidación, mixins, operaciones y funciones. Se puede compilar en PHP como alternativa al compilador JavaScript.

/* LESS */
#header {
 h2 {
 font-size: 21px;
 font-weight: bold;
 }
 p { 
 font-size: 15px;
 a { 
 text-decoration: none;
 &:hover { 
 border-width: 3px 
 }
 }
 }
}
/* CSS Compilado */
#header h2 {
 font-size: 21px;
 font-weight: bold;
}
#header p {
 text-decoration: none;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 3px;
}

STYLUS – Haciendo minimalista el código

De manera similar a la sintaxis sangrada de SASS, Stylus simplifica el código al hacer opcional el uso de punto y coma, comas y llaves.

/* Stylus */
border-radius()
 -webkit-border-radius arguments
 -moz-border-radius arguments
 border-radius arguments
body
 font 15px Tahoma, sans-serif
a.button
 border-radius(7px)
/* CSS Compilado */
body {
 font: 15px Tahoma, sans-serif;
}
a.button {
 -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px;
}

HAMLET – Un simple ayudante para HTML

Definido como un lenguaje de plantillas para XHTML, simplifica el código al evitar la regla de cerrar etiquetas y al tener conjuntos de etiquetas estructurales como condicionales, bucles y ciclos condicionales.

/* Hamlet */
$doctype 5
<html>
 <head>
 <title>#{pageTitle} - My Site
 <link rel=stylesheet href=@{Stylesheet}>
 <body>
 <h2 .page-title>#{pageTitle}
 <p>Take a look to this list:
 $if null elements
 <p>There are no elements to show.
 $else
 <ul>
 $forall Element type cost <- elements
 <li>#{type} (#{cost} dollars)
 <footer>{copyright}

Bonus track: Deshágase de los prefijos en tus hojas de estilo

Una de las tareas más frustrantes e irritantes a llevar a cabo durante la elaboración de una hoja de estilo es la necesidad de añadir prefijos a ciertas propiedades para hacerlas funcionar correctamente en los distintos navegadores. Esta acción toma bastante tiempo que pudo haberse utilizado para avanzar en otras tareas.

Todo este tedio llegó a su fin gracias a una extensión de JavaScript desarrollada por Lea Verou que añade estos prefijos en segundo plano, únicamente cuando se requieran: -prefix-free es una extensión que funciona en el lado del cliente sin afectar los prefijos ya incluidos, aunque puede causar algunos errores, los cuales pueden solucionarse mediante trucos sugeridos en su documentación.

Esta extensión cumple su función y tiene soporte nativo en Internet Explorer y Firefox; son necesarios algunos ajustes en Opera y Chrome  para probar -prefix-free localmente.

JavaScript ha estado presente por bastante tiempo pero ¡su hora es justo ahora!

Resulta innegable el hecho de que JavaScript ha apoyado el desarrollo de la web durante mucho tiempo y a la vez que ha sido tratado con cierto recelo por parte de los desarrolladores y los fundadores de otros lenguajes. Este recelo fue causado indirectamente por el auge de Flash al comienzo de la década del 2000, que causó retrasos en la evolución de JavaScript. No obstante, ahora que HTML5 y CSS3 son protagonistas, JavaScript ha retomado su lugar como pieza fundamental del diseño web.

Sea que se presente como AJAX o como jQuery (especialmente este último), JS ha comenzado a ser ampliamente utilizado en todo el mundo y ha despertado el interés de muchos desarrolladores. Todo este interés lo lleva a su continuo mejoramiento con nuevas y mejores funciones. Definitivamente vale la pena aprender y sumergirse en el mundo de JavaScript.

¿Así­ que piensa tomar JavaScript con seriedad? Entonces póngase a aprender Node.js

Node.js, o Node, como se le conoce comúnmente, es una implementación de JavaScript del lado del cliente que potencia sus caracterí­sticas generando resultados que sobresalen a tal punto que se preguntará si es en realidad JavaScript o no. Abordar con seriedad Node requiere de conocimientos en programación orientada a eventos, además de mucha curiosidad por comprender JavaScript; al profundizar en su complejo mundo es posible crear aplicaciones web y mostrar las grandes capacidades de este lenguaje, que fue previamente muy rechazado a pesar de su poder y versatilidad.

La mejor caracterí­stica de Node es que simplemente se trata de JavaScript. No es necesario aprender nuevas sintaxis y al ser esta ya muy conocida por los desarrolladores, resulta ideal para que las empresas tras los sitios web puedan fusionar sus equipos destinados tanto al lado del cliente como el del servidor.

Todo esto no es solamente bueno para los usuarios, las máquinas también obtienen beneficio al usar el mismo lenguaje; si el cliente y el servidor hablan en el mismo idioma, no se requiere traducción alguna. Seguramente esté pensando sobre las llamadas y respuestas de AJAX y de hecho eso es correcto.

Node está orientado a eventos; funciona como una gran máquina que espera por dichos eventos y los maneja adecuadamente (de manera similar a jQuery). Así­, cada llamada del cliente AJAX es solo un pequeño paso hacia el procesamiento del lado del servidor, sin intermediarios. Y si aún no se convence sobre el poder de Node, habrá que sacar a relucir su mayor ventaja y es su increí­ble rapidez.

Si las plataformas de los servidores y los marcos de desarrollo fuesen superhéroes, Node.js serí­a Flash. Gran parte de la velocidad propia de Node se da gracias a que no hay procesos de traducción en las comunicaciones entre servidor y cliente y la simpleza de los eventos JS al manejar llamadas así­ncronas  Si Node es así­ de rápido surge la duda de si será capaz de encargarse de respuestas en tiempo real durante la interacción cliente-servidor. Y de hecho, puede, como Wes Bos lo demuestra:

Hemos abordado temas sobre aplicaciones web en tiempo real usando un lenguaje simple, pero ¿hay algo más de qué hablar? Sí­. Una de sus más grandes fortalezas probablemente es su poder de escalabilidad. Node.js es tan rápido que al no necesitar un traductor, se convierte en el mensajero perfecto. Puede encargarse de conexiones escalables entre servidores con increí­ble rapidez y un mí­nimo influjo del servidor en estas.

Como es natural, no hay nada perfecto y las herramientas no son la excepción. En ejecuciones, Node es muy rápido, pero no lo es tanto en cuanto a desarrollo. Manipular procesos muy densos con JS no es un movimiento muy acertado; aun cuando puede emplearse C++ para hacer el trabajo pesado por Node, esto implica tiempo de desarrollo. Node.js es una plataforma, no un marco completo para web (como lo es Ruby on Rails), así­ que es mejor usarlo con cuidado sin olvidar los diferentes obstáculos que aparecerán y que esta plataforma no superará por usted, contrario a lo que sí­ hacen los marcos.

Cerraremos este episodio con algunos recursos relacionados; Manuel Kiessling ha escrito este tutorial que se adentra en el mundo de Node y contiene muy buenas explicaciones que le ayudarán a ser, como ellos mismos dicen, un principiante avanzado. En segundo lugar, puede revisar este completo directorio con diversos recursos para desarrolladores de JS/Node. Puede considerar probar Express, un gran marco que mejorará su rapidez al desarrollar con Node. Estas herramientas y recursos muy seguramente le llevarán a ser un experto en JS y Node, dándole una gran ventaja en el mundo del desarrollo web.

Llevando a JavaScript al siguiente nivel

Vamos a hablar de dos herramientas que van a acelerar el desarrollo de JavaScript. Hablamos de CoffeeScript y TypeScript. En sentido figurado la primera le da muchí­simos artilugios a JS como si se tratara de un superagente, mientras que la segunda eleva aún más alto a JS dándole un par de zancos. Veamos entonces:

CoffeeScript – JavaScript con un baticinturón

Lanzado a finales de 2009, CoffeeScript se creó para potenciar la sintaxis de JS, haciendo innecesarios los paréntesis por ejemplo. De esta manera, las llamadas de las funciones vienen implí­citas, reemplazando el uso de llaves por lí­neas sangradas para identificar los bloques de código. El objetivo global en sí­ es escribir el menor código posible.

La simplificación traí­da por CS es bastante limpia, no requiere nada diferente al compilador de JavaScript para ejecutarse en cualquier navegador. No obstante, es muchí­simo más fluido cuando se compila del lado del servidor al usarlo con Node.js o el marco o lenguaje del lado del servidor de su preferencia. Lo mejor acerca de CoffeeScript es que sigue una regla primordial: es simplemente JavaScript; cualquier librerí­a escrita en JS funcionará perfectamente con CoffeeScript y viceversa.

TypeScript – JavaScript con zancos

Desarrollado por Microsoft como un proyecto de código abierto (así­ es, ha leí­do bien), TypeScript es un superconjunto de JavaScript, que en lugar de potenciar la sintaxis como CS, extiende su funcionalidad; así­ cualquier código ya existente en JS está contenido en TypeScript.

TypeScript es básicamente una simple formalización de JavaScript. – Anders Hejlsberg, Miembro técnico de Microsoft

Los marcos de desarrollo están de moda: los diseñadores y desarrolladores ahora más cerca que nunca

El crecimiento de las habilidades de diseño y desarrollo en las personas ha sido una consecuencia indiscutible de la evolución de la web. Cada disciplina ha desarrollado trucos y tendencias y la web se ha beneficiado mucho con este intercambio.

Sin embargo, con el auge de los dispositivos móviles y la responsividad, el desarrollo y diseño web se han vuelto más complejos. Del mismo modo, los diseñadores web se han dado cuenta de la importancia de conocer cómo sus diseños cobran vida a través del código y los desarrolladores han aprendido que solo un contenido estéticamente agradable atrae a los visitantes. Aun así­, aprender a programar puede ser tedioso y poco práctico para un diseñador del mismo modo en que puede ser difí­cil para un programador aprender los conceptos de diseño y ponerlos en práctica.

Es por esto que unas soluciones bastante interesantes han saltado al ruedo; hablamos de los marcos de desarrollo web. Estos cuentan con fuertes fundamentos que permiten acelerar el desarrollo web y pueden, además, personalizarse para darle un aspecto más atractivo y refinado a un proyecto.

¿No conoce Bootstrap? ¡Úselo, siéntalo, ví­valo y personalí­celo!

Desarrollado por Twitter Inc., Bootstrap rápidamente se está convirtiendo en uno de los más importantes marcos de este campo. Fue el proyecto más popular de GitHub a comienzos de 2012 al poner a disposición pública una serie de herramientas para crear sitios web responsivos de manera sencilla. No hay necesidad de tener habilidades especiales para comenzar a usarlo.

Otras caracterí­sticas de este excelente marco de desarrollo:

• Tiene estilos de interfaz de usuario visualmente agradables, siguen la tendencia de mantener el diseño simple, limpio y minimalista.
• Usa LESS, lo que mantiene el código organizado y permite un desarrollo rápido.
• Incluye extensiones de JavaScript para crear deslizadores, carruseles y modales con una apariencia simple y genial.
• Bootstrap tiene un gran soporte por parte de terceros, además de una muy completa documentación, lo que hace muy fácil encontrar ayuda sobre su uso.

Muy a pesar de estas caracterí­sticas, Bootstrap tiene una desventaja que ha sido muy criticada: la mayorí­a de los sitios basados en este marco se ven muy parecidos; no es muy difí­cil adivinar cuándo un sitio ha sido creado usando Bootstrap ya que no muchas personas deciden personalizarlo. La razón tras esto radica en que muchos usuarios apenas saben cómo usar Bootstrap así­ que no profundizan mucho para personalizarlo.

Como solución a esto, algunas herramientas y recursos se han venido desarrollando para personalizar y dar una renovada apariencia a las los sitios web creados con Bootstrap. Gracias a que cada vez más desarrolladores externos lo han venido usando, la cantidad de recursos disponibles es impresionante.

¿Bootstrap es una novedad para usted, pero su diseño no es lo suficientemente impactante para usted? No se preocupe, esta guí­a no solo le sumergirá en su mundo, en ella Anna Powell-Smith le enseñará también como personalizar su apariencia básica; puede complementar esta información con este artí­culo sobre cómo personalizar Bootstrap escrito por Antonin Januska.

BootTheme, la herramienta que complementa a Bootstrap

Bien vale la pena hacer un pequeño paréntesis para referirnos a BootTheme. Esta herramienta hace uso de Bootstrap y lo mejora con gran cantidad de opciones fantásticas para diseñar sitios web y crear temas. Incluye temas responsivos gratuitos, í­conos, una gran galerí­a, glifos, soporte para tipos web de Google, LESS como preprocesador CSS en adición a todas las funciones propias de Bootstrap. Cualquier reseña realmente dice poco en comparación con su amplia gama de funciones, por lo cual es muy recomendable estudiar sus caracterí­sticas con detenimiento.

Herramientas para dominar el mundo con Bootstrap

Es un hecho que Bootstrap es cada vez más popular, con soporte de una comunidad enorme, que se beneficia de su uso y desarrollo. Es por esto que se ha creado una gran cantidad de herramientas para mejorar sus funciones y añadir nuevas y más fuertes caracterí­sticas.

• Tocify de Greg Franko – Una extensión que genera dinámicamente una tabla de contenidos cuya apariencia se puede personalizar usando Bootstrap o jQueryUI. Tocify tiene efectos para mostrar u ocultar elementos de tablas de contenido por medio de efectos para proporcionar un desplazamiento dinámico. También cuenta con funciones adicionales como un desplazamiento fluido y soporte de historial. Si busca mejorar su documentación, Tocify es su extensión.
• Bootstrap-Lightbox de Jason Butz – Esta extensión para Bootstrap añade un lightbox al sitio, basándose en modales.
• My-Bootstrap-DateTimePicker de Martijn Gussekloo – Un seleccionador de fechas personalizable, permite cambiar los nombres de dí­as y meses para estar a tono con los estándares internacionales.
• Bootstrap-wysihtml5-rails de Gonzalo Rodrí­guez – Wysihtml5 for Rails es un excelente editor WYSIWYG para Bootstrap.
• WP-BootStrap-Gallery de Edward McIntyre – Esta galerí­a personalizada para WordPress usa un esquema dinámico de miniaturas, usando Bootstrap 2.2.2. Su objetivo es dar formato al código corto de las galerí­as de WP para usar los esquemas de miniaturas de Bootstrap.
• SelectBoxIt por Greg Franko – Esta extensión reemplaza las cajas de selección HTML poco agradables y complicadas con desplegables estéticos y completos. Soporta temas de Bootstrap, jQueryUI y jQuery Mobile. Para usar esta extensión no es necesario reescribir una sola lí­nea de la secuencia de validación de su formulario, esta hace su trabajo sola. SelectBoxIt también tiene soporte para móviles, tabletas y dispositivos de escritorio además de funciones adicionales de navegación por teclado, búsqueda y soporte de API de eventos y métodos.

Para revisar más recursos disponibles, le recomendamos visitar un gran directorio que los contiene; tendrá entretenimiento para largo rato.

Un paseo por otros marcos de desarrollo que seguramente dejarán su huella en la web

La cantidad de marcos de desarrollo que se abren paso en Internet es muy grande y no estarí­a mal echar un vistazo rápido a sus principales virtudes así­ como a su actualidad. Veamos algunas de las mejores opciones:

Foundation – La alternativa más avanzada

Este marco responsivo es un proyecto de código abierto que ya está en su versión 3.2. Ha sido desarrollado usando SASS y tiene un gran soporte en navegadores antiguos, incluyendo a IE8.

Kube – Un marco de desarrollo bonito y minimalista

Kube es un marco compatible entre navegadores, caracterizado por su diseño minimalista. La versión para desarrolladores incluye LESS con sus mixins, variables y módulos. También incluye estilos para elementos web como formularios, rejillas, botones, tablas y tipografí­as.

Maxmert – Un marco diferente del resto

Construido con Node.js, sus desarrolladores lo definen como un marco muy diferente a los demás dado que permite el uso de espacios en los nombres de las clases para que no haya interferencia con las clases personalizadas. Los complementos en JavaScript usan animación CSS y se puede descargar a través de GitHub y Bitbucket.

99Lime HTML Kickstart – Un marco enfocado en ahorrar tiempo

Este marco de desarrollo incluye un conjunto de archivos HTML, CSS y JS creados para facilitar el proceso de diseño, ayudando a ahorrar tiempo a diseñadores y desarrolladores en sus proyectos web.

inuit.css ”“ Un marco poderoso basado en SASS

Desarrollado por Harry Roberts, inuit.css es un marco de desarrollo perfecto para desarrolladores que quieren hacerse cargo de su propio diseño. Es simple y requiere muy pocas cosas para funcionar y crear soluciones altamente escalables desde cero.

Skeleton – Una plantilla de texto que respeta el diseño

Una plantilla de texto que funciona muy bien para dispositivos móviles; usa una rejilla de 960px para comenzar, incluye estilos de letra estilizados, botones, formularios y media queries, manejando todo independientemente del estilo. Es altamente compatible con muchos navegadores, preocupándose incluso de trabajar correctamente en IE.

Ink – Acelerando el diseño de sus esquemas

Es un conjunto de herramientas para desarrollo rápido; hace énfasis en la simplicidad y la flexibilidad. Ink es un marco centrado en el contenido que brinda resultados impresionantes.

Workless – Un marco de clase mundial que evita el doble trabajo

Desarrollado por Scoot Parry, Workless tiene todos los elementos necesarios para desarrollar proyectos web dejando a un lado las acciones repetitivas.

HTML eMail Boilerplate – Haciendo presentaciones elegantes en correos electrónicos

Esta plantilla de texto completa y gratuita para correo electrónico tiene un diseño muy cuidadoso, puede restablecer los estilos aplicados por los clientes de correo, permitiendo a los mensajes presentarse elegante y estéticamente. Su mayor objetivo es evitar problemas en el procesamiento y presentación de los mensajes.

La evolución de los CMS, caí­da del uso de SQL y publicación estática

La manera de administrar datos en la web ha venido cambiando rápidamente en respuesta a una necesidad latente de hacer todo más dinámico, menos rí­gido y con muchas más caracterí­sticas. Es mucho mejor cuando una herramienta se adapta naturalmente a esta nueva web responsiva, interactiva, llena de aplicaciones enriquecidas y enfocada en el contenido. Es por esto que abordaremos ahora algunos proyectos que mejoran este manejo de los datos en el mundo de la Internet.

Deje de usar tanto HTTP e inclí­nese por Jekyll

Jekyll es un generador de sitios estáticos cuyo objetivo es reducir las solicitudes HTTP así­ como las búsquedas en bases de datos, permitiendo ahorrar tiempo tanto en del lado del servidor como en el del cliente. Jekyll toma archivos de un directorio y genera el blog a partir de ellos. Con solo algunas plantillas y el contenido del sitio, es suficiente para que este CMS genere nuestro sitio. Creado por Parker Moore, Jekyll también proporciona grupos de variables para usar en las plantillas disponibles en su documentación. Una vez que la página está en lí­nea, ningún código se ejecuta en el servidor, lo cual incrementa el desempeño ampliamente porque el contenido ya estará cargado mejorando su propio flujo.

Harry Roberts, considerado uno de los mejores desarrolladores de la web actualmente y creador de  inuit.css, desarrolló su sitio, CSS Wizardry, usando su propio marco y potenciando su contenido a través de Jekyll.

Como no hay código que haga vulnerable al sitio, la seguridad se ve incrementada gracias al HTML estático, así­ que una vez el sitio está en lí­nea, su seguridad no representará un dolor de cabeza. Un paso más hacia un mundo mejor, definitivamente.

¿Busca un administrador de contenido fácil de usar? Octopress es la respuesta

Octopress fue creado por Brandon Mathis como un marco para Jekyll escrito completamente en Ruby. Esta herramienta mejora la experiencia en Jekyll ya que, a diferencia de este último, Octopress configura las plantillas HTML, CSS, JS y otros ajustes para que funcionen con él. Con Octopress un blog puede estar en lí­nea en menos de diez minutos, un tiempo bastante corto.

Este marco usa una plantilla HTML semántica, basada en esquemas responsivos, enfocada en móviles además de usar páginas de GitHub como estrategia de distribución. Octopress se puede clonar o editar desde GitHub, también está completamente listo para pruebas de responsividad y aprovecha las virtudes de Compass y SASS para aplicar temas fácilmente.

Octopress cuenta con compatibilidad para Twitter, Google Plus One, Pinboard y Google Analytics, entre otros. Otras de las funciones que hacen de Octopress una excelente opción son su facilidad de instalación, una completa documentación, soporte para Markdown y una sintaxis solarizada, tal como la describen en su sitio web.

Una vez que haya decidido darle una oportunidad a Jekyll, será perfecto que mejore toda la experiencia de su proyecto dándole también una oportunidad a Octopress.

Interacciones de datos en tiempo real con MongoDB

Durante la última década, las bases de datos relacionales han dominado la administración de datos en la mayorí­a de sitios web. No obstante, el paradigma del manejo de datos en esta época, impulsado principalmente por las redes sociales, requiere cantidades de información más grandes y que se transmitan rápidamente para editarse y almacenarse frecuentemente en bases de datos fácilmente escalables. Las bases de datos SQL no cumplen con esta tarea y por tanto SQL no es la respuesta.

Aparece entonces el término noSQL; oficialmente se define como la nueva generación de bases de datos, no relacionales, distribuidas, de código abierto y horizontalmente escalables.

Entre las diversas bases de datos noSQL que vale la pena mencionar aparece MongoDB, programada en C, cuya principal fortaleza radica en las facilidades que brinda al escribir el código además de ser fácilmente escalable y capaz de hacerse cargo de grandes cantidades de información. MongoDB usa documentos estilizados por JSON los cuales simplifican muchos de los procesos de escritura de código. Esta es, pues, una base de datos que no puede dudar en usar cuando quiera interacciones en tiempo real entre el cliente y el servidor. Del mismo modo, ya sea que necesite una base de datos escalable o no, la simplicidad de MongoDB acortará bastante el tiempo de desarrollo. Esta es una muestra muy clara de que las bases de datos noSQL son una avance contundente hacia el fin de las bases de datos SQL.

Para mayor información puede revisar este tutorial y así­ comenzar con MongoDB.

Inspirado en WordPress, demos la bienvenida a MongoPress y su flexibilidad

MongoPress es la nueva generación de CMS flexibles. Usa MongoDB y PHP, siendo inspirada por usuarios devotos de WordPress, que pese a su preferencia por este administrador de contenido, encontraron varias limitaciones en su uso como tener que configurarse para funcionar y su absoluta dependencia a SQL. El objetivo de esta herramienta es ser tan ligera y versátil como sea posible. En sus propias palabras: MongoPress se diseñó especí­ficamente para funcionar como un marco de desarrollo de CMS en el que continuaremos trabajando para brindar la más rápida y segura forma de acceder y manipular contenido basado en la web, al tiempo de permitir crear sus propias plataformas, aplicaciones y sitios de la manera que considere conveniente. MongoPress es, de este modo, una gran alternativa para administración de contenido, justo como WordPress, pero usando todo el poder de MongoDB para el manejo de bases de datos.

Dropbox no es solo una unidad virtual; también es posible alojar allí­ su blog

Ya conoce Dropbox, el servicio de almacenamiento en la web que proporciona acceso rápido y seguro a los archivos que allí­ almacene. Sin embargo, su poder no acaba allí­, usar Dropbox para alojar blogs y sitios estáticos se ha convertido en una tendencia reciente. Sea que apenas comience en este mundo o seas un maestro en diseño y desarrollo web, hay métodos muy útiles para publicar su blog en la nube, alojándolo en Dropbox. Si no tiene mucha experiencia puede usar scriptogr.am, un software que completa el proceso entre la creación de contenido y su publicación al subirlo a Dropbox. Scriptogram usa Markdown, del cual hablaremos en un momento, el cual convierte texto plano en HTML. También funciona como asistente durante los procesos de carga y publicación y permite apuntar un dominio propio hacia el blog cargado a Dropbox.

Para usuarios más avanzados, es posible cargar los documentos HTML en sus carpetas públicas con solo arrastrar y soltar, además de establecer manualmente las configuraciones de DNS para que un dominio propio apunte al blog. A pesar de todo esto, el alojamiento de blogs en Dropbox tiene sus limitaciones, ya que únicamente acepta sitios estáticos creados con HTML, CSS y JS y además, establece sus propias URL, que resultan ser muy largas.

Otra gran herramienta para aprovechar esta opción es Calepin, una herramienta que lee texto plano y Markdown desde Dropbox, convirtiendo estos en documentos HTML.

Súbase a un árbol y publique en una rama, porque ya es posible hacer blogs con GitHub

GitHub, por otro lado, puede alojar sitios estáticos al crear un nuevo repositorio o una nueva rama sobre uno existente y publicar el HTML allí­. Este método es más recomendado para usuarios avanzados, especialmente acostumbrados a GitHub ya que este último no es nada intuitivo. Además de las múltiples ventajas que también ofrece publicar blogs con Dropbox, GitHub acepta URL personalizadas al cargar un archivo llamado CNAME el cual debe contener la URL a usar, escrita como texto plano. Los ajustes de DNS se deben hacer de forma manual.

Este ejemplo creado por Alex Cican, ilustra las causas e implementaciones de cambiarse de servidores privados a la nube para alojar blogs.

La tecnologí­a Markdown: todo se puede hace aún más fácil

Markdown, desarrollado por John Gruber, es básicamente un lenguaje de marcado que puede convertir texto plano a HTML, facilitando su lectura y escritura, además de crear código XHTML válido y estructurado. Si ha usado GTalk con frecuencia, puede darse cuenta de algunos trucos que enriquecen el formato de tus conversaciones. Por ejemplo, si escribe Hola entre dos asteriscos, se mostrará esa palabra escrita en negritas, así­: *Hola* mundo se mostrará Hola mundo; de eso se trata Markdown, a muy grandes rasgos. Como en el ejemplo anterior hay muchos otros métodos que al traducirse a HTML añadirán las etiquetas y formato correspondientes. La documentación de Markdown contiene un gran resumen acerca de cómo escribir en este metalenguaje y a pesar de que puede tomar un poco de tiempo, la facilidad de su uso es evidente.

¿Qué hay de nuevo en cuanto a diseño gráfico?

Un elemento clave en los procesos de diseño web es la interpretación de las bases tradicionales del diseño gráfico llevadas a contextos digitales. Esto ha sido un dolor de cabeza constante para los desarrolladores, pero una vez que encuentran la manera de implementar herramientas y técnicas que permitan a los diseñadores hacer una web más atractiva, estos últimos hacen todo lo posible por sorprender con los resultados que logran. Veamos algunos de estos nuevos avances que servirán como un inmenso lienzo para los diseñadores de la web.

El reinado de las imágenes de mapas de bits… ¡en peligro!

Desde el principio de la Internet, las imágenes de mapas de bits (conocidas también como bitmaps) han gobernado casi monárquicamente la web, al tener cierta versatilidad y usarse para añadir (a veces no muy efectivamente) algo de ornamento a los sitios estáticos que existí­an en el pasado. Cuando la web comenzó a moverse y estas imágenes de mapas de bits quedaron en jaque dado que no se moví­an junto con la web, surgieron nuevas soluciones, y así­ terminamos sufriendo aquella sobredosis, muchas veces irritante, de los GIF animados. Acto seguido, algunas aproximaciones al mundo vectorial aparecieron y tuvieron cierto éxito: hablamos de Flash. Pese a que ya ni es novedoso, ni es tendencia y ya casi no se usa, Flash marcó un camino hacia una web más interactiva gracias a sus animaciones y versatilidad. Sin embargo, el reino de Flash comenzó a desintegrarse mientras que Internet continuaba su evolución con el desarrollo de HTML5. Algunas razones de su caí­da son la constante necesidad de instalar el reproductor Flash (que no vení­a por defecto) y la publicación de aplicaciones muy pesadas que demoraban la carga. Al final la aparición de la navegación por dispositivos móviles y su poca compatibilidad con estos, acabó con el romance entre Flash y la web. Ahora que la época de Flash es historia y que el DWR se ha convertido en el nuevo norte, un nuevo desafí­o aparece y tiene que ver con la responsividad de las imágenes de la que hablábamos previamente. Es un buen momento para revisar un par de alternativas bien fundamentadas, potencialmente capaces de destronar a las imágenes de mapas de bits en favor de la responsividad.

SVG y Canvas son las amenazas

Estos formatos ofrecen gráficas más enriquecidas que las de mapas de bits y muchas de sus funciones son suficientes para trabajar en conjunto con la responsividad, que ha sido el dolor de cabeza para desarrolladores y diseñadores al manipular mapas de bits. Aunque aún deben pasar por mucho desarrollo para gobernar la web, vamos a dar a conocer sus mundos y profundizar sus pros y contras.

Ventajas de Canvas

• Desempeño verdaderamente alto al dibujar imágenes 2D, a menos que la resolución aumente demasiado. Como todo aquí­ son pixeles, la vida es más fácil.
• Canvas permite manipular pixeles, el resultado puede guardarse como JPEG, PNG u otros formatos, de forma similar a algunas herramientas de edición.
• Es la mejor opción para trabajar con pixeles.

Limitaciones de Canvas

• No tiene nodos DOM, lo que imposibilita el control de elementos.
• Carece de una API para animación.
• El procesamiento de texto no se ve muy bien ya que puede verse con bastante alias.
• Canvas no es muy apropiado para accesibilidad, menos aún en proyectos en las que sea obligatoria.
• Dado que la web actual requiere de dinamismo e interacción, Canvas no es muy bueno para desempeñar papeles en sitios y aplicaciones web.

Ventajas de SVG

• Trabaja con independencia de las resoluciones ya que usa vectores, por lo cual no importa cuánto se incremente la imagen, mantendrá siempre su calidad.
• Es muy bueno para animación, lo que añade interacción y movimiento a sus implementaciones.
• Proporciona gran control sobre elementos al usar la API SVG DOM en JavaScript.
• En sí­, SVG es un documento XML que le permite a los navegadores procesarlo más eficientemente que a Canvas.

Desventajas de SVG

• Cuando la complejidad del documento se incrementa, el desempeño de SVG se reduce, traduciéndose en tiempos más largos de procesamiento.
• Debido a este problema de complejidad, SVG no es apropiado para aplicaciones altamente dinámicas como juegos.

Gráfica comparativa entre el desempeño de Canvas contra el de SVG.

Esta comparación resulta muy útil al tratar de hacerse a una idea sobre qué formato es mejor para usarse en un proyecto web. A pesar de las limitaciones que aún tienen, bien vale la pena incluirlas en proyectos y aplicaciones web, ayudando a una mayor fluidez en su desarrollo. Si su objetivo es crear contenido que muestre análisis de imágenes, generación de mapas de bits, edición e incluso uso de sprites para videojuegos, Canvas puede ser la mejor opción entonces. Si el objetivo es tener independencia de la resolución en aplicaciones y sitios web, edición vectorial, tablas, gráficas, incluso infografí­as y una interfaz de usuario altamente interactiva, SVG será definitivamente más apropiado.

Diseño plano: dí­gale adiós los degradados y efectos

Durante los últimos años, Apple ha marcado la senda del diseño web e interfaces de usuario y el skeumorfismo ha sido la estrella principal en dicha tendencia. Microsoft, por su parte, ha decidido marcar claramente su antagonismo con Apple al basarse en la cara opuesta de la moneda: un diseño simple, minimalista y plano en el lanzamiento de su sistema operativo Windows 8. Este no es el origen del diseño plano por supuesto, pero debido a su alto uso e influencia es donde la tendencia comienza a difundirse.

“Muchas veces un nuevo proyecto no necesita esquinas redondeadas o degradados” FlatStrap – La versión plana de Bootstrap

Simple a la vista, no tanto para planearse, esquematizarse y diseñarse, el diseño plano proporciona tantas caracterí­sticas como dolores de cabeza en el proceso de diseño, las cuales bien vale la pena mencionar.

Diseño plano contra diseño skeumórfico: un tema de usabilidad

Este tema genera una amplia discusión, involucrando seguidores de Microsoft defendiéndose de aficionados devotos de Apple y viceversa, diseñadores que alertan del riesgo de caer en una apariencia estéril al diseñar con elementos planos, mientras que otros recalcan en la innecesaria complejidad de diseño y desempeño que el skeumorfismo puede traer. Hay otro punto qué considerar y es la usabilidad. ¿Cuán intuitivo puede ser el diseño plano comparado con el skeumorfismo? ¿Serí­a más fácil para alguien no acostumbrado a la tecnologí­a usar una aplicación de reloj despertador si esta simula la apariencia de un reloj real y sus funciones? o, por lo contrario ¿serí­a más fácil de usar si tuviera botones simples que incluyan textos o í­conos que permitan saber qué función cumplen? ¿Es toda esta simulación de la realidad necesaria? Hay un concepto general que asevera que el diseño plano es agradable a la vista, incluso relajante e intuitivo; sin embargo hay aún algunas personas que no están muy acostumbradas a la tecnologí­a, así­ que prefieren diseños que emulen las cosas de la vida real. ¿Entonces, cómo resolver este dilema? Esta pregunta nos lleva a nuestro siguiente punto.

A la izquierda, un diseño plano, caracterizado por elementos rectangulares y alto contraste en todos los botones. Por otra parte, un diseño skeumórfico, a la derecha, muestra bajo contraste y una gran cantidad de efectos como biseles y sombras. Fuentes: Deviantart – Metro Calculator 2 by ArcticPaco – AppleiPhoneSchool

Al probar su diseño, piense como lo harí­a un usuario

Al hacer pruebas, es muy común llevarlas a cabo sin apartarse de los roles de desarrollador, diseñador o incluso mercaderista, pero ¿qué tal asumir el rol de un usuario? No hablamos del rol de un usuario con experiencia, habilidades, entusiasta y algo arrogante, sino el de un novato y hasta reacio a la tecnologí­a. La clave para un diseño efectivo, especialmente al hablar de diseño plano, radica en entender que a simple vista puede parecer tan simple, que su complejidad real permanece oculta, por lo cual hay que analizar siempre cuán utilizable puede ser, es decir, cuán obvia es la interacción cuando este usuario un poco torpe acceda a la interfaz de tu sitio. Esto sin duda es muy importante para hacer que un diseño plano sea genial.

Formas básicas, colores sólidos e í­conos simples hacen parte de este agradable tema para iPhone, que muestra lo mejor de las interfaces de usuario con elementos planos, convirtiéndose en un claro avance en términos de simpleza y claridad.

¿Cómo es que el diseño plano se volvió tan grandioso como muchos dicen?

Un diseño simple no significa un pensamiento simple. Adentrarse en esta fuerte tendencia supone ciertas ventajas. El diseño plano es una de las muchas variaciones del minimalismo, le da bastante importancia a formas básicas, colores intensos y contrastantes, elementos grandes y planos. Estas caracterí­sticas tienen grandes beneficios que pueden explicar el éxito de este estilo de diseño.

• Las formas básicas y minimalistas son importantes: La estética final del diseño plano debe ser simple y ligera a la vista. Las formas básicas comienzan a desempeñar un rol muy importante dado que nada es más simple que las formas básicas. Cuadrados, rectángulos, cí­rculos y otros polí­gonos básicos se combinan con esquemas monocromáticos o í­conos y textos altamente contrastantes.

La versión beta del sitio de Skype aprovecha las formas básicas como rectángulos y cí­rculos para darle una apariencia simple y renovada a su interfaz.

• Colores sólidos e intensos: Las formas básicas aguantan lo que sea; una amplia gama de esquemas de color se puede aplicar a estos elementos, evitando biselados o sombras paralelas, degradados, brillos, etcétera. Sin embargo, en algunos casos, unas pequeñas sombras ayudarán a mejorar la usabilidad sin afectar la simplicidad del esquema.

Un ejemplo de cómo los elementos planos y colores sólidos pueden crear una gran interfaz de usuario.

• La identidad de marca potenciada por los colores: La implementación de la identidad corporativa en los sitios y aplicaciones web será cada vez mayor; el uso de colores planos en los elementos facilitará este proceso y hará que sus elementos se distingan con mayor claridad.

Adidas muestra elementos simples, tipografí­as grandes y una combinación de blanco y negro como complemento de la identidad corporativa de su logotipo.

• Perfecta para resoluciones HiDPI: La web enfrenta la necesidad de ser muy detallada y estar lista para mostrarse en resoluciones muy altas, por esto el diseño plano es un paso hacia este objetivo. Sus caracterí­sticas generales como los colores sólidos, elementos básicos y contrastes altos le dan una apariencia fantástica tanto en dispositivos pequeños como en resoluciones altas, dado que no hay elementos gráficos muy complejos, además el tiempo de diseño se reducirá notablemente y le quitará complejidad a la responsividad de los esquemas diseñados.

Bastantes tipografí­as, elementos básicos y colores sólidos, hacen de metaphiziks un sitio que se ve bien en cualquier resolución, desde pequeñas pantallas hasta HiDPI sin perder su estética y evitando un bajo desempeño del sitio.

• Altos contrastes para mejorar la accesibilidad: Las personas con limitaciones visuales están siendo tenidas muy en cuenta y este es uno de los puntos a favor del diseño plano. Dado que la tendencia es crear elementos grandes y claros así­ como tipografí­as contrastantes, se hace más fácil de leer, navegar y se da una mejor interacción para aquellos usuarios con algún tipo de limitación visual.

Symb.ly presenta un alto contraste, el cual es claro a primera vista (izquierda) y lo es más aún al invertir sus colores (derecha). Su estilo minimalista es un perfecto ejemplo de enfoque en el contenido.

• Gran tamaño para mejorar la experiencia táctil: Las computadoras de escritorio y portátiles han venido perdiendo su posición dominante y la tendencia móvil, representada por teléfonos inteligentes y tabletas, se ha convertido en la mejor manera de navegar la web. Como muchos de estos dispositivos usan pantallas táctiles y soportan tecnologí­as gestuales, se vuelve ideal que haya suficiente tamaño para dedos de todo tipo y tamaño, evitando así­ errores causados por intentar interactuar con elementos muy pequeños. Esta es otra de las ventajas de esta tendencia plana, ya que al presentar elementos de gran tamaño y bien definidos, la experiencia táctil se ve enriquecida.

Tipografí­as y elementos de gran tamaño, contrastes suaves entre colores cálidos y ligeramente frí­os. BigTop es un sitio que aplica un balance de interactividad para dispositivos táctiles y aquellos manipulados por medio de periféricos como ratones y lápices ópticos.

• La simpleza mejora el desempeño ya que no hay muchos elementos qué procesar: El diseño plano permite el uso de nuevas técnicas como SVG y Canvas. Dado que los elementos no son muy complejos, la máquina tardará menos en procesar el esquema final de un sitio o aplicación web. Esto se traduce en un mejor desempeño y una experiencia de usuario mejorada.

Un diseño que muestra una adecuada implementación de simplicidad usando colores sólidos. Aaugh es un buen ejemplo de cómo verse sofisticado sin tanto adorno.

• Genial para centrarse en el contenido sin perder su impacto visual: Dejemos algo bien claro. Si el diseño plano no fuera lo suficientemente impactante, no serí­a una tendencia. Así­, su gran atractivo presenta un punto adicional a su favor y es que permite resaltar el contenido, lo cual será otra tendencia en el futuro, sin duda alguna. Carente de elementos distractores y con un contenido que presenta algún tipo de contraste con los elementos de diseño, todo el enfoque del sitio estará centrado en el contenido y este continuará viéndose fantástico.

The Cheese survival kit tiene un diseño simple que usa escala de grises y un poco de rojo como esquema de color. Muestra un gran contraste, usa elementos planos que permiten prestarle mucha atención a su contenido. Este es otro buen ejemplo de lo que un sitio web con diseño plano debe ser.

Por supuesto, el hecho no es copiar exactamente el modelo de diseño que Microsoft ha establecido con W8, sino jugar con las caracterí­sticas de la simplicidad, encontrar equilibrios y divertirse diseñando.

Naveguemos en las más recientes prácticas del diseño web

Fondos de tamaño completo – Más vida para la Internet

El incremento en el mercado de dispositivos con altas resoluciones y profundidades de pixel ha causado que más personas usen fotografí­as de gran formato. ¿Qué mejor lugar para mostrar estas imágenes que el fondo del sitio?

Woodwork – En este ejemplo, los creadores se abstienen de usar solamente una gran fotografí­a en el fondo, ¡en lugar de eso usan nueve! Con esto ellos logran un gran equilibrio dado que estas fotos contrastan entre sí­ por sus colores promedio, haciendo esta página de inicio un perfecto ejemplo del uso de fotografí­as.

Far East Soho – El uso de varias fotografí­as incluidas sin una estructura formal, hace que este sitio muestre un enfoque sofisticado de un buen fondo. También se juega un poco con ví­nculos y contenidos, además al posicionarse sobre algunas de estas imágenes, comienzan a mostrar algunos efectos de movimiento aumentan la interactividad.

Colores vivos y altos contrastes – La legibilidad convertida en estética

El contenido es ahora una prioridad y una buena forma de resaltarlo del resto de los elementos es usar altos contrastes junto con colores planos, agradables y ví­vidos capaces de causar gran impacto. Veamos algunos ejemplos.

Circles Conference – La primera imagen es una toma de pantalla de una invitación a recibir actualizaciones y noticias del sitio. Se destaca el uso del color blanco sobre el magenta en el fondo, mientras que el campo para ingresar la dirección de correo electrónico no le resta importancia a dicha invitación, sino que mantiene su relevancia a primera vista. Abajo, se destaca la presentación de los itinerarios. Mientras que el fondo sirve como un lienzo, las fotografí­as dentro de cí­rculos monocromáticos le dan un toque de modernidad. Adicionalmente el texto grande en color magenta, resalta cada actividad y los textos más pequeños bajo los tí­tulos dan un gran contraste y equilibrio al diseño.

Paid to Exist – Un texto que rompe todos los moldes, conformado por tipografí­as grandes que logra un buen contraste entre el amarillo y el blanco al añadir una sombra suave y sólida al texto más grande. Por otro lado el pequeño texto descriptivo termina de darle el equilibrio al conjunto.

Josh Garrels – Aunque el fondo es más detallado y los elementos de texto se integran con los esquemas de colores, el uso de un buen contraste genera una apariencia genial.

2012 on Twitter – Su diseño juega con un rango de varios colores que usa el blanco para resaltar y contrastar el texto sobre estos y presenta una estructura en la que las cajas de colores se ven bien diferentes de otros elementos como la caja grande de la izquierda.

Fuentes y fotografí­as grandes – La alta definición requiere tipografí­as e  imágenes grandes y elegantes

Mientras explorábamos las categorí­as anteriores, pudimos notar cómo el gran tamaño de imágenes y textos tienen una importancia muy grande en las tendencias actuales, por lo cual no estarí­a nada mal explorar algunos ejemplos acerca de estos elementos.

Crush Studio – Usando un deslizador, fotografí­as en escala de grises y gran resolución van mostrando las instalaciones de este estudio. Estas tomas se ajustan al ancho de pantalla y se ven muy bien.

Serving Orphans Worldwide – Como ya es usual, una gran fotografí­a es usada aquí­ como fondo de un contenedor, mientras que texto e í­conos "flotan" sobre la imagen y se resaltan por sus colores intensos. Al mismo tiempo la imagen se integra completamente al contenido y al mensaje mostrado.

Serving Orphans Worldwide – Esta tipografí­a con serifas ubicada sobre la imagen resalta realmente bien ya que esta última tiene pocos colores intensos. Además, su tamaño proporciona una clara legibilidad e introduce el objetivo del mensaje a transmitir.

Pulpfingers – Esta letra informal sin serifas presenta colores cálidos y elementos enormes, comunica dinamismo y un cierto dejo de alegrí­a. Al contrastar totalmente con el color de fondo, este texto se ve realmente muy claro.

Josh Garrels – Una buena elección de fotografí­as y fondos no muy brillantes, permiten que el texto de gran tamaño resalte de estos usando blanco. Del mismo modo, la tipografí­a con serifas tipo slab acentúa estos tí­tulos y les da un estilo informal y a la vez elegante.

Grain and Mortar – Este gran ejemplo de textos grandes y contrastantes le dan una apariencia final que no solamente se ve potenciada por el contraste del blanco sobre la imagen, sino que la combinación de letras sin serifas y escritas a mano proporcionan un contraste increí­ble.

Formas básicas: botones e í­conos – De regreso a lo básico

El objetivo es hacer cosas simples sin que se vean estériles. Hay muchos ejemplos de simplicidad que conservan el buen gusto, por lo que tomaremos un momento para detallar tales ejemplos.

Thibaud – Este sitio se compone básicamente de una rejilla, que es la que le da la apariencia original, permitiendo que los botones aprovechen su estructura tomando una muy bonita apariencia con sus colores pasteles y esquinas redondeadas. El texto está alineado en la parte inferior izquierda de los botones lo que les da un equilibrio y elegante apariencia a estos.

ZURB – Los botones son redondeados y tienen un color plano de acuerdo con el esquema de colores propio de la categorí­a en la que están ubicados. En su interior presentan í­conos en alto contraste y se apoyan por un texto sencillo bajo cada botón.

SpellTower – Estos í­conos tienen uno de los diseños más originales ya que tienen un toque de skeumorfismo, manteniendo a la vez cierta abstracción y un particular estilo de diseño.

Serving Orphans Worldwide – Usando una triada de naranja, cian y gris se le ha dado suficiente dinamismo a estos simples pero informativos í­conos.

Lift Interactive – Pese a que estos í­conos presentan un alto detalle sus trazos, no tienen un color diferente al blanco, lo que les da una apariencia simple; un cí­rculo un poco más oscuro que el color de fondo, ubicado tras cada í­cono, les permite sobresalir en el diseño.

Big Noise – La simulación de elementos cotidianos sin abandonar el diseño plano funciona muy bien en estos í­conos, los cuales se ven completamente integrados en el esquema general.

DIY – Estos botones planos y básicos están compuestos por rectángulos con esquinas sutilmente redondeadas y un efecto de bisel realmente suave, que contrasta con el texto blanco sobre cada uno de ellos.

Sitios web de una sola página: desplazamiento infinito, una espada de doble filo

Muchos de los usuarios de la web pueden estar ya acostumbrados a este concepto implementado por Facebook y Twitter. Consiste en mostrar automáticamente más contenido una vez que se alcanza el final del contenido actual. Los usuarios de estas redes sociales no parecen molestarse por esta implementación ya que ellos publican minientradas con poco contenido y las entradas más recientes deben mantenerse al comienzo; la información que se maneja allí­ no es muy pesada y el rendimiento del sitio no se ve muy comprometido. Estos sitios carecen de pie de página, el cual no parece necesario; todo está en la cabecera del sitio. Así­, el desplazamiento infinito parece una apuesta al éxito.

¿Qué tan exitosa resultará esta implementación en sitios más elaborados y con contenidos más densos? ¿En sitios que no tienen clara la información de contacto y en la que los usuarios tratarán de buscar esta información en el pie de página? ¿Qué sucederá con el desempeño del sitio cuando haya demasiado contenido cargado debido al desplazamiento infinito?

Una barra lateral fija que aparece al presionar el botón situado junto al logotipo de Mashable, puede ser una buena opción para mostrar opciones adicionales, prescindiendo del uso de pies de página.

Esta implementación puede funcionar muy bien en un sitio web, pero puede representar problemas graves de usabilidad. Se le debe prestar bastante atención durante su desarrollo y ejecución. Puede parecer intuitivo que un pie de página deba estar siempre al fondo de la página siempre y cuando esta tenga final; de lo contrario, como podemos ver en la imagen de arriba, una buena solución serí­a implementar una barra lateral ocultable en la que se incluya mucha de la información importante se ubica usualmente en pies de página. Otra solución se basa en la implementación que ha realizado Gizmodo en español, en donde se usa el desplazamiento infinito, pero al llegar al fondo del contenido cargado en la primera carga, aparece un sencillo pie de página con información útil y un botón que activa la función de desplazamiento infinito. Luego de esto el contenido nuevo se cargará automáticamente una vez que el fondo haya sido alcanzado y el pie de página no se mostrará más.

Gizmodo en español ”“ Cuando el usuario llega al fondo de la primera carga de información, se muestra un pie de página con información útil.

Una vez se presiona el botón "Mostrar más", se activa el desplazamiento automático y este pie de página no se volverá a mostrar.

Finalmente, vale la pena hacer énfasis en que un sitio con un desplazamiento infinito ideal debe presentar contenido ligero para evitar problemas de rendimiento; de otro modo el sitio presentará retrasos y afectar otros procesos del navegador e incluso del sistema operativo. Es por esto que el desplazamiento infinito parece ser una buena práctica que puede resultar útil para bastantes usuarios, pero se debe diseñar e implementar con cuidado para asegurar su éxito.

Mantenga fijo el rumbo en su horizonte

La navegación es uno de los aspectos más importantes de la usabilidad. Unas útiles y bonitas herramientas de navegación suponen una necesidad más que un lujo. Normalmente las barras de navegación presentes en las cabeceras se pierden al desplazarse hacia abajo por el contenido del sitio, por ello queremos compartirle estas soluciones.

Circles Conference – Una cabecera en la que el logotipo se sitúa a la izquierda y pequeños textos muestran las diferentes funciones disponibles. Esta cabecera aparece en la pantalla luego de desplazarse hacia abajo en el sitio, hasta que la primera vista del sitio ya no se muestra más.

Lift Interactive – Esta barra de navegación usa textos grandes, casi juntos entre sí­ para mostrar sus opciones. Esta cabecera se muestra todo el tiempo mientras se visita el sitio, sea que se desplace abajo, haga clic en un enlace y el contenido vaya cambiando. Esta barra no le va a abandonar.

Happy Cog – La barra de navegación se mantiene todo el tiempo visible y en la parte alta al desplazarse por la página. El fondo de esta separa las distintas alternativas de navegación con lí­neas punteadas y el logo del sitio se ubica en el centro de la cabecera. El uso de blanco y negro en sus elementos proporciona el máximo contraste.

Micro contenido – Grandes cantidades de contenido deben fluir con independencia

Second Story – Uno de los ejemplos más interesantes de microcontenido. Está distribuido en 10 columnas y una barra de navegación a la izquierda. Como tantas columnas pueden no caber en un monitor, algunos botones pueden presionarse para navegar a través de ellas; cada una de ellas puede desplazarse hacia arriba o abajo independientemente de las otras. ¡Vale la pena darle un vistazo!

The Next Web – Al tiempo que el contenido fluye normalmente en la parte derecha, la parte izquierda presenta una barra con contenido y desplazamiento independientes en la que se muestran las entradas más recientes. Además el desplazamiento de esta barra lateral es infinito permitiendo cargar muchos más tí­tulos al llegar al fondo.

Contenedores simples y coloridos – la primera impresión se basa en cómo se ve el contenido

Darle importancia a los contenidos es fundamental. Como ya debe saber, Internet está muy enfocada en ello; los lectores podrí­an estar dispuestos a centrarse en este si el contenedor en el que se encuentra la información tiene un agradable diseño que le dé un equilibrio estético al conjunto sin crear distracciones.

Everlovin’ Press – Un interesante contenedor que usa naranja para resaltar el tí­tulo y patrones en el fondo del bloque.

Women and Tech – Un contenedor plano, teñido de naranja con forma de una viñeta de diálogo de forma rectangular que contrasta muy bien con el texto blanco.

Supereight Studio – Este contenedor rectangular usa colores planos y levemente desaturados para diferenciarse de la imagen de fondo. Usa blanco para el texto y establece algunas subestructuras al interior del contenedor.

Serving Orphans Worldwide – El uso de colores planos y algunos pequeños detalles hace que estos contenedores rectangulares permitan centrarse en el contenido. Su diseño no resulta un foco de distracción en lo absoluto.

Mashable – Un contenedor simple y bonito. Provee de gran espacio a las imágenes y usa grandes tí­tulos en tipografí­a slab, logrando un buen equilibrio.

Enlaces coloridos – Destacándose del resto sin ser molestos

Cuando un enlace se incluye entre un párrafo, es más que probable que esté apuntando a algún recurso útil como una definición o un ejemplo de la idea que allí­ se desarrolla. Es por esto que destacar los enlaces del resto del bloque de texto es tan importante y es mucho mejor si se puede lograr que luzcan bien.

Women and Tech – El color naranja intenso de los ví­nculos se adapta agradablemente al esquema de colores del sitio y hace que cada enlace se distinga bien del resto del texto. Asimismo, cada ví­nculo está subrayado para asegurar un énfasis máximo.

Webdesigner Depot – Estos enlaces se diferencian del resto del contenido al usar una tipografí­a más gruesa, un color naranja para acentuarlos y al pasar el puntero sobre estos se resaltan con un efecto 3D. Uno de los mejores ejemplos de enlaces que hemos visto en mucho tiempo.

Ilustraciones básicas – Los trazos y colores dan sentido al universo

La web no se trata solamente de textos y fotografí­as. Las ilustraciones tienen una fuerte cuota de participación ya que sirven como una interpretación gráfica de la idea principal expresada en el sitio. Dado que el diseño plano está invadiendo la web, está afectando también las técnicas y estilos de ilustración como veremos a continuación.

Bond Cars – Usando fuertes trazos para contornear las ilustraciones y lí­neas un poco más angostas, dependiendo del nivel de detalle del dibujo, este tipo de ilustración, al no contener colores de relleno, consigue transmitir una percepción de simplicidad y estética.

SpellTower – Esto es lo más cerca que el diseño plano puede estar del skeumorfismo. Estas ilustraciones representan objetos cotidianos, pero manteniendo un estilo único y plano.

Pulpfingers – La apariencia de este sitio sobresale por sus ilustraciones que juegan con el esquema de colores y se combinan apropiadamente con el diseño general.

Envy Labs – Estas ilustraciones son destacables debido a que no usan bordes en sus formas, sino que los colores de relleno son los que definen los lí­mites de cada una de ellas.

Interacciones sutiles – Cómo hacerse notar elegantemente

La web es interactiva por naturaleza, es una de sus principales caracterí­sticas y ha ayudado a atraer a muchas personas a Internet. Sin interacciones precisas y funcionales, los sitios web simplemente se reducen a montones de textos e imágenes aburridos. La tendencia actual en cuanto a interacciones es hacer que estas sean tan sutiles como sea posible y que resalten adecuadamente el elemento sobre el que se aplican.

Ousback – Al posicionar el puntero sobre cada elemento, este "salta» ligeramente hacia el frente, revelando una fuerte y definida sombra paralela.

Thibaud – Cada vez que se posicione sobre los elementos grises que no tienen í­conos, estos solo se oscurecerán un poco. Al posicionarte sobre los que contienen í­conos, estos mostrarán información hasta ese momento oculta presentada en colores y texto contrastantes.

Women and Tech – Cada vez que estos elementos aparecen en pantalla, comienzan a mostrarse animaciones cortas y sutiles que interactúan entre sí­, logrando un efecto agradable que se adapta al diseño general del sitio.

Manos – Una vez que se tocan estos elementos con el puntero su brillo aumenta un poco para hacer notar que se están resaltando.

Lift Interactive – Al pasar el cursor sobre los libros, estos rotan un poco hacia la derecha sin perder su calidad original, con ayuda del uso de técnicas de 3D.

Un espacio limpio: ¡fuera distracciones, enfoquémonos exclusivamente en el contenido!

Pocas cosas resultan más relajantes que poder enfocarse en algo sin interrupciones ni molestias. Así­, los espacios claros permiten enfocarse en los contenidos, sumándose además a la corriente de diseño plano.

Manos – Define sus elementos usando solamente contornos que son apenas más oscuros que el color de fondo y el esquema general de colores. Este sitio define algunos espacios con absoluta claridad y proporciona elegancia, evitando sobrecargas de colores y formas.

SpellTower – Evitando los detalles innecesarios, este diseño se centra en mostrar solo lo que tiene que mostrar, usando colores simples e intensos para rodear los objetivos y hacerlos ver más simples mas no simplones.

Shelton Fleming – Usando un esquema simple de escala de grises y amarillo, este sencillo sitio evita el uso de formas y otros adornos, enfocándose en mostrar su tipografí­a slab y su contenido de una forma realmente hermosa.

La tipografí­a aún domina la red: respétala como es debido

La red cada vez es más grande pero busca simplificarse, ser responsiva, más plana y más enfocada en el contenido; la tipografí­a, a su vez, tiene un papel cada vez más importante. No es nada agradable ver tipografí­a desordenada y difí­cil de leer que confunda e irrite al usuario. Es mejor que sea clara, elegante y legible para que mejore la experiencia del usuario.

El asombroso poder de CSS le ha dado a la tipografí­a una personalidad muy fuerte ya que hoy en dí­a no depende de las fuentes instaladas localmente en el equipo en que el sitio web se muestra. Por ejemplo, la propiedad @font-face nos permite usar cualquier tipo de letra que queramos para crear diseños basados en una amplia gama de tipos e incluso í­conos asignados a los espacios privados de la tabla Unicode. Asimismo, diseñar dando protagonismo a la tipografí­a tal como sucedí­a en los comienzos del desarrollo de esta, cuando los diseñadores contaban con pocos tipos de letra como únicas opciones para crear volantes, afiches y diseños para publicaciones escritas.

Afiche diseñado totalmente con tipografí­a, remembrando el estilo dominante a comienzos del siglo XX.

El diseño tipográfico cada vez es más importante, por lo que bien vale la pena conocer algunas buenas muestras de ello, basadas en los cánones de comienzos del siglo XX. Muchas personas creen que el tiempo es cí­clico y, de este modo, el diseño web puede estar experimentando una evolución similar a la vivida por el diseño gráfico en sus comienzos.

Tendencias en tipografí­a: embelleciendo el contenido de la web

Al navegar a través de los mejores sitios de la red, no es difí­cil darse cuenta de cómo estos van parametrizando ciertos elementos y técnicas. Uno de los aspectos más importantes de hoy en dí­a es la tipografí­a. He aquí­ una compilación de tipos de letra contemporáneos provenientes de sitios web diseñados acordemente.

Museo Slab ”“ Mashable

Kulturista Web – Web Designer Depot

ITC Avant Garde Gothic ”“ Tapmates

Museo Sans 100 Regular ”“ Skype

Museo Sans 100 Regular ”“ Grooveshark

Museo Sans 900 Regular – Chrisboddy.co.uk

Smythe Sans Bold – Seedspot.org

Open Sans ”“ Foundation

Agenda Medium ”“ Imavex

Helvetica Neue ”“ Spotify

Tahoma, Geneva – attackemart.in

Segoe UI ”“ Microsoft

Apercu Pro Bold, Relative Book – bakkenbaeck.no

Florence Sans Regular ”“ Teamgeek

PF DIN Display Pro Light – Appex.no

Sanzettica 1 Thin ”“ Tinke

Futura ”“ Juxdigital

PT Serif ”“ Ramotion

Los tipos de letra son como notas musicales, es importante saber cómo combinarlos

Como todo elemento de diseño, los tipos de letra tienen su propia personalidad. Estos pueden expresar sensaciones, estados de ánimo e ideas. Un mensaje especí­fico debe soportarse con elementos especí­ficos para transmitirse correctamente y dado que las los tipos son representaciones de las letras del alfabeto, es extremadamente importante escoger las que van a causar una impresión acorde con el objetivo del mensaje. En ocasiones el mensaje puede ser tan complejo que no es posible presentarlo en un solo tipo de letra, por lo cual es mejor hacer combinaciones de dos o más tipos para hacer más fácil su lectura. A pesar de esto, este proceso no puede ser tomado a la ligera debido que el carácter, peso e impacto de diferentes fuentes debe estar complementado entre estas. A continuación algunos aspectos a tener en cuenta para ello.

• Si el objetivo es proyectar un estado aní­mico alegre y lleno de energí­a: Como mencionábamos, cada tipo de letra tiene su propio carácter, así­ que jugar con temperamentos contrastantes puede producir una sensación de frescura, de novedades en camino, además de añadir alegrí­a y un espí­ritu festivo al mensaje.
• ¿Apuntando a mostrarse contundente y poderoso?: Usar tipos de letra contemporáneos con diferentes caracterí­sticas, como trazos fuertes o serifas redondeadas permitirá evitar las redundancias visuales y fortalecer el diseño lo suficiente para comunicar cualquier mensaje que pretenda causar ese enorme impacto en los lectores.
• Un mensaje serio y calmado: Pocas cosas son más agradables que un entorno equilibrado. Si su objetivo es alcanzar este balance, el uso de tipos de letra con caracterí­sticas similares que combinen con otras de texturas diferentes, incluso contrastantes, ayudarán a alcanzar esta meta.
• Proyectar respeto a través del mensaje: Muchos mensajes merecen ser presentados con cortesí­a, simpatí­a y buen gusto; a esta altura resulta adecuado mezclar tipos de letra similares con proporciones y caracterí­sticas variables, para asignarle a cada una diferentes papeles en el texto.

Estos son algunos consejos que pueden ayudarle a mezclar exitosamente los tipos de letra. Recuerde que una tipografí­a que esté de moda no necesariamente supone la mejor opción para su contenido. La moda no incomoda, pero esto no quiere decir que tenga cabida en todas partes; no olvidemos que la nunca bien ponderada Comic Sans fue tendencia a comienzos de la década pasada.

La buena legibilidad no es una opción, ¡es una necesidad!

Todo texto pretende mostrar un mensaje de la manera más clara posible y causar un impacto o impresión especí­ficos en aquellos a quienes va dirigido. Si el mensaje no es lo suficientemente claro, su transmisión resulta inútil. Muchos aspectos pueden causar que un mensaje escrito sea impreciso, por ejemplo, el uso incorrecto del lenguaje, la inclusión de términos puramente técnicos, la carencia de precisión o la escritura del idioma en caracteres irreconocibles y desordenados. Este último factor es muy importante, por lo cual nos enfocaremos en él ya que está directamente relacionado con una buena legibilidad tanto de carácter como del párrafo.

Para comenzar, establezcamos la diferencia entre ambos términos. La legibilidad de los caracteres  tiene que ver con la apariencia de las letras, es decir, sus formas, trazos y caracterí­sticas. Por otro lado, la legibilidad del párrafo comprende la interacción entre las letras, espacios, signos de puntuación y otros elementos tipográficos, así­ como al combinarlos se ve afectado el grado de dificultad de la lectura de cualquier estructura de texto. La legibilidad del párrafo puede verse afectada por la legibilidad de los caracteres, pero no viceversa.

El texto de la izquierda muestra letras con muchos adornos que dificultan el reconocimiento cada una de ellas. Al usarlas juntas en un texto, la legibilidad de párrafo se vuelve compleja. Por otro lado, el texto a la derecha muestra una fuente con caracteres bien diferenciados y distinguibles así­ como una adecuada disposición estructural que hace que el proceso de lectura sea tan fácil como, se supone, debe ser.

Adentrémonos un poco más en algunos inconvenientes que pueden aparecer al manipular tipos de letra y que pueden afectar tanto la legibilidad de carácter como la de párrafo. Al buscar en la red los mayores obstáculos para una legibilidad de carácter efectiva, probablemente encuentre bastantes discusiones si resulta mejor usar tipos de letra con o sin serifas. A pesar de que no hay conclusiones suficientes en favor de una o la otra, muchas veces dicha discusión se centra en la defensa, de alguna de las dos, con base en su estética en lugar de la legibilidad de párrafo que en realidad proporciona.

Veamos una muestra de ello; hay una creencia, muy común por cierto, de que los tipos de letra sin serifas se ven mejor en un monitor digital, dado que está conformado por pixeles, haciendo que tales fuentes se adapten mejor a las rejillas de pixeles al no presentar detalles en sus extremos (al carecer de serifas), dando una apariencia más clara al mostrarse en pantalla. No obstante, muchas de los tipos de letra más utilizadas actualmente, usan serifas y está demostrado que estas se ven muy bien en diversos escenarios. De hecho, es más probable que aparezcan problemas de legibilidad de carácter entre miembros de una misma familia tipográfica que entre tipos de letra con o sin serifas.

Estas imágenes nos muestran como tanto los tipos de letra sin serifas (izquierda), como con serifas (derecha) se adaptan muy bien a la rejilla de pixeles de un monitor. – Fuentes: Nicksherman, Creativepro

Es mejor prestar atención a otras caracterí­sticas que pueden ciertamente afectar la apariencia de un tipo de letra y su legibilidad de carácter; estas caracterí­sticas permiten comparar diferentes tipos para poder hacer la elección correcta:

• Las letras y demás caracteres deben tener suficiente espacio entre sí­. Dependiendo de la forma de cada carácter, puede funcionar que el carácter anterior invada una pequeña porción de su espacio. Sin embargo, esta no es una regla indiscutible, por lo cual es mejor usarla con precaución y así­ evitar confusiones en los lectores que pueden llegar a no saber en dónde termina un carácter y comienza el otro, debido a una apariencia amontonada.
• La altura de la x debe ser un fuerte punto de referencia ya que determina las proporciones de cada componente de la fuente. Este aspecto debe ser tratado con cuidado igualmente, dado que la altura de la x solo afecta positivamente a algunos caracteres, pero puede ser fatal para otros, especialmente aquellos con astas ascendentes, astas descendentes o tildes y signos diacrí­ticos.

Es mejor usar tipos de letra con formas regulares en lugar de otras que puedan aparentar ser creativas y muy artí­sticas pero que comprometan seriamente la legibilidad global del texto.

Una vez que se ha garantizado la legibilidad de los caracteres, una apropiada mezcla de los elementos transmitirá el mensaje de la mejor manera posible.

Esto nos lleva a revisar algunos conceptos sobre la legibilidad del párrafo:

• Si el párrafo luce amontonado, sin suficiente espacio entre lí­neas, se convertirá en un gran obstáculo para que los lectores puedan dar el salto al comienzo de la siguiente lí­nea; por eso es mejor si el espacio entre lí­neas es mayor o igual al propio tamaño de la letra.
• Cada tipo de letra tiene una función; unos fueron hechos para cabeceras, otros para texto de párrafo, otros para pies de página, y así­ sucesivamente. Por supuesto que de vez en cuando resulta genial romper las reglas, pero es mejor aún cuando se rompen sabiendo bien lo que se hace, de lo contrario la mejor apuesta radica en usar los tipos de letra para el propósito para el que fueron diseñados.
• La distribución de la lí­nea es un factor fundamental. Algunas veces, cuando el texto está justificado y sin guiones al final de la lí­nea para separar palabras silábicamente, pueden aparecer algunos espacios considerablemente grandes entre palabras, que aumentan la dificultad visual en los lectores y rompen el flujo de lectura.

Para concluir este episodio, vale la pena decir que siempre valdrá la pena ver más allá de lo que ve. El punto es no hacer énfasis en la eterna disputa entre tipos de letra con o sin serifa, sino profundizar en las caracterí­sticas de cada familia tipográfica y determinar su uso más adecuado a partir de cuán capaz será de transmitir efectivamente un mensaje determinado.

Algunos de los sitios más visitados, entre los cuales pueden estar sus favoritos, no están optimizados para una experiencia cómoda de lectura, convirtiéndose en focos pasivos de estrés y minimizando la importancia de contenidos que deberí­an resaltarse. Debido a esto se ha desarrollado Readability, una herramienta útil tanto en computadoras como dispositivos móviles. Brinda una experiencia enriquecida de lectura al eliminar elementos distractores, además de dar una mejor estructura a los párrafos y permitir guardar el texto para leer posteriormente. Dispone de otras opciones para personalizar la apariencia del artí­culo convertido y hacer la experiencia aún mucho más cómoda. Esta utilerí­a es perfecta si está cansado de esas estructuras irregulares de texto y elementos que las rodean, que al final dañan su experiencia de lectura.

El contenido de la página original (izquierda) puede perder relevancia por las barras laterales, anuncios y estructura del texto. Readability toma lo importante del artí­culo y lo presenta usando una mejor estructura y tipografí­a (derecha), mejorando la experiencia de lectura.

La calidad del contenido es una necesidad; la web necesita mayor precisión

La red es cada vez más amplia y su densidad también se incrementa con rapidez. Esta fuerte competencia lleva el contenido a estándares más altos para evitar caer en la obsolescencia.

Como consecuencia de esto, los usuarios actuales ya no son lectores pasivos, ellos prefieren pensar, desglosar y discutir los conceptos que van encontrando. El contenido debe evitar, por todos los medios, de carecer de sentido y estar más abierto a alcanzar altos estándares de calidad.

A partir de esto, el trabajo colaborativo se ha vuelto más importante en la creación, edición y aseguramiento de la calidad de contenidos, incluyendo la participación de diferentes niveles de conocimiento. La riqueza que supone un debate entre diferentes puntos de vista y preferencias, permite detectar imprecisiones que muchos, tal vez, no ven o llevar el contenido a un nivel muy superior al beneficiarse de diversas ideas. Sacha Greif presenta en su sitio web Sidebar un buen ejemplo de lo que un proceso de creación colectiva trae como ventaja.

Puede suceder, igualmente, que este flujo de trabajo conlleve a la construcción de valiosas recopilaciones de recursos, artí­culos, opiniones, ejemplos y guí­as. Una muestra de ello es Svbtle, un sitio que se autoproclama como un gran conjunto de artí­culos publicados por autores brillantes. Este sitio fue creado por Dustin Curtis y pretende alcanzar altos estándares de calidad en su contenido.

En adición a esto, compartir contenido publicado abre el camino hacia la obtención de mejores herramientas de aprendizaje. Debido a que muchas personas navegan en Internet a diario para encontrar toda clase de recursos para complementar sus procesos educativos, el contenido precisa ser exacto y claro. Gran parte del tiempo, la subjetividad de una perspectiva puede causar desequilibrio hasta el extremo de hacer perder la neutralidad de un contenido o concepto.

Para ilustrar este punto, podemos remitirnos a la función de video respuesta de YouTube que ha abierto la puerta a discusiones de temas cientí­ficos, educativos e innovadores, convirtiéndose en un recurso práctico para que los usuarios analicen y unificar conceptos. Los foros de discusión también son grandiosos al habilitar espacios públicos en los que los conceptos son cuestionados y las ideas pueden ser aceptadas o rechazadas, lo que nos recuerda las plazas de la antigua Grecia, en donde florecí­a la filosofí­a a partir de discusiones y debates.

Para resaltar los trabajos en este sentido, en el campo del desarrollo web, vale la pena mencionar a Codepen, un sitio en el que los desarrolladores pueden publicar demostraciones de sus códigos y servir así­ de inspiración para que sus pares creen versiones nuevas, proyectos basados en estos o simplemente mejores implementaciones de dicha idea.

Pienso que [Codepen] puede usarse para: crear demostraciones divertidas para compartir, bits reusables para usar después (como una librerí­a de recortes) y para crear ‘casos de pruebas reducidas’ – pequeñas partes de código para mostrar un error o resolver algún problema que se esté presentando.  – Chris Coyier, miembro del equipo de Codepen, para Net Magazine

El diseño web también se ha beneficiado de este concepto. De manera similar a Codepen para desarrolladores, existe  Dribbble para los diseñadores. Esta es una gran comunidad caracterizada por ser un lugar en el que estos últimos pueden compartir pequeñas imágenes de los proyectos en los que están avanzando. Dribbble tiene un diseño moderno, un buen entorno y un lenguaje cautivador dado que usan analogí­as relativas al baloncesto para ilustrar sus funciones.

"La idea de Dribbble comenzó en 2007. Cuando me puse en contacto con colegas diseñadores les pregunté, "¿En qué estás trabajando?". Me fascinó la idea de ver sobre el hombro de mis colegas mientras trabajaban." – Dan Cederholm, cofundador de Dribbble en una entrevista para Webdesigner Depot

Ahora bien, exploremos algunos avances del trabajo colaborativo y como estos están mejorando la calidad de la web.

Wiki: el origen del concepto

Wikiviajes ”“ El nuevo proyecto de la Fundación Wikimedia, cuyo objetivo es convertirse en una guí­a  turí­stica libre usando Wiki.

Para los principiantes, resulta útil darle un vistazo a la definición de wiki. Muchos de nosotros, si no todos, tenemos algo que ver con Wikipedia, el más notable ejemplo de wiki. Todos la hemos visitado, navegado, buscado en ella y muchos, incluso, la han editado, así­ que partiremos de ella para ilustrar nuestra reseña.

El contenido de Wikipedia muta permanentemente, en el afán de lograr la mejor calidad posible en la historia de las enciclopedias. Sus principales caracterí­sticas son su naturaleza digital y la posibilidad de ser editada por cualquier usuario registrado. Esta edición es sometida a un estricto control por parte de una comunidad muy comprometida con la calidad de Wikipedia, en la que se discute el contenido de cada artí­culo e incluso se solicitan fuentes válidas para citas y datos no convencionales.

Llevando el ejemplo de Wikipedia a una escala mayor, los conceptos de edición y construcción colectiva pueden aplicarse no solo a los muchos sitios existentes que usan wikis, sino también a todo contenido sujeto a edición por un grupo de miembros. Los foros de discusión pueden ayudar a llegar a acuerdos sobre los estándares requeridos y objetivos de tal contenido, al tiempo que diferentes personas con ciertos conocimientos pueden contribuir y enriquecer este contenido y llevarlo a un nivel de calidad superior. Estas fuertes razones hacen que wiki sea la base del trabajo colaborativo actual de la red.

Bifurcación de contenido: un contenido bien editado está más cerca de la perfección

Podemos resumir los conceptos mostrados y definirlos como bifurcación de contenido o content forking. Básicamente, consiste en que los usuarios copien y editen los trabajos de otras personas. Luego, estas personas editan dicho contenido y lo enví­an de nuevo al autor como aporte, para su revisión. Una vez el propietario aprueba estas modificaciones, el trabajo original se modifica con tales aportes.

Para prevenir que la creación colectiva se convierta en un cadáver exquisito, se deben seguir algunos lineamientos. Estos pueden ser establecidos individualmente por el propietario, o de manera colectiva por una comunidad y la mayorí­a de estas reglas buscan limpiar el trabajo de cualquier subjetividad o idea por fuera de los estándares, haciendo el producto final tan equilibrado y homogéneo como sea posible.

Entre las grandes ventajas que la bifurcación de contenido puede tener, se puede destacar que el contenido tiende a mantenerse actualizado al ser permanentemente editable y a que cada versión se pueda revisar posteriormente. Este fenómeno usualmente está relacionado a desarrollo de software y edición de publicaciones, pero esta práctica se puede aplicar a casi cualquier contenido editable que se encuentre en lí­nea.

Git: Trabajar en equipo, ahora mejor que nunca

Git es, hoy en dí­a, el gigante del trabajo colaborativo. Se ha vuelto muy popular entre la comunidad de desarrolladores dadas sus facilidades de trabajo en equipo. Trabajar en conjunto se ha convertido en un muy importante componente de los proyectos web, dado que múltiples colaboradores permiten un control de versiones más rápido, más fácil y mejor que nunca.

Git permite a múltiples desarrolladores editar uno o más archivos al mismo tiempo. Hace posible también la creación de ramas alternativas para probar nuevas funciones o reparar fallos sin afectar la secuencia de producción. A diferencia de los administradores comunes de código que tienen un repositorio principal en el servidor, que obliga a los desarrolladores a conectarse a este para editar documentos, Git le da a cada desarrollador una copia del repositorio central, de manera que cada uno puede trabajar a nivel local en el proyecto, incluso sin una conexión disponible a Internet; esto rompe todo esquema y establece una nueva tendencia en el campo.

La facilidad de uso de Git ha hecho posible la creación de diferentes versiones de proyectos, ayudando a los neófitos en el control de versiones a entender el concepto, del mismo modo que los desarrolles se han visto motivados a ser más productivos y colaborativos. Git, además, tiene varios servicios de alojamiento basados en web, como GitHub y Bitbucket que se destacan como los más populares.

Como conclusión, puede observar dos artí­culos interesantes sobre cómo usar Git y una guí­a para instalación, configuración y primeros pasos de Git en Windows.

Ahora ya sabes lo que te trae este nuevo año

Considerando estos conceptos, podemos asegurar que hoy tenemos una Internet más dinámica, construida por todos; diseñadores, desarrolladores, autores y editores; todos ellos han contribuido valiosamente y asimismo ayudado a desarrollar una web de calidad superior, más intuitiva y dinámica, que se enfoca en resaltar contenidos y con una presentación simple y atractiva, que evita excesos de información y tiene presente que para hacer una mejor web, la unión hace la fuerza.