Frontend by Malena Villar

CONTENIDO 04 Que es y que no es HTML5 08

Frontend o backend

Las cósas que ya deberías saber y las que tiénes que aprender

Frontend, la nueva era del diseño web

¿Qué significa retina display en el diseño web?

Tutorial completo de estructuras con CSS3

Cheat sheets

JEFE DE INFORMACIÓN Irma Ortíz Zaldívar JEFE DE REDACCIÓN Enrique Montes García EDICIÓN Y CORRECCIÓN María Eugenia FOTOGRAFÍA Alberto Chío DISEÑO Unik Gen NOTAS http://www.cristalab.com PUBLICIDAD Mauricio Díaz Tortoriello DISTRIBUCIÓN Y SUSCRIPCIONES Leticia Alvarado ADMINISTRACIÓN Y FINANZAS Emilio Torres TECNOLOGIAS DE INFORMACIÓN Esaú Martínez

frontend, mayo de 2014. Editor Responsable: Armelia Cue Cantu. Número de Certificado de Reserva otorgado por el Instituto Nacional del Derecho de Autor: 2004-032611211700-102. Número de Certificado de Licitud de Título: (en trámite). Número de Certificado de Licitud de Contenido. (en trámite). Domicilio de la Publicación: Atenas No. 5 Col. Juárez C. P. 06600, Cd. Juárez Chih.. Imprenta: Mexprint. Durango No. 3 Col. Roma C. P. 06700, Cd. Juárez Chih... Distribuidor, Despacho Everardo Flores, Serapio Rendón No. 87 Col. San Rafael C. P. 06470,Cd. Juárez Chih..

Más que sólo etiquetas HTML5, CSS3 y Javascript son la nueva columna vertebral de la experiencia de usuario en Internet, acortado como “HTML5”, similar a lo que en su tiempo fue la “Web 2.0”. “Web 2.0” es un término desafortunado. Inventado por O’Reilly y desvirtuado por el marketing, nunca significó nada más allá de “AJAX con usabilidad” y terminó como sinónimo de ignorancia tecnológica. Ahora tenemos “HTML5”. HTML5 es la nueva versión semántica del lenguaje de etiquetas con el que se construye internet. Pero la W3C, el consorcio encargado del estándar, también ha tomado HTML5 como el término sombrilla que engloba las nuevas tecnologías del futuro de la web. A diferencia de “web 2.0”, esta vez HTML5 tiene un norte definido, un grupo de empresas y fundaciones apoyando y una visión.

“¡¡Pero HTML5 no es CSS3 y Javascript!!” HTML5 es un lenguaje de modelado de información por etiquetas. CSS3 es un lenguaje de estilos en cascada. Javascript es un lenguaje de programación. Y todos, todos, se engloban alrededor del concepto HTML5. Flash es una herramienta vectorial, un formato de animación y un contenedor de Actionscript 3, así como el player de varios formatos de video y del sistema de RIAs Flex. ¿Y saben qué? Sigue llamándose Flash todo eso. La W3C oficialmente aceptó “HTML5” como el concepto sombrilla, al punto que creo un logo principal y una página de marca explicando claramente que HTML5 es HTML y más que HTML.

Los geeks fanáticos no entienden de marcas La discusión de que HTML5 no es CSS3 me recuerda la discusión de si “Linux” es “GNU/Linux” o no. La realidad es que a nadie le importa. Sí es importante definir qué cosa es qué al programar, pero cualquier persona inteligente puede diferenciar el uso de HTML5 en cada contexto. ¿Por qué el odio a usar HTML5 como concepto? No lo sé ¿Elitismo? No encuentro el menor sentido en atacar un concepto que ayuda a entender mejor una nueva tecnología y por extensión a vender más, mejor y más avanzados proyectos a los clientes y usuarios. El artículo de la semana pasada dice que Web Storage, la capacidad de guardar en disco con Javascript, no es HTML5.

“HTML5 estará listo en el 2015” El último y más famoso recurso de los detractores de HTML5 es que “no está listo”. ¿Ustedes creen que HTML5 es un software que una empresa “termina”? HTML5 es un spec vivo, cuya implementación depende de los navegadores y del cual gran parte se puede usar ya mismo sin problemas. Eso incluye CSS3. Es posible usar CSS3 en Internet Explorer viejos. Es posible usar HTML5 desde ya. El draft HTML5 de la W3C no se cerrará hasta dentro de unos años, pero para entonces nuestros navegadores tendrán nuevas tecnologías, porque no es Flash o Visual Basic, es una tecnología viva que crece con su uso. Sean profesionales, usen HTML5 y no teman llamarle a las cosas por su marca.

Mitos y verdades sobre HTML5 Antes de continuar con toda esta parafernalia de HTML5 y CSS3 es bueno desmentir o aclarar ciertas cosas que como desarrolladores debemos tener claras y que la información no muy clara en distintos medios (foros, blogs, screencast, etc...) puede prestar para confusiones y malos entendidos. Y esto puede generar un obstáculo en el equipo de desarrollo del proyecto en que se esté trabajando. A veces es bueno un poco de lectura pues no todo es código y código, siempre diré que una lectura o un buen libro mantienen el cerebro ejercitado y listo para aprender nuevas cosas.

La idea errónea de CSS3 CSS existe alrededor de HTML desde 1996 - es una tecnología relativamente vieja, claro está que esto muchos lo saben!!. La última versión, CSS3, se ha estado desarrollando desde 2005 y todavía está muy lejos de cumplir la recomendación total indicada por la W3C. Se ha dividido en módulos individuales que están siendo implementados por los navegadores, y de todos modos se continúa trabajando. Debido a esto, es difícil predecir cuándo CSS3 será terminado al 100 por ciento, aunque, como HTML5, partes de él ya se pueden usar en la mayoría de los navegadores. La cosa importante a observar con CSS es que está separado de HTML en el desarrollo y uso. CSS3 no es parte de la especificación HTML5 (que nunca fue y nunca lo será, eso espero!). Se trata de dos tecnologías completamente diferentes - uno para la estructura y el diseño, y el otro para la presentación, debido a su proximidad en el uso, han sido agrupados por alguna razón. El resultado final? No se puede referir a CSS3 como HTML5.

