Book "Dominoblog for Dummies", Chapter 3
Martin Ortega  Marzo 9 2011
Martin Ortega  Marzo 9 2011
Aquí pongo una parte de mi libro, de vez en cuando iré poniendo alguna cosilla para ver como voy avanzando, igual lo publico antes de jubilarme.
Si alguien tiene la paciencia de leerlo le aseguro que aprenderá todo lo necesario para poder personalizar esta aplicación a su gusto, pero además aprenderá a moverse por una hoja de estilos, manejarse con los códigos HTML sin problemas, lo que quiero decir es que los conocimientos que pueda adquirir le serán válidos para otros temas.
Se supone que este libro está enfocado a gente que no tiene ni idea de HTML (hombre, si sabe HTML mucho mejor) pero no es un prerrequisito para poder seguirlo.
No he pasado el corrector ortográfico ni el eliminador de pecados, lo haré al final, aunque igual los pecados no los quito, es mi forma de escribir, además los pecados son veniales, no problem.


En el capítulo anterior hemos repasado el Documento de Configuración, también sabemos para que vale cada HTML Template, se supone que ya estamos en condiciones de empezar a enredar con ellos, meterle mano al código y hacer nuestros propios diseños.
Qué no tienes ni idea de HTML ??? tranquilo, verás que con cuatro chorradas que aprendas podrás hacer lo que quieras.
Vamos a empezar por la Home Page, el padre de todos los Templates, cuando entiendas como está organizado este Template el resto es pan comido, todos funcionan igual.


Es muy importante que sepas diferenciar los diferentes tipos de Templates que contiene esta aplicación, el capítulo anterior lo deja bastante claro, la Home Page es un Page Template, como su nombre indica es la página que muestra al abrir la aplicación.
Le puedo cambiar el nombre ??? por supuesto, haz una prueba, ponle el nombre que más te guste, ahora vete a un navegador y trata de abrir la aplicación.
Qué pasa ??? no sale nada ??? con el resto de las páginas no hay ningún problema, el lío lo tiene en la Home Page.
Para solucionar este tema tienes que irte a Documento de Configuración, pestaña “Templates”, como verás hay un campo que pone “Defaut Side Template”, por defecto pone “Home Page”, aquí es donde tienes que poner el nombre de le has dado a tu Home Page, de las misma forma puedes cambiar todos los nombres de los Templates.
Bueno vamos a la faena, se trata de entender como está organizada la Home Page, de momento no vamos a hacer ningún cambio, lo que pretendo es que te familiarices con este Template, que entiendas todo el código.
Pongo el código y lo voy contando:
<$DXTemplateBlock Name="HTMLTop"$><div id="main"><table cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="3"><$DXTemplateBlock Name="Banner"$></td></tr><tr><td valign="top" class="colLeft"><$DXTemplateBlock Name="LeftSideBar"$></td><td valign="top"><div id="content"><div class="header"><h1><a href="<$DXURL$>" title="<$DXTitle$>"><$DXTitle$></a></h1><div class="details"><p></p></div></div><div id="entries"><div class="blogPaging"><h4></h4></div><$DXContent$></div></div></td><td valign="top" class="colRight"><$DXTemplateBlock Name="RightSideBar"$></td></tr></table><$DXTemplateBlock Name="HTMLBottom"$>

A bote pronto esto te puede parecer un "pecao", pero ya verás que está chupao.
Lo que voy a hacer para que se entienda mejor es separar un poco cada linea indicando donde empiezan y acaban la cosas, el que creó esta aplicación no lo podría haber dejado más organizado ???, bueno, aunque te parezca que le código está como tirado el objetivo tiene una explicación,  el código inferior está más claro, pero en teoría estos espacios y saltos de página lo que hacen es empeorar el rendimiento de la página. Lo vas a notar mucho ??? yo creo que no, pero las cosas bien hechas, bien hechas están.
<$DXTemplateBlock Name="HTMLTop"$>
<div id="main">
<table cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="3"><$DXTemplateBlock Name="Banner"$></td></tr>
<tr><td valign="top" class="colLeft"><$DXTemplateBlock Name="LeftSideBar"$></td>
<td valign="top"><div id="content"><div class="header"><h1><a href="<$DXURL$>" title="<$DXTitle$>"><$DXTitle$></a></h1><div class="details"><p></p></div></div><div id="entries"><div class="blogPaging"><h4></h4></div><$DXContent$></div></div></td>
<td valign="top" class="colRight"><$DXTemplateBlock Name="RightSideBar"$></td></tr></table>
<$DXTemplateBlock Name="HTMLBottom"$>

Lo primero que nos encontramos es esto:
<$DXTemplateBlock Name="HTMLTop"$>

