0

¿Cómo nos ven los buscadores?

Cuando se habla de ¿cómo ven los buscadores nuestro sitio? muchos dicen "lo ven de manera similar a navegar usando Linx" ¿Qué es Linx? Pués un navegador de modo texto, es decir, nada de multimedia, nada de scripts, nada de CSS. No por eso es menos potente porque soporta todos los protocolos: Gopher, HTTP, HTTPS, FTP y cookies.

¿Es posible instalarlo? Sí, hay versiones para distintos sistemas operativos; por ejemplo, esta es para Windows; incluso, hay algunas versiones que funcionan en viejos sistemas, desde las 386 en adelante.

Pero, tampoco es necesario instalarlo para probar cómo se vería nuestro sitio. En securi.net hay una página que nos permite ingresar la URL de un sitio y ver el resultado online, lo mismo ocurre con Lynx Viewer aunque allí, los pasos a seguir son bastante más complejos.

Y si todo eso no es suficiente, hay una extensión par Firefox llamada Yellowpipe Lynx Viewer Tool que, una vez instalada, nos agrega una entrada en el menú contextual y basta hacer click allí para obtener una previsualización de cualquier página sin necesidad de abandonarla.

0

Nube de etiquetas (gadget de Blogger)

Desde Blogger Buzz nos comunican que ya podemos añadir fácilmente y desde el gadget de etiquetas la opción de mostrarlas en forma de nube.

[1] Para hacerlo tenemos que añadir un nuevo gadget de Etiquetas desde Diseño en nuestro panel de Blogger.

Gadget Etiquetas

[2] Marcamos la opción "Nube"

Etiquetas Nube

[3] Si guardamos los cambios en este momento, ya tendríamos la nube de etiquetas instalada, donde se mostrará el nombre de las etiquetas en cinco tamaños diferentes según el número de entradas publicadas bajo cada etiqueta.

Nube Escaparate


[4] Si queremos antes de guardar los cambios también es posible escoger que etiquetas mostrar en el gadget, para hacerlo pinchamos en "Etiquetas seleccionadas" y luego en "Editar".

Etiquetas seleccionadas

[5] Veremos una lista con las etiquetas marcadas por defecto. Desmarcamos las que vamos a ocultar y pinchamos en Finalizar.

Selección de etiquetas

0

La nueva nube de etiquetas de Blogger

Ya está disponible la opción de mostrar las etiquetas en forma de nube directamente desde el mismo elemento Labels de Blogger por lo tanto, quien quiera, pude eliminar el truco original y aliviar un poco su plantilla.

El código ya estaba disponible desde hace varios días pero parecía que no se había implementado. Para usarlo, basta editar el elemento y marcar la opción NUBE:


Eventualmente, podemos seleccionar cuáles son las etiquetas a mostrar y cuáles son las que permanecerán ocultas. Para eso, marcamos la opción Etiquetas Seleccionadas y aparecerá entonces un enlace para Editar:


Cualquier cosa, si no quieren arriesgarse, en lugar de editar el elemento existente, pueden agregar uno nuevo ya que no hay limitaciones y pueden tenerse tantos como se quiera y cada uno es independiente del otro y, en todo caso, este es el mejor método porque el código nuevo difiere del antigüo así que es lo mejor para evitarse dolores de cabeza.

El resultado final será una nube con ciertas característcas gráficas por defecto, donde se verán los títulos de estas con cinco tamaños diferentes de acuerdo a la cantidad de entradas de cada una de ellas.