Entonces, ¿CSS3 es parte de HTML5?

- CSS3 es una tecnología de diseño, no tiene nada que ver con el contenido o la estructura de HTML5.

Web Fonts

Uno de los inconvenientes masivos con el diseño web el difícil uso de fuentes personalizadas. Hasta hace poco la única forma de hacerlo era mediante la construcción de imágenes estáticas que representan las palabras que desea utilizar, o mediante el uso de sistemas. Web Fonts resuelve este problema mediante la introducción de font-face una de tantas reglas de CSS, que permite el uso de fuentes personalizadas con sólo un par de líneas de código.

Entonces, ¿Web Font es HTML5?

- es parte de CSS3, además, técnicamente no se conoce como Web Fonts. La W3C lo declara como un módulo.

Geolocalización en HTML5 Imagínese que usted pudiera obtener automáticamente la información en la Web relacionada con su ubicación actual, donde quiera que esté (bueno en casi todos los lugares). La API de geolocalización está haciendo precisamente esto, proporcionando una herramienta a través de algunos scripts de JavaScript “sencillos” para la ubicación aproximada de un usuario. El usuario tiene que permitir que la información sobre su ubicación pueda ser compartida, pero las consecuencias de hacerlo son profundas, como los anuncios publicitarios relacionados con los resultados de búsquedas útiles y contenidos del sitio web correspondiente. Esto tiene cosas positivas y un cierto sabor negativo.

Y la API de geolocalización, ¿es HTML5?

- esta es una API de JavaScript que está diseñada para ser implementada por los navegadores que tengan soporte sobre ésta

SVG ó Gráficos en Vectores Scalable Vector Graphics (SVG) es un lenguaje que le permite crear gráficos vectoriales 2D utilizando XML. Es muy similar a canvas en su funcionalidad y propósito, pero difiere sustancialmente en otras áreas.

¿Pero SVG es HTML5?

NO Web Storage Los Cookies, aperitivo favorito de los desarrolladores, coincidentemente son el método de elección para el almacenamiento de pequeñas cantidades de información en el ordenador del usuario. Hasta ahora ha sido el único método viable de almacenamiento de datos en el lado del cliente, pero tiene defectos que pueden causar muchos dolores de cabeza en lo que a seguridad se refiere. Web Storage, es un conjunto de APIs de JavaScript, ha sido creado para ofrecer una selección de gran alcance de las opciones de almacenamiento que resolver las desventajas inherentes de usar cookies. Abren las puertas a cosas como ver tu correo electrónico basado en el navegador y almacenado un volumen de información relativamente interesante.

¿Pero Web Storage es HTML5?

NO 6

- es una API de JavaScript, que está diseñada para ser implementada por los navegadores que tengan soporte sobre esta.

- es una tecnología totalmente independiente que describe el uso de gráficos XML.

Web Workers Los Web Workers son en realidad esclavos incansables escritos en JavaScript listos para hacer uso de ellos. Su único propósito es llevar a cabo cálculos pesados y otras tareas intensivas en el background de la aplicación, sin que la página web se vea afectada en su rendimiento y dañar la experiencia del usuario. No hay un gran número de casos de uso para los Web Workers, pero es bueno saber que están ahí en caso de que los necesite.

¿Los Web Workers son HTML5?

- son una API de JavaScript, que está diseñada para ser implementada por los navegadores que tengan soporte para la misma.

WebSockets La comunicación normal en la Web se hace a través de HTTP, un método que sólo permite la comunicación en una dirección en un momento dado, y requiere de una página Web que se solicita cada vez que desea que actualice o cree datos. Para evitar esto los desarrolladores Web han estado utilizando toda una serie de opciones para eludir el requisito de tener que solicitar una nueva página cada vez que se necesite de una información sobre algún elemento de la página. Tecnologías como Ajax y Comet se inventaron para este fin. Sin embargo, todavía no son verdaderamente métodos de comunicación bidireccional - la información sigue viajando sólo en una dirección en un momento dado. Los WebSockets son diferentes, porque utilizan TCP que permite la verdadera comunicación bidireccional entre el cliente (su computadora) y un servidor. Esto significa que usted nunca tiene que hacer una petición de nuevos datos desde el servidor, ya que la información es, literalmente, transmitida a su computadora en tiempo real a medida que llega nueva información. Es un concepto complicado, pero muy poderoso, una vez que llegue a familiarizarse con él.

La API de WebSocket, ¿es HTML5?

- es una API de JavaScript que está diseñada para ser implementada por los navegadores que la soportan.

A pesar de que todas estas tecnologías no son parte de HTML5, todas ellas resuelven un propósito específico y que debe ser aceptado y usado junto con HTML5 siempre que sea posible. Por ejemplo, mediante la combinación de WebSockets y canvas de HTML5 se pueden crear en tiempo real increíbles juegos para varios jugadores en línea (redundante pero cierto). Ahora sí, es una combinación fresca de dos tecnologías diferentes, que juntas dan un sabor al desarrollo inigualable.

