El orden ante todo
Me considero una persona bastante ordenada, y eso se refleja tanto en mi vida personal como profesional. Mantengo ordenado (trato) mi escritorio, mi desktop, archivos y por supuesto el código fuente que escribo. Con el tiempo he desarrollado un estándar para los proyectos, tanto para el orden de las carpetas, como para el registro de envío de e-mails entre otros. Es que he perdido tanta información y ha habido tanta desinformación que mejor me hice mi orden propio, y ha funcionado muy bien hasta ahora. Trataré de compartirlo con ustedes, sólo para que tengan una referencia o complementen el suyo. Lo separaré en varios criterios para mejor entendimiento, y ejemplificaré con un proyecto ficticio: Rediseño Be Studios.
Carpetas
No me gusta mucho trabajar en servidores compartidos, ya que suelen ponerse lentas las conexiones y torna el trabajo lento. Mejor trabajo local (o puedes crear un sitio dentro de tu computador) y si lo necesito compartir con otro profesional o un cliente, lo subo al servidor en su momento.
Comienzo con una carpeta en el desktop con el nombre del dominio:
Dentro de ellas, la estructura que trabajaré.
En bocetos guardaré todo lo que reciba de diseño para ser construído. En rscs, todo lo que utilice como recurso (resource), ya sean scripts de JS, ejemplos que utilice, enfin, todo lo que me sea útil como recurso para quizás después volver a utilizar. Ahora, las carpetas del proyecto mismo son:
Estilos
Dentro de ella guardaré la o las hojas de estilos y las imágenes que utilice para construir el sitio, o sea, que sean utilizadas como gráfica del sitio y que sean llamadas a través del CSS. Dentro de esta carpeta suelo tener más carpetas:
En bitmaps guardo las imágenes (generalmente gif’s) que generan el estilo gráfico del sitio; ya master.css es creado dependiendo del proyecto. Si éste es grande (más de 90 páginas), master.css será la única hoja de estilos llamada por todas las páginas, y dentro de ella estará llamando otras hojas de estilos que cuidarán de la estructura (layout.css) y del diseño (design.css), u hojas de estilo por secciones: header.css, body.css, footer.css por ejemplo. Esto lo detallaré más adelante, en Hojas de Estilos: múltiples.
JS
Aquí, claramente, guardaré todos los .js que utilice. Si el proyecto no los necesita, esta carpeta se descarta.
Medios
Se guardan los elementos que sean utilizados para el contenido en el HTML, o sea, todas las imágenes que sean utilizadas mediante <img />, los .swf, .flv, .pdf, etc, etc, etc. Dentro de medios el orden sería así:
Finalmente, la carpeta principal o raíz contiene los .html comenzando por el index.html y se crean las subcarpetas para la estructura formal del sitio.
Hojas de Estilos
Comenzamos a escribir el código con que nuestro sitio se verá por miles de millones de usuarios en todo el mundo que tenga una conexión a mano.
Múltiples
Como mencioné anteriormente, si tenemos un sitio web más o menos grande, la mejor opción sería tener múltiples hojas de estilos. Para esto, cada HTML llama solamente la principal: master.css y dentro de ésta se llaman las siguientes mediante @import:
@import url("2008/reseter.css");
@import url("2008/layout.css");
@import url("2008/header.css");
@import url("2008/side.css");
@import url("2008/secondside.css");
@import url("2008/footer.css");
En esta caso, separé cada parte del sitio con su hoja de estilos propia. Así trabajo con cada una por separado y se tiene mayor control sobre cada parte. Primero, reseter.css que resetea todas las propiedades CSS conflictivas en todos los browsers. Luego, layout.css controla solamente la estructura de todas las secciones juntas (width, height, float, position, margin, etc.). A continuación, las hojas de estilos para cada sección que controlan la gráfica (font, color, background, padding, etc.).
Escribiendo código
Ya dentro de los estilos, recomiendo comenzar con un encabezado que contiene información relativa al proyecto y quién(es) lo está(n) ejecutando.
/* –
Be Studios
diseño: Jorge Epuñan
construcción: Jorge Epuñan
fecha: 08/11/07
mod1: -
mod2: -
— */
Con esto sabemos, si trabajamos en grupos, quién lo hizo y deshizo, así es más fácil encontrar responsables cuando queda la embarrada… o premiar con vacaciones al glorioso que lo terminó antes del plazo.
Otro elemento muy importante, es mantener la jerarquía de marcado dentro de los estilos. Con esto me refiero a no tener miedo a utilizar la tecla tab y la tecla enter para separar un poco los estilos:
#container {}
#header {}
#header #nav {}
#content {}
#content #central {}
#footer {}
Se darán cuenta que será mucho más fácil encontrar después alguna class creada.
Comentando
Algo primordial para mantener un orden dentro del código mismo. Suelo separar las secciones importantes con comentarios que se noten, y los id’s principales con comentarios menos vistosos:
/* ==================== #header == */
#header {}
/* ——— #nav — */
#header #nav {}
/* ==================== #content == */
#content {}
/* ——— #central — */
#content #central {}
/* ==================== #footer == */
#footer {}
HTML
Escribiendo código
Se repite un poco lo que mencioné con las hojas de estilos. Me interesa bastante mantener y aprecio bastante el orden estructural de marcado a medida con que se escriben las secciones, mediante jerarquías. Y repito, no tenerle miedo al tab y al enter:
<div id="container">
<div id="header">
<ul id="nav">
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Comentando
Con HTML’s gigantescos, se hace muy difícil después encontrar dónde cresta se cierra el <div id="subnav">. El orden de jerarquías anterior facilita la cosa, pero una ayudita es comentando cuando abrimos algún id o class principal y cuando lo cerramos:
<div id="container"><!– #container –>
<div id="header"><!– #header –>
<ul id="nav"><!– #nav –>
</ul><!– /#nav –>
</div><!– /#header –>
<div id="content"><!– #content –>
</div><!– /#content –>
<div id="footer"><!– #footer –>
</div><!– /#footer –>
</div><!– /#container –>
Cuando abrimos un id utilizo <!– #nombre_id –> y cuando lo cierro utilizo / para notarlo: <!– /#nombre_id –> y con class es lo mismo <!– .nombre_class –> y <!– /.nombre_class –>.
Enviando E-mails
Ya nos están pidiendo avances. Enviaré lo que tengo por mientras. Para esto, duplico la carpeta que estoy trabajando y le cambio el nombre:
Le agrego la fecha en que estoy enviando lo que me piden (_añomesdia). Luego, borro todo lo que no necesita: bocetos y rscs principalmente, o si me pidieron solamente el formulario de contacto armado por ejemplo, borro la index y las otras páginas que no vienen al caso. Sólo contacto.html, sus CSS y sus JS y quizás medios no aplican así que los borro. Siempre lo vuelvo a revisar por si borré algo que era necesario. Luego, a comprimir y se envía por e-mail o se sube en algún servidor para descarga.
Registro
Luego de esto, el archivo comprimido lo guardo siempre en la carpeta rscs que tenía creada. Esto es para mantener un control de las versiones anteriores, y si me equivoco en algo rescato del último archivo comprimido. Toda precaución es poca cuando tiempo es dinero.
Eso fue todo, quedó bastante completa la explicación. Con el tiempo me acostumbré a todo esto y ni noto lo largo que parece ser el procedimiento. Y ha resultado ser muy efectivo.
