Hagamos un ejercicio de imaginación, construyámonos nuestra casa, con jardín, salón amplio, cocina, habitaciones, etc. El primer paso que haremos será dibujarla en un plano.



Resumiendo tenemos una

Casa formada por:
jardín
salón
habitación 1
habitación 2
cocina

Hemos hecho las divisiones de nuestra casa, sigamos ahora con el ejercicio de imaginación, vamos a modificar los nombres

Nuestra casa se llamara body
jardin ► header-wrapper
salon ► main-wrapper
habitación 1 ► sidebar-wrapper 1
habitación 2 ► sidebar-wrapper 2
cocina ► footer-wrapper

Representemos eso en términos que los navegadores puedan entender. Como son divisiones como tal las definiremos, con una particularidad, toda división que se abre debe cerrarse para que pueda actuar como tal.

Así que tendremos

una casa ► <body>
y dentro de la casa las divisiones con sus ID o nombres que son exclusivos
jardin ► <div id='header-wrapper'></div>
salon ► <div id='main-wrapper'></div>
habitación 1 ► <div id='sidebar-wrapper 1'></div>
habitación 2 ► <div id='sidebar-wrapper 2'></div>
cocina ► <div id='footer-wrapper'></div>
se acaba la casa ► </body>

Ahora sin explicación

<body>
<div id='header-wrapper'></div>
<div id='main-wrapper'></div>
<div id='sidebar-wrapper 1'></div>
<div id='sidebar-wrapper 2'></div>
<div id='footer-wrapper'></div>
</body>

¿No se parece esto a algo conocido que os da mucho respeto?

Pero solo tengo la casa con divisiones y quiero que mi jardín tenga piscina, que mi salón tenga chimenea, que las habitaciones tengan armarios y en mi cocina quiero un hermoso frigorífico.

casa formada por:
jardín con piscina
salón con chimenea
habitación 1 con armario
habitación 2 con armario
cocina con frigorífico

Volvamos a la imaginación y cambiamos los nombres, estos ahora ya no serán exclusivos así que no serán ID sino clases

casa ► body
jardín con piscina ► header-wrapper con header
salón con chimenea ► main-wrapper con main
habitación 1 con armario ► sidebar-wrapper 1 con sidebar
habitación 2 con armario ► sidebar-wrapper 2 con sidebar
cocina con frigorífico ► footer-wrapper 1 con footer

Como estos nuevos aportes van dentro de las divisiones les llamaremos secciones, así que obtenemos

<body>
<div id='header-wrapper'>
<b:section class='header' id='header'>
</b:section>
</div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main'>
</b:section>
</div>
<div id='sidebar-wrapper 1'>
<b:section class='sidebar' id='sidebar1'>
</b:section>
</div>
<div id='sidebar-wrapper 2'>
<b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
</div>
</body>

Pues esto se va pareciendo cada vez más a mi plantilla.

Pero tendremos que rellenar algunas cosas de esas secciones, digo yo ¿no?, la piscina habrá que meterle agua, a la chimenea, leña, a los armarios unas baldas por lo menos y al frigorífico me niego que no le metamos unas cervecitas.

Como a estas alturas ya sabéis cual es el ejercicio de imaginación pasemos directamente a ver como quedaría

<body>
<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper 1'>
<b:section class='sidebar' id='sidebar1'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sidebar-wrapper 2'>
<b:section class='sidebar' id='sidebar2'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
</body>

Ahora si que se parece casi del todo, como sabréis podemos "rellenar" cada cosa con los elementos que queramos.

Hasta aquí tenemos una casa con sus divisiones, algunas secciones y cosas dentro de esas secciones, ¿pero como quiero que todo esto quede?, ¿con que color?, ¿que tamaño?...eso lo veremos en otra entrada.