Qué significa backend y frontend en el diseño web Backend, frontend, diseño, UX, usabilidad, posicionamiento, estrategia, arquitectura y muchos otros terminos componen el diseño y desarrollo web moderno. Lejos está la época donde un “webmaster” hacía todo el trabajo. Ahora es imposible crear un producto completo sin por lo menos un diseñador, un front y un back. A menos que seas un genio cuyos padres fueron asesinados, juraste venganza, estudiaste cinco años en un templo samurai de la W3C, destruiste el templo y volviste para cambiar el mundo. Con aplicaciones web.

Backend:

Lado del servidor (PHP, Ruby on Rails, Django, Node.js, .NET) Un programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR, Django, Node. JS o .NET se conectan a la base de datos. A través de estos lenguajes y frameworks se recibe, procesa y envía

información al navegador del usuario. En código HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON, para ser procesados por Javascript. En Facebook, por ejemplo, PHP manda la estructura básica del sitio web, pero son múltiples programas y servidores hechos en C++ o Erlang que procesan la información en tiempo real (como chat, comentarios, notificaciones) y las envían y reciben a través de Javascript en el navegador.

No todos los diseñadores web son frontends ni deben serlo. Ni todos los diseñadores son realmente buenos para web. Un diseñador web sabe de interfaces, entiende la interacción con el usuario. Imagina las animaciones, las transiciones, los cambios en la aplicación. Sabe donde usar una caja de texto, un botón, un radio button, un checkbox, un desplegable. Aunque no sepa programarlos y sólo los dibuje en Photoshop. Pero además del diseñador hay personas dedicadas a entender el flujo de la interactividad. El camino que los usuarios toman y cómo simplificarla al máximo. Este tipo de personas son expertos en usabilidad y UX (User Experience).

Arquitectura de información y SEO: Estrategias de contenido, organización y estructura

Frontend:

Lado del cliente (HTML, CSS, HTML5, CSS3, Javascript, jQuery) Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript). En la época actual los frontends tienen HTML5 y CSS3. Con HTML5, desde el frontend, es posible hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario, insertar audio y video, entre otras cosas. Con CSS3, se pueden crear diseños

Diseño y usabilidad: Experiencia en la interacción del usuario

altamente complejos sin la necesidad de imágenes cortadas, sólo usando código. Bordes redondeados, sombras, degradados, fondos múltiples, entre otros. Por último, Javascript y sus frameworks añaden el componente de interactividad y conexión al servidor. Es posible comunicarse con el backend y la base de datos sin recargar la página usando AJAX o WebSockets, recibir esos datos y cambiar el diseño entero del sitio. jQuery hace todo esto fácil pero no es el único framework de Javascript

Los sitios con menu: “Home Quienes Somos Productos Servicios Contactanos” se quedaron atrapados en el siglo XX por falta de un arquitecto de información. La web no sólo son bases de datos, colores bonitos, imágenes y muchos links. La web tiene información, interacción, contenido ofrecido por los sitios y contenido generado por los usuarios. ¿Cómo se organiza ese contenido? ¿Cómo es presentado? ¿Qué tan profunda es la organización de ese contenido? ¿Es mejor simple y directo? ¿Es mejor un arbol de navegación complejo? ¿O es mejor dejar que el buscador sea la interfaz? Los arquitectos de información y la gente de SEO (Search Engine Optimization) se dedican a definir cómo organizar todo el contenido, cómo se distribuye y sobre todo, como darle a los usuarios la oportunidad de descubrir lo nuevo y lo más relevante para ellos.

Tendencias

Te contaremos qué tecnologías vale la pena aprender en el futuro, con un twist. Pero primero, tres cosas que YA deberías saber, que no son tendencia a futuro, sino una realidad en todas las empresas y proyectos que valen la pena. Coca Cola, Levis, Nike, Colgate, Macromedia, peinados, Moviles... Moda o no, muchos llegaron para quedarse, pero ¿Que pasa si llegan y no cambian de acuerdo a las tendencias de un mercado? Mas de una vez, nosotros los que desarrollamos sitios web, multimedia, impresos, recibimos a un potencial cliente que nos dice, necesito una pagina web, necesito un CD que tenga todo lo de mi empresa, necesito un plegable para entrega masiva... pero pocas veces nos preguntan, ¿Usted me podría actualizar sobre las

nuevas tendencias en web?, ¿Indicarme la mejor manera de hacer presencia en internet? ¿Que tan bueno y efectivo puede ser el que mi pagina web este hecha con animaciones y no con imágenes estáticas? ¿Puede informarme sobre las nuevas aplicaciones que puede llegar a tener una página web? Seguramente cada uno tiene su propia manera de afrontar un cliente, de afrontar un posible negocio, seamos “justos”, TODOS quienes afrontamos el placer de desarrollar un buen sitio web, estamos en la obligación de informar

sobre la actualidad, sobre la moda, sobre la tendencia... Muchos usamos fuentes pixel para Flash, otros la verdana tal vez, muchos usamos tablas en nuestras paginas dinámicas, otros estarán pensando en CSS, muchos creamos easing en Flash por “belleza”, otros menú en Fireworks por aquello de la fácil navegación, y muchos otros, prefieren decir, “ si señor, yo le hago eso por XXX dinero”, mientras que algunos dirán, “me gustaría que habláramos del proyecto antes de llegar a concretar algo”. Lo cierto es que, así como

no podemos imponer nuestros gustos en los trabajos a nuestros clientes, tampoco podemos negar a ellos la posibilidad de que vean mas de lo que habitualmente ven en internet, por el simple miedo de que nos diga, “eso es lo que yo quiero” y veamos que nos va a quedar grande. Hay que recordar que en las prácticas de mercadeo de cualquier tipo de producto, quien hace que nosotros mejoremos o nos estanquemos, es la competencia. En cualquier caso, la experimentación, no es mala ni es buena, ¡es sana!

