Do not speak Spanish? Read this post in English.

Viernes, 06 d agosto d 2010.

Las 10 cosas que un maquetador web debería saber

¡Atención! Aquí viene uno de esos post soberbios en los que una persona que hace tiempo que no se dedica a una actividad concreta profesionalmente recomienda a la gente de la profesión los mínimos que deben cumplir si quieren creer que hacen bien su trabajo...

Bromas aparte, la profesión de maquetador web, aún hoy, no es muy entendida pero existir existe y la diferencia entre contar con uno bueno en tu equipo es asombrosa en los resultados. A todos aquellos que se dedican al ramo simplemente hacerles unas recomendaciones -totalmente subjetivas- de cosas con las que terminar de dar un toque de calidad a un trabajo que últimamente ha mejorado mucho en posibilidades.

-1-

Actualmente maquetarás en XHTML, así que conoce a la perfección todos elementos válidos del XHTML. Es la base de tu trabajo, debes conocer y saber usar cuando toca desde los famosos "div" hasta la diferencia entre un "abbr" y un "acronym", pasando por el conocimiento (aunque no uso obligado) de etiquetas como "dfn" o "pre".

-2-

Domina completamente el css 2.1. No se trata solo de que te sepas las clases, se trata de que ante cualquier XHTML lógico puedas crear el diseño que necesitas y no al reves -mucha gente crea el HTML en función del diseño y esto es trabajo del CSS no del HTML-.

-3-

Una vez entiendes todas las etiquetas XHTML ya no hay excusa para que no te lances la maquetación semántica.

-4-

El siguiente paso lógico es ir a por los microformatos. Mucha gente les tiene miedo al principio, pero cuando ya realizas un html semántico son muy sencillos de adaptar y relamente no hay tantos que aprender.

-5-

Una vez sabes la teoría lo mejor sacarle partido. A día de hoy no se me ocurre una forma mejor que aprender a maquetar para SEO, ahi podremos sacar incluso partido económico a todo lo aprendido. Incluso los microfomatos nos van a mejorar la apariencia de nuestros resultados en Google.

-6-

Por último, sobre este gran formato -y aunque muchos lo situarían incluso como segundo punto-, hay que hablar de la accesibilidad web. El artículo de la W3C sobre la accesibilidad web nos explica todos los detalles y motivos por los que hacer webs accesibles. Hacer webs accesibles es improtante, aunque en la práctica y pensando en los beneficios de la empresa, pasar del nivel AA no tiene demasiado sentido -opnión personal-.

-7-

Si ya sabes todo lo que debe saberse sobre el XHTML actual, aprende HTML5 que dentro de nada estará con nosotros. Para ello nada mejor que un artículo de introducción, una hoja de ayuda en pdf y la fantástica documentación de html que javier casares va haciendo en su blog. Y ya que hablamos de aprender nuevas tecnologías ¿cómo llevas el css 3?

-8-

El siguiente paso es salir de lo que se conoce puramente como maquetación y pasar a los efectos en la página: las manipulaciones del DOM de la página con librerías javascipt. Indudablemente no hay nadie mejor que un maquetador web que haya aprendido a programar bien con algúna de las mejores librerías javascript: Sabe lo suficiente sobre diseño web y usabilidad como para hacer las interfaces amigables, además gracias al constante uso de CSS controla lo suficiente sobre estilos y estructura del documento HTML como para hacer este trabajo mucho más sencillo y rápido.

Yo siempre recomiendo la librería Jquery: quizás no es la más rápida ni la menos pesada, pero es la más cómoda para hacer lo que desees y dispone de tantos plugins como necesites (es difícil que lo que necesites no tenga un plugin parecido que ya lo haya solucionado). El Uso de Jquery UI te permitirá además, transformar páginas web en aplicaciones web. Además siempre te vendrá bien saber como implementar algúno de los editores Wysiwyg más vistosos y controlarlos bien para que los usuarios no te destrocen la maqueta al usarlos. Yo personalmente siempre recomiendo TinyMCE o CKEditor

-9-

Siguiendo con este proceso, aprende a manejar todas las APIs javascript o visuales del mercado. Seguidamente el acceso a las que considero más útiles, versátiles e interesantes:

- Google Maps Api y dentro de esta no olvidar a Google Static Maps y a la parte del asombroso Google Street View.

- Tampoco está de más echarle un vistazo a Bing Maps

- Para dar un poco de variedad a tus Fuentes nada más sencillo que Google Font Api o si estas se te quedan cortas, también saber como implementar sifr.

- Si necesitas gráficas el uso de la google chart api no ve vendrá nada mal.

- Y para dar salida a los contenidos de redes sociales nada mejor que una implementación por javascript de sus Apis abiertas, como son las de Flickr, Delicious, Twitter, los social plugins de Facebook o su SDK javascript.