El HTMLTop es un Block Template
Ocupa la parte de arriba del blog, el header, si no tocamos nada vemos que hay una imagen de color amarillo, bueno, ya veremos cuando toquemos la hoja de estilos que son dos imagenes, el paisano que lo inventó, juega con estas dos imágenes para obtener un buen rendimiento en la carga de la página, además hay que tener en cuenta que esta aplicación ajusta, no tiene tamaño fijo (de eso ya hablaré largo y tendido cuando lleguemos a la hoja de estilos) con la segunda imagen la va colocando al lado derecho para que quede guapa la cosa.
También vemos a la derecha un enlace que pone "Admin", este enlace muestra la "back door" de esta base de datos (hay un capítulo completo para esta parte).
Creo de momento no debo entrar en más detalles sobre el HTMLTop, hay un apartado para los Block Template, solo adelantaré que en este Template le indicamos que hoja de estilos usará esta aplicación.

Seguimos recorriendo el código y nos encontramos esto:
<div id="main">

Vamos a pararnos un momento es este pequeño código HTML, se repetirá muchas veces a lo largo de la hoja de estilos y seguro que te crearás tus propios elementos "DIV" para adaptar esta aplicación a tus propios gustos y necesidades.
Los elementos DIV junto con los atributos ID, ofrece un mecanismo genérico para añadir estructura a los documentos.
El texto del recuadro inferior es lo que tiene la hoja de estilos en el elemento #main.
#main{padding:3px;background:#fff;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-top:0;-moz-border-radius:5px;overflow:hidden;}

