Agrega menu a tu blogger

Existen muchas y distintas maneras de agregar un menu a tu blog la mas sencilla es a traves de enlaces, si estoy hablando de las etiquetas de tipo <a href="URL">link</a>, ahora la pregunta del millon como agregar esas etiquetas en la cabecera para que los enlaces se vean como menu.

Pues muy sencillo simplemente dirigete a la pestaña de "Personalizar", despues seleciona "Edicion html" y presiona ctrl+f para buscar la palabra showaddelement=’no’una ves localizada cambia el no a yes de tal manera que showaddelement=’yes’.

Ahora dirigete a la pestaña "Elementos de pagina" ahi veras que la estructura a cambiado y ahora bajo el elemento cabecera tienes otro que te dice añadir gadget, pues bien presionalo, añade un elemento HTML/JavaScript.

Ahora unicamente falta que agregues los enlaces que formaran tu menu, como tip si no tienes idea de como formar tus enlaces te puedes observar que si presionas alguna etiqueta veras que en la barra de direcciones de navegador aparece algo como:

http://avlprogrammer.blogspot.com/search/label/php

Siguiendo esa idea puedes hacer tus enlaces basandote en las etiquetas que pones a tu post, luego entonces si tienes varios post etiquetados con la palabra diseño y otros tantos con la palabra humor etc, entonces un ejemplo de como quedaria tu menu seria el siguiente:

<a href="http://avlprogrammer.blogspot.com/search/label/diseño">Diseño | </a>
<a href="http://avlprogrammer.blogspot.com/search/label/humor">Humor | </a>

Otra manera de poder crear tu menu es usando la busqueda, si tu realizas una busqueda en tu blog puedes ver en la barra de direcciones que aparece algo como esto:

http://avlprogrammer.blogspot.com/search?q=mysql

"q" es la variable que utiliza blogger para localizar una palabra en su base de datos, si tu conoces algo de base de datos es similar a una consulta como "SELECT * FROM POST WHERE LIKE (%mysql%);" si no conoces nada de BD o SQL simplemente ignora lo anterior me quice ver inteligente :P.

Bueno el caso es que cambiando la ultima palabra en este caso "mysql" podremos obtener como resultado todos los post que contenga dicha palabra hay que tener cuidado con esto por que puede que un post que habla de un tema de diseño en algun momento dado referencie a la palabra "mysql" sin que esta tenga una gran importancia sobre el post en general entonces si buscamos esta palabra obtendremos dentro de los resultado dicho post, el cual en realidad no tiene nada que ver con lo que el usuario quiere es por eso que recomiendo que usen la primera forma mostrada es decir establecer su menu a traves de etiquetas.

EXTRA

Si quieres saber mas del tema checa estos post son muy buenos y claros:
Activar mas elementos bloqueados por Blogger en este post explican lo del showaddelement mas detalladamente y con imagenes.


Como agregar un menu superior en blog de Blogger este post detalla el diseño del menu usando CSS, esto para que tu menu no se vea un simple conjunto de enlaces.

Criticas web

Bueno navegando por una de mis paginas favoritas, maestros del web!!!, me encontre unos videos donde criticaban varios ascpectos de diferentes sitios web, la verdad las criticas me parecieron muy divertidas y constructivas, aunque por la forma en que las expresaron no lo parecieran tanto :P, asi que aqui les dejo esos video, no con el afan de alimentar el morbo que genera el escuchar cosas malas de los demas, sino con el fin de escuchar las sugerencias y aprender de los errores de otros.

Críticas a sitios web (I) from cvander on Vimeo.

link


Críticas a sitios web (II) from cvander on Vimeo.



Mejorando la web en español (III) from cvander on Vimeo.


link

Esas mentadas tablas en los blogs ahhh!!!

Bueno el fin de este post no es explicarles como hacer una tabla ya que hay muchas pagina que lo explican,el fin de este post nacio con el anterior cuando quise insertar una tabla en una entrada (nunca antes habia ocupado insertar una) y cual va siendo mi sorpresa que me dejaba un enorme espacio en blanco en la parte superior de la tabla y hasta al final del post mi tabla $#&%#""%/%#%& <- Intraducible :P, esto por supuesto es muy incomodo y de ninguna manera podia quedar asi (Como pueden ver en el post anterior mi tabla esta ahi sin espacio extra alguno :P ) y me puse a investigar un poquito, despues de pasar varios blogs con debates sobre que por eso es mejor usar tags divs y estilos css que tablas, etc, etc me encotre en en un blog la solucion y luego confirme y complemente la informacion del primero con otros mas, el caso entonces pintado de manera general es el siguiente:

Pues el mecanismo de blogger hace que se lean cada uno de los saltos de linea que hacemos, pero al estar estos saltos de linea dentro de una etiqueta table no se pueden poner ahi entonces blogger suma todos esos saltos de linea que conforman el cuerpo de la tabla y nos los pone en la parte superior de la tabla.

