0

Compartiendo imágenes con vi.sualize.us

vi.sualize.us es un servicio de marcadores especializado en imágenes. Está pensado para que una vez que nos registramos podamos marcar nuestras imágenes favoritas mientras navegamos por la red y compartirlas con otros usuarios de manera pública o privada.

Hay varias formas de utilizar el sistema. Lo elemental es desde el propio sitio, agregando la URL de la imagen pero nos dan dos posibilidades más que son útiles. Para Firefox hay una extensión que, una vez instalada, nos agrega la opción Add image to vi.sualize.us al menú que se activa con el botón derecho sobre cualquier imagen. Se abrirá una ventana y si estamos logueados, sólo deberemos poner el título y una descripción o etiquetas optativas. También incluye la posibilidad de agregar un ícono en la barra de herramientas del navegador.


Otra alternativa es agregar un botón que funciona a modo de bookmarklet. Esta, es válida para Firefox, Internet Explorer, Safari y Opera y es, probablemente, la forma más simple de usar el servicio.


Al crear la cuenta se crea un sitio accesible desde cualquier navegador, con una dirección URL única que posee feeds por lo que puede ser agregada a cualquier lector externo o ser agregada a Feedburner: http://vi.sualize.us/rss/vagabundia/

Como el RSS del sitio es compatible con el de Flickr, casi cualquier herramienta o gadget de este, funcionará con vi.sualize y una serie de direcciones extras permiten suscribirse a determinadas etiquetas:
  • vi.sualize.us/rss son las imágenes más recientes de todo el sistema
  • vi.sualize.us/rss/popular son las imágenes más populares
  • vi.sualize.us/rss/popular/nombreEtiqueta son las imágenes más populares filtradas por etiqueta
  • vi.sualize.us/rss/tag/nombreEtiqueta son las imágenes de una etiqueta
  • vi.sualize.us/rss/nombreUsuario son las imágenes de un usuario específico
  • vi.sualize.us/rss/nombreUsuario/nombreEtiqueta son las imágenes de un usuario específico con cierta etiqueta
  • vi.sualize.us/rss/nombreUsuario/nombreEtiqueta1,nombreEtiqueta2 o con una serie de etiquetas
Esta posibilidad de acceder a los feeds es lo que lo hace interesante. A partir de ahí, hay una aplicación que permite agregarla a Facebook, un plugin para Wordpress y también un badge que podemos insertar en cualquier sitio web y que se puede personalizar casi por completo, utilizando CSS.

Para crear este último, accedemos a la herramienta respectiva y allí, colocamos los datos elementales: el nombre del usuario (el nuestro o el de cualquier otro), etiquetas si es que queremos filtrar los resultados, alguno de los modelos gráficos predeterminados y la cantidad de imágenes a ser mostradas (entre 1 y 30). El resultado, será un código que deberemos copiar y pegar donde nos guste.

Por defecto, se mostrará un tira vertical (manias de los desarrolladores) pero podemos cambiarlo ya que bastan cambiar un par de datos de ese código que tienen cuatro partes:
<style type="text/css">
... aquí están las propiedades que podemos modificar ...
</style>
<h2> el título </h2>
<ul id="visualizeus"></ul>
<script type="text/javascript">
... aquí está el script que genera el badge ...
</script>
<script type="text/javascript" src="http://vi.sualize.us/json/posts/nombreUsuario//?callback=vslzBadge&count=6"></script>
Podemos eliminar <h2> </h2> si no queremos mostrar el título y cambiar la cantidad de imágenes a mostrar cambiando el valor de count pero, lo más importante es lo que está en style.
ul#visualizeus { ... es el bloque donde s mostrarán las imágenes ... }
#visualizeus li { ... cada uno de los items de esa lista ... }
#visualizeus a#logo { ... el enlace que aparece al final del badge ... }
Si no queremos mostrar el logo colocamos:
#visualizeus a#logo {display: none;}
El resto, lo controlamos con las propiedades de ul#visualizeus y lo elemental sería esto:
ul#visualizeus {
background-color: #valor; /* el color de fondo */
border: 1px solid #valor; /* el borde */
height: valorpx; /* la altura */
list-style-type:none !important;
margin: 0 auto;
padding: 0 !important;
width: valorpx; /* el ancho */
}
Con height y width es podemos definir la forma de mostrarlo. Supongamos que usáramos seis imágenes:

width: 95px; height: 540px; lo mostrará de forma vertical
width: 570px; height: 95px; lo mostrará de forma horizontal
width: 285px; height: 185px; lo mostrará como dos filas con tres imágenes por fila

