Mostrando entradas con la etiqueta plantillas. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantillas. Mostrar todas las entradas

jueves, 3 de septiembre de 2009

Modificando las plantillas (Tutorial 8: Fluido) - Vagabundia


Cuando usamos una plantilla de Blogger, lo que vemos en común con todas ellas es que tienen definido un ancho, generalmente escaso para estos tiempos en que los monitores tienen resoluciones de pantalla cada vez más grandes; están pensadas para 800x600 y si bien podemos cambiar ese ancho, siempre, estamos hablando de algún valor fijo.

Una forma diferente de encarar el diseño de una web es utilizar los llamados anchos fluidos es decir, que los distintos sectores del blog cambien de tamaño según sea la resolución de pantalla que utilice quien lo visite.

La forma estandard de hacer una plantilla fluida es utilizar anchos establecidos como porcentajes en lugar de valores en pixeles, de esa manera, del 100% de la pantalla, las entradas podrían tener el 70% del ancho y la sidebar el 30% o cualquier otra proporción. Pero hay que aclarar antes que nada que no hay un diseño bueno y uno malo, dependerá del tipo de contenido y del gusto personal. Ninguno de ellos es perfecto; los anchos fluidos tienen el inconveniente de su propia definición, si todo es variable, no sabemos si este es excesivo o escaso para ubicar determinado elemento, sobre todo, esos que solemos colocar en la sidebar.

Para minimizar estos problemas, hay opciones de diseño que combinan ambas cosas, estableciendo anchos fijos para determinados sectores y anchos variables para otros.

Un ejemplo muy interesante de este sistema es el que se muestra en un artículo de A list apart que ya tiene sus años pero que, con modificaciones, podemos adaptar a un blog de Blogger.

La idea es diseñar una plantilla con tres columnas, una sidebar a la izquierda, el área de entradas al centro y otra sidebar a la derecha. Ambas sidebars tendrán tamaños fijos definidos y el área de entradas será fluida, adaptando su ancho a la resolución del monitor de tal manera que el blog ocupara siempre el 100% de la pantalla.

Un detalle que lo vuelve aún más interesante: como los navegadores muestran las páginas webs en orden, el uso de sidebars a la izquierda suele ser problemático ya que esta se carga antes que las entradas y, como en general los navegantes no tienen (tenemos) mucha paciencia, si el contenido de esa sidebar es excesivo, hay visitantes que simplemente se irán porque todos queremos ver el contenido rápidamente. En este caso, la columna central se mostrará antes que las sidebars, sin importar la disposición de estas.

Blogger tiene una diagramación sencilla (no se rian) que podemos ver en una plantilla mínima si no expandimos los artilugios; el contenido del body es algo así:
<div id='outer-wrapper'><div id='wrap2'>
  <div id='header-wrapper'>
    ....... este es el header .......
  </div>
  <div id='content-wrapper'>
    <div id='main-wrapper'>
      ....... esta son las entradas y se muestran a la izquierda .......
    </div>
    <div id='sidebar-wrapper'>
      ....... esta es la sidebar y se muestra a la derecha .......
    </div>
    <div class='clear'>&#160;</div>
  </div>
  <div id='footer-wrapper'>
     ....... este es el footer .......
  </div>
</div></div>
A este esquema simplemente le vamos a agregar una sidebar extra (la izquierda). Eliminaremos esto:
<div class='clear'>&#160;</div>
y en su lugar, pondremos esto:
<div id='sidebar-wrapper-2'>
  <b:section class='sidebar' id='sidebar2' />
</div>
De aquí en adelante, el resto es puro CSS así que vamos a las definiciones elementales.

El body sólo tiene un dato importante a definir, el ancho mínimo y esto lo podemos calcular sumando el ancho de las dos sidebars (que tendrán anchos fijos) y un poco más, tanto como se nos ocurra que puede ser contraida la columna central, por ejemplo, digamos que será de 300 pixeles; entonces, tendremos:

sidebar izquierda + sidebar derecha + 300 que en este ejemplo dará 250 + 200 + 300 = 750
body {
  margin:0;
  padding:0;
  min-width: 750px;
}

#navbar { /* oculto la navbar */
  display: none;
  height:0;
  visibility: hidden;
}

#content-wrapper {
  padding-left: 200px; /* es igual al ancho de la sidebar izquierda */
  padding-right: 250px; /* es igual al ancho de la sidebar derecha */
}

#content-wrapper #main-wrapper,
#content-wrapper #sidebar-wrapper,
#content-wrapper #sidebar-wrapper-2 { /* propiedades comunes a las tres columnas */
  float: left;
  position: relative;
}

#header-wrapper { /* cualquier propiedad */
   /* no debe tener un ancho definido */
  text-align:center;
}

#outer-wrapper { /* no tiene propeidades */ }

#main-wrapper { /* la columna central con las entradas */
  width: 100%;
}

#sidebar-wrapper { /* la sidebar izquierda */
  /* el margen es negativo y del mismo valor que el ancho */
  margin-right: -250px;
  width: 250px;
}

#sidebar-wrapper-2 { /* la sidebar derecha */
  /* esta es la clave de todo */
  margin-left: -100%;
  right: 200px;
  width: 200px;
}

#footer-wrapper { /* cualquier propiedad */
   /* no debe tener un ancho definido */
  clear: both;
  text-align:center;
}
Sólo nos faltaría algo, evitar que haya problemas en las versiones de Internet Explorer anteriores a la 8; para eso, debajo de ]]></b:skin> agregaremos lo siguiente:
<!--[if lt IE 8]>
  <style type='text/css'> #sidebar-wrapper-2 {left: 250px;} </style>
<![endif]-->
He puesto un demo online donde puede verse el resultado. Para comprobar el efecto basta cambiar el tamaño de la ventana del navegador.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:

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