Pues bien ese es el problema y el por que blogger se comporta de esa manera con las tablas, ahora bien la solucion logicamente es quitar todos esos saltos de linea para que toda nuestra sentencia quede en una sola, es decir en ves de tener:

<table border=1>
<td>Columna 1</td>
<td>Columna 2</td>
<td>Columa 3</td>
</table>

Debemos de juntar todo en una sola linea asi:
<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columa 3</td></table>

Y de esta manera podremos ya no tendremos el problema de los espacios al momento de poner una tabla en nuestro blog. Ahora bien esto de quitar los saltos de linea resulto facil por que era una tabla pequeña, pero que pasa cuando la tabla que deseamos colocar es demasiado grande? pues sinceramente este es un trabajo agotador, es decir estar quitando todos los saltos de linea para dejar toda nuestra tabla en una sola linea es un trabajo sumamente laborioso y tardado, pues bien aqui les va el truco 2: Existe un exelente programa (la vdd dudo que alguien no lo tenga :P) que se llama Notepad ++ y que nos puede ayudar en esta tarea.

como???

Pues muy facil, simplemente habrimos un nuevo documento en el notepad, pegamos el codigo de nuestra tabla.

Despues nos vamos en nuestro menu a donde dice TextFX -> TextFX Edit -> Unwrap Text

Y de esta manera nuestro codigo completo, quedara unido de tal forma que solo sea una linea de codigo.

Lo que sigue esta claro no?, copias este nuevo codigo y lo pones en el editor del blog en donde quieras que aparezca la tabla.

El truco es pequeño pero nos ahorra mucho tiempo si es que no la union de codigo la haciamos manual, en fin espero que sea de utilidad.

Personaliza tu blog - parte 2

HACIENDO UNA NUEVA CABECERA PARA TU BLOG

En mi muy humide opinion uno de los cambios mas simples y mas significativos que podemos hacer es personalizar nuestra cabecera, no es mi intencion decirles como hacer una cabecera eso depende de la creatividad y la experiencia en uso de programas como fireworks o photoshop que tenga cada uno, al fin de cuentas una cabecera es simplemente una imagen, el proposito de este post es darles las especificaciones que debe de llevar dicha imagen.

El tamaño en si de la cabecera dependera directamente de sus intenciones de diseño VS compatibilidad, si no me explico muy bien por favor leer el post anterior de esta serie donde hablo de las dimenciones y podras acceder haciendo click aqui, pues bien para resumir les voy a dar las caracteristicas estandar de una cabecera, sin mas que decir comencemos!!!

Regularmente las cabeceras tiene un ancho de 660px con un alto variable (de 100 a 200 px regularmente), si te gusta el tamaño de tu cabecera actual simplemente hay que saber que medidas tiene, para conocer las dimenciones habra que hacer:

1)presionar sobre personalizar en tu blog

2)estando en la pestaña de diseño ir a edicion html

Ya en el post anterior lo habia mencionado pero lo vuelvo a recalcar, antes de cualquier cambio presiona descargar plantilla completa para tener un respaldo de tu estilo actual.

3)bueno estando en el codigo html buscar el siguiente bloque:

#header-wrapper {

width: 761px;

padding-bottom: 0px;
}

Como pues presiona ctrl+f y escribes #header-wrapper y asi llegaras facilmente, como se puede ver ahi tenemos el ancho de nuestra cabecera, pues bien teniendo las medidas ahora si podemos comenzar nuestro diseño con dicha dimencion o bien en base a esta cambiarla a nuestro antojo.

Una vez creada nuestra cabecera el paso siguiente es subirla a nuestro blog, esto es muy facil, solamente hay que ir nuevamente a personalizar, elegir la pestaña diseño y dentro de esta presionar en elementos de pagina, una vez que nos colocamos en el lugar apropiado basta con presionar en el enlace Edit del elemento cabecera.

Una vez precionado el enlace nos aparecera una pequeña ventana, damos examinar y seleccionamos el la imagen de nuestra nueva cabecera.

nota: en internecio tambien hay varios sitios que proveen de cabeceras, por si no te quieres romper la cabeza :P, diseñando una puedes darle una visita a:

http://flamingtext.com/
http://bannerbreak.com/

o usar algin bi¿uscador para encontrar heads gratuitas ;)

ESTABLECIENDO UN FONDO A NUESTRO BLOG

Otra manera muy sencilla y practica de hacer unico nuestro blog es cambiando el fondo, sea bien por otro color o por alguna imagen, regularmente a mi me gusta usar una imagen pequeña como fondo no se de 200px por 200px por mencionar algo y partiendo de esta podemos reproducirla indefinidamento como mosaico o bien desbanecerla a un color fijo de tal manera que pareciera que todo nuestro fondo es una imagen unica (sino se imaginan esto chequen este muy buen sitio Webintenta para que se den las 3 :D), esto le da elegancia y bastante atractivo visual a nuestro blog sin nececidad de que el mismo se haga demasiado pesado, que quiero decir con esto, que si quieres usar una imagen de fondo de 800x600 px el tiempo que tardara el navegador en cargar dicha imagen sera mayor a que si tienes una pequeña de 200x200px y un color fijo de fondo.

