¿Qué debo conocer para empezar a Maquetar?

Una buena amiga me ha pedido recientemente ayuda para introducirse en el mundo de la maquetación. Aunque ya llevo muchos años maquetando, nunca he tenido que formar a nadie desde cero, y he querido aprovechar mis consejos para ella en un nuevo post.

La maquetación web se sabe donde empieza; en la combinación de HTML (estructura del código) y CSS (estilos aplicados al código HTML), pero donde acaba ya no está tan claro. Según a quien preguntes, algunos te dirán que termina ahí, y otros te dirán que el Javascript (comportamientos) también forma parte del «pack». Yo no tengo ninguna duda de que el no se puede separar Javascript y maquetación, y que un maquetador que no sabe aplicar Javascript en sus aplicaciones web, no es un buen maquetador.

Antiguamente las tres patas del «pack» se agrupaban en un fichero HTML, pero es una buena practica el desacoplar estructura (HMTL), de estilos (CSS) y de comportamientos (Javascript). Esto hace que el código esté mejor estructurado, sea mas limpio, y sea mas sencillo trabajar en equipo.

¿Por donde debo empezar?

Pues en mi opinión creo que se debe de empezar por conocer bien HTML. Es un lenguaje muy sencillo, y con el que muy rápido veremos resultados. Puedes consultar este manual online de introducción a HTML.

Posteriormente deberíamos de familiarizarnos con HTML5, la versión actual de HTML, para conocer el potencial actual y futuro de este lenguaje.

Una vez que nos sintamos cómodos con HTML, deberíamos pasar a conocer CSS, y profundizar todo lo que se pueda en las técnicas más avanzadas de CSS, ya que será la base de nuestro trabajo.

Con estos dos lenguajes de programación ya sabríamos lo básico para empezar a maquetar, pero a poco que maquetes vas a sentir la necesidad de conocer Javascript para ampliar tus superpoderes.

Deberías de conocer al menos lo básico de Javascript, y luego pasarte a un framework como jQuery, que facilitará mucho tu tarea de trabajar con Javascript.

¿y esto es todo?

Pues en lo que a conocimiento teórico se refiere si. Si lees todos los enlaces anteriores tendrás la base teórica necesaria para ser un buen maquetador, pero el 90% del éxito de tus trabajos se basaran en práctica, práctica y práctica.

Cuando veas paginas que tengas cosas que te gustan, no dudes en revisar su código, y averiguar como lo han hecho. Con estos ejercicios obtendrás mucho conocimiento práctico.

¿Que herramientas debo de usar?

Pues para crear y editar código yo te recomiendo que uses un editor de textos sencillos. Yo uso el notePad++, pero puedes usar con el que mas cómodo te sientas.

Podrías usar programas que te facilitarían mucho la tarea de maquetar páginas, como DreamWeaver, pero yo creo necesario el escribir tu propio código desde cero, sin ayudas, ni autocompletados, ya que este esfuerzo extra repercutirá de manera muy positiva en el conocimiento de las etiquetas, y en consecuencia en nuestra valía como maquetadores.

La herramienta de la que no te debes de separar ni a sol ni a sombra es del inspector de código de tu navegador favorito. Si usas Chrome, tendrás instalado por defecto el inspector de código (pulsa F12 en chrome, si usas windows, y lo verás). En cambio si eres de Firefox, tendrás que instalarte el Firebug, ya que aunque Firefox tiene un inspector de código instalado por defecto, creo que todavía no es muy potente.

Por último, instálate un arsenal de navegadores, con los que pruebes todo tu código. Que hagas algo que se vea bien en Firefox, no significa que se vea bien en Explorer, y aunque con las nuevas versiones de Explorer cada vez son menos las incompatibilidades, todavía es algo que te dará muchos dolores de cabeza.

Yo en mi caso, pruebo mis páginas con: Chrome, Firefox, Opera, Explorer 9, Explorer 8 y Explorer 7. Creo que ya no deberíamos de pelearnos con Explorer 6, su tiempo pasó.

Y para empezar no se me ocurre ningun consejo mas, aunque seguro que los habrá. Sientete libre para solicitar o aportar más consejos en los comentarios.