PBS-1.0 - La estructura

Agregar a favoritos

0 Comentarios

Posteado hace 1430 días en:

Vamos a crear de una primera pasada la estructura global de nuestra plantilla, luego iremos bloque por bloque añadiendo las cosas, por ahora haremos solo el esqueleto.

Empezaremos por declarar un DOCTYPE , para ello vamos a elegir el xhtml 1.0 transitional al ser el mas adecuado aunque la plantilla pueda validar perfectamente xhtml strict,luego con las anotaciones de los bloggers puede afectar la validación de xhtml strict.

El primer bloque:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>PBS - Plantilla Maestra</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css.php" type="text/css" />
</head>
</html>

Como veis solo he incluido los tags mas básicos para mas adelante se depurar la plantilla, incluimos la declaración del doctype para que el navegador procese como es debido, luego añadimos al elemento html un espacio de nombre, es simplemente para mejorar esta etiqueta (Si lo dice Zeldman será por algo ;P) , luego con los tags xml:lang y lang indicamos como esta escrita la pagina, en este caso español.

Algunos pensareis que me he olvidado del <?xml version="1.0" encoding="iso-8859-1"?> pero no lo he incluido, según dicen algunos navegadores se hacen la picha un lío con esta etiqueta y la he quitado, para ello he incluido el meta de toda la vida que nos dirá el juego de caracteres que deberemos usar en esta pagina, iso-8859-1 el latino ;P.

Luego incluimos el link a la hoja de estilos, si veis la extensión no es .css sino .php, la cosa es facilitar al gestor de themes cambiar de hojas de estilos fácilmente, con contenido dinámico conseguimos el efecto deseado, elegimos la hoja de estilos adecuada y mandamos la cabecera correcta para que muestre el css.

Con esto hemos creado el principio de la plantilla ahora vamos a ver el esqueleto de nuestro blog.


<body id="blog">
<div id="container">
<div id="htitle"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="fcredits"></div>
</div>
</body>

Bien pues esa es la estructura de la plantilla,como veis al tag body le he añadido un id, muchos pensareis (al igual que yo) que para que un identificador si solo hay un único body, es para tener un máximo control sobre el css y ademas poder aprovechar algunas características de CSS2 y CSS3, se supone que nuestra plantilla tiene que ser lo mas manipulable posible.
He encajonado toda la estructura en un contenedor, lo llamo contenedor porque ese es su objetivo, muchos bloggers usan esta forma y es las mas idónea, algunos eso si sacan el pie de pagina del contenedor.

A continuación aparece un nuevo div con un id llamado htittle, htitle? si si htitle, lo he llamado así porque desde mi punto de vista llamarlo head, header o similares no me dice para nada que contiene ese div, es como llamar al bloque contenido y menú como left, right creo que es mucho mas lógico llamarlo htitle. donde escribiremos el titulo y el eslogan de nuestro blog.

Bueno los dos div siguientes creo que están claros, en uno irán las entradas de nuestra bitácora y en otro el menú, pero y porque el contenido antes? muy fácil, creo que lo mas importante en una bitácora son los artículos y es por eso que debe aparecer el primero y mantener un orden de prioridad, es mas importante eso que mostrar primero el menu.Incluso como dicen Xoan en uno de los comentarios, google agradece colocar primero el contenido y como google es el puto amo así lo dejamos ;P.

El ultimo ta pasa exactamente lo mismo que en el primero, llamarlo foo o foot no me dice para nada que es lo que contiene, esta claro que un pie de pagina siempre vamos a poner cualquier frase, licencia, banner
o lo que se nos pase por la cabeza (Mas adelante iremos ordenando esto mismo), los créditos para ser mas preciso.

Nuestro esqueleto final


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>PBS - Plantilla Maestra</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css.php" type="text/css" />
</head>
<body id="blog">
<div id="container">
<div id="htitle"></div>
<div id="content"></div>
<div id="menu"></div>
<div id="fcredits"></div>
</div>
</body>
</html>

Así ha quedado el primer vistazo de nuestra plantilla estándar, los comentarios están abiertos para poder dialogar el nombre correcto de los divs o incluso su posición.

Mañana mas ;P.