Lo primero, Los id's se referencian con el prefijo "#" y las clases con "."
Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.
Lo que le estamos diciendo a la Home Page es que tiene un padding de 3px, un fondo blanco (#fff) y unos bordes como ves en el código, ojo ¡¡¡, se lo estamos diciendo justo después del HTMLTop Template, por consiguiente, la parte de arriba de esta aplicación no usa el "DIV main".

Bueno, hasta ahora la cosa no tiene mucha dificultad, ahora viene una parte que es fundamental que entendamos, solamente requiere saber como funcionan las tablas en HTML, si no tienes ni idea de esto voy a poner un ejemplo para que lo entiendas, insisto, esto tiene que quedar claro porque es la forma que tenemos de ver las cosas a nuestro gusto, bueno, de momento a gusto del creador de este blog, pero lo que voy a explicar nos servirá para usarlo en cualquier página, entrada en el blog, etc, etc.
Vamos a ver el siguiente código en la Home Page:
<table cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="3"><$DXTemplateBlock Name="Banner"$></td></tr>

Le estamos diciendo que queremos una tabla sin cellspacing (espacio entre celdas) sin padding (margen dentro de la tabla), 100% de ancha (que ocupe todo el espacio disponible, ahora contaré cuanto es ese espacio), "td colspan="3"" (COLSPAN: extiende una celda a varias columnas).
Que me va a enseñar este código ??? está claro, el Block Template Banner, este Template es muy light, solo tiene el campo de "Descripción del blog" (ese campo que tienes que rellenar en una ventana emergente cada vez que creas un nuevo blog usando la platilla) y el campo de búsqueda.

Siguiente código:
<tr><td valign="top" class="colLeft"><$DXTemplateBlock Name="LeftSideBar"$></td>  

Bueno aquí ya vamos entrando un poco más en faena, abrimos una nueva fila y le decimos al LeftSideBar Block Template, que se alinea en la parte superior de la fila.
Pero, porqué se queda a la izquierda ??? se podría ir al derecha o al centro ??? se queda a la drecha porque no le queda más huevos (con perdón), me explico:
Se vaís a la hoja de estilos, veréis una cosa que se llama #colLeft y pone un código algo asi como /*foalt:left*/, está claro, el paisano que hizo la hoja de estilos quería mandar este Template a la izquierda, pero después comentó el código, no hacía falta, como después veremos, cierra la celda, abre una nueva (el Content, o zona donde van los documentos o entradas), vueleve a abrir otra celda (el RightSideBar), cierra la celda y la fila y seguidamente pone el HTMLBotton, el otro Block Template.
Me temo que me estoy adelantando al código, es para que se entienda mejor, ahora iré poniendo el resto de código de la Home Page, pero antes diré que el LeftSideBar si tiene tamaño fijo (200px), el RightSideBar también (165px) pero el Content (la parte del centro) se pilla todo lo que sobra, pero cuánto sobra ??? depende de la resolución que uses, lo siento, tengo que entrar en este tema, aunque en este código que muestra la Home Page no se ve, unos de los Block Templates lo indica, por supuesto es el HTMTop.
Fijaros que el "DIV ID main" no habla de tamaño, dentro de este elemento está todo, pero dentro del "DIV ID frame" está el main, y este si que define el tamaño, pero lo hace de una forma un poco rara, bueno, más que rara yo diría peligrosa para la gente poco cuidadosa, voy a poner el código pero no me voy a extender demasiado en este tema, voy a dedicar "casi un episodio" para explicarlo con calma y dejarlo claro, el mundo está lleno de dominoblog templates que no se pueden leer desde un pc con resolución 1024X768.
Here está el código:
#frame{margin:0 15px;padding:0;min-width:800px;}  

Chupao, la anchura mínima de esta aplicación es 800px, me vale para resoluciones de 800X600, a partir de hay todo el monte es orégano, pero claro, después llegan los albañiles y te ponen un ladrillo de 1500X1200 pixeles, la jodimos, todo al carajo, a no ser que tengas un peazo monitor como el mio (un iMac de 24 pulgadas).
Si solo pusieramos texto, no problem, en 800px entra el LeftSideBar (200px) el Left (165px), el resto es para las entradas, además se irán ajustando en función del la resolución de tu pantalla, de lujo.

Después de este inciso, seguimos con la Home Page, la tenemos claro la parte de arriba, el Banner y la parte de la izquierda, vamos a ver que código se coloca en el centro de la Home Page:
<td valign="top"><div id="content"><div class="header"><h1><a href="<$DXURL$>" title="<$DXTitle$>"><$DXTitle$></a></h1><div class="details"><p></p></div></div><div id="entries"><div class="blogPaging"><h4></h4></div><$DXContent$></div></div></td>  

Dios ¡¡¡ cómo cuento yo estos pecaos ??? bueno antes de todo veréis que lo abre un td, lo echa hacia arriba con el td valign top, ponemos unas cuantas cosas y cerramos el td, chupao ¡¡¡
Primero vamos a contar que muestra esto y después analizamos un poco el código.
Si vemos la plantilla a pelo, en esta zona (el centro) tenemos el Titulo del blog (otro campo que tenemos que rellenar al crear una nueva aplicación usando la pantilla), unas "rayitas" que separan el título del resto, las entradas.
Veo que mucha gente quita este código:
<div class="header"><h1><a href="<$DXURL$>" title="<$DXTitle$>"><$DXTitle$></a></h1>

Con esto lo que estamos es quitando el título del centro del blog, normalmente lo ponemos en el HTMLTop, hay que tener en cuenta que aparte de poner el título también nos vale para llevarnos a la página principal, pero claro, para eso solemos poner un menú que nos permite movermos sin problema por el resto de las páginas.
Importante, si quitamos este código, nos sobrará un "/div".
Importante si quitamos este código, que pintan las rayitas ???, hay que quitar también esto:
<div class="blogPaging"><h4></h4></div>


Volvemos de nuevo al código que usa el centro de la Home Page, lo repito:
<td valign="top"><div id="content"><div class="header"><h1><a href="<$DXURL$>" title="<$DXTitle$>"><$DXTitle$></a></h1><div class="details"><p></p></div></div><div id="entries"><div class="blogPaging"><h4></h4></div><$DXContent$></div></div></td>  

Hemos visto que parte corresponde al título, lo de las rayitas, lo que nos queda son las entradas, pero si os fijaís todo está metido dentro un DIV, el #content, este elemento es que va a determinar el margen, el padding, etc, de todo lo que haya dentro, aunque después cada cosa tenga sus propias clases (como de hecho las hay).
Es importante este #content, mas que nada lo usaremos por si queremos hacer cambios importantes, pongo el código de la hoja de estilos y lo comento:
#content{background:#fff;padding:16px 10px 20px 15px; overflow:hidden;/*this (overflow:hidden) sets a new block formatting context, which keeps the center content separate from the floated divs.  This allows us to clear floats in the center. It also makes it so we don't have to use margins on the content div to push it away from the floated columns.*/}  

Lo he puesto a pelo, con el comentario que trae la hoja de estilos, como podéis ver, es sencillo, un fondo, un padding y el overflow.
Qué cogno es esto del overflow ??? Controla el comportamiento de los contenidos que no caben en su elemento contenedor.
El valor "hiddeen" dice que el navegador oculte todos los contenidos que se salen de la caja del elemento.
Pero véis que no tiene tamaño, se ajusta al valor de #main, y como he comentado antes, el DIV main está dentro del DIV frame, por consiguiente la anchura de la aplicación la controla el elemento DIV frame.
Imaginaros que le quiero cambiar el fondo a esta aplicación, hasta ahora todos los Templates tienen "background:#fff", pero no podemos seguir hablando de este tema sin nombrar al "body", es el que realmente da el fondo a la aplicación, por supuesto el body está definido en la hoja de estilos ....................

Blog for Dummies

Book "Dominoblog for Dummies", Chapter 3