Durante la evolución de un proyecto tendemos, sin darnos cuenta, a ensuciar nuestro código. Ya sea aplicando parches a los fallos encontrados o añadiendo nuevas funcionalidades no pensadas previamente. Por ese motivo conocer algunos principios básicos nos pueden ayudar a crear un código que se mantenga en el tiempo igual que el primer día.
1) Doctype STRICT
Si ya tienes algo de soltura deberías apostar por STRICT para definir en el doctype de tu web. De esta forma estarás asegurándote un poco más de tiempo con un doctype válido.
2) Cuidado con el carácter & (&) y demás carácteres especiales
Los carácteres especiales en el texto deben ir siempre codificados según el estandard, así conseguimos que nuestro código sea limpio y evitamos producir errores innecesarios y fáciles de solventar en el validador de la W3C.
3) Indentación, Indentación … indentación
Por encima de la eficiencia del código, la mayoría de proyectos deben ser claros y fáciles de interpretar por cualquiera. Piensa que no sabes si dentro de 3 meses o 5 años, vas a tener que volver a tocar el código. Así que dedícate un tiempo para indentar el código y dejarlo claro.
4) Separa el contenido de la funcionalidad y el diseño
No me cansaré de decir que la separación de capas es algo primordial, al igual que la identación ayuda a la comprensión del código, la separación de las diferentes capas ayuda a conocer donde está ubicada cada parte de la web. Sin contar que conseguir idependizarlas, lo que nos permite modificar cualquiera de ellas afectando a las demás sin necesidad de modificar las demás.
5) Usa los tags correctamente
Conocer las propiedades de los tags HTML permitirá que hagamos un código más semántico y sobretodo estandar. Es importante usar los tags correctamente ya que aunque el navegador permita mostrar el contenido como nosotros queremos mostrarlo, la estructura correcta nos ayudaría en terminos de SEO…
6) Elimina elementos innecesarios
Por desgracia al pasar del diseño en tablas al diseño con divs, podemos caer en una etapa de “divitis” que nos hace usar div’s para todo. No debemos usar elementos innecesarios para conseguir lo mismo que conseguiríamos con menos elementos. Este punto hace refecia directa al punto 5.
7) Piensa bien los nombres que usas
En muchos casos tendemos a usar nombres poco descriptivos a demasiado descriptivos. Este ejemplo muestra ua muestra clara de lo que quiero decir:
8 ) Deja la tipografía a los CSS
Debemos pensar que el diseño lo controla el CSS, y por ello todo lo relacionado con él debe ir reflejado en los ficheros CSS. Por ejemplo, el texto en mayusculas podemos solventarlo con text-transform: uppercase;
9) Class/ID en el <body />
Una forma de conseguir mayor flexibilidad en nuestros CSS es usar id/class en nuestros elementos <body />. De esta forma podemos variar el diseño de ciertos elementos dependiendo dle tipo de body que especifiquemos.
10) Validación
La validación de nuestro código es más que poner un icono en la parte inferior. La validación nos ayuda a completar unos aspectos básicos que los diseños web deben cumplir. No implica que un desarrollo esté mejor o peor hecho, sinó que nos ayuda a conguir un mínimo imprescindible para diferenciarnos del código generado por un programa (Frontpage,…).
11) Aplícale lógica a la estructura
Hemos de pensar que el código se ha de leer de arriba hacia abajo y que siguiendo esta premisa debemos generar una estructura colocando elementos seguidos unos a otros de una forma lógica. Hemos de pensar 2 veces si colocamos un elemento en esa posición o lo ponemos en otra.
12) Haz lo que puedas
El esfuerzo se nota y aunque no sea a la primera, ni a la segunda, llega un momento en el que ese esfuerzo se acaba recompensando. Simplemente hemos de ser pacientes y esperar a que ese momento llegue.
