contenido 13 de mayo de 2014 a las 07.26
   Imprimir artículo
elWebmaster.com

El fino arte del front-end: ¿Artesanía o arquitectura?


images_front_endMucho ha sido hablado y escrito recientemente acerca de la virtudes de la artesanía en el contexto del diseño y desarrollo web. Parece que la gente, como fabricantes de la web por fin se están cansando de buscar paralelismos entre ellos mismos y los arquitectos, y están recurriendo en cambio a ser artesanos especializados.

Identificar a los desarrolladores web como artesanos es probable que sea una tendencia de principios de 2012. En este artículo, se expondrá lo que se siente en cuanto al desarrollo del front-end de aplicaciones para usuario, y fomentar la atención y la comprensión de las verdaderas cualidades de la artesanía.

El valor del núcleo

Comenzaremos definiendo lo que es un artesano en este contexto. ¿Qué distingue a un artesano de un técnico? Los diccionarios tienden a definir un artesano como alguien que posee una gran habilidad en el campo elegido. La insignia de un artesano, es una etiqueta muy especial que debe ser venerada y utilizada con moderación, sólo cuando sea realmente merecida. Un artesano genuino abarca algunas características claves, mucho más allá de la habilidad en bruto, cada uno de los cuales debe ser aprendido y dominado.

Un artesano tiene:

  • Una apreciación de buen trabajo, tanto en el trabajo propio como en el de los demás.
  • Una apuesta por la calidad en todos los niveles, en cada faceta del producto del artesano es tan importante como cualquier otro.
  • Vision: una capacidad para visualizar su camino adelante, anticipándose a los obstáculos que pueden encontrar para así planificar un desvío en el camino.
  • La preferencia por la simplicidad: una total devoción por la funcionalidad sin decoración, sin partes injustificables.
  • Sinceridad: producir un trabajo que habla directamente de su objetivo con una claridad impecable.

Sólo cuando te conviertes en un custodio de tales valores en tu trabajo puedes considerar llamarte a tí mismo un artesano. Ahora echemos un vistazo a algunos pasos que los desarrolladores de front-end pueden tomar en el camino a esto.

Construyendo tu propia caja de herramientas

Después de observar y practicar las muchas teorías fundamentales, principios y técnicas de cualquier artesanía, es necesario darse a la tarea de crear tus propios conjunto de herramientas para trabajar, las cuales vas a utilizar y mantener a lo largo de tu carrera. Al pasar por el proceso de tener que crear tus propias herramientas, te conectarás a un nivel más directo con cada una.

Y así debería ser, idealmente, con todos los oficios. Debemos entender a nuestras herramientas hasta el nivel más fundamental. Un nivel de verdadera artesanía no se puede alcanzar en tanto que no exista una capa en la cual se entienda todo entre un creador y su lienzo. Por supuesto, las herramientas de los desarrolladores de front-end de aplicaciones para usuario son algo más complejas que las de otras artesanías, puede parecer razonable exigir que un carpintero cree su propio conjunto de cinceles, pero es algo menos codicioso que pedir a un desarrollador de front-end codificar su propio preprocesador CSS, o diseñar su propia computadora.

Sin embargo, todavía es muy importante que entiendas cómo funcionan las herramientas. Esto es particularmente importante cuando se trata de cosas como los preprocesadores, las bibliotecas y los frameworks que tienen como objetivo ahorrar tiempo mediante la automatización de los procesos y funciones comunes. En su mayor parte, todo lo que te ahorra tiempo, es una buena idea, pero no se puede enfatizar lo suficiente en el uso de herramientas como estas pues deben evitarse hasta que entiendas exactamente lo que ellas hacen por ti.

En particular, debes entender las desventajas de usar tus propias herramientas. No estoy sugiriendo que te mantengas alejado del trabajo remunerado hasta que hayas estudiado cada una de las 9.266 líneas de código fuente en Javascript de JQuery, pero, dejando la frivolidad a un lado, se debe promover que en el tiempo en que uses las herramientas debas aprender cosas interesantes o relevantes de jQuery, y cualquier otra biblioteca que desees utilizar. Tales bibliotecas a menudo se vinculan directamente a las secciones correspondientes de tu código fuente en sitios como GitHub con su documentación oficial.  Cualquier tipo de aprendizaje hará que te conviertas en un verdadero artesano, por lo que siempre será bueno mantener una mente abierta y estar siempre dispuesto a salir de tu zona de confort para aprender más acerca de tus herramientas.

El tiempo de inactividad y las herramientas para perfeccionar

Con cualquier arte, es esencial mantener tus herramientas en buen estado, y  mantenerte actualizado con lo último en equipamiento. Esto es especialmente cierto en la web. Una herramienta o técnica que se podría considerar la mejor práctica esta semana podría ser objeto de burla dentro de seis meses.

Normalmente se presentan dudas acerca de cuánto tiempo la gente se ocupa de mantenerse al día con lo último de la industria, y además de eso, ¿De verdad consumes tiempo en coleccionar bookmarks y fragmentos de código de las cosas que lees y que con las cuales haces una caja de herramientas que evoluciona lentamente?. Es una estrategia usada la de realizar tu propia caja de herramientas, una colección de archivos y carpetas, todo configurado y listo para ir a por un nuevo proyecto.