Ya deberías dominar: HTML5, CSS3 y Javascript Lejos están las épocas donde hablabamos de cómo iniciar con HTML5, la promesa de lo que traía o si algún día vendría. Internet Explorer 8 o inferior es usado por tan pocas personas (mira tus Analytics del último mes) y los smartphones son tan úbicuos que aprender y dominar estas tecnologías es urgente. Javascript en especial es

un caso único. JSON desbancó a XML y las capacidades interactivas y velocidad de JS han crecido a pasos agigantados. Más ahora que gracias a Node.js, JS existe del lado del server. Es hora de dejar de limitar tu mente a jQuery (que no es nada malo) y expandirte al mundo de los objetos, Closures, sockets y si te aburres, del Shadow DOM.

Bases de datos no relacionales (MongoDB, Redis) MySQL, PostgreSQL y hasta Oracle siguen muy vivos, pero la necesidad de alta escalabilidad a bajo costo y las apps de rápido cambio han hecho que las bases de datos NoSQL estén en todas partes. Además son mucho más divertidas para programar.

Redis brilla en velocidad e interconexión entre lenguajes y sistemas, mientras que MongoDB es ideal para proyectos real-time de alta escritura, estructura de datos variable y baja densidad de datos. Además es nativa JSON y Javascript.

Usabilidad y User Experience Que no sea parte de la mayoría de carreras de ingeniería me impacta y ofende. UX y usabilidad son conceptos clave para unir el diseño y la programación. Es el lenguaje de comunicación con el que se hila la experiencia del usuario con la automatización técnica de una app. Todas las personas que hagan algo interactivo, aunque estén en el backend,

deberían saber usabilidad. ¿Sabes que es un test A/B? ¿Entiendes el flujo de interacción? ¿Sabes medir conversión, tuneles de comportamiento, entrada y salida de usuarios? ¿Estás analizando donde falla tu app? ¿Tienes pruebas en tus proyectos en múltiples tipos de entornos, pantallas y condiciones? Si haces una app móvil ¿La pruebas al sol?

Aprende: Laravel o Symfony (si te gusta PHP)

Node.js (o cualquier lenguaje fuera de la universidad)

PHP ha sufrido. Como lenguaje es una tormenta de malas decisiones pegadas juntas por lo fácil que es hacer deploy. El interés está más bajo que nunca, pero muchos entes están luchando por devolver a PHP el profesionalismo y nivel que merece. Un excelente framework es Laravel. Que trae a PHP el orden que otros han intentado y fallado (como Zend con su estilo Java)

Node.js ahora tiene su propio CMS, Ghost. Controla robots. Controla Uber, que revolucionó el mundo del transporte humano. Microsoft lo ama. Adobe lo ama. Apple lo ama. Google lo ama. Node.js (Javascript del lado del server) es mágico y no necesitas convencerte. Pero lo agrego por un mensaje secundario: Aprende lenguajes divertidos. Entrevisto a muchisimos pro-

pero manteniendose tan simple y directo como PHP siempre ha sido. Si Laravel no te suena y el ser un poco más estricto es lo tuyo, Symfony está muy bien también. Sólo no busques frameworks que intenten convertir a PHP en otra cosa (Cake, Zend, CI). El éxito de Laravel y Symfony está en respetar las fortalezas de PHP y solucionar sus debiles bases.

gramadores al año y los que me dicen que sólo saben los lenguajes que aprendieron en la universidad siempre tienen un punto negativo. Siempre. Aprende algo que te emocione. Django, Ruby on Rails, Scala, Haskell, Node.js. Pero aprende algo por fuera de tu educación tradicional, que demuestre que esto te apasiona. Tu empresa tendrá mejores devs siempre que salgas del típico PHP/.NET/Java.

Angular.js, Backbone.js o similares

Marketing online (de verdad)

JSON domina la interacción cliente/servidor moderna y este año se consolidaron los frameworks MVC del lado del cliente para Javascript. Backbone. js y Angular.js hacen fá-

Muchos escuchan “marketing online” y piensan “community manager”, una carrera que nació muerta. El verdadero marketing online es algo que todas las personas que crean en la web deberían conocer. Entender el SEO de una manera técnica, medir con estadísticas los datos de una campaña, saber graficar y analizar CPC, CPM, CTR, CRO. Conocer la ruta de las cookies y hacer remarketing. Decidir cómo

cil crear sitios múlti-pagina con URLs profundas conectadas a un backend complejo. Y gracias a que Google y sus cambios de algoritmo, no afecta en casi nada el SEO.

invertir presupuestos, qué tipo de tráfico existe y donde ponerlo. Crear estrategias de contenido e inbound marketing más allá de “un evento y un blog”. Marketing online es una carrera muy real, de estrategas digitales, rodeada de datos complejos y nada de humo. ¿Quieres aprenderlos a diferenciar? Toda campaña de marketing debe ser 100% medible, si no, es humo,

100% = 1em teniendo como premisa que los navegadores en esas medidas dan un resultado de 16px a 14px de base. Lo que concluye en dos cosas:

Usa “em” para Media Queries, no “rem” ¿Porqué? porque el valor que obtiene “em” en Media Queries es relativo al user agent, no al estilo CSS. Por lo que si usas “rem”, que debe tener una base definida en el CSS, nunca tomará esa base definida, sino que siempre tomará la medida 16px o 14px según el navegador.

Diseño Responsive con Media Queries y “em” ¡Muerte a los Píxeles! Actualmente hay un set de Media Queries en las que se trata de “identificar” el comportamiento del layout de acuerdo a las resoluciones de las pantallas más usadas. ¿Es esto correcto en un mercado donde la vorágine tecnológica nos estampa todos los días nuevos dispositivos y como resultado, nuevas pantallas y resoluciones? ¿Cuándo realmente debo generar un breakpoint con nuevos comportamientos en mi layout? Stephen Hay responde a esto algo muy particular: @stephenhay : Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! “Comienza con la pantalla más pequeña, luego expándela hasta que luzca como la mi*rda. Tiempo de hacer un breakpoint!”

