Desarrollo para Diseñadores: Entendiendo el Front-End

Durante el curso de éste artículo daremos un gran salto al desarrollo front-end y veremos cómo encaja en nuestro tema más completo. Aquí está lo que vamos a cubrir:

1. Entendiendo la capa front-end
2. Limitaciones del DOM
3. Consideraciones
4. Entendiendo eventos, estados y responsividad

Entendiendo la Capa Front-End

Renerizando sitios web puede ser toda una tarea. Con un alojamiento de dispositivos, navegadores, puntos de acceso, anchos de banda, lenguajes de programación y entornos, construir experiencias web consistentes puede ser difícil. Gracias a los navegadores y a la institución que establece el estándar (el W3C) tenemos algunos pilares en su lugar para proporcionar control dónde sea posible; esos pilares son HTML, CSS y JavaScript.

Combinados, nos referimos a esos pilares como la capa front-end. Cada lenguaje tiene su propio propósito, y los desarrolladores pasan mucho tiempo asegurándose de que no desenfoquen las líneas de cada uno pues pueden afectarse mutuamente. Así que, pongamos las bases aquí. Los navegadores modernos, que están comercialmente disponibles: como Safari, Edge, Chrome y Firefox únicamente pueden entender HTML, CSS y JavaScript. Eso es todo, tres lenguajes. Con excepción de JavaScript, HTML y CSS son lenguajes declarativos estáticos. Con ésto quiero decir que tu no necesariamente "programas" en cualquiera de ellos pues no hay lógica real para escribir (con algunas pequeñas excepciones). JavaScript, que ha estado explotando en cada esquina de la internet en años recientes es, sin embargo, un lenguaje de programación.

Cuándo he tratado de explicar la Capa Front-end a estudiantes en el pasado, siempre encontré útil hacer referencia al cuerpo humano. Considerando que estamos hablando dentro del contexto de Diseño Atómico, ¡ésto coincidentemente refleja mi metáfora!

HTML: Lenguaje de Marcado de Hipertexto

HTML es tu esqueleto. Determina tu estructura y tu postura. Un cierto nivel de significado puede derivarse de tal estructura. Tu cabeza siempre está primero, cuello, caja torácica, caderas, piernas, pies, hasta tus falanges.

El orden de los elementos que acabo de describir es tu típico humano. Puede ser diferente para una ballena o para un tigre. Así, HTML puede ser diferente para blogs, tiendas de comercio o plataformas. HTML se trata absolutamente de querer decir, y describir a un navegador web en una forma significativa de qué se trata una página. Se ha convertido en toda una ciencia pues el algoritmo de Google esencialmente lee su estructura y determina en base a ella de qué realmente se trata la página.

Nota: Ten en mente que HTML proporciona una estructura para tu experiencia web.

CSS: Hoja de Estilo en Cascadas

CSS es cómo la ves. El color de cabello, el color de ojos, tono de piel, tipo de cabello, longitud de brazos, musculatura, tamaño de las uñas de los dedos de los pies etc. Es incluso la forma en que te peinas, o el maquillaje que te pones para hacer que te veas como tú.

Su único propósito es aplicar estilo a lo que de otra manera sería un soso y aburrido HTML. Si todos camináramos tan sólo con nuestros esqueletos, la atracción sería un problema. Lo mismo aplica para las experiencias web.

JavaScript

JavaScript son tus modales e interacciones. Cualquier cosa desde tronarse los huesos, a parpadear, sonreír, toser, la forma que caminas, si decides saltar o no, todo se trata de interactividad. Lo importante para recordar de JavaScript es que cuándo cierras tu navegador todo se olvida (hablando en términos generales), así podemos pensar que JavaScript de ser la interactividad en un sitio web que esta sucediendo mientras estás en una "sesión" o interactuando activamente con el sitio web. Piensa en hacer click en ventanas emergentes o menús de navegación desplegables.

