martes, 21 de julio de 2009

Modificando las plantillas (Tutorial 7: Fondos) - Vagabundia


Hace ya un par de meses, El escaparate de Rosa publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro) verguenza.



El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.




El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.




La forma de hacerlo es sencilla, en realidad, no se trata de ampliar el blog o el HEADER sino de agregar una imagen extra en el BODY, una imagen que se repita y que, por ejemplo, como ha hecho Rosa, tenga colores iguales a los del HEADER mismo.




La imagen repetida la ponemos en el BODY de esta manera:
body {
background: #color url(URL_imagen) repeat-x left top;
.......
}
El body es un rectángulo que equivale a la pantalla del monitor y encima de este rectángulo está nuestro blog formado por una serie de rectángulos más. Si asimilamos esto a una serie de hojas de papel transparente, diríamos que en una hoja (BODY) dibujamos algo y en otra más chica que ponemos encima (HEADER), dibujamos otra cosa con lo cual, veremos ambas. El resultado de eso, será algo así como lo que se ve en este DEMO




La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:
body {
background: #color url(URL_imagen) repeat-x fixed left top;
.......
}
Pero, siempre hay alguien que pide un poco más, por ejemplo ¿y si quiero hacer lo mismo con el FOOTER?




Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.



En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
El orden en que pongo las imágenes es indiferente siempre y cuando la posición de la que va abajo sea bottom y la posición de la que va arriba sea top. Lo que no es indiferente es el color de fondo porque estamos hablando de imágenes que no son muy grandes, gradientes o patterns que se repiten pero que terminan; en estos ejemplos sólo son de 5x200 pixeles así que el resto del fondo, eso que la imagen no alcanza a cubir, se llena con el color que repite el último color de la imagen (#DDDDFF).




Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.



El resultado es el que se ve en este otro DEMO.




¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?



No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla. Este es el DEMO online.



También lo podemos colocar fijo, de tal manera que no se mueva cunado hacemos scroll, para eso usamos la palabra fixed:
body {
background: transparent url(URL_imagenFIJA) no-repeat fixed left top;
.......
}
Este es el DEMO.



¿Y si queremos usar tres imágenes o cuatro o cinco? Parece un poco abusivo pero hay de todo diablo2




Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:
<body>
<div id='otroBODY'>
y por supuesto, debemos cerrarla. Para eso, buscamos </body> y, justo antes, colocamos el cierre:
</div>

</body>
De este modo, podemos agregar cuantas se nos ocurra y luego, agregar el CSS correspondiente:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
#otroBODY {background: transparent url(URL_imagenCENTRAL) no-repeat fixed left top;
}
Lo que se vería como en este DEMO.




Y ya que estamos, colocamos fixed en las tres imágenes para que se vea como en este otro DEMO.



















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:

lunes, 6 de julio de 2009

Modificando las plantillas (Tutorial 6: Centrar) - Vagabundia


Cuando colocamos una plantilla o la modificamos y miramos el resultado, muchas veces, nos vamos a encontrar con una duda que puede transformarse en un error conceptual. Queremos cambiar fondos o tamaños pero ¿cuál es el blog? ¿Es todo eso que vemos en la pantalla del monitor? La respuesta es sí pero no.

Lo que vemos, en cualquier página web a la que accedemos es el contenido de la etiqueta BODY y, por lo general, nuestro blog está dentro de ella, definido con otro rectángulo al que, en Blogger, por defecto, se lo identifica como un DIV llamado outer-wrapper ¿Qué significa esto? Que el BODY es TODA la ventana del monitor, del nuestro pero también de los visitantes y allí nos encontramos con una primera cosa a tener en cuenta: las resoluciones de pantalla.

Es lógico que lo primero que se nos ocurre es que lo que ven los demás es lo mismo que vemos nosotros pero, eso no es así. Claro, cada usuario usa una resolución diferente y podemos suponer que sólo hay dos o tres posibilidades pero, si recorremos los resultados que muestran algunos servicio de estadísticas nos vamos a encontrar con datos que llaman la atención. Por ejemplo, miro lo que dice Google Analytics y dice que en el último mes, en este blog, los visitantes usaron ... 143 resoluciones de pantalla distintas. No dos o tres o cuatro o cinco sino 143.