Esto realmente nos deja a los diseñadores un poco con el síndrome de la hoja en blanco. Esta manera de pensar en el diseño corresponde a estar 100% convencidos de que la web es fluída y que los diseños estarán en un constante cambio. Ya no hay más pixel perfect y debemos dejar de pensar que media querie sirve para setear solamente los anchos de los elementos, sino también los márgenes, estilos y hasta comportamiento, como por ejemplo cuándo usamos un ícono responsive o no.

Ok, pero qué uso para Media Queries, “rem” o “em”? Hace poco hablábamos de las medidas relativas “em” y “rem” y sus diferencias y de cómo la unidad de medida “rem” era tan práctica de usar. Prestando atención en algunos ejemplos de Media Queries relativas me fijé que todas correspondían al par

las medidas relativas se basan en el valor inicial, por ejemplo 1em toma su valor inicial de 16px. “rem” no nos sirve porque su valor lo debemos declarar, y según la definición Media Queries ignora los valores declarados. Puede ser que el Media Querie en “rem” funcione pero siempre tomará el valor inicial por defecto (16px), por lo que es mejor usar “em”. Esto nos lleva a la segunda cuestión:

No podemos controlar todo Como diseñadores, o frontends, debemos librarnos a estas premisas, y sabes qué cosas podemos controlar y que cosas no. Muchas veces será el usuario el que termine de realizar ese control final al optar por visualizar el sitio de la manera en la que más sencillo será para él. Pero hay algo seguro, debemos dejar de pensar en píxel perfect cuando diseñamos para Web, y saber que los diseños estarán en constante movimiento literalmente, y es por eso que siempre debemos priorizar el contenido.

La era del diseñador

Frontend

y el fin del PSD intocable Algunos quieren matar a Photoshop o a los diseñadores que lo usan. No, esperen. Algunos quieren matar a los diseñadores y a los procesos de diseño. Esto es cierto y muy tímidamente comienzan a surgir términos como “la era post-PSD” e inclusive hay un “NoPSD movement”, really, donde comienzan a reverse las nuevas dinámicas de trabajo entre frontends y backends. Estas nuevas tendencias en realidad lo que pretenden es proponer mejores flujos de trabajo entre diseñadores-developers-cliente y dar una solución práctica a la forma cómo enfrentamos desde la interactividad algunas tendencias como el diseño responsive en la web.

ta un conflicto de diseño ante tantas resoluciones. Esto representa un gran problema de frente al cliente quien podría acabar con archivos con 100 tipos de diseños con diferentes vistas de un mockup. Todo esto me hace pensar si realmente los diseñadores nos dimos

¿Deben cambiar los procesos de diseño?

Me gusta mucho ver cómo trabajan los equipos de developers. No debe haber gente más práctica en el mundo que una persona que sabe programar y trabajar con un equipo de desarrollo con un mismo fin. Uno de los fundamentos de estas crecidas voces de devs que están en el área de diseño de software es que la diversidad tecnológica nos presen-

Continuous design y la Era Post-PSD La propuesta del “Continuous design” es la de diseñar con código la base mínima del producto en atención a las necesidades de programación que lleva detrás, para poder tener en poco tiempo un producto visible en la vida real, sin bocetos estáticos, y para ir generando el diseño con base en los requerimientos del cliente. Es un proceso de diseño ágil que desde el comienzo tiene en claro que el diseño va a ir creciendo y mutando sobre una misma idea. La idea al fondo de esta metodología es que, si hay que cambiar el diseño en el camino, que cambie y que no por eso el diseño base sea obsoleto. Cuando trabajamos para la web generalmente este proceso es inverso. Si participamos en equipos grandes hay metodologías que ayudan a organizar las etapas del diseño y la arquitectura de contenido de un proyecto web o móvil; en estos se genera, con equipos interdisciplinarios, la base del iceberg del proyecto, mediante estudios de casos análogos, se establecen las partes de la arquitectura de usuario, se trabaja en el cardsorting y el mapa de contenidos, wireframes, etc. hasta llegar al diseño final que luego recibirá el equipo de desarrollo para volverlo realidad.

¿Por qué el debate se centra en una herramienta?

cuenta de cuánto han avanzado en ciertas prácticas algunas áreas y si nosotros hemos hecho lo mismo con las nuestras.

¿Las herramientas ayudan con los procesos creativos o están para sepultarnos en una cueva de archivos obsoletos? Las herramientas, si están bien utilizadas, no deberían formar parte de

la discusión, sobre todo en ambientes creativos en los que las ideas más rentables pueden estar escritas en una servilleta de papel a modo de wireframe. Hay herramientas que ayudan, o que están tan incorporadas al trabajo del diseñador que colaboran a que el canal del proceso creativo no tenga interferencias. Podemos hacer lo mismo en Photoshop que en Gimp. El movimiento anti-PSD, menos Photoshop y más Frontend La crítica principal a la herramienta de Adobe es que los diseñadores entregamos una pintura en la pared en vez de un producto en el que se pueda ver la interactividad en los dispositivos y con el usuario; además, es mucho más endulzante para el cliente ver que en una primera instancia el producto está sobre rieles. Según esta tendencia anti-PSD la meta es lograr que el diseñador se tire de cabeza a diseñar usando código, como una manera de hacerlo más partícipe en el proceso de desarrollo y así evitar entregar el trabajo en un archivo psd con simulación de interacciones escondidas en capas invisibles en photoshop.: Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design. La propuesta es que el diseñador se vuelva cada vez más Frontend y adopte herramientas más simples e interactivas, que generen resultados más rápidos, y de alto impacto en una primera instancia de trabajo.