Así que todo es cuestión de imaginación y un poco de aritmética.


    0

    Nube de etiquetas en Blogger " Widget "

    La nube de etiquetas sobre la que nos informaba Blogger Buzz ya podemos añadirla como cualquier widget.
    Me ha extrañado que la podemos añadir desde Blogger, porque siempre suelen tomarse un tiempo de prueba antes de hacer pública cualquier novedad y nos veíamos en la necesidad de acceder por Blogger in draft o aceptar una interminable espera.
    Añadirla es muy sencillo, editamos el gadget de etiquetas y nos mostrará algo así:


    Marcaremos donde dice "Nube" también tenemos la opción de mostrar el número de etiquetas si marcamos en "Mostrar el número de etiquetas" obviamente si no lo deseamos mostrar no lo marcamos.
    La ordenación se muestra igual que antes "Por orden alfabético" y "Por frecuencia"


    Si marcamos "Nube" tenemos la posibilidad de escoger las etiquetas que vamos a mostrar.
    El tamaño de fuente será en relación con la cantidad de entradas de una misma etiqueta y el color el que tenemos configurado en nuestro blog para los enlaces.


    Los chicos de Blogger parece que se pusieron las pilas y recargaron ideas, o mejor dicho ganas de trabajar pero no demasiada. Podían haber añadido alguna tabla de colores como la de seguidores pero sería pedir demasiado.
    Quien no se hace de rogar es J.Miur que en su entrada sobre "La nueva nube de etiquetas en Blogger" nos explica como podemos añadir estilos para darle vidilla a la triste nube.
    ¡Gracias Blogger! porque es una petición menos en la larga lista de necesidades.


    0

    Desvaríos postvacacionales


    Cuando recuerdo los cambios de imagen del blog vienen a mi mente la cantidad de cosas que se van aprendiendo con el paso del tiempo, incluso me hace gracia comparar aquella plantilla clásica con un logo creado por mi y unas etiquetas creadas manualmente para las que era necesario tener dos blogs.

    Poco más, porque siempre intento no recargar aunque luego quede sólo en el propósito, yo lo veía fantástico, con mil tropiezos pero creado por mi.
    Sigo teniendo la sensación que he perdido cosas en el camino, siento no haber descubierto todo mucho antes pero las cosas hay que hacerlas pasito a pasito cuando se quiere, se puede y se sabe que están ahí, es la única forma de exprimirlas y saborearlas.
    Tres años después todo ha cambiado, lo único que conservo es la ilusión y la impaciencia porque llegue la hora para reunirme con ese amante silencioso, siempre a la espera, algunas veces incomprensible pero siempre fiel.
    Sin mediar palabras nos entendemos divinamente, pero como todo amor también tiene días bajos que son suplidos después cuando pulsamos el botón naranja de GUARDAR PLANTILLA y voilá!
    Es amor por aquello que hacemos y nos gusta. Es, otra clase de amor... pero que también engancha.




    0

    Algunos de los mejores editores gratuitos

    Para quien comienza en esto de intentar escribir páginas web, encontrar un editor no es tarea sencilla. No porque no haya software disponible sino porque hay muchos y se tiende a creer que reemplazarán nuestra ignorancia con unos botoncitos. Como cualquier otra herramienta, serán útiles o inútiles, nos facilitarán la tarea o nos complicarán la vida, dependerá de nosotros ... mala suerte.

    En mi opinión, no hay nada mejor para un novato, que no usar ninguno y, si se trata de elegir, me inclino por los editores de tipo texto donde sólo haya alguna ayuda extra que nos permita verficar la sintaxis o agregar formatos sencillos.

    Aprovechemos entonces la lista de tripewiremagazine para repasar algunos de los que hay disponibles para su descarga gratuita.

    Notepad++ es uno de mis preferidos. Permite editar múltiples documentos, admite el uso de muchísimos lenguajes, reconoce la sintaxis , contrae y expande bloques y es ideal para editar archivos alojados en la web porque entre sus plugins posee un cliente FTP.


    CodeLobster PHP Edition es un editor especializado en PHP pero soporta JavaScript, HTML y CSS. Autocompleta etiquetas, reconoce códigos y nos facilita ayudas. Posee un debugger de PHP y plugins para WordPress, Joomla, drupal y JQuery. También es de descarga gartuita aunque debemos registrarnos para que nos envien un código de verificación via mail. Recién lo estoy probando y parece una alternativa interesante.


    HAPedit es similar, habilitado para detectar sintaxis HTML, ASP, PHP y JavaScript. También tiene ayuda, listas de etiquetas y variables, cliente FTP y funciones para buscar y reemplazar muy avanzadas.

    Free Coffeecup Editor es un buen editor aunque nunca me convenció del todo. Incluye un cliente FTP y una serie de ayudas y muchos asistentes que permiten generar códigos completos seleccionando algunas opciones.

    Arachnophilia es uno de los más conocidos e incluye varios tutoriales. Nunca me convenció :- )

    Visual Web Developer 2008 no lo conozco pero promete ser rápido aunque sólo admite editar un archivo por vez.

    Amaya es el editor de la w3c. Muy limitado para mi gusto.

    Más editores:

    0

    obrigado


    Si salgo de abajo del cocotero es con autorización expresa de mi conciencia que esta vez (y es raro que así sea) está de acuerdo conmigo.

    Sólo lo hago para expresar públicamente mi agradecimiento a Ariane por la publicación de la entrevista y por el increible trabajo realizado al traducir mi prosa enreverada con una fidelidad asombrosa.

    Como admirador del precisismo y delicadeza de sus diseños, no puedo más que sentirme honrado por su deferencia y agradecerle por enésima todas sus gentilezas.

    Y como no tengo palabras suficientes, sólo se me ocurre dejar que Caetano cante a Gilberto Gil a ver si ellos logran decirlo mejor que yo (obviamente si):

    0

    Tres años para cuatro

    3 años en este agujero negro llamado blog.

    Tengo un DIV colgando indolente de mi oreja izquierda y un STYLE de mi oreja derecha. Zumban y rezumban rebuznando como burros. Me dicen en voz baja que mi CSS no valida pero no puedo cambiarlo porque cuando uno llega a cierta edad, no hay background que sirva para remodelarnos.

    No me quejo.

    Pese a que en cada pestaña me cuelga un enlace y hay varios que me devuelven un error 404, todavía puedo abrir los ojos para ver que tres años
    es mucho pero mucho pero mucho tiempo ...

    Así que no pienso escribir nada de nada y además, es domingo. Buscaré un wallpaper de Tahití, me imaginaré sentado a la sombra de un cocotero y beberé mi imaginario daikiri en pequeños sorbos mientras leo los feeds que ...

    . . .

    No. No. No. NOOOOOOO!!! No, viejo, no. Ya metiste la pata. Nada de feeds, nada de mails, desenchufá la PC!!! Olvidate del daikiri virtual y sentate al sol aunque sea, con un vaso de agua.

    No se te puede dejar solo un minuto. Es más fácil ser la conciencia de un asesino serial que la conciencia de un blogger ¡Quién me asignó este trabajo!!! ¡Renuncio!!!

    ¿No entendés lo que es el relax? Relax, viejo, relax. ¡¡¡RELAX!!! Tres años no se cumplen todos los días ... sólo una vez cada tres años.

    . . .

    Ufa. Y el tipo no entiende. Se puso a buscar la palabra relax en la Wikipedia ...

    No hay nada que hacer, esto de los blogs es una enfermedad incurable ...

    0

    Compartir el blog desde la navbar de Blogger

    Leo en Blogger Buzz (28-8-09) una nueva función que el equipo de Blogger ha incluido en la navbar (barra superior del blog).

    Cuando un lector está en la página principal de cualquier blog que muestre la navbar, tendrá la posibilidad de enviar la url del blog a Twitter, Facebook o Google Reader.
    Pinchando en el botón "Compartir" de la navbar se abrirá una ventana (popup) con las opciones (IE Y Firefox).

    Navbar compartir

    Si se encuentra en la página de una entrada concreta, además de enviar la url a cualquiera de estos sitios, podrá compartir también la entrada por correo electrónico.

    Navbar compartir individual


    Cada url que se comparte incluye un parámetro especifico adjunto (FB Facebook, tw = Twitter, y gr = Google Reader), esto permite (si estás utilizando Google Analytics para medir el tráfico en tu blog) buscar las cadenas para ver la cantidad de tráfico que está recibiendo de cada fuente.

    Por supuesto aquellos que hemos optado por ocultar la navbar o estamos usando una plantilla que en su diseño ya no la incluía, no tendremos acceso a esta nueva funcionalidad.
    Para poder usar el botón de "compartir" tendríamos que optar por volver a mostrar la navbar, para ello tendríamos que localizar el código que la oculta en nuestra plantilla (desde Edición HTML de nuestro panel) y eliminarlo:

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



    Leer la noticia en Blogger Buzz (inglés)

    0

    Wallpapers (casi natural)

    Wallpapers (casi natural)

    0

    Superponer contenidos usando CSS

    Hay muchos scripts que utilizan efectos para cambiar el contenido de algo cuando ponemos el puntero del ratón encima. Es lo que se llama un efecto rollover. Con CSS lo logramos usando :hover. Cambiamos colores, fondos, las fuentes de los textos, etc ¿Podemos cambiar más cosas? ¿Podríamos cambiarlo por completo, incluyendo su contenido?

    Pués así lo muestran en SNOOK.ca y la idea es bastante simple.

    Este es un ejemplo del código HTML básico:
    <div class="infobox">
    <img src="URL_imagen">
    <div> un texto visible </div>
    <div class="more"> y aquí ponemos el contenido que permanecerá oculto </div>
    </div>
    Y este es un estilo CSS de ejemplo:
    .infobox {
    border: 1px solid #345;
    cursor: pointer;
    padding: 5px;
    position: relative;
    width: 130px;
    }
    .infobox img {
    position: relative;
    z-index: 2;
    }
    .infobox .more {
    display: none;
    }
    .infobox:hover .more {
    background-color: #345;
    border: 1px solid #89A;
    display: block;
    font-size: 20px;
    height: 130px;
    left: 0px;
    padding: 5px 20px 5px 140px;
    position: absolute;
    text-align: justify;
    top: 0px;
    width: 400px;
    z-index: 1;
    }

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.

    EL DIV infobox tiene la propiedad position establecida como relative lo que permite luego, posicionar su contenido de manera absoluta con left y top. La imagen también se posiciona de manera relativa para usar la propiedad z-index y, de esa manera, mantenerla visible aún cuando algo se coloca "encima" de ella.

    Las propiedades a usar son variadas, dependerán de lo que se nos ocurra mostrar. Otro ejemplo:
    .infobox {
    -moz-border-radius: 10px;
    background-color: #123;
    border: 2px solid #567;
    color: #ABC;
    cursor: pointer;
    font-size: 20px;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    width: 180px;
    }
    .infobox .more {
    display: none;
    }
    .infobox:hover .more {
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    background-color: #101921;
    border: 2px solid #567;
    color: #EEE;
    display: block;
    font-size: 12px;
    left: -2px;
    padding: 5px 10px;
    position: absolute;
    text-align: justify;
    top: -2px;
    width: 180px;
    z-index: 1;
    }

    El contenido visible a expandir.

    Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!


    Y un último ejemplo:
    .infobox2 {
    color: #888;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    text-align: center;
    width: 130px;
    }
    .infobox2 img {
    position: relative;
    z-index: 2;
    }
    .infobox2 .more {
    display: none;
    }
    .infobox2:hover .more {
    -moz-border-radius: 10px;
    background-color: #333;
    color: #BBB;
    display: block;
    font-size: 14px;
    font-weight: normal;
    height: 130px;
    left: 0px;
    padding: 15px 20px 10px 135px;
    position: absolute;
    text-align: justify;
    top:- 5px;
    width: 320px;
    z-index: 1;
    }

    EXPANDIR
    Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.

    0

    Teclado de Microsoft que interpreta las emociones


    El otro día leí que Microsoft presentará en Octubre un teclado capaz de interpretar las emociones y que expertos en el tema aseguran un gran futuro para esta tecnología aplicada a los videojuegos

    Dicen que reconoce hasta 256 niveles de impulsos, la sensibilidad del teclado permitirá escribir con mayúsculas si pulsamos las teclas con más fuerza de lo normal, así como borrar una palabra pulsando (siempre con más ímpetu de lo normal) la tecla suprimir.

    No está mal si se trata de aplicarlo a los videojuegos pero imaginad que estamos escribiendo en nuestro blog, nos enfadamos porque la conexión es más lenta de lo que suele ser normalmente,¿Escribiríamos todo en mayúsculas?

    La rapidez también influye ¿Habéis notado que a más rapidez tecleamos con más ímpetu?

    Si interpreta las emociones ¿De qué forma interpretará el teclado inteligente ese estado de enamoramiento que hace ver todo color de rosa? ¿Mostrará puntos suspensivos?

    ¿La pereza serán espacios?

    Debe ser una maravilla pero sigo pensado que puede resultar una incomodidad controlar la fuerza al pulsar las teclas, menos mal que podemos usar la tecla borrar o imprimir porque de lo contrario menudo culebrón mostrarse tal cual nos sentimos.

    Esto va para mi familia y almas generosas que saben que mi teclado está pidiendo a gritos ser renovado: "No quiero teclados de última generación, ni ergonómicos, ni inalámbricos, ni con membrana para amortiguar el ruido, ni mucho menos que interprete mis emociones. Prefiero ese horroroso con cable que hace ruido al escribir, ese que nunca te deja tirado porque se terminan las pilas y que marque justamente las teclas que yo quiero pulsar"

    No es porque sea de Microsoft es que una es así de rara.

    0

    Seleccionar, copiar y pegar

    Los navegadores tiene sus limitaciones. Unos unas, otros, otras ... nada es perfecto.

    Firefox, Safari y Opera permiten que manipulemos la selección de textos con CSS, es decir, cambiar el color que, por defecto es gris.


    Es un detalle que puede modificarse con dos pseudo-elementos llamados ::-moz-selection y ::selection que admiten solamente dos propiedades: color y background-color. Por ejemplo:
    ::-moz-selection {background-color: DarkRed; color: yellow;}
    ::selection {background-color: DarkRed; color: yellow;}
    Mostrará las selecciones con fondo rojos y textos de color amarillo y usamos dos definiciones porque una será interpretada por Firefox y la otra por Opera y Safari.

    Podemos generar ese efecto en toda la página o sólo en alguna aprte, de la misma manera que lo hacemos con cualquier otra definición de CSS:

    UN EJEMPLO
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    /* esto se aplicará sólo a los párrafos */
    p::-moz-selection {color: yellow; background-color: DarkRed;}
    p::selection {color: yellow; background-color: DarkRed;}

    /* esto se aplicará sólo a la clase demo */
    .demo::-moz-selection {color: yellow; background-color: DarkRed;}
    .demo::selection {color: yellow; background-color: DarkRed;}

    /* esto se aplicará sólo al DIV demo */
    div#demo::-moz-selection {color: yellow; background-color: DarkRed;}
    div#demo::selection {color: yellow; background-color: DarkRed;}
    En cualquier navegador, seleccionar todo el contenido de un área de texto (textarea) es bastante sencillo. Hay un artículo muy completo sobre este tema en el blog de Gem@ basta agregar un evento onclick en el formulario:


    <form>
    <textarea onclick="javascript:this.focus();this.select();"> ... el contenido ... </textarea>
    </form>
    De modo similar, podemos hacerlo agregando un botón:



    <form>
    <textarea name="selboton"> ... el contenido ... </textarea>
    <input value="Seleccionar Todo" onclick="javascript:this.form.selboton.focus();this.form.selboton.select();" type="button" />
    </form>

    Y sí, al contrario de los pseudo-elementos de selección, esto funcionará en todos los navegadores pero decía que nada es perfecto y el tema de seleccionar y copiar es uno de esos detalles donde en Internet Explorer las cosas se hacen fáciles pero en Firefox son muy engorrosas o incluso, imposibles.

    Estas tres funciones permiten copiar, cortar y pegar textos seleccionados en Internet Explorer:
    <script>

    function CopyToClipboard(){
    CopiedTxt = document.selection.createRange();
    CopiedTxt.execCommand("Copy");
    }

    function PasteFromClipboard(){
    document.nombreformulario.nombretextarea.focus();
    PastedText = document.nombreformulario.nombretextarea.createTextRange();
    PastedText.execCommand("Paste");
    }

    function CutToClipboard(){
    CutTxt = document.selection.createRange();
    CutTxt.execCommand("Cut");
    }

    </script>



    Y aunque también Internet Explorer tiene restricciones de seguridad que no hacen que las cosas funcionen así como así, se puede habilitar con un simple click:


    No es el único método, este otro script de DynamicDrive también permite seleccionar y copiar al portapapeles. Hay muchos más pero siempre funcionarán en IE y no en Firefox. Para este último hay varios trucos que implican el uso de archivos SWF pero son "dudosos". De todos ellos, el único que parece funcionar es una librería llamada Zero Clipboard.

    Es verdad que esa restricción podemos cambiarla en nuestro navegador; para eso debemos editar la configuración entrando en about:config y buscando esto:
    signed.applets.codebase_principal_support
    Donde el valor establecido por defecto es false y haciendo doble click en la línea lo permutamos por true (más información)

    Para mi gusto, todas esas opciones son demasiado engorrosas y por lo tanto, creo que es mejor seguir recurriendo al viejo CTRL+C.

    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