Pues bien ya escribi mucha paja :P pero ahora vamos a lo importante:

Para crear un fondo primero debemos diseñarlo o buscar alguno que nos guste en internet.

Luego hay que subir ese fondo, para esto hay dos maneras muy sencillas la primera es subiendo la imagen en un hosting de imagenes como http://hosting.deimagenes.com/ seguimos los pasos que ahi nos indican y guardamos la ruta que nos regrese.

Otra manera muy sencilla de subir una imagen es haciendo un pequeño truco con nuestro blog, creamos una nueva entrada, subimos la imagen como si fuera parte de nuestro post y lo guardamos como borrador, entramos en vista previa del post, guardamos la direccion de la imagen (clic derecho guardar direccion de imagen o copiar ruta de la imagen) y si queremos podemos borrar el post ya que la imagen seguira en el servidor por si alguien hubiese echo referencia a la misma.

Ahora bien el siguiente paso es indicarle nuestra imagen de fondo o establecer un color de fondo a nuestro estilo css.

bueno para empezar otra vez nos vamos a:
PERSONALIZAR -> DISEÑO -> EDICION DE HTML

estando ya pocisionados buscamos el bloque css e la sentencia body (ctrl + f y ponemos body { )

el bloque obtenido es algo como:

body {

background-color: #000000;

margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Aqui hay de dos, la etiqueta background puede estar como background:$bgcolor . . . o como background-color: #000000; si tu caso es el primero simplemente agrega la sentencia url (direccion de tu imagen):

background:$bgcolor url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

si tu bloque es como la segunda opcion abra que agregar la etiqueta backgrond-image y ahi definir la direccion:

background-image:url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

por lo que al final tendremos nuestro bloque asi:

body {

background-image:url(http://hosting.deimagenes.com/imagenes/f123904a18917790551ef41cd4ca3ea8.png);

background-color: #000000;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Echo esto podemos ver ya nuestra imagen como fondo y en forma de mosaico la cual es la propiedad por default que adopta la etiqueta.

Visualicemos nuestro blog presionando en vista previa si nos agrada guardamos la plantilla, si no podemos resetear los cambios echos presionando borrar cambios.

Si no queremos que nuestra imagen aparezca muchas veces simplemente debemos hacer las siguientes modificaciones dependiendo de lo que cada quien requiera, en caso de que la linea no se encuentre en el bloque de codigo, simplemente debemos agregarla y listo ;)


1) Que la imagen solo aparezca una vez:
background-repeat: no-repeat;


2)Que la imagen se repita a lo ancho:
background-repeat: repeat-x;

3)Que la imagen se repita a lo alto:
background-repeat: repeat-y;

4)Que el fondo se pocicione al centro:
background-position: center;

5)Que el fondo se pocicione a la derecha:
background-position: right;

6)si queremos que este arriva, al centro o hasta abajo hablando de pocicion vertical hay que agregar dicha posision despues de la horizontal p.e:
background-position: left bottom;

donde:
bottom -> para ponerlo al final de la pagina
center -> al centro
top -> al inicio

y con la combinacion de estas sentencias creo que facilmente posicionaremos nuestro fondo en donde deseemos.

Pero si aun con estas sentencias no quedamos conformes con la pocicion de nuestro fondo, podemos ser un poco mas especificos poniendo algo como:
background-position: 33px 12px;

Donde el primer valor es la posicion horizontal y el segundo es la posicion vertical con respecto a la esquina superior izquierda, con esto mas especificos no pueden ser :P sin embargo siempre que puedan evitar esta sentencia con las anteriores haganlo.

PERSONALIZANDO LA ZONA PRINCIPAL

Muy bien hasta aqui vamos avanzando, pero puede que se sientan desesperados por que tal vez su fondo no se aprecia por completo, esto es por que la zona principal, es decir donde va el texto, la cabecera, la etiquetas etc, esta cubriendolo pues bien no se preocupen aqui veremos como posicionar este elemento, por otra parte puede que su posicion para ustedes no sea el problema, sino que tal vez no combina con lo demas entonces tampoco se preocupen aqui veremos como cambiar color o ponerle fondo, aunque esto no es muy recomendable ya que harian mas pesado su blog y tardaria mas tiempo en cargarse.

