jueves, 4 de septiembre de 2008

Personaliza tu blog - Dimensiones

Existen gran cantidad de personas que tienen el deseo de darle un toque personal a su blog,mas sin embargo carecen de los conocimientos necesarios para ello y tienen que conformarse en el peor de los casos con el limitado numero de plantillas que ofrecen servicios como eblogger y en el mejor de los casos con los diseños (algunos muy buenos) de plantillas que pueden encontrar en distintos sitios web, sin embargo esto nunca suplira al placer de darle el toque deseado nosotros mismos, por tal motivo ire editando un grupo de post bajo el titulo Personaliza tu blog en los cuales iremos abordando varios puntos que son muy importantes tanto para las personas que desean darle un nuevo aire a su blog como para aquellas que deseen crear un diseño de sitio web, aunque claro esta estos temas van a ir mayormente enfocados al primer tipo de personas.

Bueno antes de continuar como nota aclaratoria los procesos aqui descritos son validos para cualquier blog de eBlogger es decir del servicio de blogs que nos ofrece google, para otros blogs sinceramente no eh probado.

OTRA VEZ ANTES DE EMPEZAR!!!
Bueno ya se que estan ansiosos por comenzar pero antes que nada es importante respaldar el actual diseño de nuestro blog, para que en caso de errores o que simplemente no nos guste el resultado final obtenido, podamos facilmente regresar a nuestro diseño anterior.

Para respaldar nuestro diseño actualestando conectado como administrador del blog presionar sobre:

personalizar -> Edicion de HTML -> Descargar plantilla completa

Posteriormente guardamos la plantilla con el nombre deseado de preferencia que indique lo que es ese archivo y guardarlo en un lugar que recordemos facilmente.

Pues bien ya respaldada la plantilla podremos movernos sin preocupacion con la seguridad de poder regresar al diseño anterior de nuestro blog en el momento que lo dispongamos.


DIMENSIONES DE UN BLOG APLICABLES TAMBIEN A UN SITIO WEB

Un problema muy frecuente se presenta cuando por primera vez diseñamos nuestro sitio web, ya lo tenemos terminado y muy bonito, ya lo subimos a un servicio de hostting y ya esta funcionando de lo lindo llegamos entonces con nuestro primo juanito el cual tiene una flamante 486 con un monitor de mas viejo que la abuela, emocionados le platicamos acerca de nuestro sitio y lo lindo que nos quedo entonces juanito tambien contagiado por nuestro entusiasmo se avalanza sobre la computadora carga el velocicimo internet explorer (para los menos avivados esto fue un sarcasmo =P) e introduce la direccion que nosotros le señalamos, esperamos unos brevisimos instantes y ahi esta ya va cargando ya casi esta y ohhhh sorpresa nuestro sitio se ve horrible no se parece nada al que se ve en nuestra maquina, nosotros intentamos decirle a juanito que no sabemos por que pasa eso si en nuestra casa se ve de lo mas lindo, pero ya es demasiado tarde la mirada del primo lo dice todo...

Bueno fijense que despues de nuestra verguenza con el primo llegamos a casa para verificar que esta mal y vvooooaaaalllaaaa(no se si se escibe asi esta palabra pero tampoco me interesa demasiado, asi que ahorrense comentarios ortograficos) ahi esta nuestro sitio tan bonito como siempre, no aparece nada cortado ni movido todo esta donde debe de estar entonces nos llega la pregunta del millon tresientos treintacutromil doscientos treinta y tres pesos con veintitres centavos moneda nacional :P, ¿que demonios esta pasando?...

Pues bien como sabemos nuestros monitores pueden ser ajustados a diferentes resoluciones ya sea por que su capacidad de resolucion es baja en nuestro monitor o simplemente por que nos gusta trabajar a determinada resolucion, el caso es que no todos trabajamos con la misma resolucion en nuestro monitor(a que redundante vdd), dichas resoluciones que van desde 800 x 600 px hasta 1280 x 800 px o incluso mas, son las responsables que nuestras paginas se visualicen de tamaño diferente en cada computadora por lo que deberemos tomar muy en cuenta ah que tipo de personas queremos dirigir nuestro blog o sitio, como nada es gratis en esta vida si queremos usar una resolucion de 800x600 estamos asegurando que nuestro blog o sitio web se lea perfectamente en cualquier computadora del mundo sin embargo estaremos sacrificando espacio de diseño, por otro lado si ocupamos resoluciones mayores seguramente nuestra pagina se vera mas detallada y mejor distribuida pero estamos generando que en resoluciones inferiores se dificulte su lectura y no se aprecie en totalidad el diseño.