Son demasiadas para tenerlas a todas en cuenta pero, de todas esas posibilidades, sólo debemos concentramos en los anchos ya que la altura no es relevante para diagramar nuestro sitio. Aún así hay casi 100 tamaños distintos. Un rápido ejemplo:

640 720 768 800 819 832 840 844 896 904 922 936 960 969 983 1000 1007 1016 1024 1037 1045 1069 1080 1088 1112 1117 1120 1126 1140 1143 1152 1170 1176 1192 1200 1229 1264 1241 1250 1263 1267 1276 1272 1280 1317 1344 1350 1360 1366 1372 1400 1408 1421 1435 1440 1451 1503 1512 1517 1536 1540 1568 1579 1600 1652 1680 1728 1772 1776 1920 2048 2304 2560 2880 3360 3840 ...

¿Para qué sirve saber esto? A mi juicio, para tres cosas:
  • decidir el ancho de nuestro sitio:
  • centrarlo en la pantalla de cualquier monitor:
  • poder agregarle fondos
Por supuesto, muchas de ellas son decisiones personales, en mi caso, si el 90% de los usuarios usa resoluciones iguales o mayores a 1024, ese valor debería ser el mínimo. Evidentemente, tal como vienen las cosas, es probable que en poco tiempo más, incluso eso sea escaso ya que hablar de resoluciones de 1280, 1440 o 1680 se está haciendo cada vez más común. Para un usuario novel, este es un problema serio porque todas las plantillas que provee Blogger están pensadas para resoluciones de 800 y por lo tanto, hoy por hoy son demasiado angostas. Incluso muchas plantillas que vemos en distintos sitios de descargas siguen con ese criterio y me parece un error que no suele ser sencillo de corregir (Modificando las plantillas (Tutorial 1: Anchos)).

¿Cómo es eso de centrar el blog? ¿Centrarlo con respecto a qué?

Miremos la pantalla. Todo lo que nos muestra el navegador es el BODY, su ancho es siempre igual al ancho de la resolución de pantalla. Es un gran rectángulo que medirá cierta cantidad de pixeles. Nuestro blog quedará dentro de eso así que podríamos ver diferentes cosas en diferentes monitores:

800x6001024x768
1280x960
1680x1050

Si el blog no está centrado, veremos esto:


Cuando escribimos un post, tal vez, si no hay remedio, podemos usar alguna etiqueta poco recomendable como <center> </center> porque no se nos ocurre nada mejor o no encontramos una solución; no es lo más recomendable pero bueno ... Sin embargo, al diagramar plantillas, esa etiqueta debe desterrarse, el diseño (layout) de una plantilla debe ser claro, simple y estar basado en DIVs (rectángulos identificados con un nombre único) cuyas propiedades deben ser establecidas con CSS. Haciendo eso, tendremos un sitio flexible, fácil de editar y accesible desde cualquier navegador.

El BODY no tiene un ancho fijo, y usar la propiedad text-align: center para centrar el blog no servirá. Lo que debemos centrar es el rectángulo exterior, el primer DIV, el que por defecto se llama outer-wrapper.

Para centrar DIVs tampoco usamos text-align: center porque eso, centra el contenido de ese rectángulo pero no el rectángulo en si mismo. Para centrarlos debemos darle un ancho (width) y utilizar la propiedad margin. Así que, como mínimo, una plantilla debería tener establecidas estas propiedades:
#outer-wrapper {
.......
margin: 0 auto;
position: relative;
width: VALORpx;
}
De este modo, sin importar el VALOR, el blog estará centrado en la pantalla del monitor a menos, claro, que alguien utilice resoluciones menores que ese ancho en cuyo caso, aparecerá una barra de desplazamiento horizontal.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)

Correo Vaishnava

Mi foto
Correo Devocional