El orden ante todo

8/Nov/2007 179

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. DavidPraib [#]

    ed prescription drugs: ed meds online without doctor prescription natural ed pills

  2. Asfghk [#]

    levitra price – vardenafil 20mg how long does vardenafil last

  3. Enokez [#]

    viagra vs cialis vardenafil – vardenafil dosage 40 mg cheap levitra

  4. KevinchaWn [#]

    buy viagra online canada – viagra 100mg price viagra online usa

  5. Wdfxjg [#]

    where to buy vardenafil in canada – vardenafil levitra buying vardenafil online safe

  6. KevinchaWn [#]

    viagra over the counter walmart – viagra cost where to buy viagra

  7. Rrffqu [#]

    ivermectin india – ivermectin syrup stromectol cvs

  8. Oucjkp [#]

    ivermectin canada – cost of stromectol medication ivermectin 15 mg

  9. Bctygx [#]

    super viagra plus – viagra 2018 price of viagra 50 mg in india

  10. KevinchaWn [#]

    generic neurontin 300 mg buy neurontin online – neurontin brand name 800mg best price

  11. Kkzofa [#]

    buy viagra online uk fast delivery – sildenafil 100 mg tablet usa female viagra cost in india

  12. KevinchaWn [#]

    chloroquine tablet price aralen phosphate – chloroquine for sale

  13. Wuwhwa [#]

    tadalafil black – buy cheap cialis 20mg online pharmacy worldwide shipping

  14. KevinchaWn [#]

    buy aralen buy aralen – chloroquine for sale

  15. Agjtum [#]

    tadalafil generic pills – generic tadalafil from uk cialis 60 mg online

  16. Cassie [#]

    Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something.

    I think that you can do with some pics to drive the message home a little bit, but instead of that,
    this is excellent blog. An excellent read. I will definitely be back.

  17. https://fscrystal.net [#]

    I am no longer sure the place you are getting your information, however good topic.

    I must spend a while learning much more or working out more.

    Thanks for great information I was searching for this information for my mission.

    Also visit my site – https://fscrystal.net

  18. bbs.yunweishidai.com [#]

    Great post! We will be linking to this particularly great article
    on our site. Keep up the good writing.

    Here is my blog post :: bbs.yunweishidai.com

  19. www.craksracing.com [#]

    hello there and thank you for your info ? I’ve definitely picked up
    something new from right here. I did however expertise several technical points using this web site, as I experienced to reload the website
    a lot of times previous to I could get it to load correctly.
    I had been wondering if your web host is OK? Not that I’m complaining,
    but sluggish loading instances times will often affect your placement in google and could damage your high-quality score if ads and marketing
    with Adwords. Anyway I am adding this RSS to my email and could look out
    for a lot more of your respective fascinating content.
    Ensure that you update this again soon.

    Also visit my web page http://www.craksracing.com

  20. www.zicd.com [#]

    I and my buddies were studying the good key points
    from your web page then the sudden I had a terrible
    feeling I had not thanked you for those techniques. My guys were definitely for this reason happy to read all of them and now have in reality been enjoying these
    things. Appreciate your simply being so kind and then for making a choice on this
    sort of wonderful issues millions of individuals are really desperate to
    understand about. Our sincere apologies for not saying thanks to sooner.

    Stop by my site; http://www.zicd.com

  21. Hattie [#]

    What’s up, just wanted to say, I loved this post.
    It was practical. Keep on posting!

  22. KevinchaWn [#]

    doxycycline mono buy doxycycline online – doxycycline 100 mg

  23. pgslot99Th [#]

    I really like it when individuals come together and share thoughts.

    Great website, keep it up!

  24. Rducfo [#]

    prednisone 20 mg over the counter – prednisone 20 mg generic 120 prednisone

  25. KevinchaWn [#]

    doxycycline 50mg generic doxycycline – online doxycycline

  26. Burst Audio [#]

    Hello, Neat post. There’s an issue together with your site in web explorer,
    may test this? IE nonetheless is the marketplace leader and a big portion of other folks will omit
    your wonderful writing because of this problem.

    Feel free to surf to my website Burst Audio

  27. KevinchaWn [#]

    can you buy chloroquine over the counter order aralen online – chloroquine phosphate aralen

  28. Mvlpgh [#]

    deltasone over the counter – prednisone 50 mg buy order deltasone

  29. KevinchaWn [#]

    buy doxycycline without prescription uk buy doxycycline 100mg – buy doxycycline online without prescription

Deja tu Comentario

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

CSSLab