Te interesa:

  • Imagina que tu plantilla es la casa que vas a construir 2

  • Imagina que tu plantilla es la casa que vas a construir 3
  • Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

    ¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

    Te recomendamos también

    20 comentarios:

    1. Hola Pizcos,
      Te agradezco mucho tu explicación. El esquema tanto de este post como del anterior es muy claro.
      Un gran abrazo.

      ResponderEliminar
    2. Muy Buena explosión, ya mas fácil no creo...

      Esto le va ayuda a bastante gente, cuando expliques CSS ya sabrá hacer plantillas.

      Estoy haciendo un blogs, con un diseño en cada entrada, a una plantilla por entrada ,algo que asto ha ora me parecía una tontería, pero uno quiere mas...

      En fin ya te mantendré informado de mis tonterías .

      Un saludo.

      ResponderEliminar
    3. No se ustedes, pero esa casa no tiene baño... Me parece que voy a hechar a un integrante para construir en la habitación un baño, jajaja. Muy buena la explicación, es una idea original pensar en eso. Yo ahora quiero ver muchísimos tutoriales porque e decidido a cambiar la plantilla de i blog por algo bien oscuro. Tu diseño quedo tremendo. Me gusta lo de los comentarios porque tiene el pinchito como simulando un globo de texto. Un saludo
      Y el fondo que pusiste... TREMENDO (sí, grité enserio)

      ResponderEliminar
    4. Hi, Pizcos,

      A melhor explicação que já li, sobre o assunto! #Fato

      Mas, Mestre é Mestre!...

      []'s @inaciorolim

      ResponderEliminar
    5. Jode, con explicaciones tan claras te tenian que dar el Nobel de la sencillez, pues asi hasta yo lo entiendo.
      Un saludo

      ResponderEliminar
    6. Felicidades por hacerlo tan fácil, como sigas así vamos a dejar a los arquitectos sin trabajo, ;-) voy a seguir tus explicaciones con mucho interés, gracias, un abrazo.

      ResponderEliminar
    7. Así ya me voy enterando de algo, haces fácil lo dificil como los buenos profesores.

      Saludos Pizcos

      ResponderEliminar
    8. hola pizcos
      solo pasaba para como todos los años y ya van varios y espero que sigan habiendo muchos mas
      desearte una feliz navidad
      cuidate
      un abrazo
      el albañil

      ResponderEliminar
    9. Hola Pizcos, he encontrado tu super blog por casualidad y me ha gustado un monton, yo inicio en el mio, poco a poco voy aprendiendo.
      Por cierto me gustaria saber como se pone la caja esta de comentarios y los recuadros de cada comentario, que tienes aqui, esta super guapo.
      Saludos amigo.
      Reina.
      Ajedrez Noroeste

      ResponderEliminar
    10. Por fin alguien que comprende, que no todo mundo es experto en blogs, y la verdad que explicarlo de ésta manera, ayudará a mas de uno.
      Felicitaciones!

      ResponderEliminar
    11. Soy psicologo educacional, que estoy tratando de aprender de este mundo, del que no tengo la menor idea, y realmente eres muy habil para enseñar... Gran exposición.


      Muchas gracias por compartir tu conocimiento.

      ResponderEliminar
    12. Simplemente genial.
      Yo lo propuse como capas de cartulina superpuestas, pero esta idea tuya es digna de figurar en los anales del "savoir faire".
      La enlazaré en el manual, junto a la segunda que veo que ya has hecho para reforzar mi proposición.
      saludos.

      ResponderEliminar
    13. Albañil, compi, se de lo tuyo, la cosa esta como esta ☻☻☻..Felicidades para ti y los tuyos y muchos animos!!! ☺☺☺

      ResponderEliminar
    14. Club Ajedrez busca "estilizar comentarios" tengo varios post sobre eso...

      ResponderEliminar
    15. Compi, eres único es tus explicaciones...
      Besicos...

      ResponderEliminar
    16. gracias en verdad, la sencillez es el exito mundano, ayudaste a mi cerebro ....cbf

      ResponderEliminar
    17. Hola Pizcos

      Que buena forma de explica,soy nuevo en este tema y he empezado a aprendeer,estoy construyendo un blog y quisiera seguir aprendiedo de la forma como lo hacen para mejorarlo ademas como hago los enlases desde el menu que pegue grasias

      ResponderEliminar
    18. Me encanto el tuto, COnsulta?
      Please auxilio, Tengo un blog donde no puedo insertar va, ya ni se como T.T.
      Necesito insertar una imagen al pie de la sidebar osea un bottom probe de todo sinceramente, espero que puedas ayudarme, solo deseo insertar esa imagen, gracias.

      ResponderEliminar
    19. Un post increíble, sin duda el mejor que he leído nunca. No obstante, me quedo con dos dudas: saber por qué en la primera parte se coloca dos veces la etiqueta de cierre "div", y por otro lado, por qué en unos widgets se pone "false" y en otros "true". En serio, ésta es la mejor explicación que he leído nunca sobre el código HTML de las plantillas. ¡Enhorabuena has conseguido lo imposible!

      ResponderEliminar