Métodos para maquetar más rápido
A medida que un maquetador web va adquiriendo experiencia en el sector, es inevitable empezar a darse cuenta de que tardamos mucho en hacer algunas cosas repetidas o muchas tenemos la sensación de ir despacio por culpa de unos bloques muy pequeños o repetidos.
Sin embargo, si sabemos jugar correctamente con el css y mediante el uso de algunas aplicaciones externas, el web developing puede ser más rápido, permitiéndonos terminar antes los proyectos, ajustándonos a nuestros presupuestos o consiguiendo tener a los jefes más contentos.
En este artículo no vamos a hablar de la utilización de un framework para css, si no simplemente de sistemas que podemos hacer para ir más ágiles maquetando.
Lo primero, antes de nada es una buena planificación.
- Lo común, todo junto, inicializaciones, estilos.
Antes que partir de un documento vacío de css, es altísimamente recomendable que tengas configurada tu propia plantilla.
Esto es, inicializando los estilos de los tags que vayas a usar, elimina, padding, border y margin de estos, ya que así evitarás la mayoría de las diferencias entre navegadores y podrás maquetar más limpiamente y con menos problemas.
La mayoría de los proyectos tienen la misma composición, es decir, todas las páginas suelen tener su cabecera, su contenido central y su píe de página o footer.
Otras páginas tendrán columnas laterales y otras tendrán menús de hormiga y elementos similares, por ello es interesante que te configures plantillas con estás estructuras, de manera, que cuando inicies un proyecto nuevo, sólo tengas que fijarte en la estructura de sus bloques, y así tan sólo tendrás que cargar tu plantilla para páginas con columnas, páginas sin columnas, etc, ahorrándote de esta manera el tiempo de hacer todo el html y el css de la estructura, tan sólo tendrás que poner las dimensiones de los bloques.
- Accesibilidad:
Ten varios navegadores abiertos mientras maquetas, ve comprobando en todos las cosas que vas haciendo, así, te ahorrarás tener que retomar un proyecto terminado por que ha dado un fallo en internet explorer 7.
Recuerda, que el css3 ha conseguido resolver muchas de las cuestiones que antes había que hacer con imágenes, como las sombras del texto o las cajas, o las esquinas redondeadas y otras propiedades que han hecho que hacer la forma de los bloques sea más sencilla.
- Herramientas online
Además de lo que podamos conseguir con estructuras y hojas de estilos configuradas, hay propiedades que podemos resolver fácilmente utilizando páginas de internet que nos ayudarán a hacer algunas cosas más rápido.
Por ejemplo, si queremos saber las dimensiones exactas de los ítems que hay en nuestro sprite o cualquier imagen en general, podemos usar una página web llamada www.spritecow.com desde la cual podremos ver nuestro sprite, y con tan sólo seleccionar un ítem nos dará sus dimensiones en píxeles y sus coordenadas dentro del sprite.
Si queremos hacer degradados podemos usar la página http://www.colorzilla.com/gradient-editor/ que nos ofrece la posibilidad de hacer degradados de diferentes tipos, y nos devuelve el código para que estos funcionen en todos los navegadores.
- Reutilización de clases:
No te pongas a hacer clases a lo loco, piénsalo bien. Si ves que una estructura de un botón, colores se repite, genérate una clase con esas propiedades que te valga para todos los botones y que los que sean diferentes sólo tengan que heredar y cambiar un par de cosas.
Si tienes listas, dale un id o una clase a la lista, y maneja todos los estilos desde ahí, intentando meter el mínimo número de clases.
Puede que esto resulte algo complicado al principio, pero una vez que te acostumbras, te ahorras mucho espacio y mucho tiempo.
En resumen, una buena planificación, usando las herramientas adecuadas, y por supuesto, escribiendo rápido y con concentración, conseguiréis ahorrar un tiempo precioso en vuestos proyectos.
¿Te ha gustado el artículo? Quizás también te interese:
- Páginas para editar fotos en español
[...] – Métodos para maquetar más rápido tu página web [...]