Menú vertical desplegable sólo con CSS

Este es un menú vertical creado por SOHtanaka; muy simple de armar y no necesita ningún script. Ideal para colocar en una sidebar pero, puede adaptarse para utilizarlo en cualquier parte.

• Item 1Duis diam ligula, luctus nec varius eu, interdum eget turpis. Ut convallis tempor tellus, sed tincidunt velit feugiat quis. Vivamus placerat ligula eu metus molestie tincidunt. Sed tempus porttitor eros vitae vehicula.
• Item 2Suspendisse tristique mauris vel odio pulvinar sit amet consectetur est bibendum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien at tellus euismod feugiat.
• Item 3Morbi porttitor tristique lacus a malesuada. Morbi vel porta metus. Nunc laoreet libero eget erat blandit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer quis nulla nec elit dignissim molestie sit amet vel quam?
• Item 4Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
• Item 5
• Item 6Morbi pretium tincidunt bibendum. Nam ac viverra ipsum. Aenean rutrum lorem sit amet metus.
• Item 7Blandit turpis patria euismod at iaceo appellatio, demoveo esse.

El HTML es similar a casi todos, una lista ordenada con enlaces donde, en una etiqueta SPAN, agregaremos la parte oculta que se expandirá al pasar el cursor por encima:

<ul class="sidenav">
  <li>
    <a href="#">Titulo 1
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  <li>
    <a href="#">Titulo 2
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  .......
</ul>

Y el CSS que ponemos en alguna parte antes de </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>

Temas varios, respuestas sueltas, sigo pensando en voz alta.

Primero que nada, cuidado. El home de cualquier sitio es clave para la indexación, no es un dibujito lindo, es la base de todo. Por ejemplo, es perfectamente posible poner una imagen con un botón para entrar pero, al no haber textos, al no haber contenido, al no haber enlaces ¿qué pasará? ¿será ignorado por los buscadores?

La página de inicio es la página con más autoridad de nuestro sitio y si bien no debe tratar de mostrar TODO, tampoco debe mostrar NADA .

Mucho cuidado con los blogs que usan JavaScript para generar resúmenes, los buscadores no leen JavaScript ni lo que este lenguaje genera. Mucho cuidado con Flash, Google dice que los indexa pero no sé hasta que punto ni si eso es suficiente; nadie sabe si los archivos SWF serán tratados igual que los archivos HTML.

¿Quieren saber que leen los buscadores? Simplemente, deshabiliten JavaScript del navegador y si usan Firefox, vayan a Ver | Estilo de la Página marquen Sin Estilo; eso les dará una idea de lo que leen los motores de búsqueda cuando acceden a nuestro sitio.

No estoy muy seguro que una página de inicio sea algo que distinga un sitio profesional de otro. Por el contrario, en general, esas páginas donde debo entrar para entrar, me molestan porque me obligan a hacer algo que ya había hecho; si ya entré ¿para que debo abrir una segunda puerta? ¿Han visto esos sitios en Flash a donde suele verse un SKIP INTRO? ¿Cuánta gente hace click ahí? Yo, siempre.

Algo me queda rondando en la cabeza y es personal y muy subjetivo: eso de "profesional" es una palabra que jamás me ha gustado.

En realidad, no tanto porque no sé muy bien qué quiere decir sino porque es un calificativo que suele utilizarse para descalificar. Si algo es "profesional" significa que algo "no es profesional" y eso puede ser totalmente cierto, excepto que quien califica suele ser siempre alguien que se auto-denomina "profesional" y nos mira desde un pedestal que él mismo construyó.

Yo no creo en los diseños que pretenden ser lo que no son, prefiero el criterio de: "si no se puede ocultar, mejor muéstralo y destácalo".

Tampoco creo que los usuarios estemos atentos a esas cosas; visitamos sitios porque nos parecen lindos, útiles o por cualquier otra razón y nadie en su sano juicio elige sitios por la plataforma en que están alojados, creo que la inmensa mayoría de quienes navegan por internet desconocen esos detalles y no les importa en absoluto. Los usuarios, los usuarios reales de la web, jamás han tenido un blog, sólo navegan, miran y eligen.

Puede ser que una página de inicio sea interesante y puede ser que sólo sea una molestia.

Todo es absolutamente subjetivo, absolutamente personal, absolutamente discutible y en esto no hay verdades absolutas, por eso descreo de palabras como profesional y sí creo que un blog es un blog ... porque la mona, aunque se disfrace de seda, sigue siendo mona.

¿Ven? Para esto sirve un blog, para hablarse a uno mismo.

La cuestión que plantea Miguel es: "quiero que cuando entre a mi blog se muestre una página estática". De alguna manera, k_nelita preguntaba algo similar hace unos días y parecería que es algo que muchos desean hacer, tener un blog que no parezca un blog.

Esto no es fácil de responder porque se mezclan cuestiones subjetivas y objetivas pero, tratemos de pensar en voz alta a ver a dónde llegamos.

Lo primero que se me ocurre es decir que un blog tiene una particularidad que lo hace diferente de otro tipo de sitio. Es una lista de entradas creadas de manera dinámica y ordenadas cronológicamente de tal modo que la más reciente aparezca primero. Cuando entramos en el home, sea este un dominio propio o un subdominio de blogspot, lo que se muestra es justamente eso, las últimas entradas publicadas con un diseño que es lo que genera la plantilla que utilizamos.

Desde el punto de vista técnico es muy simple redirigir una página a otra. Redirigir significa que un visitante entra en una dirección URL y automáticamente, el navegador nos lleva a otra con o sin advertencias de por medio. Pero, que sea simple no significa que sea una buena idea ya que las redirecciones no son bien vistas ni por los usuarios ni por los motores de búsqueda. Nosotros, los usuarios, desconfiamos de eso y a veces nos asustamos; los buscadores "sienten" lo mismo y eso está bien ya que ni los unos ni los otros podemos saber de antemano si ese redireccionamiento está hecho de buena fe o no.

Repito lo dicho en otra entrada:

... a Google no le gustan las redirecciones hechas desde una página ya sea usando JavaScript o etiquetas META. Los que saben de estas cosas dicen que sólo acepta dos formas válidas: las llamadas redirecciones 301 o las realizadas utilizando el .htaccess. En ambos casos, la "página vieja" (origen) pasa a ser la "página nueva" (destino); se va directo a la página destino sin cargar la página origen. Esto es lo adecuado cuando nos mudamos de dirección. Por ejemplo, cuando se compra un dominio, normalmente hay una opción de redirección y esta se hace desde el lado del servidor (desde el nuevo dominio) y entonces Google la acepta, obedece, sigue los enlaces e indexa las páginas de origen y destino con el mismo contenido, pero sin sancionarlas.

Así, que, desde lo subjetivo, redirigir una página de Blogger a otra es una mala idea porque no tenemos acceso al servidor y por lo tanto, hay que buscar otras alternativas. Las páginas estáticas no estan pensadas para eso sino como páginas accesorias o secundarias y, en lo concreto, son muy similares a una entrada.

Entonces, hay que pensar en otra cosa y aqui las posibilidades son varias y dependerán del concepto de sitio que nos interese tener. Lo más simple es utilizar una entrada con una fecha ridículamente alta, publicarla normalmente y luego cambiar la fecha para que apunte a un año exótico. Si indicamos en la Configuración que sólo se muestre una entrada por página, nuestro home mostrará siempre la misma entrada y será perfectamente navegable. Con CSS y códigos condicionales, podemos personalizar esa entrada para que parezca lo que no es, quitando fechas, comentarios o lo que se nos de la gana.

Otra alternativa es condicionar toda nuestra plantilla y agregar el código HTML de nuestra página home personal, haciendo que el blog no se vea. Es sencillo; condicionamos TODO:

<body>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
... aquí debería estar el código HTML de nuestro home ...
<b:else/>
... aquí dejamos todo tal como está ...
</b:if>
</body>

El problema de ese tipo de esquema que es perfectamente aceptable, es que ese home personal deberá contemplar la manera de "entrar al blog" en si mismo; debería tener alguna clase de enlace o la lista de archivos o de etiquetas ... algo ... cualquier cosa que nos permita navegar el sitio y además, que permita que sea indexado correctamente.

Una alternativa que también tiene variantes es usar el mismo criterio pero, en lugar de "eliminar" el blog de nuestro home como en el caso anterior, lo que podemos hacer es "ocultarlo"; de ese modo, seguirá estando allí, será indexado y podríamos permutar entre visible y no visible con un solo click.

Todo dependerá de necesidades personales. En este ejemplo, lo que haré será ocultar todo pero, bien podría dejarse el header o la sidebar o el footer.

Como siempre, voy a partir de una plantilla mínima y allí, sin expandir nada para que el código sea corto, agregaré condicionales:

<body>

<!-- esto será lo que mostrará el home del blog -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='homepage' style='display:block;'>
<div> ....... cualquier contenido ....... </div>
.......
.......
.......
<a href='javascript:togglehome();'>entrar al blog</a>
</div>
</b:if>

<!-- de aquí en adelante, todo queda igual -->
<div id='outer-wrapper' style='display:none;'>
.......
.......
.......
</div>

<!-- justo al final, coloco un estilo para poder usar la ventana de diseño de manera normal -->
<style>
body#layout #homepage {display:none !important;}
body#layout #outer-wrapper {display:block !important;}
</style>

</body>

Ahora, necesitaría agregar el CSS y una pequeña función de JavaScript antes de </head>:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- el blog es invisible en el home -->
<style type='text/css'>
/* ocultamos el blog */
#outer-wrapper { display:none; }
/* mostramos nuestro home personal con cualquier diseño */
#homepage {
display: block;
margin: 10px auto;
padding: 0;
width:660px;
}
#homepage div {
background-color: #EEE;
border: 2px solid #DDD;
font-family: Lucida Grande;
font-size: 60px;
letter-spacing: -2px;
padding: 30px;
text-align: center;
}
/* el enlace para "entrar" al blog */
#homepage a { ....... }
#homepage a:hover { ....... }
</style>
<script type='text/javascript'>
//<![CDATA[
// esta función, permuta los divs
function togglehome(){
var elHome = document.getElementById('homepage');
var elBlog = document.getElementById('outer-wrapper');
if(elHome.style.display == 'block') {
elHome.style.display = 'none';
elBlog.style.display = 'block';
} else {
elBlog.style.display = 'none';
elHome.style.display = 'block';
}
}
//]]>
</script>
<b:else/>
<!-- el blog es visible en cualquier página que no sea el home -->
<style type='text/css'>
#outer-wrapper { display: block !important; }
</style>
</b:if>

Por defecto, en Configuración | Formato veremos que tenemos definido algo así:

Convertir saltos de línea Sí No
Si seleccionas "Sí", los retornos forzados únicos introducidos en el Editor de entradas se sustituirán por etiquetas <br /> únicas en tu blog, y los retornos forzados dobles se sustituirán por dos etiquetas (<br /><br />).

Esto, hace que escribir en el editor de entradas sea sencillo; ponemos:

Este es un párrafo ...
... y este es otro ....

y veremos que al publicar la entrada, una línea está debajo de la otra.

Es lo que pasa en Blogger y también en al mayoría de los servicios de este tipo. Es obvio que eso ayuda pero, para quién no está informado de cómo funcionan las páginas webs, puede implicar problemas cuando se intentan hacer cosas diferentes o escribir código HTML de manera directa.

Lo que debemos entender es que los navegadores son bobos porque las computadoras son bobas y sólo hacen lo que nosotros les decimos que hagan así que si queremos que dos párrafos estén en dos líneas diferentes, en realidad, debemos indicárselo explícitamente y Blogger, lo que hace es simplificarnos la tarea, agregando el código extra necesario ya que para que veamos esos dos párrafos anteriores, en realidad, deberíamos escribir lo siguiente:

Este es un párrafo ...<br/>... y este es otro ....

que es lo que veremos si miramos el código fuente de nuestro sitio.

Como decía, el problema surge cuando ponemos otras cosas y escribimos etiquetas en diferentes líneas, allí se agregarán etiquetas <br/> extras, dejando líneas en blanco indeseadas. El caso más evidente son las tablas pero también ocurre con listas y con cualquier otra etiqueta:

<div>este es el párrafo anterior a la lista ...</div>
<ul>
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.

Como se ve, entre los párrafos y los items de la lista se han generado espacios que no son otra cosa que etiquetas <br/> ya que cada item está escrito en una línea diferente. Para eñimianlos y que quede "normal", deberíamos escribir todo eso en una sola:

<div>este es el párrafo anterior a la lista ...</div>
<ul><li>item UNO</li><li>item DOS</li><li>item TRES</li><li>item CUATRO</li></ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO
• item DOS
• item TRES
• item CUATRO

... y este es el párrafo siguiente.

Esto pasará con cualquier código y de allí que muchas veces se diga "escribir todo en una sola línea", justamente, para evitar esos espacios indeseados que incluso, pueden hacer que ciertas cosas no funcionen. Por ejemplo, si usamos la etiqueta style o la etiqueta script en una entrada y escribimos en líneas separadas, no funcionarán en absoluto.

Tanto en el nuevo modelo de editor como en el que está en Blogger Draft, si desplegamos las Opciones de entrada veremos una alternativa que nos permite definir si vamos a utilizar esa configuración en cada post en particular:

Editar los saltos de línea de HTML
Pulsar "Intro" para los saltos de línea
Utilizar etiquetas <br />

Pero también podemos hacerlo de otro modo, creando alguna clase CSS que agregamos a nuestra plantilla y utilizándola para identificar sectores donde no queremos que Blogger inserte saltos de línea automáticos. Le damos un nombre cualquiera y simplemente, le decimos que no los muestre:

.noBR br {display:none;}

Con eso, podríamos escribir algo así:

<div>este es el párrafo anterior a la lista ...</div>
<ul class="noBR">
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

Y los saltos de línea de la lista serían ignorados:

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.

New Google Icons
	Contiene un surtido de íconos en diferentes formatos y tamaños.descargar

Oled Social Icons by arrioch
	Contiene 21 íconos de 256x256, en formato PNG.descargar

Toogle Image Search no es nuevo, tiene varios años online y es una variante de la búsqueda de imágenes de Google que, en lugar de mostrar imágenes asociada a una palabra determinada, las transforma en caracteres ASCII.

Funciona bastante bien y es rápido aunque los resultados dependerán mucho de la imagen que se encuentre ya que no todas son aptas para estas conversiones

Ellos mismos advierten que no es un sitio muy recomendable para menores ya que no tiene filtros de ninguna clase y si uno mira la lista de búsquedas populares ... bueno, no difieren demasiado de la mayoría de las listas de búsquedas recientes que podemos ver hasta en nuestro propios blogs y obviamente, la palabra top es sex ... no es novedad, claro.

Click para ver ampliar imágenes.

Son muchos los que preguntan cómo se hace para que que en los resultados de una búsqueda de Google, aparezcan cosas como esta:

Y la respuesta es que no hay nada que hacer ya que eso, es algo que Google hace por su cuenta. Son los llamados Enlaces de Sitio.

En teoría, se agregan cuando consideran que ciertos enlaces serán útiles y aparecen de forma automática, cambiando de tanto en tanto. No hay información de cómo se generan o por qué; probablemente, ni ellos lo sepan.

No hay forma de agregarlos pero si podemos eliminarlos o bloquearlos si consideramos que no son adecuados. Para eso, en las Herramientas para Desarrolladores de Google, vamos al panel, desplegamos Información del sitio y en la ventana Enlaces de Sitios veremos una lista de ellos con un botón que permite bloquearlos individualmente pero, debe tenerse en cuenta que el efecto no será inmediato y que esto no será definitivo ya que, pasado un tiempo, pueden volver a a aparecer.

REFERENCIAS:Google Webmaster Central