-y 10-
Y aunque suene tonto: no te quedes solo en la maquetación... Debes aprender lo suficiente sobre el resto de lo que afecta a tu trabajo:

- Aprende a diseñar: debes saber usar Photoshop, Ilustrator, Freeehand, etc. No se trata de que seas un buen diseñador, pero si de que entiendas que es lo importante y porque los diseñadores ponen las cosas donde las ponen. Solo así podrás ayudar a los diseñadores a que te ayuden.

- Aprende a programar: empieza por usar los sistemas de plantillas más comunes: Worpdress, Smarty, XSL. Luego pasa a lenguajes completos: PHP, ASP, Java... No se trata de que uses complejas clases y objetos sino de que seas lo más autónomo posible. Si eres capaz de ocuparte tu solo del Front de un desarrollo tendrás la certeza de que se hará como debe hacerse.

- Aprende un poco de Sistemas: al menos en lo que te afecta: velocidades de carga y de renderizado de la página. Sprites CSS, YSlow, y todas estas cosas que le dan el toque definitivo a un trabajo profesional.

- Aprende un mínimo de Marketing Online: usabilidad, campañas, analítica web, conversiones. Familiarizarte con el lenguaje y aprende en que puedes ayudar tu (que no es poco) para que todos los indicadores mejoren.

Temas Relacionados: maquetacion

Autor:

20 Comentarios para “Las 10 cosas que un maquetador web debería saber”

  1. Manuel dice:

    ...eres la leche!!, un buen resumen con un montón de enlaces pero ... tu no te ibas de vacaciones pq las NECESITAS??? 😉
    Gracias

  2. Rodrigo dice:

    Muy buen post Iñaki. Ya mismo se lo paso a mi Director Técnico para que lo tenga en cuenta ya que estamos buscando programador front end para SoloStocks.
    Por cierto, y perdona el spam: interesados en el puesto, razón @rodrigompaz

  3. santiago dice:

    hey que buen articulo, y gracias por poner los enlaces correspodientes a cada cosa.

  4. Jordi Oller dice:

    Buen post Iñaki!

    Aprovecho el rendimiento atractor del mismo para decir que buscamos maquetadores webs para formar parte de Hostienda (Barcelona, Buenos Aires, Bogotá y Lima).

    info@hostienda.com Para más información! 😀

    Iñaki te has dejado algo muy importante, tanto que es lo principal para que un maquetador demuestre lo que sabe hacer. Todo maquetador debe tener un portfolio en condiciones con los trabajos más relevantes que demuestren sus aptitudes :)

    Un abrazo!

  5. Carlos dice:

    Son unos buenos puntos a seguir. Pero dependiendo del presupuesto y del plazo de ejecución se miran todos o sólo algunos.

  6. David Pombar dice:

    Un post muy útil, muchas gracias.
    ahora solo necesito un año o dos para ponerme al dia con todo esto... uf uf 😉

  7. creativart dice:

    Bravo! Genial artículo y de increible utilidad para dar ese acabado profesional que comentas :). Gracias

  8. Nacho dice:

    Muy buena información. Gracias y un saludo.

  9. Jorge dice:

    Buenos datos, aunque son bastantes cositas que el maquetador Web debe saber.. Yo considero que las más importantes son:

    Conocer al menos un programa de edición de imágenes.
    Conocer (XHTML+CSS)
    Conocer algún framework CSS(ej: 960 grid system)

  10. Soluweb dice:

    Hacía mucho rato no leía un post tan bueno como este. Felicidades se vuelve tarea el seguirte. Gracias.

  11. Paco Puig dice:

    Gran artículo como de costumbre. Muchas gracias por compartir tan buena información

  12. José Antonio dice:

    Un gran articulo, gracias por compartir tus conocimientos, es justo lo que necesitaba saber

  13. Susy dice:

    Muy bueno el comentario, me encanto y lo seguire paso a paso aunque me lleve muchos años, gracias Iñaki-

  14. Pablo dice:

    Sencillamente GENIAL. Muchas gracias por este magnífico artículo.

  15. jose dice:

    Sencillo y genial

  16. eva dice:

    Buen artículo, aunque quizás sin darnos cuenta vamos añadiendo al maquetador sobrecarga de conocimientos. Yo soy diseñadora gráfica maquetadora web y ahora me piden conocimientos no solo de maquetación sino tambien de programación...algo excesivo, no se puede dominar tantas herramientas a la perfección. Conocimientos si, dominio, dificilmente...

  17. samuel dice:

    Muy buen artículo Iñaki

  18. Sonia dice:

    Genial el artículo!!
    soy programadora web y andaba buscando justo un resumen así! ;D

  19. eidioma dice:

    muy buenas recomendaciones, aunque yo recien estoy iniciandome en esto del diseño y maquetacion web
    gracias por los consejos

  20. ariel dice:

    Exelete aporte...Gracias!!

Anímate y deja tu comentario