La tendencia está en la nube La tendencia en el trabajo de diseño web está cada vez más inclinada a las herramientas móviles y en la nube. Adobe lo entendió muy bien y por eso su último producto se llama Creative Cloud, además de haber adquirido la plataforma Behance, en la que podemos subir nuestro diseño directamente desde Photoshop a nuestra propia galería en una de las redes sociales más importantes de la escena profesional de creativos. ¿Es esto suficiente? Adobe ha hecho un gran esfuerzo por no quedarse atrás en la carrera al estrellato online, pero todavía no ha logrado una herramienta exclusiva para utilizarla en procesos de diseño web. Fireworks era una de las herramientas más potables y la enterraron, y ahora Sketch le está ganando el terreno en el ámbito de los diseñadores de interfaces pero es de pago y para Mac por lo que todavía no

ha tomado fuerza en los países de Latinoamérica. La aparición de herramientas online tan fáciles y cencillas de manipular, con las que podemos generar un template responsive de la nada, con frameworks integrados en javascript (hola layoutit.com) es hoy mucho más atractivo para las primeras instancias de diseño que las “pinturas” de una interfaz estática realizada a partir de Photoshop.

La fuerza de los frameworks se apodera del diseño Los frameworks, que antes sólo eran terreno de los programadores, están ahora avanzando en el cielo de los diseñadores. Hoy contamos con herramientas para diseño como 960 Grid System, Foundation, Bootstrap,

Holder.js, así como también podemos comenzar nuestros diseños a partir de prototipos already responsive y crear wireframes y mapas de contenido online con herramientas sencillas y gratuitas.

trabajo, pero tampoco seamos tan extremistas como para tirar por la borda tantos años de experiencias y productos exitosos que se han logrado solamente con tener una buena dinámica entre los equipos de diseñadores y

programadores que han dejado a los clientes más que felices. Herramientas aparte, no debemos dejar de mirar el horizonte de lo que importa: generar productos multiplataforma, basados en usabilidad y contenido.

Abracémonos diseñadores y programadores Volvámonos un poco más hippies y menos metaleros, y tratemos de no hacer una guerra anti-cosas, sino entendamos qué es lo mejor para poder trabajar en el jardín de la felicidad. No seamos reacios a adoptar nuevos caminos, procesos y tecnologías si eso va a mejorar nuestras experiencias de

Retina Display Laptops, teléfonos y tablets están cambiando las reglas respecto a los pixeles, las imagenes y las interfaces. El iPhone 4 fue el primer en ponerle nombre: “Retina Display”. Pantallas con el doble de densidad de pixeles de la generación tradicional en la que por años hemos estado acostumbrados a diseñar. Ese fue solo el inicio. Vivimos en un mundo dominado por 3 tipos de pantalla: •El teléfono, de uso normal vertical. •Los tablets. iPad a 4:3 y Android tradicionalmente a 16:9. •Los laptops y desktops, que van desde el netbook de 1024x600 hasta la estación de combate dual de 3840x1080.

¿Para qué pantallas diseñamos?

De Responsive Design a Retina Display, la diferencia es abismal

Asumiendo la pantalla 13”~15” como el estandar de los laptops y el iPad y iPhone como el estandar de los móviles, este es el mundo al que nos enfrentamos:

¿Recuerdas el gráfico anterior? Este es el gráfico del cambio de resolución entre los dispositivos normales y los dispositivos con pantalla tipo retina.

Dos soluciones surgieron. Crear un diseño aparte para móviles, otro especializado para tablets (puagh!) y uno tradicional para laptops. Otra idea, más sensata ha sido el Diseño Adaptable o Responsive Design. Requiere más esfuerzo, pero sólo tiene ventajas, entre ellas un mejor posicionamiento en buscadores para sitios móviles y un diseño uniforme y unificado. Pero ninguna de estas soluciones es eficiente para Retina Display.

¿Crees que aún son pocos? Apple tiene 3 teléfonos retina, la tablet más vendida del mercado, su laptop más

poderoso en 15” y este mes saldrá el Macbook Pro Retina de 13” que seguro venderá mucho. En un año, todos los Macbooks serán Retina. En el mundo Android, desde el Galaxy S2 la densidad aumentó mucho y con el S3 llegó al nivel de Retina Display. HTC, LG y Motorola tienen planes o teléfonos ya con alta densidad de pixeles. En tablets aún están quedados, pero el Nexus 7, la tablet Andriod

¿Qué se ve bien y qué se ve mal en Retina Display? Todo lo que sea texto se ve perfecto e impecable en Retina Display. El texto es vectorial y las buenas fuentes son adaptables a cualquier pantalla y resolución. Esto ha hecho renacer el font-face de CSS3 y las librerías de

No exajero. Cambiar de mi viejo macbook al Macbook Pepito Retina 15” fue como ver un canal de TV antiguo en un TV LCD HD 1080p de 60”. ¿Por qué antes se veía bien y ahora todo se ve mal? Todo es cuestión de perspectiva y comparación. Cuando tienes un Macbook Retina y uno normal lado a lado, no puedes evitar pensar que el normal se ve borroso, aunque lo hayas usado toda la vida. La solución es fácil: Pública tus imagenes al doble de resolución. Si quieres que un logo se vea bien a 100x100 en Retina, crea una imagen de 200x200 y ponla de 100x100 usan-

