16/12/2009
00:15
Tutorial
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:
Hola Pizcos,
ResponderSuprimirTe agradezco mucho tu explicación. El esquema tanto de este post como del anterior es muy claro.
Un gran abrazo.
Muy Buena explosión, ya mas fácil no creo...
ResponderSuprimirEsto 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.
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
ResponderSuprimirY el fondo que pusiste... TREMENDO (sí, grité enserio)
Hi, Pizcos,
ResponderSuprimirA melhor explicação que já li, sobre o assunto! #Fato
Mas, Mestre é Mestre!...
[]'s @inaciorolim
Jode, con explicaciones tan claras te tenian que dar el Nobel de la sencillez, pues asi hasta yo lo entiendo.
ResponderSuprimirUn saludo
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.
ResponderSuprimirAsí ya me voy enterando de algo, haces fácil lo dificil como los buenos profesores.
ResponderSuprimirSaludos Pizcos
hola pizcos
ResponderSuprimirsolo 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
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.
ResponderSuprimirPor 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
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.
ResponderSuprimirFelicitaciones!
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.
ResponderSuprimirMuchas gracias por compartir tu conocimiento.
Simplemente genial.
ResponderSuprimirYo 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.
Gracias a todos ☺☺☺
ResponderSuprimirAlbañil, compi, se de lo tuyo, la cosa esta como esta ☻☻☻..Felicidades para ti y los tuyos y muchos animos!!! ☺☺☺
ResponderSuprimirClub Ajedrez busca "estilizar comentarios" tengo varios post sobre eso...
ResponderSuprimirCompi, eres único es tus explicaciones...
ResponderSuprimirBesicos...
gracias en verdad, la sencillez es el exito mundano, ayudaste a mi cerebro ....cbf
ResponderSuprimirHola Pizcos
ResponderSuprimirQue 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