Bueno espero estarme explicando hasta ahora, pues bien como decia cada uno de ustedes debe decidir a quien va dirigida su blog o pagina por ejemplo si esta enfocada para chicos universitarios de alguna escuela privada seguramente todos tendras equipos portatiles o monitores con muy buena resolucion por lo que facilmente podemos crear un diseño ocupando una base de 1280 x 800 px, por otro lado si el blog en cuestion va enfocado a personas no tan elitistas es decir el resto del mundo :P pues bueno es mejor utilizar una resolucion inferior, puede que en este punto se encuentren un poco decepcionados con esta limitante, sin embargo no se preocupen mejor sigan leyendo y veran como todo se resuelve, si no de la manera ideal si de la mas optima.

Bueno bueno para el problema planteado anteriormente ¿que recomiendo yo?, veamos:

1) Usar las siguientes dimenciones:
770px de ancho por 560px de alto, los 560px son en caso de que nuestro navegador no genere barras de desplazamiento, pero como estamos hablando de blogs no debemos preocuparnos por el alto, solamente debemos cuidar que el ancho sea de 770px o un poco mas grande si asi lo deseas sin rebasar los 795px.

2)Una vez aplicada la resolucion de 770px de ancho para realzar el diseño de la pagina podemos crear un fondo y agregarle los detalles graficos que desemos, otravez el tema del tamaño del fondo estara presente les recomiendo hacer uno de un anchura pequeña que enmarque con detalles el lado izquierdo de nuestra region principal, que obtenemos con esto, pues que en monitores con resoluciones de 800x600 se visualice perfectamente la zona principal de la pagina aunque el fondo no pueda ser visualizado, pero esto no es necesario ya que nuestra zona principal ocupara todo el navegador de nuestro lector, sin embargo en las maquinas con resoluciones superiores nuestra zona principal sera visualizada mucho mas pequeña dando espacio a que el fondo tambien sea visualizado dando en su conjunto una sensacion de que nuestro sitio ocupa toda la ventana del navegador y no simplemente se vea como una pequeña columna situada a la mitad de un fondo de x color, puede que en este punto por mas que eh tratado no logre explicarme correctamente, por lo que los invito a que hagan el siguiente experimento(si su monitor cuenta con una resolucion mayor a 800x600 px claro esta) con el afan de hacerme comprender mejor.

a) pongan su monitor en la mayor resolucion que pueda soportar(recordatorio: boton derecho del raton, propiedades, configuracion y jugar con el campo resolucionde pantalla)

b)entren al siguiente sitio:

http://www.webintenta.com/

ahi podran ver claramente como el fondo que ocupan enmarca la zona principal

c) cambien la resolucion del monitor a la mas baja que tengan (800x600px) y ahora veran como a pesar de que la resolucion cambio la zona principal del sitio se ve perfectamente y cubre toda la pantalla, aunque el fondo ya no se podra ver, lo importante es que la informacion sea mostrada sin necesidad de estarnos desplazando horizontalmente, con esta resolucion busquen otro sitio en el cual tengamos que realizar el desplazamiento horizontal y vean lo tedioso que es leer un sitio asi, lo cual provoca que menos internautas se interesen por nuestro blog.

3)Por ultimo podemos vernos en la necesidad de usar resoluciones mayores a los 770 px de ancho por X circunstancias, lo que recomiendo es que cuando menos la columna principal tenga un tamaño no mayor a 770px de ancho, cabe aclarar que al decir columna principal no me refiero a lo que antes eh llamado zona principal eh ya que esta contiene por un lado la columna principal y por el otro los enlaces o gadgets que hayamos integrado a nuestro blog o pagina incluso hay algunos sitios que manejan una tercera columna para montar fotos, videos, recursos multimedia o inclusive mas informacion, volviendo entonces es una buena practica hacer esto ya que cuando nuestro sitio se visualice en monitores de 800x600px aunque aparezca la barra de desplazamiento horizontal para movernos hacia los lados, el articulo contenido en la columna principal no sera cortado por falta de espacio, es decir sera completamente visible en nuestro navegador sin necesidad de estarnos moviendo lateralmente.

Bueno espero que esto no haya sido muy confuso ya que no soy muy bueno para explicar :P pero pongo todo mi empeño, espero haber dejado en claro estos conflictos que se tiene en cuanto a las medidas que debe de llevar un sitio o un blog y la manera de enfrentar estas situaciones, ya saben cualquier pregunta , sugerencia, queja, reclamo y demas no duden en hacerla.
En la proxima entrega hablaremos sobre cambios en el fondo y cabeceras.