Esta comparación es muy buscada, y en este articulo tratare de aclarar las funciones que debe hacer cada rol, según mi experiencia y perspectiva.


Describiendo el proceso de desarrollo de una web, lo primero que tenemos es el diseño que nos paso el diseñador, este diseño puede estar hecho en diferentes programas, el mas común es Adobe Photoshop, también pueden estar hecho en Adobe Fireworks e Illustrator, yo me inclino mas por Fireworks pero no son muchos los diseñadores que lo manejan.
Ahora la complejidad del diseño puede ser relativamente fácil o muy complejo, algunos diseños tienen elementos que en la maqueta web seran elementos interactivos como tales como sliders, slideshows, accordiones, menús interactivos, lightboxes o shadowboxes, bueno pueden tener una infinidad de widgets o elementos interactivos.


Aquí comienza el trabajo que debe realizar un maquetador web.


  • Para empezar se realiza el cortado (slicing) y exportado de las imágenes optimizadas del diseño para puedan verse en un sitio web, esto se puede hacer con programas como Fireworks o Photoshop.
  • Si el diseño tuviera elementos interactivos que ya existen, tal vez algun widget como un lighbox, lo mejor no es maquetar el lightbox si no pedir referencia al diseñador sobre el lightbox en el que se baso y modificar sobre el css y html de tal widget.
  • Una vez que están todas las partes del sitio cortadas en imágenes, se inicia el proceso de creación de la estructura html y css. 
  • El maquetador debe tratar de entregar la maqueta tal y como esta en el diseño, si el diseñador uso fuentes que no son estandar, se debe pedir al diseñador las fuentes y embebirlas con font-face de css.
Para terminar con las funciones del maquetador web en resumen la maqueta que se entrega debe ser una maqueta funcional no estática, si pusieron en el diseño un menú desplegable en la maqueta el menú debe funcionar al hacer hover sobre cualquier ítem. 

Un Maquetador web debe conocer 
  • xHTML, HTML 5
  • CSS 2.1, CSS3
  • SEO(Optimización para buscadores) Básico
  • Flash (Animaciones,Banners, algunos efectos Básicos)
  • Javascript (Básico, algunos Sliders, efectillos por ahí, nada complicado).
  • Algún PreProcesador de CSS, LessCSS , SASS, Stylus
  • Algún Framework de Javascript que facilite la creación de widgets, jQuery, MooTools, Prototype ... etc
  • Algún Framework de CSS
  • Los estandares de la W3C

La linea que separa a un Maquetador web de un Desarrollador FrontEnd es muy delgada y a veces se torna confusa.


El FrontEnd desarrolla, programa y automatiza el sitio web, pongamos un ejemplo si en el diseño tenemos un carrito de compras que funcione con drag & drop, y se mantenga la lista de precios actualizada cuando se realizan estas interacciones. Esto no lo va ha hacer un maquetador solo con html y css, para realizar esto se necesita de programación que puede ser hecha con javascript puro o utilizando algún framework como jQuery, o bien el carrito podria ser hecha en Flash o Flex pero de igual manera hay que programar.

Entonces resumiendo cualquier elemento interactivo que necesite de programación lo debe hacer un desarrollador front-end, ademas el front-end debe conocer lenguajes de servidor como php, java o phyton, lo minimo necesario para hacer un bucle y poder recorrer registros. 

Si se sigue una buena división de roles en el proceso de desarrollo de una web , el Desarrollador BackEnd seria el encargado de pasarle los datos al Desarrollador  FrontEnd y este se encargaría de mostrarlos de la manera mas apropiada, con los eventos e interacciones necesarios.

Un Desarrollador Front-End web debe conocer 
  • xHTML, HTML 5
  • CSS 2.1, CSS3
  • SEO(Optimización para buscadores) Básico
  • Flash, Flex (ActionScript, algun framework de flex) - Desarrolladores Flash
  • JavaScript (Avanzado, Validación de Formularios, Aplicaciones Robustas, POO, Programación Asíncrona, etc.).
  • Algún PreProcesador de CSS, LessCSS , SASS, Stylus
  • Apis (Google Maps, por ejemplo)
  • Algún Framework de Javascript  jQuery, MooTools, Prototype que le permitan desarrollar de forma mas eficiente.
  • Lenguajes de servidor php, java, python, ruby...etc.
  • Algún Framework para lenguajes de servidor en caso de php puede ser CodeIgniter, en caso de Java SpringFramework, lo minimo necesario para colocar la maqueta en los sistemas de template de los framworks.

Quedan muchos roles y funciones por definir, como el Desarrollador BackEnd, Modelador de DB, Analista, Seguridad, tal vez algún experto en redes sociales.. etc. 
Conforme el tiempo avance y nuevas tecnologías vayan apareciendo, se irán agregando y cambiando las funciones y roles, este es mi punto de vista, si tienen opiniones los invito a que comenten.

Actualizado: Martes 27 de Diciembre del 2011