Tanto el tamaño de las letras como el color serán los asociados a todos los enlaces de la sidebar pero, eso puede ser modificado si agregamos estilos. Por defecto, son estos:
.label-size-1 {font-size: 80%; opacity: 0.8;}
.label-size-2 {font-size: 90%; opacity: 0.9;}
.label-size-3 {font-size: 100%;}
.label-size-4 {font-size: 120%;}
.label-size-5 {font-size: 160%;}
.cloud-label-widget-content {text-align: justify;}
Y, como estos estilos se cargan automáticamente, debemos sobrescribirlos agregando los nuestros justo después de <body>:
<style type='text/css'>

  /* este es el bloque que las contiene, en lo personal, prefiero centrarlo */
  .cloud-label-widget-content {
    text-align:center;
  }

  /* cada enlace está dentro de una etiqueta SPAN */
  .cloud-label-widget-content span {
    display: inline-table; /* con esta propiedad puedo centrar cada enlace verticalmente */
    line-height: 1.2; /* esta es la separación vertical entre líneas */
    padding: 0 0 0 5px; /* esta es la separación horizontal entre enlaces */
    vertical-align: middle; /* esto lo centra verticalmente */
  }

  /* la fuente de los textos de los enlaces */
  .cloud-label-widget-content span a {font-family: Verdana;  }
  /* y el color del efecto hover sobre esos enlaces */
  .cloud-label-widget-content span a:hover {color:#FFF !important;}

  /* estas son las propiedades para cada uno de los cinco tamaños */
  .label-size-1 a {color: #789; font-size: 11px;} /* el de menor tamaño */
  .label-size-2 a {color: #89A; font-size: 13px;}
  .label-size-3 a {color: #9AB; font-size: 14px;}
  .label-size-4 a {color: #BCD; font-size: 17px;}
  .label-size-5 a {color: #DEF; font-size: 20px;} /* el de mayor tamaño */

</style>
Como siempre, podemos editar el código del widget para establecer la cantidad de entradas a mostrar cuando se navegan etiquetas (por defecto es 20). Para eso, buscamos lo siguiente:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
y lo reemplazamos por esto:
<a expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
Ese código está dos veces dentro del widget, uno para cada modelo (lista y nube) así que modificamos ambos, colocando el número que mejor se adapte a nuestras necesidades.

0

Sombras: la propiedad text-shadow

sombras


sombras


más sombras


Un tweet de Ariane me llevó a una entrada de CSS No Lanche. El título era prometedor: CSS text-shadow. Sombras en los textos usando CSS.

La verdad es que no tenía muchas esperanzas porque es algo de lo que se habla desde hace mucho y, aunque está definida y aceptada por la W3C, sólo podía usarse en Safari. Pero, oh sorpresa, parece que ahora también puede aplicarse en Firefox, lo cuál es un avance.

La propiedad es muy sencilla y tiene cuatro parámetros:
text-shadow: posicionX posicionY amplitud color;
posicionX indica el desplazamiento horizontal de la sombra con respecto al texto (positivos hacia la derecha, negativos hacia la izquierda)
posicionY indica el desplazamiento de la sombra con respecto al texto (positivos hacia abajo, negativos hacia arriba)
amplitud es el tamaño de esa sombra, a mayor valor, el efecto de blur es mayor
color es obviamente el color de la sombra

un ejemplo:
text-shadow: 10px 5px 5px #000;
Esta serían las definiciones de los tres primeros ejemplos:
h1.demoSombras1 {
  color: #000;
  font-size: 130px;
  text-shadow: 5px 5px 15px #AAA;
}

h1.demoSombras2 {
  color: #999;
  font-size: 130px;
  text-shadow: 10px 10px 10px #000;
}

h1.demoSombras3 {
  color: #345;
  font-size: 80px;
  text-shadow: 1px 1px 1px #ABC;
}
donde, en todos los casos, el HTML es un encabezado:
<h1 class="nombreClase"> el texto </h1>

muchas sombras


En este otro ejemplo, se agregan dos sombras, separadas por comas:
h1.demoSombras4 {
  color: #101921;
  font-size: 80px;
  text-shadow: 3px 3px 10px red, -3px -3px 10px yellow;
}
Para versiones anteriores a Firefox 3.5, hay una extensión llamada Text Shadow 0.3.2008042901 que permite simular la propiedad.

Aparentemente, en Safari sólo se admite una sombra, Opera tiene un máximo y en los navegadores Mozilla la cantidad es infinita. Para Internet Explorer hay un filtro que hace algo similar: por ejemplo
filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);

shadow en Internet Explorer

0

Horinaja: Original slideshow de contenidos

Fácil, original, flexible, así es Horinaja, un script que nos permite crear slideshows que se manejan con la rueda del ratón, desplazando los contenido con una animación horizontal.

Hay dos modelos, uno para quienes tenemos Prototype + Scriptaculous y otro para quienes usan jQuery. En cualquiera de los dos casos, descargamos el archivo RAR, lo descomprimimos y allí nos encontraemos con el archivo class.horinaja.scriptaculous.js o class.horinaja.jquery.js que es el único que necesitamos y lo alojamos en un servidor propio o lo copiamos y pegamos en la plantilla.

Y luego, el CSS:
<style type="text/css">
  /* la clase que controla el slider */
  .horinaja ul {
    list-style-type: none;
    margin-left: 0;
    position: relative;
  }
  .horinaja ul li {
    background: transparent;
    list-style-type: none;
    display: block;
    top: 0;
  }
  /* la clase que controla la paginación optativa */
  ol.horinaja_pagination {
    background: transparent;
    clear: both;
    height: 40px;
    margin: 0 auto;
    padding: 5px 0 0 0;
    position: relative;
  }
  ol.horinaja_pagination li{
    display: block;
    float: left;
    height: 40px;
  }
  ol.horinaja_pagination li a {
    background: transparent;
    color: white;
    display: block;
    height: 40px;
    float: left;
    font-size: 16px !important;
    font-weight: bold;
    line-height: 40px;
    padding: 0;
    text-align: center;
    width: 40px !important;
  }
</style>


Lo usamos incluyendo una lista dentro de un DIV que tenga establecida la clase horinaja:

<div id="nombreID" class="horinaja">
<ul>
<li> ... el contenido 1 ... </li>
<li> ... el contenido 2 ... </li>
...
<li> ... y así sucesivamente ... </li>
</ul>
</div>
<script type="text/javascript">
  document.observe("dom:loaded", function() { new Horinaja(nombreID,velocidad,delay,paginacion); });
</script>
donde:

nombreID es el ID del DIV contenedor y debe ser un nombre único
velocidad y delay indican el tiempo de la animación al siguiente slide (en segundos)
paginacion indica si queremos que se muestre una lista numerada de los slides (true) o no (false)

Por ejemplo:
document.observe("dom:loaded", function() { new Horinaja('demohorinaja',0.5,20,false); });
En lo personal, creo que hay que darle altura y el ancho al DIV contenedor y ocultarlo hasta que se cargue así que, por ejemplo, usaría algo así:
<div id="nombreID" class="horinaja" style="display: none; height: 250px; width:480pcx">
De este modo, lo mantendría oculto hasta que se cargue ya que si el contendio es "pesado", el efecto se ve mal hasta que termina de cargarse.

Para hacerlo visible, usaría la misma función, algo así:
document.observe("dom:loaded", function() { new Horinaja('nombreID',1,20,true);
document.getElementById('nombreID').style.display='block';});

0

Wallpapers en DeviantART

Si haceis una visita a Deviantart, estoy segura que vais a encontrar algún maravilloso diseño para usar en vuestro Blog o PC.

DeviantART es un sitio de internet que aglutina a una comunidad internacional de artistas en la red.
Es un espacio virtual en el que cada cual puede mostrar su arte y aprovechar las posibilidades de la red para someterlo a los comentarios de cualquiera y en particular de otros artistas. DeviantART está abierta a muchos tipos de artistas pero principalmente los relacionados con las artes visuales y gráficas, como fotógrafos, diseñadores gráficos o pintores.
-Wikipedia-


Entre otros muchos sorprendentes trabajos, hay multitud de impresionantes Wallpapers como estos:

Fresas y chocolate
Blanco y negro

Chinitos
Chica


[ Pincha en las imágenes para acceder a su descarga en DevianART ]

0

Menú personalizado desde "Fuentes y colores"

Hay diferentes formas de añadir un menú en el header, claro está que no vamos a hablar de todas sino de una en concreto que Gabuleta lleva tiempo esperando.

Con la siguiente explicación conseguiremos un menú en el header y aunque a simple vista pueda parecer complicado es justamente todo lo contrario, lo que hace es simplificar el menú de forma que podemos cambiar los colores con la herramienta "Fuentes y colores"



Lo primero que haremos será eliminar la barra de navegación que nos provee Blogger más conocida como Navbar.
Buscamos ]]></b:skin> y justo antes añadimos lo siguiente.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Ahora que no tenemos barra de navegación, justo después del código anterior añadimos los estilos del menú:

.menu {
width:660px;
height:27px;
background: $menubgColor;
border: 1px solid $menumainBorderColor;
}
.menu ul{
padding:5px 0 0 10px;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:left;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}

Con width escogemos el ancho normalmente el mismo ancho que tenemos en outer-wrapper y con height le damos altura.

Si deseamos añadir una imagen de fondo en lugar de color simplemente eliminamos la línea background: $menubgColor;
y en su lugar añadimos:
background: url('url imagen');
(No intentes guardar los cambios ahora)

Como podéis ver en los estilos del menú los colores no fueron definidos con css, sino que añadimos una línea de código para que las variables hagan su función desde la herramienta fuentes y colores. Para que esas variables funcionen y poder guardar los cambios primero debemos añadirlas.

Al inicio de la plantilla veremos algo así:


Justo después de:

/* Variable definitions
====================
Añadimos las nuevas variables para el menú:

<Variable name="menubgColor" description="Color de Fondo"
type="color" default="#C94093" value="#940f04">
<Variable name="menumainBorderColor" description="Color del borde"
type="color" default="#C94093" value="#000000">
<Variable name="menuBorderColor" description="Líneas de separación"
type="color" default="#9D1961" value="#000000">
<Variable name="menuTextColor" description="Color texto"
type="color" default="#ffffff" value="#cccccc">
<Variable name="menuHoverBgColor" description="Color de fondo Hover"
type="color" default="#ffffff" value="#15222b">
<Variable name="menuHoverTextColor" description="Color texto Hover"
type="color" default="#9D1961" value="#ffffff">
<Variable name="menuTextFont" description="Tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal bold 95% Georgia, Times, serif">

Ahora si que podemos guardar los cambios, las variables de este ejemplo las he probado sin problemas pero si diera algún error del tipo "Declaración de variable no válida en máscara de página" comprobaremos de qué variable se trata y miraremos si al copiar y pegar no cometimos algún error.

Seguimos con nuestro menú, ya sólo queda añadir los enlaces, buscamos nuevamente en la plantilla:
<div id="header-wrapper">

y justo antes añadimos:

<div class="menu">
<ul>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
</ul>
</div>

Una vez guardados los cambios y añadidos nuestros enlaces en plantilla de diseño veremos el menú más o menos así:


Ya podemos comprobar si los enlaces están correctos.




Para enlazar diferentes páginas como puede ser el correo, acceso al panel de Blogger o sitios externos puedes ver como hacerlo en Configurar menús.

Para añadir traductor y buscador a este menú mira la siguiente entrada.
Gracias por la paciencia Gabuleta

Suscribirse a: Entradas (Atom)
 

2009 ·ElHackerZ by TNB

PostsComments