Reglas generales

Preservar la legibilidad: la indentación, los comentarios

Un desarrollador escribe líneas y líneas de código. Hacen falta varios miles de líneas antes de poder considerarse un desarrollador. En cualquier caso, poco importa el lenguaje utilizado, es muy importante ser muy riguroso en lo relativo a la organización de las líneas. Algo así como ocurre con el texto de una revista que está bien presentado, conviene que el código sea legible y agradable a la vista.

Un desarrollador, prácticamente de cualquier lenguaje, pasa probablemente más tiempo releyendo su propio código que escribiéndolo, para corregir algún error o aportar alguna mejora. Es más agradable leer un código bien formado que un código en el que todo está desordenado: esto es lo que vamos a ver en esta sección.

activo = 'indefinido';   
if (edad >= 18) {   
adulto = 'OK';  
cargaPagina("adulto") ;   
} else {   
adulto = 'KO';   
cargaPagina("niño") ;   ...

Pensar en el posicionamiento

Cualquiera que quiera crear un sitio web hará lo posible para que el sitio funcione correctamente, que sea agradable a la vista, que sea legible, que la información sea fácilmente accesible, etc.

Pero también hace falta llevar visitas hacia la web para admirar este trabajo.

Recibirá las visitas que hayan visto la dirección del sitio web en la firma de un correo electrónico o en alguna tarjeta de visita. Pero lo más importante es conseguir que los motores de búsqueda y los sitios sociales "conozcan" la existencia de este sitio.

El texto contenido en un sitio es importante para el posicionamiento. Conviene escribir el texto teniendo en cuenta las palabras clave para el sitio.

El sitio http://tools.seobook.com/general/keyword-density/ permite, pasándole la URL de un sitio web, obtener un informe relativo a las palabras clave del sitio junto a numerosos consejos.

Si un vendedor de coches de ocasión tiene un sitio web, es probable que las palabras "coche" y "ocasión" se presenten con frecuencia en este sitio.

Para obtener un método sencillo, la pregunta que nos tenemos que plantear antes de desarrollar un sitio es: "¿Qué buscarán los internautas en el motor de búsqueda para llegar a mi sitio?"

El vendedor de coches podría plantearse: "Si escriben "comprar coche ocasión"...

Carpetas y rutas hasta los archivos

Un sitio web completo necesita la presencia de distintos tipos de archivo para manipular. Una lista no exhaustiva daría los siguientes tipos:

En función de la complejidad del sitio que queremos crear, será posible tener una gran cantidad de archivos. Lo más sencillo para no perderse sería crear, como mínimo, una carpeta por tipo de archivo. Incluso aunque en ciertos casos puede que no exista más que un único archivo CSS, será una buena idea alojarlo en una carpeta propia llamada, simplemente, "css".

Veamos cómo se comunican los archivos entre sí para comprender mejor cómo organizar las carpetas.

Si una instrucción CSS requiere una imagen para decorar el fondo de la página, debemos escribir en el archivo CSS el nombre de la imagen necesaria, por ejemplo "fondo_azul.jpg":

body {  
    background-image:url("fondo_azul.jpg");  
} 

La instrucción CSS background-image utiliza una URL, es decir una cadena de caracteres, que indica dónde se encuentra el recurso necesario, en nuestro caso el archivo fondo_azul.jpg.

Si el archivo de imagen se encuentra en la misma carpeta que el archivo CSS basta, como muestra el ejemplo anterior, con escribir el nombre de la imagen. El equipo busca en la carpeta en la que se encuentra el archivo CSS si existe un archivo llamado fondo_azul.jpg. Si lo encuentra, CSS puede utilizarlo.

Si se da el caso de que el archivo CSS está en una carpeta y el archivo de imagen en otra carpeta diferente, hay que indicar al equipo la ruta para ir desde...

Los editores de código

Para crear un sitio, son necesarios archivos que contengan instrucciones para implementar bloques, asignarles colores, hacerlos reaccionar al clic del ratón... Si la comprensión del texto es más o menos compleja, la escritura puede realizarse mediante el más sencillo de los editores de cualquier sistema operativo, por ejemplo Notepad en Windows o TextEdit en Mac. Existen editores, de pago o gratuitos, que nos ayudarán a escribir el código de nuestras páginas. Algunos de ellos, como Adobe Dreamweaver (de pago), tienen una presentación WYSIWYG (What you see is what you get: lo que se ve sobre el editor es lo que aparecerá en nuestro navegador).

Es cierto que esto puede resultar atractivo, pero en la práctica no lo es tanto. Existen dos problemas principales con estas herramientas. En primer lugar What You See Is casi What You Get. Efectivamente, conviene verificar siempre el trabajo dentro del navegador, pues si utilizamos algunas de las funcionalidades de CSS más recientes existe un alto riesgo de que la aplicación WYSIWYG no sepa cómo representarlas.

Otro aspecto relativo a este tipo de aplicaciones es que nos permite crear un sitio web sin prestar atención al código. Si bien es posible, con el ratón, diseñar un bloque aquí, otro allá, y hacer evolucionar el sitio, el problema es la completa pérdida del control sobre el código que se genera, sin mencionar la manera en la que evoluciona el código cuando se agrega un bloque, se elimina a continuación, se vuelve a crear, se desplaza... siempre quedan secciones de código que deben suprimirse, etiquetas vacías que resultan inútiles, estilos que se crean automáticamente con nombres como style1, style2. De hecho, todo esto nos da la ilusión de ganar tiempo, que perderemos a continuación para volver a dejarlo todo en orden.

Otros editores, menos atractivos a primera vista, serán mucho más eficaces para avanzar en la construcción de un sitio web. Tomemos, por ejemplo, NetBeans. Este editor estaba dedicado, inicialmente, a la programación en lenguaje Java. El lenguaje Java no tiene en común con JavaScript más que las cuatro primeras letras del nombre. Se trata de un lenguaje muy complicado, riguroso, que permite diseñar programas...

Algunos atajos prácticos