El montaje y mantenimiento de tal conjunto de herramientas personalizadas es probablemente lo más cerca que estaremos en la emulación de la etapa de fabricación de herramientas de los oficios más tradicionales de artesanía. Guarda una copia de tu caja de herramientas en un lugar seguro, realiza copias de la misma para los nuevos proyectos. Cuando aprendas de una manera en la que parte del código pueda ser mejorado, realiza cambios en la copia original.

Simplicidad a través de la modularidad

Las interfaces de usuarios de todas las aplicaciones web deberían ser consideradas principalmente como componentes modulares. Los módulos en este contexto son patrones en los diseños que aparecen repetidamente a través de la aplicación. Estos módulos pueden ser pequeñas colecciones de elementos, como un resumen de perfil de usuario (foto de perfil, nombre de usuario, meta data), así como elementos atómicos como encabezados y elementos de la lista.

Las arquitecturas de las aplicaciones para usuario, bien diseñadas, tienen la capacidad de apoyar en este tipo de patrón que se repite en forma de módulos. Entre los más usados están los que permiten la no repetición de código CSS (o JavaScript) como sea posible, y que no produzcan posibles variaciones en HTML.

Uno de los principios más fundamentales y bien conocidos de la ingeniería de software es la regla en seco: No reinventes la rueda. Evita la tentación inevitable de duplicar código en el proyecto. El cumplimiento de dicha norma se hace más importante cuanto más complejo se vuelve el código base.

Como artesanos, se debe mantener esta querida norma y aplicarla a los módulos que se han identificado en nuestros diseños web.

Marcado de la vieja escuela

Antes de preocuparnos por la creación de un marco CSS modular, necesitamos conocer el diseño del sitio y como está hecho. La mejor manera de obtener este conocimiento es ir de la mano con las técnicas de la vieja escuela. Ten a mano todo el maquetado, diseño o lo que tengas. Si existen secciones en la página que están ocultas al usuario hasta que realice alguna acción, o si la página maneja múltiples estados, asegúrate de que tienes todo contemplado en tu papel.

Una vez que tengas un modelo en tu diseño de papel, coloca a todas las páginas organizadas con alguna lógica, en la mesa o pegadas a la pared si se puede, de acuerdo a la jerarquía del sitio, por jornadas del usuario, o lo que sea que tenga más sentido con las directrices. Una vez que tengas el sitio expuesto, necesitas tomarte un tiempo para estudiarlo, familiarizarte con cada parte de la interfaz. Esto eliminará sorpresas desagradables más tarde en el proyecto cuando te das cuenta de que has duplicado algo o simplemente olvidado.

Busca patrones y similitudes, dibujando círculos alrededor de los módulos. Comienza también a destacar las diferencias entre cada instancia de estos módulos, trabaja en ello y se convertirá en la definición base a partir del cual se va a extender todas las demás representaciones.

Este simple pero poderoso ejercicio te equipará para la tarea que realmente tienes a mano, en lugar de simplemente construir el front-end. Sin el conocimiento obtenido de este tipo de fase de investigación, simplemente tropezarás, pero improvisando lo mejor que puedas, no cometerás errores de calidad que podrían haberse evitado.

Homogeneidad en el diseño

Ahora tienes los módulos definidos y las cosas pintan bien. Se ha mencionado que en muchos casos estos módulos llevarán pequeñas diferencias. Estas diferencias deben tener un tiempo en el cual debas pensar en ellas y discutirlas con tus diseñadores.

Debe ser de conocimiento común que los proyectos de software actualmente exitosos son el producto de un diseño distinto y que pasó por las fases correspondientes. En la relación diseñador-desarrollador y el esfuerzo en conjunto de ambos equipos durante todo el ciclo de vida del proyecto es fundamental para la capacidad de elaborar y enviar productos de éxito.

Esta relación entra en juego cuando estás bien en el desarrollo de tu sitio, y comienzas a notar estas diferencias entre instancias de los módulos (que van a empezar a destacar muy claramente en tu sistema modular de CSS). Antes de comenzar a reemplazar tus estilos básicos, cuestiona las diferencias con el diseñador y averigua por qué existen. Tal vez se le pide y son importantes para su contexto, pero quizás hay descuidos de revisiones de diseño anteriores, o simples errores.

Sexto sentido del artesano

A medida que crecen hacia los niveles de especialización y experiencia donde puedes con orgullo y honestidad considerarte un artesano o un buen desarrollador front-end, encontrarás la necesidad de desarrollar constantemente lo que al principio se siente como una especie de sexto sentido.

Este sexto sentido se dará a conocer cuando resuelvas un problema de una manera maravillosamente elegante con un código limpio y discreto el cual es impecable, y sientas así ese sentimiento que te manda el cerebro y hace que lo que veas (tu trabajo) resplandezca.

Este sexto sentido también puede potenciar tu capacidad de evaluar tu propio trabajo, llegando a ser un juez ante el cual todo tu trabajo es objeto de contradicción. Un buen artesano toma regularmente un paso atrás en su trabajo, y se preguntan en cada faceta de su producto si está alineado con sus valores esenciales de calidad y sinceridad.

Fuente original del artículo: 24 Ways
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder