¿Qué debe saber un Diseñador Web en el 2018?

No debemos olvidar los orígenes del Diseñador Web. Al principio se “maquetaba” sin CSS. Con etiquetas y atributos especiales para dar algo de color. Después se utilizaron tablas para conseguir colocar secciones en horizontal. Una al lado de otra. Pero seguía faltando más dinamismo. Después nacieron los div con los posicionamientos. Casi se podía realizar cualquier maquetación. Pero llegaron los dispositivos móviles, y se inventó el flex. Una maravilla del siglo XXI. Y no contentos, dentro de muy poco usaremos grid. Como podéis comprobar es una evolución constante.

Paralelamente, según han mejorado las técnicas se han vuelto más exigentes los usuarios. Hemos pasado de documentos online a complejas aplicaciones web pasando por redes sociales. Los Diseñadores Web se han convertido en Front-end. Sus herramientas son completamente distintas a hace… ¿10 años? Un síntoma propio de una profesión poco madura y con mucha demanda. Por suerte ya se han alcanzado unas tecnologías aceptadas por la comunidad y las grandes empresas.

Después de hablar hace un año sobre las 10 herramientas indispensables para un buen diseñador web, me ha parecido interesante hacer un repaso sobre lo que necesita saber cualquer Front-end en el 2018. Si creen que debo añadir otro punto, por favor dejen un comentario.

¿Empezamos?

HTML5

Ya no trabajamos con XHTML, sino con HTML y en su última versión. Tenemos etiquetas semánticas (header, main, aside, article, nav…), etiquetas multimedia (audio, video…), validaciones nativas para los formularios, imágenes vectoriales y muchas más etiquetas. Al morir Flash para el entorno web, se han tenido que sustituir muchas técnicas. La web ha ganado en flexibilidad y libertad.

CSS3

Parece una obviedad, pero hay que saber manejarse con la última versión de CSS: animaciones nativas, fuentes externas, pseudo-elementos, nuevas medidas y mediaquerys. Sino sería imposible tener una página adaptada a dispositivos móviles.

Javascript

En algún momento va a ser necesario que lo utilices. A no ser que tengas un Framework de HTML y CSS que te cubra todo. Ya no vale la excusa de que no eres programador. Si quieres una navegación dinámica, hay que trabajar con Javascript: un slider, un botón para volver arriba, que se muestre un contenido al pulsar un botón, etc. Tampoco se debe llegar a ser un ninja de la materia, pero al menos saber dar algunas pataditas marcarán una diferencia. La alternativa serían plugins externos que irán mermando la velocidad y solidez de tu web.

¿Debo saber Javascript? Sí, y pronto.

Frameworks HTML y CSS

Por muy pequeño o grande que sea el proyecto, siempre acelera el proceso. Un framework es un conjunto de herramientas moduladas para reutilizar. Por ejemplo, si quieres centrar un texto, tendrías una clase de CSS llamada text-center. ¿Quieres un cuadro de alerta? alert. Y así con muchas más clases. ¿Para que perder el tiempo creando estructuras que usan todas las webs?

El más popular, al tiempo de escribir este artículo, es Bootstrap 4. Y si buscas algo más sencillo puedes utilizar Bulma o Semantic UI.

Framework Javascript

En la actualidad se realizan páginas SPA (Single-page application), o aplicaciones de una sola página. Eso significa que los usuarios tendrán una navegación fluida sin recargas. Como una aplicación de escritorio. Para lograr esta mejora se necesita un profundo conocimiento de Javascript, o utilizar un framework de Javascript. Cualquier Front-end que se considere como tal tendrá que conocer alguna herramienta como: VueJS, ReactJS, AngularJS, EmberJS o BackboneJS.

Compiladores de CSS

La actual versión de CSS es magnífica, pero insuficiente para organizar un gran proyecto. Necesitamos gestionar jerarquías profundas, tener variables con los colores, trabajar en varios archivos pero unirlos en uno… y otras labores. Por ello existe SASS, una extensión de CSS que te regala características fantásticas.

Si no lo conoces, te recomiendo que entres en mi tutorial sobre esenciales de SASS.

También existen alternativas, como LESS. En la práctica realizan lo mismo. Aunque SASS esta más extendido.

Repositorio

Cuando queremos tener varias versiones de una página, trabajar con otros compañeros, probar diferentes cambios sin estropear nuestro diseño, recuperar secciones ya borradas… hay que usar un control de versiones. No es solo una simple copia de seguridad, sino una herramienta básica para cualquier proyecto.

Git es el más popular, aunque no el único (Subversion, Mercurial…). Lo importante es conocer cualquier sistema similar y gestionarlo con maestría. No perderemos ni una sola línea, trabajaremos sobre el mismo fichero con otras personas, recuperaremos nuestra página al día que nosotros queramos, realizaremos experimentos con la posibilidad de dejarlo como estaba…

Por otra parte, el código no debería entregarse al cliente en un zip. La forma más profesional es convirtiéndolo dueño de un repositorio que hayamos utilizado en el desarrollo.

Sistema de gestión de tareas

Por muy buenos que seamos en nuestro trabajo, hay que organizarse. Priorizar tareas, anotar que esperamos de los clientes, fechas importantes… y si trabajamos con varios profesionales la dificultad se multiplica. Si queremos ser eficientes necesitamos profundizar en gestores como Trello, Redmine, Atlassian u otros. Cada uno destaca por su propia filosofía.

Sistema de construcción

Las imágenes no se optimizan solas, el SASS no se compila por arte de magia, ni los Javascript se concadenan por propia voluntad. Debemos usar un sistema de construcción como Gulp o Webpack que nos haga el trabajo sucio. Las tareas repetitivas, para centrarnos en el trabajo importante. A no ser que nos apasione realizar estas tareas a mano.

Comunicación

No hay mejor herramienta que el email, si puede ser con tu dominio propio pagando en Fastmail o Google Apps mejor, para comunicarte con un cliente y dejarlo todo por escrito. Además que tiene validez legal ante un juez. Evitará problemas y malentendidos. Pero cuando trabajamos en equipo hay que tirar de soluciones más profesionales como Slack. También se puede utilizar para videoconferencias o llamadas de voz. El IRC o XMPP es insuficiente hoy por hoy.

CMS

Nos guste o no, el cliente necesita autogestionar su página. Crear artículos de un blog, modificar textos, moderar comentarios, subir nuevas páginas… Y por ello mismo existen los CMS. El más utilizado es Wordpress. Pero no el único, Joomla y Drupal son buenas alternativas. No hay que conocerlos, sino dominarlos.

Conclusión

Podemos crecer y mejorar aprendiendo un sin fin de técnicas.

• Responsive design.
• Aplicación híbrida.
• BEM.
• Scrum.
• Kanban.
• MVC.

Pero en la práctica hay que tener un conocimiento mínimo para sacarse el carnet de Diseñador Web o Front-End. Asustará a los novatos, pero si con tiempo y pasión todo se aprende.