Alguno de ustedes en éste punto podrían estarse preguntando dónde entra el cerebro o la lógica, pero para allá vamos. Lo más importante para retener de ésta sección es que HTML, CSS y JavaScript viven en el navegador, todos trabajan juntos para crear una experiencia web "estática" que podemos luego llevar de nuevo a Diseño Atómico para refinar.

Limitaciones del DOM

DOM significa Modelo de Objetos del Documento. El DOM es el resultado vivente de HTML, CSS y JavaScript co-existiendo en una sesión activada por el usuario.

Debido a que el DOM es una representación viviente, del código fuente, es importante entender que tiene limitaciones. El código que escribes en archivos HTML, CSS y JavaScript en tu computadora es conocido como código fuente. Ésta fuente representa magníficamente lo que ves en el DOM pero no es lo mismo. El DOM es el producto-posterior de la manipulación y compilación de éstos archivos llenados con código fuente. Cuándo éstos archivos son solicitados desde un navegador los lenguajes son "interpretados" y un sitio web o página web nace. Si cambias el código fuente, la representación de esos archivos fuente necesitan ser refrescados para mostrar la versión actualizada en tu navegador.

Cada lenguaje tiene sus propias limitaciones. CSS, por ejemplo,no tiene un motor de maquetado particularmente fuerte. Ésto significa que puede ser todo un proceso el generar maquetados complejos en el navegador. HTML no tiene capacidades de maquetado y sólo es capaz de proporcionar una estructura y jerarquía para que el sitio web sea entendido. JavaScript, siendo un lenguaje de programación, tiene la capacidad de manipular HTML y CSS. Debido al hecho de que usamos una sección de tres capas para crear el front-end de cualquier sitio web dado, necesitan llevarse bien, así como respetar algunos parámetros extra. En nuestro caso, éstos parámetros se refieren a diferentes navegadores, sistemas operativos, versiones de navegadores y más. El DOM es más o menos el mismo en todos los tipos de navegadores y distribuidores, pero debido a que existen muchas reglas para agregar con el objetivo de crear una experiencia consistente.

Consideraciones

CSS emplea un concepto llamado el Modelo de la Caja. El Modelo de la Caja comprende las siguientes propiedades:

• Contenido: el área de contenido real, lleno de quizá texto.
• Padding: relleno extra que rodea el área de contenido e incrementa el fondo.
• Border: un borde, más allá del padding.
• Margin: empuja la forma misma alejandóse de otros elementos.

Aquí está un diagrama que lo explica un poco mejor.

Cuándo se diseña una forma como un cuadrado, el terreno que ocupa comprende los elementos de arriba.

"Las probabilidades nunca están a tu favor"

Sí, grillas de cinco columnas no augura nada bueno para los desarrolladores. Es generalmente más fácil trabajar con números pares que con nones. Los desarrolladores tienden a usar frameworks front-end como Bootstrap o UIKIT que vienen con grillas pre-calculadas que contienen diez columnas, doce columnas o quizá más. Es una idea realmente buena preguntar a un desarrollador qué framework planea usar, si piensa usar uno, para alinear tu diseño más apropiadamente con el HTML y CSS.

Agua, No Hielo

Ya quedaron atrás los viejos días de la web. Debido al hecho de que la mayoría de los sitios web están moviéndose hacia la responsividad, la necesidad por maquetados fluídos ha llegado a ser muy aparente. Las grillas ahora se trabajan con porcentajes (10%, 30%, 50%) de contenedores, que luego se colapsan en ciertos puntos de quiebre que un desarrollador puede especificar.

Las Fuentes No Son Tus Amigas

Las fuentes en sitios web trabajan de manera muy diferente que con la impresión. Mientras estás construyendo un sitio web en tu propia computadora, puedes usar cualquier fuente que tengas instalada en tu sistema. Ésto es sensacional para tí, pero tan pronto como esos archivos se  mueven a otra computadora, el código fuente ya no puede hacer referencia a la fuente que tienes instalada en tu propia computadora, pues no tiene conexión con ella.