Bueno para empezar hay que localizar los bloques css que nos controlan esta zona principal, estosbloques son varios el primero corrsponde al contorno de la zona principal y lo identificaremos buscando la palabra #wrap2 en nuestro codigo y ahi podemos cambiar el color o anexar una imagen como lo hicimos con nuestro fondo, esto sera valido para cada uno de los bloques que se mencionen, como les decia anteriormente no recomiendo imagenes para estas zonas por lo que yo no agregare ninguna aunque queda a sabiendas de todos que esto es totalmente posible y valido tan solo agregando la sentencia backgroung-image como lo vimos anteriormente:

bloque de contorno de zona principal identificado por wrap2:

#wrap2 {
position:relative;
top:-4px;
$startSide:-4px;

background:#2C0000;

padding:10px;
border: 1px solid #fff;
}

bloque de zona principal identificado por #main-wrapper:

#main-wrapper {

background: #2F5927;

width:810px;
float:$startSide;
color:$mainTextColor;
font-size: 85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

bloque de fondo de cabecera identificado por #header-wrapper:

#header-wrapper {

background: ##2C0000;

padding-bottom: 4px;
}


bloque donde esta nuestro perfil, etiquetas y gadgets que hemos agregado:

#sidebar-wrapper {

background:#ffffff;

width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Y con esto terminamos con la zona principal, recuerden experimentar con estas etiquetas para que lleguen a manejarlas bien y recuerden que la mejor manera de aprender a hacer algo es haciendolo!!!

Ahora bien otra cosa que podemos querer es modificar el ancho de cada una de estas partes, esto es muy sencillo basta con modificar la proiedad width de cada uno de estos elementos:

Para el ancho del bloque principal, es decir al ancho que ocupara el texto y las imagenes que posteamos, modificar:

#main-wrapper {
background: #343E56;

width:730px;

float:$startSide;
color:$mainTextColor;
font-size: 85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

recomiendo que no sea mayor a 800 por el tema de las resoluciones.


para modificar el ancho de toda la zona en general (cabecera, principal, sidebar), modificar:

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background-color: #999;

width:990px;

margin:10px auto;
text-align:$startSide;
font: $bodyFont;
}

De preferencia si puede ser de 800 o menos (aunque menos ya es una exageracion) mucho mejor.

para modificar el ancho de la sidebar (la barra que esta a un costado y contiene gadgets), modificar:

#sidebar-wrapper {
background:#00538A;

width:220px;

float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

PARA MODIFICAR MARGENES

En estos momentos creo yo ya tienen mas que bien identificados cada uno de los bloques que hemos estado utilizando, por lo que ya no voy a ponerme muy especifico en esto de los margenes, solamente les voy a mostrar las centencias tradicionales si es que queremos agregar o modificar margenes:

1. margin-top: 1px;
2. margin-right: 2%;
3. margin-bottom: 3px;
4. margin-left: 4px;

Como en cualquier etiqueta div el valor puede darse en porcentajes, pixeles,milimetros, centimetro, pulgadas etc y lo unico que hay que hacer es agregar la linea correspondiente al margen que deseemos establecer en nuestro bloque de codigo, por ejemplo quiero que mi zona principal tenga un margen superior del 10% de tamaño actual del navegador, entonces mi bloque quedaria asi:

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background-color: #999;
width:990px;
margin:auto;

margin-top:10%;

text-align:$startSide;
font: $bodyFont;
}

Observemos la linea margin:auto; quiere decir que nos pone todos los margenes con los valores por default, sin embargo si queremos especificar alguno de nuestros margenes basta con poner la sentencia y el valor deseado en nuestro bloque margin-top:10%; y de esta manera tendremos nuestros margenes del tamaño que queramos.

PARA MODIFICAR EL RELLENO

El relleno o padding es el espacio que se deja entre el borde del cuadro y el texto, se podria comparar con una sangria, se modifica de la misma manera que los margenes, con la excepcion que las sentencias que utiliza son:

1. padding-top: 22px;
2. padding-right: 9px;
3. padding-bottom: 22px;
4. padding-left: 22px;

Pues bien por el momento me despido, espero que este post les haya sido entendible, cualquier duda, sugerencia, comentario, experiencia, dolencia, etc, no duden en expresarlo, nos estamos viendo, por el momento ya estoy preparando la tercera parte de esta serie de post "personaliza tu blog", en el cual veremos como insertar botones, banners y algunos detalles mas de personalizacion de la sidebar, bueno nuevamente adios y suerte con el diseño de sus blogs y paginas.

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.

Sitios en Flash

Bueno pues esta vez algunos sitios con muy buenas animaciones en flash espero que los disfruten y obtengan algo de inspiracion, recuerden que lo importante es reconocer el trabajo de otros y usar los elementos necesarios para mejorar el nuestro y dar cabida a algo mas para legar a otros como nosotros(uff me enrrede).

Sitios que no pueden faltar

Muy buenos sitios para diseñadores.

Logopond:

Si te falla la inspiración a la hora de diseñar un buen logo, este recurso te será de utilidad. Logopond es una comunidad de diseñadores de logos, en la que exponen sus trabajos, para recibir comentarios y votaciones de los otros usuarios, lo que les permite perfeccionarlos y obtener nuevas ideas.

Además, si estás completamente en blanco, puedes recorrer sus galerías para encontrar inspiración, a través de un buscador que rastrea los miles de logos alojados en el sitio, a partir de las palabras claves o del color dominante, que introduzcas.

Se le critica a Logopond, que no señale las aplicaciones de los logos, que muchos logos sean copias de otros y que algunos sean muy malos, aunque si buscas sólo calidad, puedes recorrer las galerías de los seleccionados como los mejores y más populares.

Este sitio está en inglés y ofrece además de la galería, un foro donde podrás entrar en contacto e intercambiar ideas, con otros diseñadores. Por otra parte, si el diseño de logos es tu especialidad, puede ser una buena forma de darte a conocer, ya que a partir del registro gratuito, podrás crear una galería con tus trabajos.
link: http://logopond.com/

CSS Manía:

Como diseñador debes saber que de nada sirve un hermoso diseño, si gran parte de los potenciales clientes no tienen acceso al mismo, o a algunos de sus elementos. Esta es la parte más resistida y que, al mismo tiempo, más preocupa en un buen diseño.

CSS Manía te ofrece la solución, a través de su galería de CSS, organizada por categorías, probablemente, la mayor del mundo. La idea nació en marzo de 2004 como una sección del blog personal de Gabriel Segura, uno de los fundadores de Blogs Media, compañía española especializada en nanopublicaciones, servicio y asesoramiento para blogs. Según señalan, se diferencian de otras galerías de CSS, por su permanente actualización.

Si eres diseñador este sitio te ofrece inspiración y conocimiento de CSS. Por otra parte, si el diseño no es lo tuyo y necesitas consolidar tu presencia en la web, CSS Manía te brinda información para que puedas contratar un buen servicio para tu empresa e imponerte por sobre la competencia. A partir del 2006, se lanzó el actual portal en inglés, bajo el dominio cssmania.

Específicamente, CSS Manía es una galería de sitios desarrollados según los últimos estándares de la web, usando XHTML y CSS, que se propone convertirse en una herramienta útil tanto para los desarrolladores, como para las empresas que buscan a los mejores, lo que por otra parte, te permitirá darte a conocer, si registras tus sitios obedientes a los estándares.
link: http://cssmania.com/

FontStruct:

Aunque constituye un elemento fundamental del diseño, el problema de la tipografía, suele resolverse acudiendo a las fuentes ya creadas, aunque en ocasiones, quizás no constituya la mejor opción y la fuente ideal para determinado proyecto de diseño, sólo exista vagamente en tu cabeza.

En dichos casos, Fontstruct te ofrece a partir del registro gratuito, la herramienta que necesitas para crear tu propia fuente tipográfica. Este sitio, desarrollado por Fontshop ha sido pensado para que sus usuarios, puedan crear en línea y fácilmente, sus propias tipografías. Al mismo tiempo, existe la posibilidad de compartirlas con otros usuarios, a través de su galería.

El panel para crear tipografías consiste en una retícula de base y una serie de herramientas típicas como dibujar, borrar, seleccionar, etc; que permiten rellenar la cuadrícula, formando cada uno de los caracteres. Tu trabajo quedará guardado, para que lo recuperes cada vez que ingreses en la página, como usuario registrado.

Una vez listo, podrás descargarlo en formato .ttf, comprimido dentro de un archivo .zip, con opción a publicarlo, para ser compartido con otros usuarios. Obviamente, puedes buscar inspiración en su galería, e incluso, descargar y modificar alguna fuente, que sirva de base a tu propio diseño.
link: http://fontstruct.fontshop.com/

Photobucket:

En cuanto al apartado de los elementos multimedia de tu diseño, Photobucket se autoproclama como el sitio más popular en Internet para subir, compartir, enlazar y encontrar fotos, videos y gráficos, algo que puede ser cuestionado, si se lo compara con el tráfico de Flickr.

Sin embargo, el registro gratuito en Photobucket, te ofrece algunas herramientas adicionales, que lo diferencian de éste. Podrás almacenar millares de fotos y horas de vídeo y disponer de herramientas libres para hacer presentaciones, álbumes con fotografías y videos con música.

Además, puedes buscar inspiración en su enorme biblioteca, que crece minuto a minuto, para encontrar las fotos, las imágenes y los videos más recientes, los más populares y los mejores. Por otra parte, el almacén en línea de Photobucket te permite imprimir las imágenes, a camisas, tazas, calendarios, etiquetas engomadas, posters y muchas cosas más.

Photobucket, adquirido por Fox Interactive Media, Inc. en 2007, fue fundado en 2003, ha tenido un enorme crecimiento, en el que ha tenido que ver tanto su carácter de red social, como el tipo de contenido que ofrece.
link: http://photobucket.com

