El orden ante todo

8/nov/2007 16

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:

Orden de Carpetas

Dentro de ellas, la estructura que trabajaré.

Estructura de Carpetas

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:

Carpetas de Estilos

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í:

Carpetas de Medios

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:

Carpeta para envío de E-mail

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.

Comentarios

  1. Seba [#]

    Jajaja, wn, pero esto es de maniatico q eres nada más… 😀 igual te copie la forma de trabajar, además, fueron años de universidad trabajando en toooodos los proyectos juntos 😀

    Un abrazo, y espero el post de las hojas de estilo multiples, es bien interesante y muy util!

  2. AraDaen [#]

    Una buena metodología de trabajo es fundamental para llevar a buen puerto un proyecto, mas todavía si se trata de grandes proyectos.
    Me ha gustado especialmente el control de versiones que realizas. :)

  3. Carlos [#]

    @seba: siempre haz copiado, eso lo sabemos.

    Con respecto al post, está bien para tenerlo como modelo, muchos recien están aprendiendo a trabajar ordenadamente, otros ya llevamos mas tiempo en esto. Al final cada uno tiene su estilo de orden, o desorden 😛

  4. Juan Pablo [#]

    hola

    Interesante el articulo. Pero no se si al sincronizar con un servidor web en internet todo el sitio se carguen las carpetas de bocetos y recursos, no seria mejor separar eso o dejarlo por fuera del sitio como tal? O si se esta probando en un servidor local, esos archivo serian accesibles, no seria mejor dejarlos fuera?
    QUe opinas?

  5. CSSLab Admin [#]

    Juan Pablo, todo este metodo lo cree segun miss necesidades y costumbres, no suelo automatizar la subida de sitios, prefiero controlarlo haciendolo a mano. Pero si es factible q crees tengro de la carpeta de tu proyecto otra llamada html por ejemplo. Saludos.

  6. Diego [#]

    Que tal, no he trabajado mucho de modo profesional por decirlo de alguna manera ($$ se entiende), lo que si he hecho son muchos trabajos para la carrera que estoy estudiando, en la cual mas de una vez me embarque en proyectos mediano, muy grandes y exigentes, y la cuestión es que el orden de trabajo (a mi criterio) hace a una buena interoperabilidad del grupo de trabajo, y muchas cosas mas, pero la que mas voy a resaltar es que permite retomar (Después de MUUUUUCHO tiempo) un trabajo sin problemas!!!, enserio el orden es fundamental!!!

  7. Andres Freese [#]

    Realmente MUY buen Post! No te imaginas lo que me sirvió. Yo soy organizado pero con todo y ello, sobre todo tratandose de manejar versiones de la págiina, enviios de Mails con avances y el trabajo en grupo, varias veces se nos armó un caos por falta de estrategia. Despues de leer este post, lo puse/imos en práctica y está funcionando a las mil maravillas. Viejo, dejame felicitarte, tu blog es para mi MUY pero MUY bueno.

  8. » Íconos para mejor usabilidad | CSSLab [#]

    […] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links que sean relativos a […]

  9. Dem [#]

    te hago una pregunta a ver si eres amable de ayudarme. He notado que sos ordenado y por eso te consulto. Muchos tienen un código hecho un desastre y por eso me acuesta aprender algunas cosas.

    ¿cuál es el orden para colocar los links, headers, etc?
    Porque resulta que armé un CSS (en realida modifiqué el default de wordpress) y dejé los links arriba, luego vienen los headers, pero por alguna razon no me toma por ejemplo los colores de algunos h2. No sé si me expliqué lo que me pasa pero bueno, en fin lo que quiero saber es el orden de los links. Sé la técnica de LOVE HATE.

  10. CSSLab Admin [#]

    Dem, lo q te esta pasando se soluciona revisando la especificidad de los selectores q has dado estilos, tema pasado en el articulo “Siendo específico“. Saludos.

  11. Alvaro Cabrera [#]

    Todo es cierto… el orden es un factor de regla o ley para quienes obramos en esto… (recuerdo que antes, nunca comente algun trozo de codigo fuente… y eso, si que duele despues)

  12. Marc [#]

    Muy buenos consejos. Esta metodología o estilo de trabajo, al contrario que en otras disciplinas, es muy similar entre todos los profesionales que conozco.

    Por cierto, los comentarios de posición de “inicio” / “fin” de div, ¿no deberían llevar doble guión? ()

  13. Marc [#]

    Muy buenos consejos. Esta metodología o estilo de trabajo, al contrario que en otras disciplinas, es muy similar entre todos los profesionales que conozco.

    Por cierto, los comentarios de posición de “inicio” / “fin” de div, ¿no deberían llevar doble guión? ( )

  14. connie [#]

    organizacion de carpetas para websites

  15. JuniHH [#]

    Coincidimos muy bien en el caso de organizar los archivos usados en diferentes carpetas, pero tu me ganas en el nivel de organizacion de las mismas, ya que a mi parecer “sobreorganizas”… que no me malentiendas, porque esta muy bien lo que haces.

    Tambien como tu tengo por costumbre guardar copias de los archivos. Si debo hacer algun cambio importante al codigo, duplico la carpeta principal y la nombro “Version 1″, si a esa le debo hacer nuevos cambios, “Version 2″ y asi en lo sucesivo. Me funciona muy bien, me parece organizado y puedo contar con los codigos de versiones anteriores si hago algo mal.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab