PALETA DE COLORES

l siguiente cuadro permite obtener el código hexadecimal de un color en el conocido formato #RRBBGG. Basta con elejir el color moviendo con el cursor y copiar el código que genera abajo.

Otra opción es utilizar los nombres estándares para los principales colores:

Nombres de colores y valores sRGB

	Black = "#000000" (Negro)		Green = "#008000" (Verde)
	Silver = "#C0C0C0" (Plateado)		Lime = "#00FF00" (Verde lima)
	Gray = "#808080" (Gris)		Olive = "#808000" (Verde oliva)
	White = "#FFFFFF" (Blanco)		Yellow = "#FFFF00" (Amarillo)
	Maroon = "#800000" (Marrón)		Navy = "#000080" (Azul marino)
	Red = "#FF0000" (Rojo)		Blue = "#0000FF" (Azul)
	Purple = "#800080" (Púrpura)		Teal = "#008080" (Azul verdoso)
	Fuchsia = "#FF00FF" (Fucsia)		Aqua = "#00FFFF" (Celeste)

Salu2,
elSant0

Cómo insertar SWF en entradas de Blogger

Bueno, resulta que Blogger no nos permite alojar documentos de tipo Flash (.swf), por lo que me las he tenido que ingeniar para alojarlos en otra web y luego enlazarlos desde aquí.

En primer lugar, la página donde los alojo es esta: http://www.xooimage.com/fr/

Me gustó porque tiene las ventajas de no necesitar ningún tipo de registro y además es simple y rápida de usar. Basta con poner la ruta del fichero donde indico con el círculo rojo en la siguiente imagen, y luego dar a Envoyer. A continuación nos devuelve la ruta donde queda alojado el fichero.

NOTA:Recordad que estos ficheros pueden ser muy pesados en la carga, por lo que antes de subirlos atended a su tamaño y reducidlo al máximo.

Ahora voy a explicar como añadir el enlace en nuestra entrada y que el fichero sea mostrado. Para esto editamos nuestra entrada y vamos a Edicion de HTML. En el lugar donde deseemos mostrar nuestro fichero swf añadimos el siguiente código:

<div style="text-align: center;">
   <object id="movie"                   /* INDICA LA INTERACTIVIDAD DEL FICHERO */
      type="application/x-shockwave-flash" /* INDICA EL TIPO DE FICHERO */
      data="URL_DEL_ARCHIVO.swf"           /* INDICA DONDE SE ENCUENTRA EL FICHERO */
      width="ancho"                        /* INDICA EL ANCHO QUE TOMARÁ EN PANTALLA,EN PIXELS */
      height="alto">                    /* INDICA EL ALTO QUE TOMARÁ EN PANTALLA, EN PIXELS */
      <param name="movie" value="URLarchivo /"> /* IGUAL QUE ANTES SE INDICA LA INTERACTIVIDAD Y DONDE ESTÁ (para IE) */
      <param name="wmode" value="transparent" /> /* INDICA EL MODO DE MOSTRARLO (sólo para IE) */
   </object>
</div>

Como indican los comentarios, se requiere que la URL del fichero esté en dos etiquetas diferentes, una es utilizada por Internet Explorer y la otra por el resto de navegadores con soporte Flash (Firefox, Opera,...).

Con esto, si todo se ha hecho de manera correcta quedará flamante nuestro fichero swf en la entrada.


Salu2,
elSant0

Añadir cuadros de contenido en las entradas del blog

Supongo que a muchos blogueros os pasa como a mi, a menudo tenéis que añadir  información complementaria (código, notas,...) en un artículo y éstas quedan un poco antiestéticas. Por no hablar de cuando ese código es demasiado extenso y convierte nuestras entradas en chorizos de 1000 líneas.

Vamos a ver como se pueden poner esas porciones de código (o lo que os apetezca: notas, fotos, videos,...) dentro de cuadros con un tamaño máximo y sus propios scroll y todo si son necesarios.

Lo primero que haremos será ir a Personalizar, y a Diseño-->Edición HTML y marcamos la casilla de Expandir plantillas de artilugios. Una vez hecho, en el código buscamos la siguiente etiqueta:

]]></b:skin>

Ahora añadimos el siguiente código justo antes:

pre
{
   background:transparent url(#) no-repeat 0 0; /* PARA PONER UNA IMAGEN AL CABECERO DEL CUADRO, PONIÉNDO LA URL DONDE ESTÉ */
   padding-top:24px; /* PARA AJUSTAR EL RELLENO DEL FONDO */
}
pre code
{
   overflow:auto; /* DETEMINA SI ES NECESARIO PONER SCROLL */
   background-color:#fffbe5; /* COLOR DEL FONDO DEL HEX */
   border:1px solid #fff1a3; /* COLOR DEL BORDE DEL HEX */
   color:#7e1f09; /* COLOR DE LA LETRA EN HEX */
   display:block; /* NO TOCAR PARA NADA */
   padding:5px; /* RELLENO DEL CUADRO */
   white-space:pre; /* NO TOCAR PARA NADA */
   text-align:left; /* ALINEACIÓN DE LAS LETRAS */su
   min-height:63px; /* ALTURA MÍNIMA DEL CUADRO */}
/* CUANDO SE PASE EL RATÓN SOBRE EL CUADRO, PUEDE CAMBIAR DE COLOR: */
   code:hover
{
   background-color:#FEFEDD; /* COLOR DEL FONDO EN HEX */
   border:1px solid #ffd511;/* COLOR DEL BORDE EN HEX */
}

Atendiendo a los comentarios que he añadido en el código, los cuadro que aparecerán en nuestra web se puede configurar dándole el aspecto y comportamiento que deseemos.

Por último, cuando queramos poner algún cuadro en una entrada del blog que estemos editando, nos pondremos en Edición de HTML de la entrada y pondremos entre las etiquetas <pre><code> y </code></pre> lo que queramos insertar dentro del cuadro, de la siguiente manera:

<pre><code> PORCIÓN A INTRODUCIR DENTRO DEL CUADRO </code></pre>

Y ya está. Espero os sirva y le saquéis provecho.


Salu2,
elSant0

Ocultar o eliminar la barra de Blogger

Antes de explicar como hacerlo quisiera dejar claras algunas cosas:

1. Blogger es quien nos cede GRATUITAMENTE su espacio y el material necesario para desarrollar nuestros blogs. No debemos olvidarlo y por eso no soy partidario de desvincular u ocultar el origen de los blog de blogger. Yo lo hice porque la veo antiestética y poco útil, pero a cambio la sustituí por otros vínculos.
2. NO HAY NADA en los términos del servicio que obligue a usarla. Todo cuando dicen por ahí de que Blogger toma medidas si detecta que la has eliminado es mentira.
3. Cuando eliminamos la barra de Blogger, muchos usuarios se enfrentan con un problema: no saben cómo ingresar a su blog. Obviamente, basta tener la dirección de edición en los marcadores pero, sería bueno tener un acceso directo a las distintas opciones del panel y que esas opciones sólo sean visibles al administrador del blog (sí, es posible hacerlo).
4. Con las instrucciones que indico a continuación solo se está ocultando la barra (de una forma u otra), pero eso no quiere decir que no siga ocupando espacio físico en la carga de la web. Eliminarla por completo es imposible.

Si aun después de leer esto estás convencido de que deseas quitar esa barra de ahí arriba vamos a ello.

Vamos a Personalizar y luego a Diseño-->Edición HTML y buscamos la siguiente linea de código:

<style type="text/css">:

Si la encontramos, justo en la linea posterior añadiremos lo siguiente:

#b-navbar {visibility:hidden;}

Si no la encontramos buscamos el siguiente código:

<head>

Y a continuación añadimos:

<style type='text/css'>
#navbar-iframe
{
   height: 0px;
   visibility: hidden;
   display: none;
}
</style>

Para volver a visualizarla, tan solo tendréis que eliminar la linea que habéis añadido.

Otra opción menos radical es ocultarla y que cuando se ponga el cursor encima aparezca. Para ello lo que se tendrá que hacer es copiar el siguiente código justamente después de body{:

#navbar-iframe
{
   opacity:0.0;
   filter:alpha(Opacity=0)
}
#navbar-iframe:hover
{
   opacity:1.0;
   filter:alpha(Opacity=100,FinishedOpacity=100)
}

Espero que os sea de utilidad y ya me contaréis que tal ha ido.


Salu2,
elSant0

Entender que son los "feeds" y los "RSS" sin morir en el intento

Dentro del mundillo web hay multitud de conceptos que cuesta comprender y producen bastante confusión. En este caso voy a explicar algunos  muy extendidos en uso dentro de blogs, foros , lectores de noticias,... y que van estrechamente ligados y son imprescindibles para conseguir un blog exitoso: Redifusión web (o sindicación web), web feed (o canal web), feed (o fuente web, o canal), RSS, Atom, archivo RSS (o feed RSS), agregador (o lector de canales, lector de feeds o lector de fuentes web), lector de noticias, icon feed, link feed,...


La redifusión web (o sindicación web) es una forma de subscripción en la cual parte del material de un sitio web se hace disponible en otros. En general, se usa para proporcionar a los usuarios de una web las actualizaciones de otras, permitiendo consumir en un solo sitio y de manera resumida el contenido de interés de varias webs. Por ejemplo se puede usar para conocer noticias de un periódico, nuevos artículos en un blog, últimos comentarios en un foro,...

Este método de transmitir información es muy utilizado en blogs y prensa electrónica y cada día hay más sectores usándolo por ser una forma efectiva de difundir y compartir información empresarial.


Una web feed (o canal web) es aquella que sirve a otras webs contenido mediante redifusión web.


Una fuente web (o feed, o canal) es un contenido compartido de una web feed. Cada feed tiene su propia URL, igual que una página web convencional, pero por el contrario, los feeds no pueden ser mostrados tal cual debido a que la información se empaqueta en un archivo codificado en un formato especial para su redifusión (estos formatos permiten, entre otras cosas, que el archivo se reescriba automáticamente cuando se produce alguna actualización en los contenidos del sitio web). Los formatos de codificación de fuentes web más conocidos y extendidos hasta el momento son RSS, Atom y y otros derivados de XML/RDF.

En ocasiones el término feed (o fuente web) también se utiliza para referirse a la web feed que contiene dicha fuente, pero eso no es correcto.


El RSS es una familia de formatos de codificación en XML utilizada para crear fuentes webs. Comúnmente el término RSS es usado erróneamente para referirse a fuente web (independientemente de que el formato de dicha fuente sea RSS o no). Esto se debe a que originalmente el único formato de fuente web era RSS, así que se usaban de manera indistinta ambos términos.

Como alternativa a RSS existe Atom, otro formato de codificación de fuentes web. En este caso el protocolo usado para crear y actualizar los recursos es APP (Protocolo de Publicación Atom o, resumido del inglés, AtomPub) y está basado en HTTP.


Un archivo RSS (o feed RSS) es una fuente web codificada en RSS. Dentro del archivo codificado en RSS cada elemento de información se llama ítem. Cada ítem consta normalmente de un título, un resumen y un enlace a la web feed (además puede contener otra información como fechas, autor,...). El archivo RSS se reescribe automáticamente cuando se produce alguna actualización en los contenidos del sitio web.


El agregador (o lector de fuentes web, o lector de canales, o lector de feeds) es un software especial necesario para interpretar las fuentes web. Sin un agregador no podemos suscribirnos a una web feed y leer sus feeds. Están creados en lenguaje XML y utilizan la semántica de la web feed (es decir, todas las palabras que la componen) para distinguir unas fuentes web de otras.

Podemos encontrar agregadores en los principales navegadores (firefox, IE, Opera,...), en los lectores de correo (Thunderbird, MS-Outlook,...), en aplicaciones web, en gadgets de escritorio,...

Por ejemplo son agregadores los lectores de noticias que suelen acompañar a MS-Outlook o a Thunderbird, Google Reader (permite reunir feeds vía web), Feedblitz (permite enviar los feeds por correo),... Además podemos añadir un agregador incluso a nuestra propia web si lo deseamos.

El agregador funciona de la siguiente manera:

1. Accede a los archivos RSS de los sitios con redifusión web elegidos.
2. Reúne la información de los contenidos publicados en dichas webs que ha sido actualizada desde el último acceso.
3. Si es necesario, muestra las novedades o modificaciones que se han producido; es decir, avisa de qué webs han incorporado contenido nuevo desde nuestra última lectura y cuál es ese contenido.

El feed icon es esta imagen de la izquierda. Fue introducido por Mozilla  Firefox para indicar cuando una web contenía feeds y poco a poco se ha ido convirtiendo en un estándar para todo lo relacionado con la redifusión web.


Para terminar, asociado a todos estos conceptos prolifera uno más que dá nombre a una sección incluida en multitud de webs. Links feed (o enlaces de interes) es el nombre dado a un campo de una web que incluye diversos enlaces a otras donde encontrar información relacionada. La verdad, puede tener mucho o nada que ver con los conceptos anteriores, pero su parecido lleva a confundirlo como uno más.


Espero os haya aclarado dudas con todo esto.


Salu2,
elSant0

Pantallas tridimensionales ¿futuro o ficción?

Las pantallas planas puede que cada vez sean más grandes, más nítidas, y más finas, pero siguen siendo ¡planas!.

Muchas veces nos preguntamos si en el futuro veremos de manera cotidiana la imagen tridimensional (sin necesidad de gafas de ningún tipo), tal y como nos muestran algunas películas de ficción como "La guerra de las Galaxias" o "El hombre bicentenario", así que vamos a hacer un breve recorido por los sistemas que en la actualidad ya se encuentran en desarrollo. 

La imagen tridimensional en movimiento no es nada nuevo y, ya en los cines de antaño, se proyectaban algunas películas tridimensionales que funcionaban emitiendo dos películas diferentes, cada una con un tinte de color diferente.

Al ponernos unas gafas de estos colores (un color en cada ojo), cada ojo veía una parte de la película, dejando "invisible" la otra, por lo que obteníamos una visión estereoscópica, dando la sensación de profundidad.

Con el avance de la tecnología, la técnica se perfeccionó, creando sistemas que hacían más o menos lo mismo, pero mejor. Así, hay gafas con polarización vertical en un ojo y horizontal en otro, consiguiendo un efecto más logrado que con la polarización por colores. Y todavía más perfeccionado es el sistema en el que las gafas se sincronizan con la película y obturadores situados en cada ojo se van abriendo y cerrando a la vez que en la pantalla se muestra la imagen correspondiente al ojo izquierdo y derecho alternativamente (esto es lo que solemos encontrar en los cines 3D actuales).

Pero estos sistemas no son cómodos ni prácticos, así  que buscando nuevas técnicas se han conseguido crear pantallas que transmiten la sensación de profundidad sin necesidad de accesorio alguno. Veamos cuales son esas técnicas, sus ventajas y los inconvenientes que todavía poseen:

Autoestereoscopía
Detrás de esta palabra que compite con "supercalifragilistico" como término complejo se esconde lo que comentábamos antes: una pantalla que es capaz de transmitir a cada ojo información diferente, consiguiendo así el efecto estereoscópico que, a su vez, consigue el efecto de profundidad en la imagen.

¿Cómo se consigue? La idea es muy parecida a la de las pantallas que requieren gafas. Se trata de conseguir que la pantalla emita una imagen para el ojo izquierdo y otra para el derecho. ¿Qué incorporan para evitar las gafas? Pues lo consiguen mediante una barrera de paralaje que interrumpe el haz de luz selectivamente para que cada imagen vaya al ojo que le toca.

El problema viene cuando nos movemos, dado que los ojos cambian de posición. Para evitar este efecto, algunas compañías optan por hacer que sólo una posición sea correcta para apreciar el efecto tridimensional, mientras que otras incorporan un detector de posición de los ojos del observador para que el efecto sea válido aunque lo veamos con un ángulo respecto a la perpendicular de la pantalla.

Esta misma técnica puede ser utilizada para mostrar diferente contenido en la misma pantalla para observadores en ángulos diferentes (un canal de TV para el espectador de la izquierda, otro para el de la  derecha y otro para el que está justo delante).

Por el contrario, uno de los problemas de las pantallas autoestereoscópicas es la incapacidad de mostrar la misma imagen tridimensional a varios observadores situados en puntos diferentes delante de la pantalla, dado que ésta sólo ofrece esta función para una posición de ojos concreta.

Holografías

Para solucionar el problema del espectador único para una misma imagen, tenemos las pantallas holográficas, que se basan en el mismo principio que los hologramas impresos. Estas pantallas lo que intentan es emitir la luz de la misma manera que rebota en un objeto, es decir, a los mismos ángulos y a las mismas intensidades.
Esto se consigue mediante una capa holográfica que, cuando la luz impacta en ella, la reemite a diferentes ángulos e intensidades (igual que el efecto de refracción del agua).

Lo que tenemos es una imagen tridimensional de la que podemos ver diferentes aspectos según nos movemos alrededor de la pantalla, ya que la luz que captamos en cada ángulo respecto a la misma corresponde a la que se reflejaría en el objeto mostrado en la pantalla. Por ejemplo, si tenemos una hoja de papel mostrada casi de perfil, si miramos desde la izquierda de la pantalla veremos una cara y si miramos desde la derecha veremos la otra.

Obviamente, la limitación implícita es el ángulo máximo al que la pantalla puede enviar haces de luz, excedido el cual ya no podremos disfrutar del efecto tridimensional.

Volumetría

El no va más de las pantallas son las llamadas volumétricas. Si en el caso de las autoestereoscópicas sólo podíamos conseguir un efecto tridimensional desde un punto fijo, y en las holográficas sólo podíamos movernos un cierto número de grados desde la perpendicular de la pantalla, con las volumétricas, el efecto tridimensional se consigue desde cualquier punto alrededor de la pantalla.

La idea es conseguir que un punto de luz ocupe un lugar determinado en el espacio tridimensional (llamado "voxel" en vez de pixel, como ocurre en las pantallas planas). Este efecto se está consiguiendo de diferentes maneras, aunque la más extendida es emitir fotogramas de una imagen sucesivamente para que se vayan "imprimiendo" en una superficie que rota a gran velocidad.

De esa manera, gracias a la persistencia visual (la imagen se queda impresa en nuestra retina durante centésimas de segundo) podemos ver una imagen totalmente volumétrica dibujada en el aire, ya que la superficie sobre la que se imprime es tan fina y gira tan rápido que es prácticamente invisible.

Otra manera para conseguir este efecto es crear una matriz de leds en 3D que se van encendiendo o apagando dependiendo de la imagen que queremos crear.

Pero hay muchos problemas con estos sistemas. Para comenzar, si queremos tener una imagen que tenga opacidad, sólo lo podemos conseguir a cambio de perder definición vertical, por lo que la imagen ya no es totalmente volumétrica, ya que no podemos visualizarla desde la vertical. Otro dato a tener en cuenta es que para conseguir transmitir toda la información de una imagen tridimensional punto por punto, necesitamos un ancho de banda monstruoso: una media de 165 GB por segundo.

Visto lo visto, puede que todavía tengamos que esperar bastante para ver proyecciones como las de "La guerra de las Galaxias", pero vamos en el buen camino.

Salu2,

elSanto

Mis primeras semanas de bloguero

Tras cumplir mis primeras semanas como bloguero he pensado que no estaría de más hacer un pequeño balance sobre la evolución que va teniendo esta andanza.

Para ser sincero, esperaba avanzar mucho más rápido y repartir mas esporádicamente los momentos dedicados a la personalización y configuración de la web. Sin embargo, la mayor parte del tiempo dedicado hasta ahora lo he empleado en darle forma y añadir gadgets. Supongo que la principal causa es el deseo que tengo de darle pronto una apariencia personal y útil.

Ha sido una sorpresa para mi descubrir que estos primeros días han sido en su mayor parte para leer consejos sobre la construcción y mantenimiento de un blog. Lo que comenzó con el fin de encontrar algunos gadgets que dieran un toque más ducho a la web me ha abierto las puertas a un gran campo de información especialmente ligado con el mundo de los blogs. Día a día descubro multitud de detalles a cuidar que no conocía. Y lo logro paseando por multitud de blog, de los cuales la mayoría me están pareciendo extraordinarios, y donde hay multitud de entradas dedicadas a ayudar a mejorar dichas webs. Por cierto, todos están muy personalizados y poseen una presencia muy llamativa y grata; espero con el tiempo ir añadiendo algunos en mi lista de "enlaces de interés".

Dicho esto, os pido paciencia si veis excesivos artículos dedicados a la atención del cuidado y mantenimiento de la web. Todo sea por conseguir el mejor resultado y al mismo tiempo poner a vuestra disposición cuanto voy conociendo al respecto.



Salu2,
elSant0

Añadir un menú con submenús al blog

Muchos desarrolladores web dicen que el uso de menús desplegables es una mala práctica, ya que pueden ser confusos, molestos y muchas veces poco funcionales. Pero desde mi punto de vista, un menús desplegables es una excelente opción, ya que ayuda a limpiar una concurrida web, ordenándola al mismo tiempo. Si está estructurado correctamente, un menú desplegable puede ser una gran herramienta de navegación, sin dejar de ser útil, atractivo, y funcional en cuanto a su diseño.

Para crear un menú desplegable como el que utilizo yo sólo hay que hacer lo siguiente:

1. Añadir el código CSS necesario.
   
   Este código contiene la configuración de nuestro menú (colores, bordes, tamaño,...). Para añadirlo vamos a Personalizar, y luego a Diseño-->Edicion de HTML. Manteniendo desmarcada la opción Expandir plantillas de artilugios, vamos al código y buscamos la siguiente línea:
   

   ]]></b:skin>

   Justo antes de dicha línea añadimos el siguiente código:

   #subnavbar
   {
      width: 100%;                 /* Ancho absoluto de la barra de menu */
      height: 27px;                /* Alto de la barra de menu */
      font-weight:bold;            /* Letras en negrita en la barra de menu */
      color: #FFFFFF;              /* Color de la barra de menu */
      margin: 0px;                 /* margenes exteriores de la barra de menu */
      padding: 0px;                /* margenes interiores de la barra de menu */
      font-family:"Trebuchet MS";  /* Tipo de letra a usar */
   }
   #subnav
   {
      margin: 0px;                 /* margenes exteriores de cada elemento que pertenece al menu */
      padding: 0px;                /* margenes interiores de cada elemento que pertenece al menu */
   }
   #subnav ul
   {
      float: left;                 /* indica que se alinee el conjunto de botones de la barra de menu a la izquierda */ 
      list-style: none;            /* Evita que se utilice en el conunto de botones de la barra de menu las propiedades establecidas por defecto definidas para las listas */ 
      margin: 0px;                 /* margenes exteriores del conjunto de botones de la barra de menu */
      padding: 0px;                /* margenes interiores del conjunto de botones de la barra de menu */
   }
   #subnav li
   {
      float: left;                 /* Indica que se alinee cada botón de la barra de menu a la izquierda (así todos los botones estarán juntos) */ 
      list-style: none;            /* Evita que se utilicen, en cada botón de la barra de menu, las propiedades establecidas por defecto para las listas */ 
      margin: 0px;                 /* margenes exteriores de cada botón de la barra de menu */
      padding: 0px;                /* margenes exteriores de cada botón de la barra de menu */
   }
   #subnav li a, #subnav li a:link, #subnav li a:visited
   {
      color: #FF5555;              /* Color de letras utilizado para cada botón de la barra de menu que posee un enlace */
      display: block;              /* Cada botón de la barra de menu que posee un enlace será tratado como un elemento "de bloque" (y no como elemento "en línea") */
      font-size: 12px;             /* Tamaño de la fuente para cada botón de la barra de menu que posee un enlace */
      margin: 0px 0px 0px 0px;     /* Margenes exteriores para cada botón de la barra de menu que posee un enlace */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón de la barra de menu que posee un enlace */
      border:3px outset $bordercolor;/* Borde para cada botón de la barra de menu que posee un enlace */
      background: $bordercolor;    /* Color de fondo para cada botón de la barra de menu que posee un enlace */
   }
   #subnav li a:hover, #subnav li a:active
   {
      background: #9782FF;         /* Color de fondo para cada botón de la barra de menu que posee un enlace y esté seleccionado */ 
      color: #000000;              /* Color de letras utilizado para cada botón de la barra de menu que posee un enlace y esté seleccionado */
      display: block;              /* Cada botón de la barra de menu que posee un enlace y esté seleccionado será tratado como un elemento "de bloque" (y no como elemento "en línea") */
      text-decoration: none;       /* En cada botón de la barra de menu evita las decoraciones por defecto para enlaces (subrayado del enlace, cambio del color de letra,...)
      margin: 0px 0px 0px 0px;     /* Margenes exteriores para cada botón de la barra de menu que posee un enlace y esté seleccionado */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón de la barra de menu que posee un enlace y esté seleccionado */
   }
   #subnav li ul
   {
      z-index: 9999;               /* Superpone el conjunto de botones desplegables de nivel 1 por encima del menú de nivel 0 (o barra de menú) para que en caso de que se "monte" encima, prevalezca a la vista el menu de menor nivel */
      position: absolute;          /* La capa donde se sitúa el conjunto de botones desplegables de nivel 1 no forma parte del flujo natural de la página web (no modifica la posición del resto de elementos) */ 
      left: -999em;                /* Desplaza el conjunto de botones desplegables de nivel 1 -999 veces el tamaño de la fuente actual hacia la izquierda */
      height: auto;                /* Ajusta el alto del conjunto de botones desplegables de nivel 1 según la cantidad de elementos (botones) que haya en su interior */ 
      width: 180px;                /* Ancho del conjunto de botones desplegables de nivel 1 */
      margin: 0px;                 /* Margenes exteriores para el conjunto de botones desplegables de nivel 1 */
      padding: 0px;                /* Margenes exteriores para el conjunto de botones desplegables de nivel 1 */
   }
   #subnav li ul a
   {
      width: 180px;                /* Ancho del conjunto de botones desplegables de nivel 1 que posee un enlace */
   }
   #subnav li li a, #subnav li li a:link, #subnav li li a:visited
   {
      background: $bordercolor;    /* Color de fondo para cada botón del menu desplegable de nivel 1 que posee un enlace */ 
      width: 180px;                /* Ancho de cada boton del menu desplegable de nivel 1 que posee un enlace */ 
      heigth: 270px;               /* Alto máximo de cada boton del menu desplegable de nivel 1 que posee un enlace */ 
      float: none;                 /* Cada botón del menu despelgable de nivel 1 que posee un enlace se colocará bajo el anterior (no "flota hacia la izquierda") */ 
      margin: 0px;                 /* Margenes exteriores para cada botón del menu desplegable de nivel 1 que posee un enlace */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón del menu desplegable de nivel 1 que posee un enlace */
   }
   #subnav li li a:hover, #subnav li li a:active
   {
      background: #9782FF;         /* Color de fondo para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */ 
      margin: 0px;                 /* Margenes exteriores para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */
   }
   #subnav li ul ul
   {
      margin: -25px 0 0 161px;     /* Margenes exteriores para cada conjunto de botones desplegables de nivel 2 */
   }
   #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul
   {
      left: -999em;                /* Desplaza el conjunto de botones desplegables de nivel 2 y 3 -999 veces el tamaño de la fuente actual hacia la izquierda */
   }
   #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul
   {
      left: auto; 
   }
   #subnav li:hover, #subnav li.sfhover
   {
      position: static;
   }
   

   Si nos fijamos detenidamente en el código añadido, se pueden distinguir los campos en los que se indican colores, bordes, anchos y otras configuraciones a usar. Recomiendo probar a cambiar estas configuraciones cuando se acabe de montar el menú en la web (antes no, o no sabremos que hicimos mal si nos equivocamos).
   
   
2. Añadir el código HTML necesario.
   
   Este código contiene las pestañas y subpestañas que forman nuestro menú (en mi caso: INICIO, MIS ARTICULOS POR CATEGORIAS, Informática, Cosillas de interés para boqueros,...), así como también indica a donde enlazan cada pestaña (o sub-pestaña).
   
   Para añadirlo también vamos a Personalizar, y luego a Diseño-->Edicion de HTML, manteniendo desmarcada la opción Expandir plantillas de artilugios.
   
   Vamos al código y buscamos el lugar donde deseamos incluir el menú. Por ejemplo, para colocarlo justo encima del cuerpo principal del blog (entre la cabecera y los artículos) buscamos la siguiente línea:

   <div id="main-wrapper">

   Y justo antes de dicha línea añadimos el código:

   
   <div id="subnavbar">
      <ul id="subnav">
         <li><a href="http://elblogdeelsant0.blogspot.com/" title="Inicio">INICIO</a></li>
         <li><a href="URL_ENLACE_PESTAÑA1" title="DESCRIPCION_PESTAÑA1">PESTAÑA1</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-1" title="DESCRIPCION_SUB-PESTAÑA1-1">SUB-PESTAÑA1-1</a></li>
               <ul>
                   <li><a href='URL_ENLACE_SUB-PESTAÑA1-1-1' title='DESCRIPCION_SUB-PESTAÑA1-1-1'>SUB-PESTAÑA1-1-1</a></li>
                   <li><a href='URL_ENLACE_SUB-PESTAÑA1-1-2' title='DESCRIPCION_SUB-PESTAÑA1-1-2'>SUB-PESTAÑA1-1-2</a></li>
               </ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-2" title="DESCRIPCION_SUB-PESTAÑA1-2">SUB-PESTAÑA1-2</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-3" title="DESCRIPCION_SUB-PESTAÑA1-3">SUB-PESTAÑA1-3</a></li>
            </ul>
         </li>
         <li><a href="mailto:" title="Enviame un email">CONTACTO</a></li>
         <li><a href="URL_ENLACE_PESTAÑA2" title="DESCRIPCION_PESTAÑA2">PESTAÑA2</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-1" title="DESCRIPCION_SUB-PESTAÑA2-1">SUB-PESTAÑA2-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-2" title="DESCRIPCION_SUB-PESTAÑA2-2">SUB-PESTAÑA2-2</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-3" title="DESCRIPCION_SUB-PESTAÑA2-3">SUB-PESTAÑA2-3</a></li>
            </ul>
         </li>
         <li><a href="URL_ENLACE_PESTAÑA3" title="DESCRIPCION_PESTAÑA3">PESTAÑA3</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA3-1" title="DESCRIPCION_SUB-PESTAÑA3-1">SUB-PESTAÑA3-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA3-2" title="DESCRIPCION_SUB-PESTAÑA3-2">SUB-PESTAÑA3-2</a></li>
            </ul>
         </li>
         <li><a href="URL_ENLACE_PESTAÑA4" title="DESCRIPCION_PESTAÑA4">PESTAÑA4</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA4-1" title="DESCRIPCION_SUB-PESTAÑA4-1">SUB-PESTAÑA4-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA4-2" title="DESCRIPCION_SUB-PESTAÑA4-2">SUB-PESTAÑA4-2</a></li>
            </ul>
         </li>
      </ul>
   </div>

   Este es el código a añadir para el menú, independientemente del lugar donde deseemos situarlo y de la configuración de forma, color, bordes y otros que queramos darle. En dicho código sólo hay que sustituir:
   • cada URL_ENLACE_PESTAÑA por la URL hacia donde deseamos que enlace al pulsar dicha pestaña (o subpestaña). En caso que queramos que una pestaña (o subpestaña) determinada no enlace a ningun sitio, su URL_ENLACE_PESTAÑA correspondiente la dejamos en blanco.
   • cada DESCRIPCION_PESTAÑA por una breve descripción que se mostrará al parar el mouse sobre la pestaña (para las pestañas con subpestañas, al desplegarse éstas automáticamente, el mensaje no será mostrado).
   • cada PESTAÑA por el nombre que queremos que tenga dicha pestaña.
   Además se pueden añadir o eliminar tantas pestañas y subpestañas como deseemos. Tan sólo hay que seguir el patrón del código añadido. Fijaros en como está construido:
   • El contenido de las pestañas que no van a incluir subpestañas, va incluido entre <li> y </li>.
     Por ejemplo:

     <li><a href='http://elblogdeelsant0.blogspot.com/' title='Inicio'>INICIO</a></li>

   • El contenido de la pestaña que incluirá subpestañas irá incluido entre <li> y &l;tul>, a continuación estarán las subpestañas (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> y </li>.
     Por ejemplo:

     <li>
        <a href="" title="">PESTAÑA3</a>
        <ul>
           <li><a href="" title="">SUB-PESTAÑA3</a></li>
           <li><a href="" title="">SUB-PESTAÑA3</a></li>
        </ul>
     </li>
     

3. Rellenar el menú con los campos que deseemos.
   
   Tal y como se indicó en los dos punto anteriores, añadimos las pestañas y subpestañas que deseemos y damos el formato que más nos guste.

Disfrutad del menú.


Salu2,
elSant0

Quitar MOSTRAR TODAS LAS ENTRADAS de Blogger

Por defecto, los blog de Blogger muestran un mensaje bajo las entradas que la verdad, no es nada estético.Por ese motivo decidí quitarlo de mi blog. El mensaje es ese que dice "Mostrar todas las Entradas".

Para hacerlo la solución es tan simple como entrar en Personalizar e ir a Diseño-->Edición de Html, una vez allí marcar la casilla Expandir plantillas de artilugios y, en el código, se busca la siguiente línea:

<b:include data='top' name='status-message'/>

Ésta se cambia por:

<!--<b:include data='top' name='status-message'/>-->

Y ya está, adiós al dichoso mensajito.


Salu2,
elSant0

Cambiar el favicon de la web

Para todos aquellos que no sepan que es un favicon, decir que es ese icono chiquitito que aparece en la barra de direcciones del navegador junto a la URL de la web.

Como Blogger me impuso uno con su logo y no me gustaba me dediqué a fabricarme mi propio favicon e insertarlo en el blog.

Para hacerlo es muy simple. Básicamente seguí 3 pasos:

1.- Crear (o buscar) la imagen (o animación) que queremos usar.

Se debe tener en cuenta que la imagen a usar se mostrará siempre en 16x16 pixels, por lo que utilizar una de un tamaño mayor sólo servirá para ralentizar la carga. Además es de importancia escoger una imagen simple, ya que con ese reducido tamaño es difícil conseguir nítidez.
También se debe atender a la extensión del fichero, ya que, aunque los navegadores van añadiendo soporte para nuevos tipos (en el momento que escribo este artículo ya hay soporte para .gif y .png), de momento el más estandarizado es el fichero de extensión .ico.
Cuando creamos nuestra imagen es difícil trabajar a ese reducido tamaño, por lo que la opción más habitual es tomar una imagen mayor y adaptarla. Para no complicarnos excesivamente hay diversas web que se ocupan de "fabricar" nuestro favicon a partir de una imagen dada. Algunos ejemplos son: http://tools.dynamicdrive.com/favicon/ o http://www.genfavicon.com/es/, donde se introduce la ruta de la imagen original (situada en nuestra máquina o en internet) y nos devuelve el icono, permitiendo descargarlo a nuestro ordenador.

2.- Colocar el favicon en un lugar accesible para nuestra web.

En muchas ocasiones nos encontramos con que no podemos subir el "iconito" a nuestra web (Blogger, por ejemplo, no permite subir archivos .ico); y lógicamente desde nuestro ordenador no está accesible. Si no tenemos este problema tomaremos la dirección URL de la imagen (o animación) que queremos usar y pasamos al punto siguiente.
En caso de que necesitemos subir nuestro icono a un lugar accesible podemos hacer uso de otra web que nos brinda el servicio gratuitamente (sólo para ficheros .ico). Esa web es http://www.iconj.com/, donde tenemos todo lo que necesitamos. Primero debemos registrarnos (fácil, gratis y rápido). Tras hacerlo recibiremos un correo, hacemos click en el enlace que nos ponen en el mail y ya está. Ahora basta con subir nuestro favicon desde la pestaña My account. Una vez subido le pondremos nombre y lo dejaremos marcado para que se añada a tu lista de favoritos y que se establezca como favicon.

3.- Añadir el favicon a nuestra web.

Por último sólo queda añadir el favicon a nuestro blog. Para ello nos vamos a Personalizar y luego Diseño-->Edicion de HTML. En el código buscamos la siguiente línea:

< title> < data:blog.pageTitle/> </title>

Y justo antes insertamos ésta:

< href="'URL_DE_TU_FAVICON'" rel="'shortcut'" type="'image/x-icon'/"> 

Donde deberás sustituir URL_DE_TU_FAVICON por la dirección de tu propio favicon.
Podemos probarlo antes de guardar mediante Vista Previa y, si nos gusta el resultado guardaremos los cambios. Ya tenemos nuestro favicon personalizado.


Salu2,
elSant0

Configurar formato de las áreas del blog (cuerpo, barra lateral, entradas, cabecera, pié,...)

Otro de los aspectos a personalizar en un blog son la posición, distribución y aspecto de cada una de sus áreas. Las áreas de un blog se dividen de la siguiente forma:

• Cabecera o Header: Suele incluir el título del blog.
• Pié o Footer: Está al final y suele incluir datos menos relevantes para el lector (estadísticas, año de creación, créditos,...).
• Cuerpo o Main: Contiene los artículos o entradas del blog. Cada entrada a su vez se divide en título, cuerpo y pié (title, body y footer). También puede contener feed-links y otra información.
• Barra lateral o Sidebar: Son barras incluidas al lado del cuerpo. Se utilizan para añadir enlaces de interes, información extra del blog,... Cada Sidebar se divide en uno o varios widget (o herramientas).
• Envoltura o Outer: Es la envoltura que rodea a todo el contenido del blog (es decir, al resto de áreas).

En Blogger y otros servicios similares te ofrecen una manera simple y fácil de configurar ésto, pero es posible que no te conformes con esa configuración básica que ofrecen y quieras dar un toque más personal. Para ello vamos a Personalizar y entramos en Diseño-->Edición de HTML. En el código de nuestra plantilla buscamos el campo a configurar según la imagen que muestro a continuación:

• #header-wrapper. Configura la cabecera. Es posible modificar cosas como el borde, el ancho, los márgenes, colores,... Un ejemplo podría ser:

  #header-wrapper {
  width: 920px;
  margin:0 auto 10px;
  border: 1px solid $bordercolor;
  background-color: #E1E95B;
  }

• #footer (en la imagen aparece como #footer-wrapper).Corresponde al pié del blog. Un ejemplo podría ser:

  #footer {
  width: 920px;
  clear: both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
  }

• #main-wrapper. Se refiere al cuerpo del blog. Se puede configurar como un todo y, además, se puede dar un formato distinto a cada una de sus partes, las cuales son .post (se refiere a los artículos), .post-title (título de los artículos), .post-body (cuerpo de los artículos), .post-footer (pié de los artículos), .feed-links (feed del blog), #blog-pager (info adicional de cada artículo, como los comentarios). SSe les puede dar bordes, colores,... y también en el caso de #main-wrapper se puede alinear a la derecha o izquierda de la Sidebar (eso sí, recuerda cambiar también la posición de la Sidebar para que se coloque al lado opuesto). Ejemplos para cada uno de estos campos son:

  #main-wrapper {
  width: 500px;
  float: left;
  margin-left:0px;
  padding:15px;
  border: double 0.4em $bordercolor;
  background-color: #E1E95B;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  opacity:0.85;
  -khtlm-opacity:0.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 */
  }
  ...
  .post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
  ...
  .post-body {
  margin:0 0 .75em;
  line-height:1.6em;
  }
  ...
  .post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
  }
  ...
  .feed-links {
  clear: both;
  line-height: 2.5em;
  }
  ...
  #blog-pager {
  text-align: center;
  }
  

• #sidebar-wrapper. Se refiere a la sidebar. Se puede alinear a ambos lados, añadir un borde, añadir colores,... A su vez, contiene campos .widget los cuales también se pueden configurar por separado. Por defecto hay una sóla Sidebar, aunque es posible añadir fácilmente más. Un ejemplo de configuración de Sidebar podría ser:

  #sidebar-wrapper {
  width: 140px;
  float: right;
  padding:10px;
  border: double 0.4em $bordercolor;
  background-color: #E1E95B;
  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 */
  }

• #outer-wrapper. Con esto podemos configurar toda la envoltura del blog. Se debe tener en cuenta que la anchura debe ser mayor que lo que contiene; por ejemplo, si el Main mide 600px de ancho y la Sidebar 200px, y quieres un margen entre ambos de 10px, entonces el Out debe medir al menos 600+200+10=810px (sin incluir sus bordes). Si no se cumple dicha regla, la Sidebar se desplazará hacia abajo por falta de espacio. También se ha de respetar la alineación, si la sidebar está alineada a la derecha el Main debe alinearse a la izquierda (o todo se verá pegado al lado derecho). Un ejemplo de configuración sería:

  #outer-wrapper {
  width: 920px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

  Otra cosa a tener en cuenta de este campo es que suele centrarse en la página. Como quizás no deseemos que esto sea así y queramos desplazarlo todo a un lado u otro (en mi caso a la izquierda), vamos a ver como hacerlo. Para ello buscamos en el código de nuestra plantilla algo parecido a esto:

  body {
  background:$bgcolor;
  margin:0;

  Y añadimos a continuación la siguiente línea, que indica que se desplace 140 pixels desde la derecha, o sea, hacia la izquierda (también podíamos haber usado el desplazamiento inverso con "padding-left"):

  padding-right:140px;

Veamos ahora los principales parámetros y configuraciones a cambiar, añadir o eliminar:

• Bordes --> Cualquiera de las áreas indicadas en la imagen anterior puede tener su propio borde. Además podemos añadir el borde completo o sólo a algunos de  sus lados (border, border-right, border-left, border-top, border-bottom). Se puede configurar el grosor (en px), el formato (por ejemplo: inset, outset, rifge, groove, solid, double, dotted, dashed,...) y el color (mediante un código hexadecimal, una variable,...). Un ejemplo de la línea a añadir para incluir un borde podría ser:

  border: double 0.4em $bordercolor;

• Anchos --> Si no se incluye un valor, por defecto tomará el máximo ancho posible. En muchos casos es lo más estético, pero en otros produce desplazamientos extraños. Para indicar un ancho se hace de la siguiente manera:

  width: 920px; 

• Alineados --> Se puede alinear un área completa a izquierda o a derecha. Para ello se utiliza el campo "float". En mi caso alineo el Main a la izquierda y el Sidebar a la derecha. Por ejemplo:

  float: right;

• Distancia entre bordes y elementos interiores --> Esto se configura mediante la instruccion "padding" y se indica en pixels. También es posible configurar todos los bordes de golpe o cada uno por separado (padding, padding-right, padding-left, padding-top, padding-bottom). Un ejemplo sería:

  padding:10px;

• Otras opciones --> Por añadir algo, "line-height" indica la distancia entre líneas de texto, "text-transform" que convierte los textos incluidos allí a mayúsculas, minúsculas,... (uppercase,lowercase,...)... Incluso se puede poner un filtro de opacidad si queremos que sea un poco transparente (ojo, en el filtro que incluyo en el siguiente ejemplo la transparencia afecta a todos los elementos, incluidas letras e imágenes). Algunos ejemplos serían:

  line-height: 1.6em;
  text-transform:uppercase;
  filter:alpha(opacity=85);
  -moz-opacity:0.85;
  opacity:0.85;
  -khtlm-opacity:0.85;

Con todos estos ajustes básicos se puede conseguir cambiar la apariencia estándar y uniforme del blog y así diferenciarlo del resto. Decir que aquí sólo se explican unos cuentos aspectos y parámetros del CSS de nuestro blog pero que es posible usar muchísimos más, todo depende del tiempo y vuestra inspiración.


Salu2,
elSant0

Cambiar el fondo al blog

El fondo marca la principal diferencia con otros blogs al primer golpe de vista. Se pueden poner fondos animados (contrólate, excesivas animaciones relentizan la carga de la web), una imagen que se repita, una imagen grande que lo cubra todo, una imagen pequeña posicionada en el lugar que elijas, se pueden poner imagenes o cambiar simplemente el color... En fin, se puede hacer lo que quieras.

Para ello entramos en Personalizar y vamos a Diseño->Edición de HTML. Allí encontramos el código de la plantilla de nuestro blog. Dentro del mismo buscamos la siguiente línea:

body {

Y a continuación de esta línea (hasta que se cierre la llave abierta) podemos encontrar algo parecido a esto (podemos encontrar las mismas líneas u otras parecidas; en caso contrario es posible añadirlas):

background-color: #EBEAEC;
background-image: url(http://www.elblogdeelsant0.blogspot.com/fondo.png);
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
border-color: #ffffff;
border-width:0px;
border-style: solid;

Se pueden añadir o eliminar líneas, según la configuración q se desee. A continuación explico para que sirven algunas de las que escribí:

background-color: #EBEAEC;
- Indica el color del fondo en formato hexadecimal.
background-image: url(http://www.elblogdeelsant0.blogspot.com/fondo.png);
- Indica la URL de la imagen que queremos añadir.
background-attachment: fixed;
- Indica si deseamos que el fondo se desplace al movernos por el blog, o por el contrario deseamos q permanezca fijo. Con "fixed" permanece fijo cuando bajamos la página.
background-position: bottom left;
- Indica la posición donde queremos fijar la imagen de fondo (sólo en caso de que sea una imagen pequeña, sino ocupará todo el fondo). Algunos ejemplos de posición son: "top right" (arriba a la derecha), "top left" (arriba a la izquierda), "bottom right" (abajo derecha), "center" (en el centro).
background-repeat: no-repeat;
- Indica si la imagen del fondo se va a repetir (en forma de mosaico, por ejemplo) o no. Para ello se usa "no-repeat" o "repeat".

Estas creo que son las configuraciones más usadas. Si alguien desea algo diferente puede escribirme y, si es posible, la añadiré con mucho gusto.


Salu2,
elSant0

Añadir pestañas al blog de Blogger

Para añadir una barra superior con botones que ordene nuestros artículos según el tema sólo hay que seguir los siguientes pasos y consideraciones:
NOTA: Yo ya no utilizo dicha barra, uso un menú desplegable, por lo que no podéis tomar mi blog de ejemplo para saber como quedaría.

CONSIDERACIONES PREVIAS:

• Cada pestaña corresponde a cada una de las "etiquetas" que posee el blog. Si en el blog dichas etiquetas están siendo usadas para otro fin se recomienda no añadir esta barra de botones.
  NOTA: Para añadir una etiqueta basta con rellenar, cuando estamos editando o creando una entrada, el campo llamado Etiquetas de esta entrada con el nombre de la entrada a crear.
  
• En la barra se añadirá por defecto una pestaña "Inicio" que enlazará con la página de inicio del blog. En cada una de las demás pestañas se incluirán aquellas entradas que fueron etiquetadas con el nombre de dicha pestaña. Se recomienda etiquetar varias entradas previamente para que la barra sea mostrada correctamente.
  

CREACIÓN DE LA BARRA DE PESTAÑAS:

1. Añadimos un nuevo Gadget:
   
   Entramos a Personalizar el blog y vamos a Diseño-->Elementos de la página.
   Una vez allí, damos a Añadir un gadget en la columna auxiliar.
   Se abrirá otra ventana del explorador ofreciendo diversos gadgets; elegimos el llamado Etiquetas.
   Guardamos cambios.
   
   
2. Activamos la opción de despliegue:
   
   Ir a Diseño-->Edición de HTML.
   Marcamos la opción Expandir plantillas de artilugios, situada en la parte superior derecha del cuadro del código HTML.
   Bucamos dentro del código la línea siguiente:
   

   <b:section class="header" id="header" maxwidgets="1" showaddelement="no"></b:section>

   Y la sustituimos por:
   

   <b:section class="header" id="header" maxwidgets="2" showaddelement="yes"></b:section>

   
   
3. Añadimos la configuración al CSS de la plantilla del blog:
   
   Bucamos dentro del código la línea siguiente:
   

   ]]>

   Y añadimos, justo antes, el código correspondiente según el diseño de botones o pestañas que elijamos. En mi caso el código que añadí fue el siguiente (para obtener un fichero con otros diseños podemos descargarlo de este enlace):
   

   /*- Menu Tabs F-------------PRINCIPIO---------- */
   #tabsF
   {
      float:left;
      width:100%;
      background:#efefef;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #666;
   }
   #tabsF ul
   {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
   }
   #tabsF li
   {
      display:inline;
      margin:0;
      padding:0;
   }
   #tabsF a
   {
      float:left;
      background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
   }
   #tabsF a span
   {
      float:left
      display:block;
      background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
   }
   /* Commented Backslash Hack hides rule from IE5-Mac \*/
   #tabsF a span { float:none; }
   /* End IE5-Mac hack *
   #tabsF a:hover span { color:#FFF; }
   #tabsF a:hover { background-position:0% -42px; }
   #tabsF a:hover span { background-position:100% -42px; }
   /*- Menu Tabs F-----------FIN------------------ */

   
   
4. Añadimos el código necesario a la plantilla del blog:
   
   Buscamos la siguiente porción de codigo (podría variar un poco, pero las primeras y últimas líneas sí son iguales):
   

   <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
   <b:if cond='data:display == "list"'>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name&/gt;</a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   <b:else/>
   <b:loop values='data:labels' var='label'>
   <span expr:class='"label-size label-size-" + data:label.cssSize'>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a/gt;>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </span>
   </b:loop>
   </b:if>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   

   Y lo sustituimos por el siguiente:
   

   /* -------Codigo añadido para las pestañas-----PRINCIPIO--- */
   <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
   <b:includable id='main'>
   <div id='tabsF'>
   <ul>
   <li><a expr:href='data:blog.homepageUrl'><span>INICIO</span></a></li>
   <b:loop values='data:labels' var='label'>
   <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
   </b:loop>
   </ul>
   <!--<b:include name='quickedit'/>-->
   </div>
   </b:includable>
   </b:widget>
   /* -------Codigo añadido para las pestañas-----FIN--- */
   

   Guardamos la plantilla.
   
   
5. Colocamos el gadget (osea la barra de pestañas) donde deseemos en el blog:
   
   Volvemos a Diseño-->Elementos de la página y colocamos la barra de botones bajo el título (o donde deseemos que permanezca realmente).
   
   Guardamos y ya tenemos nuestra flamante barrita de accesos.
   

Salu2,
elSant0

Como "tunear" un blog

Desde los comienzos del blog una de mis prioridades es "tunear" la funcionalidad y apariencia del mismo con el fin de que mantenga una interfaz práctica y ordenada para todo aquel que me visite y al mismo tiempo darle un toque personal que lo identifique.

Puesto que la mayoría de servidores blogueros gratuitos (Blogger, WordPress,... ) por defecto hoy (ver fecha del post) apenas ofrecen un puñado de funcionalidades realmente prácticas (justo y suficiente para iniciar y mantener un blog sin excesivas complicaciones), he ido buscando la manera de añadir nuevas características que personalicen de verdad la bitácora.

Para todo aquel que esté interesado en configurar en su blog alguna de las funcionalidades o decoraciones incluidas aquí, os dejo una lista (con tutoriales enlazados en las que considero oportuno) de las que he ido probando a lo largo de la vida del blog:

• Elección de skin, fuentes, colores... --> Eso es lo primero que hice, por algo hay que empezar. La verdad, dediqué un buen rato a pasear por todas las opciones que Blogger me ofrece y seguiré haciéndolo de vez en cuando.
  
• Añadir pestañas al blog de Blogger --> Una de las primeras funcionalidades que añadí (pues Blogger no lo incluye por defecto) fué la barra superior que uso para ordenar los artículos según a que tema pertenecen [SUSTITUIDA POR LA BARRA DE MENÚS].
• Cambiar el fondo del blog --> Para mi uno de los toques de imagen más personales que diferencia unas webs de otras.
• Configurar el cuerpo, la barra lateral, la cabecera y el pié del blog --> Como no me terminaban de gustar las opciones que Blogger me daba pasé un ratillo cambiando el aspecto de cada una de las áreas a mano (añadiendo bordes, cambiando tamaños,...).
  
• Añadir o cambiar el favicon del blog --> Para todos los que no lo sepan el favicon es ese dibujito que aparece en la barra de direcciones del navegador, junto a la URL.
  
• Quitar MOSTRAR TODAS LAS ENTRADAS de Blogger --> Si sois usuarios de Blogger es posible que ya os hayáis percatado de ese antiestético mensajito que muestra en numerosas ocasiones.
• Quitar espacio sobrante bajo los comentarios--> También para los usuarios de Blogger, os daréis cuenta de que bajo el cuadro para añadir comentarios queda un gran hueco vacío.
• Añadir un menú con submenús --> como la barra de pestañas anterior no me gustaba me las apañé para añadir una barra más interactiva y práctica. 
• Ocultar o eliminar la barra de Blogger -->  Para mi era un poco antiestética y no la veía útil, asi que la eliminé, pero recordad que Blogger es quien os brinda la oportunidad de alojar vuestro blog con coste 0; ser solidarios cuesta poco.
• Quitar el mensaje de "Suscribirse a: entradas (Atom)" --> Para mi también algo antiestético.
• Modificar la manera en que es mostrada la fecha en los post --> Por darle un toque un poco más personal y recolocarla junto al título de los post.
  
• Añadir la funcionalidad de poner cuadros de contenido en las entradas --> Sobre todo lo uso para incrustar código.
• Sustituir texto de Entradas Recientes/Antiguas e Inicio por imágenes --> Da una sensación más interactiva.
• Añadir "Post Relacionados" al final de cada entrada --> Para ofrecer a las visitas otos temas que le puedan interesar.
• Texto en movimiento en la barra de titulo de la web
• Añadir iconos de traducción a nuestra web --> Con el fin de que el blog sea accesible a más gente.
• Añadir un contador y un localizador de visitas --> Es una de las cosas que más me animan a seguir ;P .
• Cambiar el formato de los comentarios --> El aspecto por defecto es bastante feo. Mejor ponerles color de fondo (diferente para los pares e impares), numerarlos,...
  
• Añadir un gadget de "últimos comentarios" --> Cuando empecéis a ir acumulando comentarios entenderéis su utilidad :P . Yo no estoy utilizando el que Blogger trae por defecto porque no es nada configurable. Uso un script que encontré por la red.
• Destacar los comentarios propios --> Para que se distingan del resto.
• Añadir enlaces a redes sociales al final de cada post --> Es una nueva opción que ofrece Blogger. Sirve para ofrecer a los lectores la facilidad de enlazar los post desde sus páginas personales de redes sociales.
• Poner botón "Ocultar menú lateral" -->  Para dar la opción de ocultar la sidebar cuando se están leyendo artículos muy largos. Así se puede aprovechar mejor el tamaño de pantalla.
  
• Poner un resumen de cada post y el botón "Leer más" en la página de inicio -> Para forzar a pasar por la págian individual del post a quien quiere leerlo.
• Personalizar los mensajes que indican el número de comentarios -> Para incitar a comentar.
• Añadir botones "Follow" para redes sociales -> Paraconseguir mayor afluencia de visitas.
• (PENDIENTE DE AÑADIR MÁS)

Salu2,
elSant0

Arrancamos...

Buenas,

Este blog nace tras percatarme de las numerosas ocasiones en las que siento la necesidad de compartir mis rayaduras mentales y otros temas a los que mi extensa curiosidad me llevan. Un lugar donde exponer síntesis de la información en la que me empapo cuando algo me interesa; un sitio donde compartir mis soluciones para los problemas que surgen en el día a día; y como no, un rincón para desahogarme cuando mis reflexiones se amontonan.

Para los que se pregunten quien soy, debo decir que soy reacio a compartir información relacionada con mi identidad real dentro de este mundo virtual  llamado internet. Por ello hago uso del nombre "elSant0", aludiendo al personaje de Leslie Charteris llamado Simon Templar (quienes lo conozcan entenderán porqué). Lo que sí comparto en esta bitácora son mis intereses, que sí afectan directamente a cada uno de mis artículos. Entre ellos se encuentran:

• La informática, además de todas las ampollas y nuevos debates morales, sociales y económicos que está levantando.
• Las ciencias, como la astronomía o la física, y todas las incertidumbres que presentan (teorías y leyes físicas sin demostrar, vida extraterrestre, ...).
• La psicología y todo aquello que afecte a los procesos mentales.
• La música, en todos sus campos y colores.
• Y por supuesto, todos los ingredientes e integrantes que afectan a mi vida.

Después de todo esto me gustaría dar la bienvenida a todos aquellos que decidan acompañarme en esta nueva experiencia que comienza para mi. Espero que con mi constancia y vuestras ayuda en forma de comentarios y sugerencias llegue a convertirse en un punto de referencia donde siempre haya algo interesante que encontrar.

Salu2,
elSant0