CG Textures:

Este sitio se postula como el que ofrece la mejor galería de texturas y fondos del mundo. Provee texturas de buena calidad, de una manera organizada en un gran número de categorías y subcategorías, lo que facilita mucho la búsqueda de inspiración para un diseño en particular.

Por otra parte, las galerías de los otros usuarios, te permitirán ver como estas texturas han sido aplicadas a diferentes trabajos. Además, ofrece un buscador, un tutorial y un foro, al que podrás acceder a partir del registro gratuito. El sitio ha sido diseñado por Marcel Vijfwinkel, a partir de una idea original de Roel van Mastbergen.

Puedes utilizar las texturas libremente tanto para trabajos de diseño en la web, como para medios impresos. Te permite la descarga en alta resolución de hasta 15 MB, cada 24 horas. La mayoría de las imágenes han sido aportadas por sus contribuyentes, para ser compartidas con el resto de la comunidad. De tal modo, también constituye una forma de difundir tus trabajos más inspirados.
link: http://www.cgtextures.com/

Splice:

En ocasiones, tu diseño puede requerir la incorporación de audio. Puedes tener excelentes ideas al respecto, que no podrás llevar a la práctica, si no sabes dónde encontrar los archivos de sonido apropiados, ni cómo editarlos, para generar el acompañamiento sonoro que tu diseño necesita.

Splice tiene la respuesta a este requerimiento. Se trata de un servicio que combina una red social, con una aplicación online en flash, que te permitirá hacer tus propias composiciones sonoras. Cuenta con muestras de instrumentos sonoros, voces y efectos, además de ofrecerte la posibilidad de subir tus propias pistas, ya que admite muchos formatos. Podrás cortar, añadir, mezclar, mover o duplicar cada muestra sonora, hasta generar el sonido que necesitas, pudiendo publicarlo para compartir con los otros usuarios.

Por otra parte, podrás buscar inspiración entre los archivos publicados, a través de palabras claves, añadir a favoritos las composiciones y sonidos de los demás usuarios que te interesan y darles una puntuación, entre otras típicas funciones de las redes sociales. Para ello, sólo necesitas registrarte en forma gratuita.

link: http://www.splicemusic.com/

css based:

Otro exelente sitio de paginas que ocupan css en su diseño, vale la pena verlo es muy inspirador.
link: http://www.cssbased.com/

Simple code:

Este sitio nos sive para tranformar codigo html, js,php, etc en codigo con la misma informacion pero configurado para que aparesca dicha informacion en los blogs que interpretan html.

link: http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

10 aplicaciones adobe air

Adobe air es un entorno para la creacion de aplicaciones RIA (Rich Internet Applications) y de escritorio que esta comenzando a ganar popularidad fuera de los primeros circulos que lo adoptaron, cuenta ya con una gran cantidad de herramientas y utilidadess que pueden ayudar a los diseñadores web con diversas tareas relacionadas con la gestion y diseño de sitios.

Si eres un diseñador de páginas web al que le gusta experimentar y probar nuevas aplicaciones (que no cuestan un centavo), echa un vistazo a estas 10 Adobe AIR applications.
Diseñadores gráficos, diseñadores de interacción, y los desarrolladores web también pueden encontrar útil esta colección:

Em Calculator

La Em Calculatorcreda por James Whittaker, es una aplicacion que permite crear codigo css para las tipografias de nuestro sitio, de manera que estas se mantengan sin importar el tamaño con el que sea visualizado nuestra pagina.
link: http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/


colorPicker

Esuna simple aplicacion con la cual podemosobtener el valor hexadecimal de los colores seguros para la web, color piker guarda los colores usados durante la sesion de manera que puedas volver a usarlos facilmente.
link: http://colorpicker.riaforge.org/


AIR Icon Generator

Es un muy util y rapido creador de iconos basta con poner el texto que deseamos, seleccionamos el icono, el color y obtendremos diferentes tamaños de nuestro icono que seguramente se ajustaran a nuestras necesidades.
link: http://clockmaker.jp/labs/air_icon/


Google Analytics Reporting Suite

La presentación de informes de Google Analytics Suite trae de Google potente herramienta de análisis de sitios web en el escritorio y añade varias excelentes características como la capacidad de guardar/cambiar entre diferentes perfiles (excelente para la gestión de múltiples sitios o cuentas de clientes) y la pestaña de navegación para las estadísticas las páginas que has abierto.
link: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1282521


Shrink O’Matic

Es un rapido redimencionador de imagenes muy util al momento de crear los thumbnails es decir esas imagenes chiquitas para nuestras galerias.
link: http://toki-woki.net/p/Shrink-O-Matic/


WebSnapshot
Exelente capturador de pantallas que te permite capturar una parte de la pantalla o la pantalla completa, atrapa cualquier imagen del navegador.
link: http://myspyder.net/tools/websnapshot/


