Videocast 1: layout compuesto (actualizado)

3/oct/2007 24

En un proyecto en que estoy involucrado actualmente, me tocó participar en la arquitectura y construir el sitio completamente, desde cero. Lo bueno es que lo estoy haciendo solo, por lo que propongo y aplico mis propios métodos, y lo mantengo bastante ordenado (con un código limpio y ordenado), tanto el HTML como las hojas de estilo. A medida en que lo voy desarrollando, aplico algunos métodos bastante simples pero efectivos para determinados problemas que van surgiendo, los que compartiré en este sitio en su momento.

Por ahora, me interesa mostrar a través de este primer videocast (a grandes rasgos) cómo construí el layout, ya que felizmente quedó firmemente estructurado en todos los browsers en los que hago las pruebas. La receta: flotando cajas, un buen css reseter y mucha imaginativa a medida en que se va escribiendo código. Hasta ahora no he utilizado una sola gota de comentario condicional.

:D

Espero sea una buena ayuda a más de alguien, por último para que vean diferentes técnicas de diagramación.

Un detalle: trabajé mucho con los pesos de los videos v/s calidad de compresión y decidí cortarlo en 2 videos al final, ya que el videocast dura 47 minutos en total y quedó bastante pesado. Siento si esto limita a más de alguno, pero en realidad necesitaba abarcar todo el proceso. Creo que quedó bien completo.

Videocast parte 1: arquitectura y header 22 minutos

Videocast parte 2: contenido 26 minutos

Además, el material utilizado (html, css, imágenes) está disponible para descargar.

Provecho!

Comentarios

  1. sauce [#]

    veo que no ando tan perdido…

    excelente entrega…

  2. Neofitos [#]

    Hola, me parece genial este artículo de hecho me ha servido para coger algunos conceptos que no terminaba yo de enterarme, lo que si agradecería es que se puediese descargar los videos ya que solo tengo internet en mi trabajo y me gustaría tenerlos en casa.

    Un saludo a todos los programadores que visitamos tu web, gracias.

  3. jacin [#]

    Excelente el tutorial, estoy empezando y me ha sido de gran ayuda ya que estoy acostumbrado a maquetar con tablas.
    Seria interesante tambien poder descargar los videos para verlos a un tamaño mayor ya que se pierden algunos detalles al verlo tan pequeño.
    Un saludo.Jacin

  4. Chap [#]

    Hola estoy viendo los videos, voy en el primero, y me parece muy útil, salvo por 2 cositas; una es que no alcanzo a ver los códigos que escribes ni tampoco otras operaciones que se escapan del encuadre, y la otra es que como apartir de la última cuarta parte del video 1, como que se corta y desaparece el audio. Sería una buena opción tenerlos para descargar en mejor resolución, de todas maneras gracias.

  5. Giovanny [#]

    El 1er video se corta un poco mas de la mitad :(
    Excelente web , te refelicito, saludos.

  6. rodrigo [#]

    Hola.. es la primera vez que te dejo un comentario, pero hace mucho que visito la página. estaba viendo los videocast, pero en realidad no sé si sea problema de mi conexión o mio, pero el primero deja de escucharse en el último cuarto de la peli. Estoy con aquellos que dicen si los puedes poner en mejor resolución para descargar…

    Igualmente. muy bueno. Veo que mis técnicas.. tampoco están tan diferentes.. un abrazo y muchas gracias.

  7. CSSLab Admin [#]

    Gracias a todos por sus alentadores comentarios. chequeare el video 1 para ver el problema del autio, y claro con un poco de tiempo subire la version entera para su mejor descarga. gracias nuevamente.

  8. CSSLab » Alto mínimos para IE6 (y el resto, claro) [#]

    […] Videocast 1: layout compuesto […]

  9. Manuel [#]

    Podrias grabar con Camtasia Studio
    los videos no pesan mucho y toman la pantalla completa
    Por ejemplo
    http://roumen.name/blog/persistence_demo/persistence.html

  10. Daniel Ulczyk [#]

    Excelente tutorial!
    Celebro tu iniciativa de compartir todo esto con nosotros, quienes periódicamente seguimos de cerca tu sitio.

    Lamentablemente, en ambos, el videos se corta en el último 20%.
    Seguramente podremos disfrutar pronto de la versión completa.
    Saludos y felicitaciones (nuevamente).

  11. RONALD [#]

    Me gustaria poder bajar tus dos videos si me pudieras enviar el link para bajarlos gracias…

  12. RONALD [#]

    lo qe susede es que no lo puedo ver en el trabajo y necesito llevarlo a la casa gracais

  13. Danny [#]

    Excelente aporte, felicitaciones.

  14. Danny [#]

    Puedes dejar los videocast para descargar ya que el primero llega hasta 3/4 y el audio no se escucha mas.
    Esta muy interesante.

  15. rodrigo [#]

    pues.. yo los iba a volver a reclamar.. jaja.. ! hoy eché una ojeada.. y Caramba.. ahí estaban los videos… Muchas gracias.. ahora sabré que dice.. en ese lugar donde está mudo..
    un abrazo
    rodrigo

  16. CSSLab » 100% alto, finalmente para todos [#]

    […] Videocast 1: layout compuesto (actualizado) […]

  17. CSSLab » CSS Reseter [#]

    […] Videocast 1: layout compuesto (actualizado) […]

  18. pablo [#]

    Hola, me baje la version completa del video cast, pero esta sin sonido??? porque? lo puedes arreglar?

  19. » Í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 […]

  20. Marcos [#]

    Hola me parecio muy bueno tu video tutorial, una sola recomendacion seria muy bueno que pudieras empliar un poco el tamano del video porque no se ve muy bien el codigo.

    Marcos

  21. Mr.Ale [#]

    Entretenido ver como ahi gente que hace lo mismo que uno.

    Seria bueno ver la continuacion, aplicar unos cuantos mas div, los enredos con los float´s, nose, algo mas de “realismo”, me gustaria escucharte putear a internet explorer, cosas asi, mayor complejidad, no digo que este primer video aya sido facil, sino que seria entretenido verte solucionar problemas, como lo hacemos todos nosotros a diario.

    Felicitaciones por el blog, y que agradable ver el hecho de que sea chileno.

  22. Diezko [#]

    Excelente video y muchas gracias por compartirlo.
    Ya lo descargue y estoy de acuerdo con Marcos, es una lastima que no se llegue a leer el código, queda todo muy pixelado para leer el texto.
    Igual es un material buenísimo como guía, te lo agradezco mucho.

  23. Dracox3 [#]

    Ey…. Muy bueno el material crei que tenia claro todo pero gracias a tu tutorial aprendi muchisimo…. Muchas Gracias!!!!

  24. Videocast 2: menú con listas ↝ CSSLab [#]

    […] de cómo lograr menúes con listas, verticales u horizontales. Como he aprendido del videocast anterior, esta vez subí 3 versiones para deleite del consumidor. Espero sea de bastante ayuda a […]

Deja tu Comentario

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

CSSLab