Consejos para diseñadores web, agiliza el proceso de creación
Cuando se trabaja haciendo sitios web hay una serie de consejos que se deberían aplicar tanto por el tiempo que ahorran como por su utilidad.
Para hacer la vida más fácil a los diseñadores web, esta entrada pretende reunir unos tips que, sin duda, te ayudarán.
Editor de código.
Obviamente, si vas a escribir el código de un sitio web, un editor de código HTML te agilizará la tarea con ayudas como un rápido salto entre etiquetas, resaltado de «fallos» en el código, comandos de acceso rápido a ciertas funcionalidades…
Editores hay muchos que están bien, pero sin duda el que más me gusta a mí es Sublime Text 2 que, con una serie de plugins, se convierte en un editor realmente potente.
No repetir lo que ya has hecho…
…y con esto no me refiero a copiar a otros, sino a no escribir el mismo código tropecientas veces.
Si nuestro sitio web se compone de 6 páginas (contacto, acerca de, información técnica, home, localización y portfolio; por ejemplo), ¿Vas a escribir 6 veces el head, footer y sidebar? No seas tonto, utiliza un include php y listo:
<?php include "fichero.php"; ?> |
Esto podemos hacerlo tantas veces como queramos en nuestro sitio web, lo que nos permite reutilizar códigos que sean idénticos en todas las páginas de nuestro sitio.
Usa pre-procesadores CSS.
SASS o LESS en la variación que más te guste, pero utilízalos. Puede resultar un poco complejo al principio si no estás habituado, pero después tu fluidez de trabajo se incrementará notablemente. Es realmente sencillo y ofrece muchas ventajas.
¿No sabes qué es un pre-procesador CSS?
No te preocupes, yo te lo explico:
Un pre-procesador CSS es un meta-lenguaje que se utiliza para simplificar y «limpiar» tu código CSS haciéndolo a la vez mucho más ligero y comprensible.
Escribe para humanos, aunque funcione en máquinas.
Aunque el código sea interpretado por máquinas y los humanos sólo vean el contenido que muestra el navegador, no dudes en comentar, comentar y COMENTAR el código.
Recuerda que algún humano llegará dentro de mil años para modificar esa página web y no entenderá nada. Incluso, en el peor (o mejor) de los casos, ese humano serás tú mismo y no recordarás por qué hiciste las cosas así. Comenta el código diciendo por qué eso está así y qué función cumple.
¿Te he dicho ya que comentes el código?
Haz amigos a quien preguntar
Si algo nos facilita Internet y las nuevas tecnologías de las que disponemos es la posibilidad de comunicación (casi) instantánea.
Haz amigos en Twitter, Facebook, Google+ o busca una buena comunidad donde realizar preguntas (y, muy importante, encontrar respuestas).
No importa lo bueno que seas creando código para páginas web, siempre necesitarás alguien que te resuelva una duda puntual. Además, tener gente alrededor que sabe más que tú te ayudará a mejorar tus habilidades.
Utiliza las herramientas que te facilitan la vida, no las que te entorpecen.
Hay mucha gente que sigue utilizando herramientas para realizar webs que, aunque piensan que no es así, están entorpeciendo el proceso de creación brutalmente.
Actualízate, mantente al día de cuales son las más utilizadas y modernas herramientas para realizar tu trabajo y, sobretodo, intenta agilizar el proceso de creación al máximo.
Estas son algunas de las herramientas que yo utilizo para agilizar ciertas tareas:
- Emmet: facilita la creación de código
- Lipsum: Para crear contenidos y rellenar los textos de una maqueta.
- Color Scheme Designer: Me ayuda a escoger colores para los diseños que hago.
Podría enumerar más herramientas, pero eso quedará para otra entrada…
¿Quieres aportar herramientas o contarnos tu experiencia? Hazlo en los comentarios, esperamos tu opinión.
Derechos de imagen.
Extendiendo el contenido del post con algunos puntos que veo de interés:
No solo usar preprocesadores de CSS, sino aprender a usarlos más allá de la mejora y simplicidad de la sintaxis, como por ejemplo:
-Variables.
-Funciones para el control de colores, de forma que en base a unos pocos colores guardados en variables podrías sacar la paleta de colores de toda la web.
-Minificación del CSS, para hacer que tu archivo final pese menos.
-Modularización del código, separar el código en distintos archivos y unirlos mediante el preprocesador, si puede hacerlo.
-Uso de mixins, sobretodo para eliminar esos problemas de poner cada tanto los prefijos propietarios para cada navegador.
Depende de qué preprocesador se use, tendrá o no estas funciones. Si las tiene, ¿por qué no usarlas?
Utilizar las nuevas etiquetas de HTML5. Aparte del avance de la versión de HTML en sí, un o un o un en el código nos dice más que un .
Aprender a usar, al menos de forma básica, algunos frameworks de javascript como jQuery para poder acceder al DOM del documento, y realizar eventos y pequeñas animaciones de forma simple.
Separar el CSS y JS del HMTL, intentando no tener código intrusivo en el HTML. Es mucho más rápido cambiar una regla de CSS de un archivo que afecta a todas las páginas de la web, que tener que ir cambiando HTML por HTML el código del atributo style de varias etiquetas. Aún hay gente que no lo hace.
Sobre el Lorem Ipsum, en alguna ocasión me explicaron que tiene un problema, y es que sus métricas son demasiado perfectas. Al final del día, el cliente puede querer poner un texto con 2 líneas y otro con 20. Al verlo en un diseño a 2 columnas en el que cada columna va uno de esos textos, con los textos del cliente va a quedar mucho espacio vacío que no pudimos predecir al probar con el Lorem Ipsum, en el que ambos textos pueden quedar a un nivel similar.
Hola Alivanprox,
gracias por comentar y dar tu punto de vista y más consejos.
Pero veo una pega a todo lo que comentas, piensa que está orientado a diseñadores web que quieren empezar a «programar» webs (generalmente no tocan código nunca). Lo que tú comentas es más orientado a programadores front-end.
Aún así, muchas gracias por compartir.
Saludos.