kuler desktop

Es una aplicacion que nos sirve para encontrar las tonalidades perfectas que daran armonia anuestro sitio, es conbinable eh interactuable con Illustrator y Photoshop entre otros.
link: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1429018


pixus

Añade una regla a tu navegador para que puedas medir distancias y tamaños de imagenes o cualquier objeto presente en estos.
link: http://code.google.com/p/pixus/


Klok

Este es un robusto proyecto que vale la pena checar a fondo, pero por el mientras viene con una plantilla para darle facilmente los valores deseados, dejando muchas de sus potentes opciones con valores default.
link:http://klok.mcgraphix.com/klok/index.htm


Snippely

Ordena de manera sencilla y potente nuestros bookmarks.
link: http://code.google.com/p/snippely/

Para ver mas aplicaciones similares visitar este link: http://refreshingapps.com/

Diseño de buenos Sitios Web ParteI

original:http://www.traceygrady.com/irresistible-websites-part-one

Que hace a un sitio web irresistible me pregunto yo???
Dicho de otra manera, que elementos visuales son capaces de seducir exitosamente la vista del usuario aun cuando se les mira con detalle???
En este post echaremos una mirada a distintos sitios y trataremos de descubrir que fue lo que hicieron para ser tan atractivos a ojos de sus visitantes.

En cada post nos enfocaremos en un particular estilo o tema, en esta primera parte el tema que tomara nuestra atencion sera la exuberancia, sitios web que son ricos en detalles graficos dandonos asi una idea de su contenido:


N.DESIGN STUDIO
Este sitio es un buen ejemplo de la opulencia visual en muchos niveles: color, substancia, detalles, composicion y diseño.


Phizz
El estilo gráfico en la cabecera es también frecuentemente utilizado en el diseño: múltiples capas de imágenes, iconos y perspectivas contrastantes, superposición de remolinos de colores ornamentales. Phizz emplea técnicas visuales tienen fuerza atractivo y popularity.



Beto Lima

Reflejos de sol a través de las nubes: son un elemento visualque comienza a convertirse en algo muy popular en sitios web. Beto Lima utiliza una inusual paleta de colores para generar un freco ambiente familiar.



Dara's Garden

Un sitio de celebración de bodas y otros eventos especiales en Tennessee. Un papel tapiz floral se superpone con ilustraciones florales y fotografías en tono sepia que van muy de acuerdo con la ubicación y estilo del sitio.



Catalina Estrada

La riqueza de las imágenes en este sitio es trabajo de Catalina Estrada, un ilustrador con sede en Barcelona.



Jet

Un sitio Flash ilustrado con bellas imágenes en los bordes, que representan motivos florales, enormes diamantes.

RESUMIENDO: puntos que tomar en cuenta

• PALETAS DE COLORES BRILLANTES Y ARMONIOSOS(ver post de colores aqui mismo)
• UNA CABECERA CON ESTILO ATRAYENTE
• CREAR UN DISEÑO ACORDE A LA TEMATICA DEL SITIO
• TOMAR EN CUENTA A QUE TIPO DE USUARIOS VA DIRIGIDO
  
• USAR COLORES INTREPIDOS EH INUSUALES
• Y recuerden siempre que la sencilles dentro de la exuberancia tambien existe y que no siempre mejor significa mas.
  

CONCLUSION:
Lo que estos sitios tienen en común incluir una superposición de imágenes, la atención al detalle, los motivos que evocan la frescura y vitalidad ademas de una inusual y hermosa combinacion de colores. ¿Has visto cualquier sitio que pienses que debería sumarse a esta lista? Sugerencias son bienvenidas.

siguiente tema: sitios que dejan una sensacion de diversion en su diseño y el tono.

Los mejores sitios, parte 1

Hola un gran saludo a todos, haber como comienzo... pues dire puede que tu seas un sabio que ah alcanzado ya la nirvana en esto de la red y conoscas hasta el mas recondito sitio de esta enorme telaraña que es la internet pues bien si es asi puedes pasar por alto este post, ahora bien si eres aun un novato o tienes un nivel intermedio puede que este post te interese, llevo muchisimos años navegando y a lo largo de todos estos uno se va haciendo de muchos lugares interesantes (para mi :P) esos en los cuales hay informacion sorprendente y que sirve realmente, ya que muchos no me dejaran mentir a la hora de buscar algo en internet nos pasamos mucho tiempo probando soluciones que muchas veces no tienen el resultado esperado, es decir hay mucha paja, sitios o post que prometen mucho y que al final resulta que aquel truquito que seguimos desde el paso 1 hasta el paso 50 no sirve.
Pues bien como mi intencion no es marearlos con tanto choro les digo como ya se habra podido imaginar el internauta inteligente, que en este post pondre los mejores sitios que eh encontrado y que aun estan en funcionamiento, esto es importante decirlo, estas paginas estan probadas hasta hoy 11 mayo 2008 no quiero luego reclamos por que como es natural sitios van y sitios vienen y no es extraño que un buen sitio de pronto desaparezca o cambie de nombre, de servidor o simplemente salga otro sitio con una mejor propuesta y la actividad del sitio comience a caer hasta dejar de tener la calidad que tenia en sus inicios, bueno pues sin mas los dejo con esta seleccion, espero que a muchos les sirva saluditos Y SI TIENEN ALGUN SITIO INTERESANTE QUE FALTE, NO DUDEN EN AGREGARLO.