más vendida, tiene una densidad cercana a Retina. En el mundo Windows, tanto Samsung, como Lenovo y ASUS lanzarán laptops con pantallas tipo “Retina” y Windows 8 al final de este año. A partir de ahora todos los laptops de gama media y alta tendrán este tipo de pantallas. Es una realidad y hay que actuar ahora fuentes abiertas como Google Fonts. También existen fuentes de iconos que reemplazan los .png (nadie decente usa .gif desde 2012 al diseñar). ¿Pero las imágenes? Las imágenes son la mala noticia. Una imágen normal de 300x300 se ve así en pantallas normales (izquierda) y así en Retina (derecha):

do CSS. Lo mismo con HTML para las imagenes de tu contenido. No hay mejores soluciones. ¿Es más peso? Sí, pero encontré un truco curioso. Si exportas un JPG al doble de resolución, con el 40% de la calidad y por HTML o CSS lo redimensionas a la mitad de su tamaño, se ve impecable en pantallas normales y en pantallas retina. ¡Y pesa menos que un JPG normal a 85%!

Estructuras con CSS Este tutorial enseña los fundamentos de CSS usados para estructurar cualquier sitio web. Suponiendo que ya sabes lo que son los selectores, propiedades y valores. Y probablemente sabes algo de cómo estructurar un sitio web, sin embargo puede que aun sea motivo de ira y frustración para ti.

Sin estructura No tener estructura en tu sitio está bien si lo que quieres es tener una columna gigante de contenido. Sin embargo si el usuario hace la ventana del navegador muy ancha, será muy molesto leer: después de cada línea, tus ojos tendrán que viajar una distancia muy larga de derecha a izquierda hacia la siguiente línea. Trata de hacer más ancha la ventana de tu navegador para que veas a lo que me refiero. Antes de arreglar este problema, cerciorémonos de que entendemos la importancia de la propiedad display.

la propiedad “display” display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemevnto que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline.

block El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p y form.

inline El span es el elemento inline estándar. Un elemento inline puede

contener algo de texto dentro de un párrafo <span> como esto </span> sin interrumpir el flujo del párrafo. El elemento a es el elemento inline más común, ya que se usa para links.

None Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comunmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos. Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío.

otros valores de display Hay bastantes valores exóticos de display, como list-item y table. Discutiremos inline-block y flex después.

mejorará la situación cuando la ventana del navegador sea pequeña. Esto es importante cuando estamos haciendo un sitio para dispositivos móviles. Por cierto, max-width es compatible en la mayoría de los navegadores incluyendo IE7+, asi que no tengas miedo de usarlo.

box model Ya que estamos hablando de la propiedad width, deberíamos hablar del box model (modelo de caja). Cuando ajustas la propiedad width de un elemento, este puede parecer mas grande de lo que es: La propiedad border (borde) del elemento y padding (relleno) estirarán el elemento más allá del ancho especificado. Mira el siguiente ejemplo, donde dos elementos con el mismo valor width terminan teniendo diferentes tamaño al final.

margin: auto; Ajustar la propiedad width de un elemento block-level lo previene de estirarse hasta los bordes de su contenedor a la izquierda y derecha. Después puedes establecer la propiedad margin left y right para que sea auto y centrar de manera horizontal ese elemento en su contenedor. El elemento tomará el ancho que especificaste, después el espacio sobrante será dividido equitativamente entre los dos márgenes. El único problema ocurre cuando el ancho del navegador es menor que el de tu elemento. El navegador resuelve esto creando una barra de desplazamiento (scrollbar) horizontal en la página. Arreglemos esa situación...

max-width Usar max-width (ancho máximo) en lugar de width en esta situación,

Por generaciones, la solución a este problema han sido las matemáticas. Autores de CSS han tenido que escribir valores más pequeños para width de lo que en realidad querían, restando el padding y border. Afortunadamente ya no tienes que hacer eso...

box-sizing Durante generaciones, la gente se ha dado cuenta de que las matemáticas no son divertidas, asi que una nueva propiedad CSS llamada box-sizing fué creada. Cuando ajustas un elemento con box-sizing: border-box;, el padding y border de ese elemento no incrementan su ancho. Aqui está el mismo ejemplo de la página anterior, pero usando box-sizing.: border-box; en los dos elementos:

guna forma en específico. Se dice que un elemento static, está no posicionado y un elemento con valor establecido de position está posicionado.

Ya que esto es mucho mejor, algunos autores quieren que todos los elementos de sus páginas trabajen de la misma manera. Estos autores ponen lo siguiente en sus páginas: Esto asegura que el tamaño de todos los elementos siempre será modificado de la manera más intuitiva. Ya que box-sizing es bastante nuevo, te recomiendo usar los prefijos -webkit- y -moz- por ahora, como yo los uso en el ejemplo.

relative relative (relativo) se comporta de la misma manera que static a menos que le agregues otras propiedades. Establecer las propiedades top, right, bottom, y left de un elemento con position: relative; causará que su posición normal se reajuste. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.

fixed Esta técnica permite funciones experimentales en navegadores específicos. También, ten en cuenta que es compatible con IE8+.

position Para poder tener estructuras mas complejas, tenemos que discutir la propiedad position (posición). Esta propiedad tiene un montón de posibles valores, sus nombres no tienen sentido y son casi imposibles de memorizar. Veámoslos uno a uno, pero antes deberías guardar esta página en tus marcadores para futuras referencias.

static

static (estático) es el valor por defecto. Un elemento con position: static; no está posicionado en nin-

como fixed pero es relativo a su ancestro posicionado más cercano en lugar de ser relativo a la ventana del navegador. Si un elemento con position: absolute; no tiene ancestros posicionados, usará el elemento body del documento, y se seguirá moviendo al hacer scroll en la página. Recuerda, un elemento “posicionado” es aquel cuyo valor es cualquiera excepto static. Aqui hay un ejemplo sencillo:

Un elemento fixed (fijo) se posiciona a la ventana del navegador de manera relativa, lo que significa que se mantendrá en el mismo lugar incluso después de hacer scroll en la página. Al igual que con relative, las propiedades top, right, bottom, y left también son usadas.

El elemento .relative está usando position: relative;. Si estuviera usando position: static; su sucesor con position: asbsolute; escaparía y se posicionaría relativamente al body del documento. El elemento .absolute tiene position: asbsolute;. Se posiciona de manera relativa a su ancestro. Sé que esto es complicado, pero es esencial para crear estructuras con CSS de manera correcta.

Un elemento con valor fixed no deja espacio en el lugar de la página donde estaba ubicado normalmente. Los buscadores móviles, sorprendentemente no tienen muy buen soporte para el valor fixed. Aprende más al respecto aqui.

absolute absolute (absoluto) es el valor más mañoso. absolute se comporta

ejemplo de position Todo esto de position talvez tenga un poco más de sentido con un

ejemplo práctico. Abajo, esta la estructura real de una página. El estilo margin-left para section, es para que haya espacio para nav. Este ejemplo funciona porque el contenedor es más alto que el nav. Si no lo fuera, el nav se saldría de su contenedor. En las páginas que vienen a continuación discutiremos otras técnicas para estructurar y hablaremos de sus pros y sus contras.

el elemento section flota alrededor del div y el elemento section rodea todo. ¿Qué pasaría si quisiéramos que section apareciera despues del elemento que está flotando? Usando clear hemos movido esta sección hacia abajo del div que está flotando. Para despejar elementos que están flotando a la izquierda debes usar el valor left. También puedes despejar hacia la derecha usando right y hacia ambos lados usando both.

que pase. Los media queries son la herramienta más poderosa para hacer esto. Tomemos la estructura donde usamos porcentajes y transformémosla en una columna cuando la ventana del navegador es muy pequeña para mantener el menú en la barra lateral:

clearfix hack

float Otra propiedad CSS para estructurar es float (flotar). Float se usa para envolver imágenes con texto, como aqui:

Hay una situación extraña que puede pasar cuando usas float: que la imagen sea mas alta que el elemento que la contiene, y esté flotando, ¡y se sale de su contenedor! Hay una manera de arreglar esto, pero es un poco fea. Se llama clearfix hack. Intentemos añadir esto a nuestro CSS:

Ahora, nuestra estructura se ve increible en dispositivos móviles. Hay muchas otras cosas además de min-width y max-width que puedes detectar: mira la documentación de Mozilla para aprender más.

crédito extra Puedes hacer que tu estructura se vea aun mejor en dispositivos móviles usando meta viewport.

clear

Esto funciona con navegadores modernos. Si quieres soportar IE6 necesitarás añadir lo siguiente:

inline-block

Hay navegadores exóticos que requieren atención extra. El mundo del clearfixing es bastante espantoso, pero esta simple solución funcionará para la mayoría de los navegadores de hoy en día.

El método difícil (usando float)

La propiedad clear (despejar) es importante para controlar el comportamiento de los floats. Compara estos dos ejemplos:

Puedes crear una cuadrícula de cajas que llene el navegador armoniosamente. Esto ha sido posible por mucho tiempo usando float, pero ahora con inline-block es aún más fácil. Veamos ejemplos con las dos opciones.

media queries En este caso, el elemento section está después del div. Sin embargo, ya que el div está siendo flotado a la izquierda, esto es lo que pasa: el texto en

“Responsive Design” (Diseño Adaptativo) es la estrategia para hacer que un sitio “responda” al navegador y dispositivo en el que se muestra... haciendo que se vea increible pase lo

Se usa clear para no flotar arriba de las cajas.

El método fácil (usando inline-block)

Puedes logar el mismo efecto usando display: inline-block; y en este caso no tengo que usar clear. ¡Bien! Para soportar inline-block en IE6 y IE7 tendrás que trabajar extra. Algunas personas hablan de que inline-block desencadena algo llamado hasLayout, sin embargo, necesitarás saber eso solo si soportas viejos navegadores.

estructuras con inline-block También puedes usar el valor inline-block para estructurar un sitio, pero hay algunas cosas que debes tener en cuenta: • Los elementos inline-block son influenciados por la propiedad vertical-align, la cual quizas quieras establecer como top. • Necesitas establecer el ancho de cada columna. • Si hay un espacio en blanco entre columnas en tu HTML, habrá un vacío entre ellas.

Estructura fantástica usando Flexbox

flexbox

La nueva estructura con flexbox está lista para redefinir la manera en la que hacemos estructuras con CSS. Desafortunadamente las especificaciones han cambiado bastante recientemente y si implementación es distinta dependiendo del navegador. De cualquier modo, me gustaría compartir algunos ejemplos, asi podrás saber lo que está por venir. Estos ejemplos actualmente funcionan únicamente en Chrome, y se basan en la última versión estandar. Hay un montón de recursos viejos para usar flexbox. Si quieres aprender más acerca de flexbox, comienza aqui para saber como identificar si un recurso está actualzado o no. Hay mucho más que puedes hacer con flexbox; estos son solo unos ejemplos para que te des una idea:

Centrando con Flexbox

Estructura Simple usando Flexbox

¡Finalmente es fácil centrar verticalmente con CSS!

frameworks para css

columna Hay un nuevo set de propiedades CSS que te permiten tener múltiples columnas de texto. Esta propiedad CSS es muy nueva, así que tendrás que usar prefijos, y no funcionará en IE9 o en Opera Mini.

Debido a que las estructuras con CSS son complicadas, Hay frameworks que te ayudan a hacerlo fácil. Aqui hay unos cuantos por si gustas echarles un vistazo. Usar un framework es solo una buena idea si hace lo que quieres que tu sitio haga. No son un sustituto para saber como funciona el CSS.