Hay muchas formas de resolver éste dilema, pero a menudo escucharás a un desarrollador pedir a diseñadores utilizar Google Fonts (Fuentes de Google). Google Fonts son un conjunto de fuentes alojadas en un CDN (Red de Entrega de Contenidos) que puede ser accesada por cualquier computadora que tenga una conexión activa con la internet, lo que significa que aún si no tengo la fuente específica instalada en mi propia computadora todavía puede ser renderizada en mi sitio web. Percátate de ésto. Algunas fuentes también no están diseñadas para renderizarse en motores web. Podrían verse drásticamente diferente cuándo se ven, digamos en Photoshop, en comparación con un navegador web. Cada programa renderiza fuentes con diferentes motores de renderizado.

Eventos, Estados y Responsividad

Ahora que hemos cubierto algunos fundamentos, veamos algunos asuntos que los diseñadores no tienden a considerar en sus diseños pero son realmente importantes para la experiencia de usuario.

Eventos

Los eventos son acciones que un usuario toma mientras interactúa con tu sitio web. JavaScript tiene unos cuántos para tomar en cuenta, pero ejemplos sencillos incluyen "click", "scroll", "mouseon" o "mouseout" y "keydown" o "keyup". Si quieres leer un poco más sobre eventos JavaScript, visita Mozilla. Algunos de los eventos que ves aquí no necesariamente son desencadenados por la interacción del usuario.

Desde la perspectiva de un diseñador es primordial entender lo que ocurre a ciertos elementos o secciones en tu sitio web una vez que un usuario ha actúado en ellos. ¿Qué ocurre cuándo un botón es clickeado, por ejemplo? ¿O hay una animación aplicada a una ventana modal cuándo se cierra con un click? Éstas son preguntas a las que tienes que proporcionar respuestas, especialmente si tu proyecto tiene un alcance pre-definido. Dependiendo del presupuesto y de las líneas de tiempo, el "Diseño de Interacción", como es definido en las comunidades web, puede tomar tiempo precioso de un proyecto.

Estado

Después de que ocurrió un evento, los elementos quedan en "estados". Un ejemplo común son los enlaces. Los enlaces tienen varios estados: active, focus, hover. ¿Cómo se ven tus enlaces cuándo han sido clickeados? ¿Mientras los presionas? ¿Cuándo el mouse se posiciona sobre ellos? ¿O cuándo son tocados en un dispositivo móvil?

El diseño atómico puede realmente ser útil aquí pues tus guías de estilo pueden fácilmente explicar éstos estados mientras construyen un átomo como un botón. El estado puede tener un impacto dramático en tu experiencia de usuario, así que tómalo en cuenta cuándo trates con sitios más complejos.

Responsividad

La comentada palabra "responsividad" ha estado escuchándose por un rato. Como desarrolladores necesitamos asegurarnos de que nuestras experiencias web sean consistentes en todos los dispositivos. Si eres un trabajador independiente, casi todo cliente pedirá que su sitio sea responsivo. Ha llegado a ser el "elemento sustancioso" de la web. CSS proporciona a los desarrolladores una útil tecnología como Media Queries que permiten a los desarrolladores personalizar maquetados en ciertos "puntos de quiebre".

Frameworks front-end como Bootstrap y Foundation están dirigidos hacia hacer la responsividad mucho más fácil de implementar por grillas basadas en porcentajes concebidas para ser responsivas, para que los diseñadores puedan trabajar con ellas. El mayor concepto aquí no es cómo funcionan las grillas de diseño responsivo, sino que están concebidas a hacer.

Conclusión

¡Eso es todo por ésta vez! En el próximo artículo veremos el backend y cómo podemos usar una mentalidad de Diseño Atómico para mejorar nuestra comprensión de la lógica y las habilidades de programación.