nota: Como por naturaleza somos flojos y yo se que solo se tomaran la molestia de visitar aquellos sitios que tengan una imagen llamativa, pero en verdad les recomiendo que les den una checada rapida a todos, aunque a muchos no les puse imagen el contenido de estos es de lo mejorcito que ayaran en español y alguna que otra cosa en ingles, bueno si ya no los visitan aya ustedes, pero que no se diga que no les dije.

SITIOS PARA LOS OTAKUS :P (ANIME Y MANGA)

1)Para el anime recien salidito del horno no hay nada como frozen-layer descarga por torrents y las descargas reciente se bajan a muy buena velocidad no es muy bueno en animes viejos ya que los torrents casi no tienen semillas y las descargas son en extremo lentas.

http://www.frozen-layer.com/descargas


2)Para el anime nuevos y viejitos no hay nada como MCanime.

http://www.mcanime.net/descargadirecta


3)
http://www.frontalweb.com.ar/

4)E rincon del manga
http://www.elrincondelmanga.com/


PARA CREATIVOS Y WEBMASTER

1)Para esos momentos que tienes bloqueo artistico nada como ver bellas paginas que nos inspiren, estos sitios web recolecta paginas con muy buenos diseños :).

http://bestwebgallery.com/


http://cssremix.com/

http://www.cssbased.com


http://ever-real.com/blog/?p=8

2)Cuantas veces necesitamos un sonido y por mas que le rascamos nada mas no encontramos nada, pues esta web contiene muchos sonidos y anque su diseño es sencillo la pagina es altamente eficiente.

http://recursos.cnice.mec.es/bancoimagenes/sonidos/directorio.php


3)Este sitio en si tiene un diseño curioso y alguna que otra cosa que vale la pena ver
http://www.webdesignerwall.com/


4) Este sitio contiene propuestas muy interesantes de diseño, tomando como base principal las hojas de estilo CSS, muy bueno vale la pena darle una checada y aprender uno que otro truquillo de las css.

http://www.csszengarden.com/tr/espanol/


5)EXELENTE PAGINA con una gran cantidad de recursos, iconos, platillas etc, es todo un placer visitar esta web ;).

http://www.newwebstar.com

6)Curso muy completo hacerca de las hojas de estilo CSS en realidad les recomiendo que le den una revisadita, las hojas de estilo te simplifican mucho el trabajo y hace posible cambiar el diseño de todo un sitio web en cuestion de minutos :).

http://www.sidar.org/recur/desdi/mcss/manual/indice.php

7)Sencilla pero muy util pagina en donde nos da codigo de ejemplo para diseños css

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

8)Este sitio es muy bueno es como si fuera un bar donde se reunen los diseñadores a hablar sobre lo que les gusta, igual y mi descriccion no resulta muy llamativa, pero animense a darle una checada.

http://tablosign.com/es/

9)Exelente post de tutoriales para diseño de textos en photoshop, si te gusta este programa y estas empezando no dudes en visitar este sitio.








http://vandelaydesign.com/blog/design/photoshop-text-tutorials/

9) De los mejores sitios que encontre cuando estaba aprendiendo el photoshop, muy pero muy recomendable, tanto para os novatos como para los mas experimentados, estos ultimos no olviden dejar su aporte para retroalimentar a la comunidad.

http://www.photoshop-designs.com/foro/viewtopic.php?t=4212

10)Exelentes tutoriales de la suit Adobe y un poquito mas

http://www.smashingmagazine.com/category/tutorials/

11)Sencillo pero importantes tutoriales de fireworks para los que quieren aprender a usarlo
http://www.tutorialized.com/tutorials/Fireworks/1

12)Magnifico sitio de VIDEOTUTORIALES de diseño en photoshop.
http://www.solophotoshop.com/

13)Otra exelente pagina de VIDEOTUTORIALES de todo lo que tenga que ver con el diseño, photoshop, after effects, fireworks etc.

http://www.tutorial-lab.com/tutoriales-after-effects/

Bueno por elmomento ya me dio flojera asi que le paro, no crean, postear para alguien tan webon como yo es muy dificil :P para la proxima entrega quiero poner los mejores sitios para obtener libros, peliculas, series y alguna que otra cosita que se me ocurra.