0

Las miniaturas de YouTube

Utilizar las miniaturas automáticas que provee YouTube es sencillo, hace poco, mostraba la forma de emplearlas para armar listas de videos sin necesidad de insertarlos lo que ayuda a reducir el tiempo de carga de las páginas.

Esas miniaturas son automáticas, basta saber el ID del video para generar la URL de las imágenes:

http://www.youtube.com/watch?v=jEOkxRLzBf0

Estas tres son miniaturas de 130x97 pixeles aproximadamente:

http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg



No son las únicas. En nealgrosskopf.com nos muestran varias más.

La imagen por defecto es elegida por quien sube el video. Se corresponde con la miniatura 2.jpg pero tiene 120x90 pixeles, la encotramos en esta URL:

http://img.youtube.com/vi/jEOkxRLzBf0/default.jpg


Hay otra de mayor tamaño llamada 0.jpg que tiene 320x240 pixeles:

http://img.youtube.com/vi/jEOkxRLzBf0/0.jpg


Así como hay videos de alta definición, también hay imágenes de 130x97 de alta definicion, son hq1.jpg y hq3.jpg:

http://img.youtube.com/vi/jEOkxRLzBf0/hq1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq3.jpg


La imagen hq2.jpg es más grande, tiene 480x360 pixeles lo mismo que la imagen hqdefault.jpg que es la que tiene la mayor definición:

http://img.youtube.com/vi/jEOkxRLzBf0/hq2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hqdefault.jpg


En todos los casos, nos basamos en el ID del video y usamos como base la URL:

http://img.youtube.com/vi/.......

aunque tmabién pue de usarse esta otra:

http://i.ytimg.com/vi/.......

0

Iconos Twitter - Cute Tweeters



De todos los iconos que he visto sobre Twitter hasta ahora estos son los que encuentro más simpáticos.

El pack de estos lindos pajaritos contiene ocho iconos en formato PNG, disponibles en tamaño 128 × 128 - 256 × 256 y 512 × 512

Licencia: Libre uso
Autor: Mirjami Manninen
Descarga:Smashing Magazine

0

Tachado con imagen

Es un efecto muy lindo que publicó hace tiempo Blog Bazar, en realidad fue una de sus primeras y últimas entradas, ya que el blog lleva tiempo sin ser actualizado.

Habíamos visto en una entrada anterior, como conseguir "tachar" un texto en nuestro blog usando la etiqueta <strike>

La idea que Blog Bazar nos presenta, es esta misma pero usando una imagen para lograr un efecto aún más original.

Tachado


[1] Aplicamos este código colocandolo en nuestra plantilla antes de </head>

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagen) repeat-x left 55%}
</style>

[2] Para usarlo en el blog, sencillamente tenemos que incluir el texto que queremos mostrar tachado, entre las etiquetas <strike> y </strike>
Si vamos a usarlo en las entradas, lo haremos desde la pestaña de Edición de HTML del editor.


Nota: Aunque el texto que vamos a tachar sea una frase e incluso más largo, no habrá problema ya que la imagen se repetirá hasta completar el ancho del texto incluido entre esas etiquetas (strike).

Tachando frases


Aquí tenéis las imágenes que Blog Bazar comparte con todos nosotros:

linea
linea-azul
linea-roja
linea-verde
linea-garabato
linea-garabatillo

0

Insertar Flash en el blog

Parece que incluir archivos de Flash siempre trae complicaciones. No es difícil pero nos lo hacen difícil porque cada servicio nos da instrucciones diferentes. Unos usan OBJECT, otros EMBED, otros ambas. Aparecen cosas misteriosas y crípticas como:

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

o:

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"

Suelen ser códigos que ocupan varias líneas y ¡vaya uno a saber que dicen!
<object width="600" height="300" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"><param name="movie" value="http://.../achivo.swf" /><param name="quality" value="high" /><embed src="http://.../achivo.swf" quality="high" type="application/x-shockwave-flash" width="600" height="300"></embed></object>
Veamos el más común, el que nos da YouTube:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/jkTNe85y0UI&hl=es&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jkTNe85y0UI&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
¡Otra vez distinto!

Así que mejor colocarlos como están y listo pero claro, a veces no funcionan y entonces, más que asustarse, lo mejor es tratar de entenderlos y si lo conseguimos, nos daremos cuenta que ... no los necesitamos.

La etiqueta HTML para insertar archivos de Flash (SWFs, reproductores de audio, reproductores de video, etc) es OBJECT. Como toda etiqueta, se abre y se cierra:
<object .......>
.......
</object>
Dentro de ella, se colocan parámetros, datos extras que son necesarios o que son optativos:
<object .......>
<param name="NOMBRE" value="VALOR" />
</object>
Como PARAM es una etiqueta "sin contenido", no es necesario agregar la etiqueta de cierre </param> y es suficiente agregar la barra final en la misma etiqueta de apertura; es lo mismo que pasa con otras como <br /> <img ... /> <meta ... /> <input ... />

¿Y la etiqueta EMBED? La respuesta rápida es NO EXISTE diablo2 Es que en realidad, es un rezago del tiempo en que Microsoft y Netscape se mataban para crear funciones diferenciadas y cada uno inventaba algo que el otro copiaba pero con otro nombre. El resultado de esa guerra es la falta de estandarización y las incompatibilidades entre los navegadores. Si nos basamos en las recomendaciones de la w3org (y deberíamos hacerlo), EMBED es una etiqueta "prohibida" y, en este caso, no se trata de un capricho sino de simple comodidad ¿para qué escribir dos cosas si basta escribir una sola?

Es cierto que las diferencias entre navegadores hace que unos no interpreten lo mismo que los otros pero la etiqueta OBJECT contempla esa diferecencia así que es sencillo de resolver.
<object type="application/x-shockwave-flash" data="http://.../archivo" width="ANCHO" height="ALTO">
<param name="movie" value="http://.../archivo" />
</object>
Si tuviéramos que insertar un archivo de YouTube, bastarían esas tres líneas para que pudiéramos verlo:

type es un atributo obligatorio y le indica al navegador, cuál es el tipo de formato que debe incrustar
data es un atributo donde colocamos la URL del archivo a reproducir y ese dato es el que reemplaza a la etiqueta EMBED
width y height son el ancho y el alto del archivo (medido en pixeles) y son valores que podemos cambiar

En una etiqueta PARAM colocamos otra vez la URL del archivo a reproducir porque esa es la que leerá Internet Explorer.

Así que esto, mostraría un video de YouTube sin problemas; más corto, imposible:
<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/jkTNe85y0UI"><param name="movie" value="http://www.youtube.com/v/jkTNe85y0UI" /></object>
Claro que hay más opciones, cada una de ellas se agrega en una etiqueta PARAM siempre con la misma sintaxis, colocando el nombre del atributo y su valor:

bgcolor establece el color de fondo (valor hexadecimal) si es que el SWF es transparente
wmode define al fondo como transparente (transparent) u opaco (opaque); también hay un valor extra llamado window
menu habilita (true) o deshabilita (false) el menú contextual sobre las películas
quality calidad de salida de la película (low, high, autolow, autohigh, best)
allowFullScreen habilita (true) o deshabilita (false) la posibilidad de ver a pantalla completa

Ejemplos:

<param name="bgcolor" value="#000000" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="false" />

La etiqueta OBJECT tiene otros atributos como ID, CLASS y ALIGN que son comunes a casi todas las etiquetas, y otros especiales:

classid identifica el control ActiveX y por lo tanto sólo se aplica a IE. Es un atributo innecesario, aún en Internet Explorer
codebase es la ubicación donde puede descargarse ese control ActiveX en caso que el navegador no disponga de él (en la etiqueta EMBED se usaba pluginspage)

Las etiquetas PARAM tienen opciones diversas (más información):

play indica si la película comienza a reproducirse de manera automática (true) o no (false)
loop indica si la película se repite de manera automática (true) o no (false)
scale especifica la forma en que se manejarán los tamaños (default, showall, noborder, exactfit)
base indica el directorio base para resolver paths relativos
flashvars contiene una serie de variables qie son pasadas al reproductor

Muchas veces, cuando el archivo de Flash contiene ciertas instrucciones, requiere que se le de permiso. Para eso, hay un parámetro específico llamado allowScriptAccess que, por defecto tiene un valor de sameDomain:
<param name="allowScriptAccess" value="sameDomain" />
Eso es lo que ocurre cuando se agregan menus realizados con Flash; no funcionan a menos que permitamos que se comuniquen. Los valores posibles son:

never impide el acceso a scripts de cualqueir tipo
always permite el acceso (es el valor por defecto en las viejas versiones)
sameDomain permite el acceso a scripts ubicados en el mismo dominio de la página

Así que en esos casos, debemos agregarle esto y todo funcionará:
<param name="allowScriptAccess" value="always" />

0

Coraje es ...

Coraje es invertir en la gente.descargar imagen original

Coraje es proteger la naturaleza.Coraje es considerar a los más pequeños.
Coraje es favorecer el transporte público.Coraje es comprender la diversidad.

0

Todos tuvimos aquella primera vez


Hace tiempo Francisco de Blog and Web nos proporcionaba una serie de ejemplos de lo que él denomina Principios de blogs exitosos curiosamente hace mención a Gem@ BLOG cosa que le agradecí en su día y vuelvo a hacerlo.
Todo eso está muy bien y es bueno tenerlo en cuenta, pero cuando empezamos nadie lo hace pensando en tener un blog exitoso ¿o si?.


Creo que lo que pensamos es en añadir un contador de visitas que sea mono o un script que muestre a las visitas la banderita de su país, o aquel banner que nos muestra el título de nuestro blog con texto parpadeante aunque luego nos vuelva locos porque no se visualiza en todos los navegadores.
Son cosas que hacemos todos con toda la ilusión del mundo, y son cosas lógicas que se seguirán haciendo.

Siempre digo que el blog es como una segunda casa, o mejor dicho ese rincón de nuestro hogar que nos pertenece en exclusiva y lo decoramos a nuestro antojo, a veces según nuestro estado de ánimo y otras la mayoría de casualidad haciendo cambios aquí y allá.
Cuando me piden mi opinión sobre un blog siempre respondo lo mismo "Sé tu mismo, escribe sobre lo que te gusta y te hace feliz lo que importa es el contenido, lo demás es secundario"
Pero está claro que el diseño y la imagen que podemos dar dice mucho del autor y nos asaltan las dudas sobre lo que falta o sobra en ese espacio tan particular.
Así que, lo siguiente no lo tomen al pié de la letra porque no son consejos, es simplemente mi opinión expuesta aquí como tantas veces la expuse en los comentarios.

Para gustos hicieron los colores pero...
-Se agradece una combinación de colores donde el texto pueda leerse con facilidad.

¿Te gusta la música?
-Ofrece a las visitas la posibilidad de escoger si escuchar música o no.
Añade un reproductor en lugar de música de fondo te lo van a agradecer.

¿Si te llama un amigo por teléfono contestas?
-Entonces sé cordial y contesta los comentarios.

No pidas que te enlacen.
-Saben como hacerlo y si tienen interés te enlazarán.

Las imágenes animadas están bien, pero su abuso puede llegar a ser aburrido y cansino y según que imágenes estresante.
-Vamos a añadir sólo las necesarias.

¿Has pensado que alguien quiera dirigirse a ti de forma más personal?
-Proporciona una forma de contacto.

A veces buscamos algo en concreto pero no lo encontramos.
-Es fácil añadir un buscador interno, evitará que nos vayamos sin localizar aquello que buscamos.

Todos andamos justos de tiempo, personalmente leo los blogs en mi Reader y hay muchas personas que hacen lo mismo que yo.
-¿Qué tal si añadimos información para suscribirse?

¿Dónde están las etiquetas?
Por si aún no lo sabes las etiquetas nos ayudan a una mejor organización del blog, con ellas clasificamos las entradas.
-Etiqueta las entradas como harías por ejemplo con la ropa, camisas a un lado pantalones a otro, o ropa de invierno a un sitio de verano a otro es así de sencillo.

Por último añadiría algo muy importante activa el perfil, si tu blog es privado es muy respetable.
-Pero deja saber al menos que nos estamos dirigiendo a alguien con identidad.

Son cosas que requieren un mínimo de tiempo y nuestro blog saldrá ganando.
Ahora ya sabes mi opinión sobre tu blog.

0

Cambiar el widget de Archivos por un Calendario

En una de las últimas entradas de BloggerSPhera nos muestran la forma de modificar la forma en que vemos el elemento Archivos de Blogger, reemplazando las listas por un calendario.

Aunque no lo he implementado acá, en este blog de pruebas se lo puede ver funcionando y quedará algo así:


Lo que veremos será un control para seleccionar el mes, un calendario donde estarán resaltados los días donde existan entradas en ese mes, una barra de navegación para avanzar y retroceder mes a mes y debajo, una lista con los enlaces a las entradas correspondientes. Tanto con el selector como con los enlaces de navegación, podremos desplazarnos a lo largo de las listas de archivos, sin cambiar de página.

Para aplicarlo, lo primero es descargar el script correspondiente que está en este archivo ZIP , ya traducido al español. Aunque no es necesario modificarlo para que funcione, podría editarse y cambiarse algunos detalles como los textos que se muestran por defecto.

Podemos agregarlo de dos maneras, lo alojamos en un servidor o bien copiamos y pegamos el contenido dentro de estas etiquetas, justo antes de </head>:
<script type='text/javascript'>
//<![CDATA[
// aquí pegamos el contenido del archivo
//]]>
</script>
Inmediatamente después, agregamos la llamada a la función con esto:
<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
Ahora, con los artilugios expandidos, vamos a buscar el widget de Archivos:
<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'>
.......
</b:widget>
Eliminaremos todo lo que está entre la apertura y el cierre de la etiqueta y lo reemplazaremos. Terminará quedando esto:
<b:widget id='BlogArchive1' locked='false' title='NOMBRE' type='BlogArchive'> 
<b:includable id='toggle' var='interval'> <!-- Toggle not needed for Calendar --> </b:includable>
<b:includable id='interval' var='intervalData'> </b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'></caption>
<thead id='bcHead'/>
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr></tbody>
</table>
<table id='bcNavigation'><tr><td id='bcFootPrev'/><td id='bcFootAll'/><td id='bcFootNext'/></tr></table>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='menu' var='data'> </b:includable>
<b:includable id='posts' var='posts'> <!-- posts not needed for Calendar --> </b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
</b:includable>
</b:widget>
Guardamos y para que esto funcione, deberemos verificar que la configuración del widget sea correcta y esté seleccionada Lista:

Estilo Lista Menú desplegable

Sólo nos faltaría establecer las propiedades CSS para el calendario, eso lo hacemos agregando el estilo antes de </b:skin>:
#blogger_calendar { /* es el bloque donde lo mostraremos */
margin:0 auto; /* centrado */
width: 190px; /* el ancho */
}

#bcaption { /* el rectángulo superior con los meses */
height:20px;
text-align:right;
}
#bcaption select { /* este es el selector de los meses */
background-color: #345;
border: 1px solid #567;
color: #DDD;
font-family:Tahoma;
font-size:11px;
padding: 0 0 0 10px;
width:100px
}

table#bcalendar thead tr th { /* cada una de las celdas con los nombres de los dias de la semana */
background: #345;
border: 1px solid #567;
color: #EEE;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
padding: 2px;
text-align: center;
width: 20px;
}

table#bcalendar tbody tr td { /* cada celda con el número del dia */
background: #567;
border: 1px solid #789;
color: #ABC;
text-align: center;
padding: 2px;
-moz-border-radius: 2px;
}

td.highlightCell { /* las celdas donde hay entradas */
background-color: #9AB !important;
}
table#bcalendar tbody tr td a { /* el enlace de esas celdas */
color: #000;
font-weight: bold;
}

td.firstCell { /* las celdas vacias del inicio */
visibility: hidden; /* podemos hacerlas visibles usando visible */
}
td.emptyCell { /* las celdas vacias del final */
visibility: hidden;  /* podemos hacerlas visibles usando visible */
}
td.filledCell {background: #FFF;} /* el color de esas celdas vacias si es que están visibles */

table#bcNavigation { /* es la barra de navegación inferior */
color: #DDD;
background-color: #123;
border: 1px solid #234;
font-family:Tahoma;
font-size:10px;
margin: 5px 0 0 0;
padding: 0 ;
text-align:center;
width:190px;
}
table#bcNavigation a {color: #ABC;} /* el color del texto */
td#bcFootPrev {float: left; width: 10px;} /* el enlace hacia atrás */
td#bcFootNext {float: right; width: 10px;} /* el enlace hacia adelante */
#calendarDisplay{ /* debajo se muestra la lista de entradas */
}

/* esta es la lista inferior donde se muestran las entradas del mes */
ul#calendarUl { }
ul#calendarUl li { }
ul#calendarUl li a { /* cada item de la lista es un enlace */
color: #9AB;
display: block;
font-size:11px;
padding-left:30px;
}

REFERENCIAS:BloggerSPhera

0

Adiós a Google Pages

Recién llego de pasar el fin de semana fuera y me encuentro un correo de Google Sites Team, un correo que todos los usuarios de Google Page Creator supongo que habrán recibido.
Como todos sabéis Google Page Creator en Agosto del año pasado ya no permitía nuevas inscripciones notificando que para primeros de año 2.009 cerraría sus puertas y proporcionaba una migración a Google Sites
Pasaron los meses y los archivos alojados en Google Pages permanecían activos, las últimas noticias fueron que la migración sería en Junio.
El correo viene en inglés, que por cierto no entiendo por qué Google no se dirige a sus usuarios en el idioma que escogemos cuando hacemos el registro, dice más o menos algo así.

"Como se anunció anteriormente, Google suspenderá pronto el funcionamiento del Google Page Creator. Vamos a migrar sus archivos con el fin que sigan activos sin que usted tenga que hacer el trabajo.
Sin embargo, el nuevo sitio no soporta cualquier formato de archivos y estamos escribiendo para informarle que como parte de esta migración, si no toma ninguna medida para hacer frente a esto es probable que sus archivos dejen de funcionar por lo que le recomendamos buscar otro alojamiento. Gracias por su paciencia durante esta migración"

La recomendación está clara, si tienen archivos en Google Pages serán migrados a Google Sites pero los archivos js. no están permitidos y no sólo dejarán de funcionar sino que los perderemos así que descarguen sus archivos al PC y el resto ya saben.. Buscar alojamiento nuevo o alojarlos en la misma plantilla del blog.

0

Internet Archive: Videos clásicos

Así como podemos usar la WaybackMachine para ver lo que era la web en tiempos tan remotos como hace tan solo un par de años y recorrer blogs pero en sus versiones de junio del 2007 o sitios famosos como YouTube en el 2005, esa no es la única de las posibilidades que tiene el sitio de Internet Archive. También posee un buscador de libros y documentos de textos, otro especializado en software legal con subsecciones como open-source o videogames y otro de audios que van desde audio-libros hasta viejas transmisiones radiales.

Y como si fuera poco, también hay una sección de imágenes, películas y videos, una librería con varios miles de clásicos subidos por los usuarios y muchos de ellos posibles de ser descargados por cualquiera: Animation & Cartoons, Arts & Music, Computers & Technology, Cultural & Academic Films, News & Public Affairs, Non-English Videos, Open Source Movies, Vlogs.

No es sencillo encontrar algo porque abruma la cantidad pero es un sitio a tener muy en cuenta.

0

Wallpapers (IPhone 2)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:extraverage.net

0

Menú Revolution Elements

Revolution elements es una plantilla de Wordpress diseñada por Jason Schuller y adaptada a Blogger por Joyful Thiek

Me gustó nada más verla, pero lo que más llamó mi atención fue el menú que sobre fondo oscuro resalta más la elegancia de la plantilla.

Conseguir ese menú no es complicado cuando con anterioridad alguien tuvo la genial idea de crearlo. En plantilla Edición de HTML justo antes de ]]></b:skin> añadimos los estilos.


/* Navigation Menu
------------------------------------------------*/
ul.nav {
list-style:none;
background:url(url-imagen-fondo-menu) top left no-repeat;
float:right;
color:#BDAFA8;
margin:20px 0px 0px 0px;
height:65px;
width:522px;
padding:8px 0px 0px 18px;
}
.nav li{
border-right:1px solid #333333;
float:right;
display:block;
width:100px;
}
.nav li a{
font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
font-size:13px;
outline:none;
color: #eeeeee; /*#62C214;*/
text-decoration:none;
display:block;
padding:5px 0 12px 5px;
width:95px;
text-transform:uppercase;
}
.nav li a span{
font-size:12px;
color:#7f7f7f;
text-transform:lowercase;
}
.nav li a:hover{
background: url(url-imagen-transparencia);
color: white;
width:95px;
}
* html .nav li a:hover{
background:#e6e6e6;
width:99px;
}
.nav li.skip{
border-right: 0px;
margin-right: 23px;
display:block;
width:93px;
}
.nav li.skip a{
width:93px;
}
/*.nav li.skip a:hover, li.top a:hover {
color: #e6e6e6 !important;*/
}
.fix:after{
content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}
.fix{
display:inline-block;
}
* html .fix{height:1%;}
.fix{display:block;}
ul.downnav {
list-style: none;
margin-bottom:20px;
}
li.down-top{float:right;display:block; width:100px;}
li.down-top a{width:100px;}


Guardamos los cambios y en un gadget de HTML que más tarde arrastraremos hasta el lugar indicado incluimos lo siguiente:

<div class="nav">
<ul class="nav fix">
<li class="skip"><a href="url del enlace" title="Descripción">LINK4
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK3
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK2
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">LINK1
<span>Descripción </span></a></li>
<li><a href="url del enlace" title="Descripción">Home
<span>Descripción </span></a></li>
</ul>
</div>

El resultado sería más o menos así:




El menu contiene dos imágenes, una de fondo que añadimos en los estilos de la plantilla donde dice url-imagen-fondo-menu



La otra imagen es una transparencia para el efecto hover y la añadimos donde dice url-imagen-transparencia.



Naturalmente para añadir las imágenes antes debemos alojarlas en un servidor para conseguir la url, yo siempre recomiendo alojar las imágenes en una entrada de Blogger que más tarde guardaremos en borrador.

Si el fondo de nuestro blog no es oscuro o simplemente deseamos una fuente en color distinto podemos modificar los estilos.

» El texto siempre viene definido en la hoja de estilos con "color" en este caso para el texto superior buscamos ul.nav y sustituimos color:#BDAFA8;

» Si se trata del texto inferior buscaremos nav li a span y modificamos color:#7f7f7f;

» Para el tamaño modificamos según el texto con font-size.

» Hay una barrita vertical apenas perceptible en el fondo oscuro que separa el texto de los enlaces, podemos cambiar su color en nav li donde dice border-right:1px solid #333333;

» Configuramos el menu en el gadget de HTML y añadimos la página a enlazar donde dice url del enlace

» En title donde Descripción es el sitio donde incluimos el texto que aparece al pasar el ratón.

» Sustituimos LINK1- LINK2- LINK3- LINK4- por el texto del enlace que vamos a mostrar.

» Igual haremos con Home podemos sustituirlo o dejarlo así y enlazar con la url de nuestro blog para actualizar la página.




0

¿Qué es un referrer?

Eso de los códigos misteriosos hizo que alguien preguntar ¿qué es document.referrer?

En JavaScript hay un "objeto" llamado document que es una referencia a la página que estamos viendo; con eso, podemos modificarla:
document.write("HOLA");
u obtener alguna información como por ejemplo:

document.bgColor es el color de fondo [click]
document.domain es el dominio del servidor [click]
document.location la URL [click]
document.title el titulo de la página [click]
document.referrer es la página de la que viene el usuario [click]

Así que, consultando el dato de document.referrer sabremos si se ha ingresado desde otro blog, desde algún enlace externo o si llegó desde un buscador en cuyo caso también nos dirá qué estaba buscando.

Es fácil comprobarlo, si agregáramos un elemento HTML a nuestro blog y allí pusiéramos esto:
<script type="text/JavaScript">document.write(document.referrer)</script>
estaríamos mostrándo a quien ingresa, desde donde viene o nada si es que es un ingreso directo.

¿Para que sirve saber eso? Muchos lo utilizan para mostrar determinado contenido en función del acceso; por ejemplo, es común que ciertos sitios coloquen publicidad cuando se ingresa a través de buscadores pero no lo hagan si se ingresa de otro modo, es una forma de privilegiar a los usuarios habituales. Del mismo modo hay decenas de ejemplos en la web que juegan con ese dato.

En netmechanic.com proponen algunos métodos sencillos, por ejemplo, un mensaje de bienvenida:
<script type="text/JavaScript">
if (document.referrer != '') {
alert('Gracias por visitarnos desde '+document.referrer);
}
</script>
Claro que esto así puesto daría como resultado cosas un poco extrañas :)

Otra forma de usarlo es para dirigir a los visitantes a otra página
<script type="text/JavaScript">
if (document.referrer = 'http://deDondeVienen") {
location.href = "http://aDondeRedirigimos";
}
</script>
No es muy agradable hacer eso, en todo caso, es mejor mostrar un pop-up:
<script type="text/JavaScript">
function newWindow(newContent) {
if (document.referrer = 'http://deDondeVienen") {
winContent = window.open(newContent, 'nextWin', 'right=0,top=20,width=350,height=350,toolbar=no,scrollbars=no,resizable=no')
}
}
newWindow('URL_contenido')"
</script>
En webtaller.com hay más opciones, una de ellas es más razonable ya que filtra los resultados:
<script type='text/JavaScript'>
//<![CDATA[
// creamos una lista de direcciones web que nos interese detectar, cualquiera sea
var procedenciaValida = new Array(
'http://www.google',
'http://bing.com',
'http://twitter.com'
);
// creamos una lista de mensajes para cada una de esas direcciones
var mensajeValido = new Array(
'Llegó utilizando el buscador de Google',
'Llegó utilizando el nuevo buscador de Microsoft',
'Hizo click en un enlace de Twitter'
);
// verificamos si el visitante llega desde alguna de ellas
var ok = false;
var elMensaje = 0;
for(i in procedenciaValida) {
if(document.referrer.indexOf(procedenciaValida[i]) > -1) {
ok = true; // si es así será true
cual = i;
}
}
// y si es así, hacemos algo
if(ok) {
document.write(mensajeValido[cual]);
}
//]]>
</script>
Ese "algo" a hacer puede ser cualquier cosa, un texto, una imagen, una ventana, un elemento oculto, sólo hay que usar la imaginación.

0

Un buscador completo


Google sabe todo, hasta donde dejamos esas cosa que siempre se pierden ...

0

Personalizar la Barra de Videos de Google

Entre los gadgets que se incluyen en Blogger hay uno llamado Barra de Videos. Es sencillo de usar, hacemos click y nos muestra una serie de opciones; podemos ponerle un título, seleccionar si queremos mostrar los videos más vistos de YouTube o los más valorados o los más recientes. También podemos elegir mostrar canales de usuarios o videos relacionados con ciertas palabras clave.


El resultado, será una barra vertical, nada configurable ya que el códiog que veremos en la plantilla poco dice.


Pero ese no es el único modo. El mismo gadget está disponible en Google AJAX Search API y allí, las alternativas son otras e incluso, con paciencia podríamos configurlarla modificando determinadas cosas.

La primera gran diferencia es que podemos elegir otro modelo y en lugar de ser vertical, ubicarla de manera horizontal. En el wizard, vamos seleccionando opciones y previsualizando el resultado. Por ejemplo, si sólo queremos mostrar nuestro canal, bastará escribir el nombre y desmarcar todo lo demás. Si quisiéramos mostrar varios canales de usuarios, deberíamos ponerlos separados por comas. Una vez que lo tenemos configurado, le pedimos que nos muestre el código a insertar.

<!-- ++Begin Video Bar Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual videobar.
// You can place this anywhere on your page.
-->
<div id="videoBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Video Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_vbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
</style>

<style type="text/css">
.playerInnerBox_gsvb .player_gsvb {
width : 320px;
height : 260px;
}
</style>
<script type="text/javascript">
function LoadVideoBar() {

var videoBar;
var options = {
largeResultSet : !true,
horizontal : true,
autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytchannel:nombre"]
}
}

videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
GSvideoBar.PLAYER_ROOT_FLOATING,
options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
<!-- ++End Video Bar Wizard Generated Code++ -->

Así como está, la podríamos agregar en un elemento HTML y listo pero vamos a ver si podemos modificarle un poco; para eso, hay una página de ayuda del mismo Google donde se enumeran algunas alternativas.

Esta es la idea:
<!-- aquí colocaremos los estilos CSS personales -->
<style type='text/css'
/* ... ver detalles ... */
</style>

<!-- este es el contenedor donde se mostrará la barra -->
<div id="videoBar-bar"> <span>Cargando ...</span> </div>

<!-- aquí se carga el API de búsqueda de Google, si ya lo estamos usando no es necesario incluirlo otra vez -->
<!-- el CSS de ese API no es necesario en absoluto así que no lo incluyo -->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw" type="text/javascript"></script>

<!-- aquí se cargan los scripts del API -->
<script type="text/javascript"> window._uds_vbw_donotrepair = true; </script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new" type="text/javascript"></script>
<!-- aquí se cargaría el estilo gsvideobar.css pero prefiero agregarlo por separado así que lo ignoro -->

<!-- la función que ejecuta el script -->
<script type="text/javascript">
function LoadVideoBar() {
var videoBar;
var options = {
largeResultSet : !true, horizontal : true, autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytchannel:NOMBRE"] }
}
videoBar = new GSvideoBar(document.getElementById("videoBar-bar"), GSvideoBar.PLAYER_ROOT_FLOATING, options);
}
// esta función se cargará al terminar la carga del blog
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
videoBar-bar es un DIV donde se mostrará la barra una vez cargada y puede tener cualquier otro nombre.

Para indicar qué cosas queremos mostrar usamos la línea que dice executeList : [], allí, podemos colocar un canal:
executeList : ["ytchannel:NOMBRE"]
o varios canales:
executeList : ["ytchannel:unNOMBRE","ytchannel:otroNOMBRE"]
o usar palabras claves:
"ytfeed:most_viewed.this_week" es la opción Most Viewed Videos
"ytfeed:top_rated.this_week" es la opción Top Rated Videos
"ytfeed:google_news" es la opción Top News Videos
"ytfeed:recently_featured" es la opción Recently Featured Videos
y todos son combinables, así que podemos usar varios, sólo hay que separarlos con comas.

Lo mismo hacemos si queremos agregar expresiones de búsqueda, basta colocarlas entre comillas:
executeList : ["ytchannel:NOMBRE",,"beatles"]

Como dije, el CSS por defecto se carga si incluimos gsvideobar.css pero, prefiero no hacerlo y agregarlo a mano para personalizarlo:
/* el rectángulo donde mostraremos la barra de videos */
#videoBar-bar {margin: 0 auto; width: 425px;}
#videoBar-bar span {color: #BB0000; font-size: 11px;}

/* los colores de los enlaces y los textos */
.playerBox_gsvb div.alldone_gsvb, .playerBox_gsvb a.title_gsvb {color:#DEF;}
.playerBox_gsvb div.alldone_gsvb:hover, .playerBox_gsvb a.title_gsvb:hover {color:#FFF;}

/* cada una de las miniaturas */
.resultsBox_gsvb div.resultDiv_gsvb {border-color: #789; margin-left: 2px;}

/* la ventana modal donde se muestran los videos */
.floatingPlayerBox_gsvb, .floatingPlayerBox_gsvb * {background-color: #345;}
.floatingPlayerBox_gsvb {border: 1px solid #567; -moz-border-radius: 10px;}
.floatingPlayer_gsvb {background-color: #123; -moz-border-radius: 5px;}
.floatingPlayerBox_gsvb {opacity: 0.8; position: absolute; z-index: 9998;}
.floatingPlayer_gsvb {position: absolute; z-index: 9999;}
.floatingBranding_gsvb {position: absolute;}

/* contrl de esa ventana con el reproductor */
.playerBox_gsvb {display:block; margin: 5px 10px 5px 10px; text-align: center;}
.idle_gsvb {display: none;}
.playing_gsvb {display: block;}

/* es el reproductor en si mismo */
/* small: 180x135, medium: 260x195, large player: 320x260, extra large: 480x380 */
.playerInnerBox_gsvb .player_gsvb {height: 260px; width: 320px;}
.playerInnerBox_gsvb div.player_gsvb {margin: auto;}
.floatingPlayer_gsvb .playerInnerBox_gsvb div.player_gsvb {margin: 0;}
.playerBox_gsvb div.alldone_gsvb {cursor: pointer; display: inline; font-size: 11px;}
.playerBox_gsvb div.title_gsvb {font-size: 11px; margin-top: 2px; text-align: center;}

/* la tabla donde se muestran las cuatro miniaturas */
.full_gsvb {display: block;}
.empty_gsvb {display: none;}
table.resultTable_gsvb {border-collapse: collapse;}
table.resultTable_gsvb td {border: none;}
div.resultDiv_gsvb {background-color: #000; border: 1px solid; height: 79px; text-align: center; width: 104px;}
div.smallResultDiv_gsvb {height: 41px; text-align: center; width: 54px;}
div.resultDiv_gsvb img {cursor: pointer; display: inline;}

/* Auto Execute List Status Box (no sé qué es) */
div.statusBox_gsvb {padding: 4px;}
div.statusItem_gsvb {color: #DEF; cursor: pointer; display: inline; font-weight: bold; margin-right: 6px; white-space: nowrap;}
div.statusItemSelected_gsvb {color: #000; text-decoration: none;}

/* y le quitamos el logo :$ */
.gsc-branding{display: none;}
Y este sería el resultado del experimento:


Cargando ...

0

Imagen multiusos

Las imágenes flotantes se pusieron de moda hace tiempo, al principio fue algo decorativo o sin utilidad alguna que viene a ser lo mismo, más tarde llegaron las imágenes aleatorias la utilidad era la misma pero resultaba más vistoso.
Nos quisimos complicar un poco y nos decantamos por imágenes flotantes que desde el final del blog nos llevaban a inicio, más tarde ese viajecito de ir a inicio lo hicimos con efecto deslizante.
Por si eso fuera poco también añadimos el efecto para que desde inicio nos llevara al final.

Muy divertido, pero no se piensen que con eso termina el juego.
Me pregunta Shadow Sneak la forma de añadir imágenes flotantes-aleatorias-que nos lleven a inicio-con efecto deslizante ¿no es lo más cercano a una imagen multiusos?

Basándonos en las explicaciones de entradas anteriores veamos como conseguir ese efecto.

Lo principal es tener en nuestra plantilla el script de Prototype y Scriptaculous que podemos añadir justo antes de </head> si ya lo añadimos con anterioridad para otro efecto no es necesario añadirlo de nuevo.

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Una vez tenemos el script para el efecto deslizante nos dirigimos justo antes de </body> allí vamos a crear un div donde incluiremos el código que nos va a llevar a inicio, ese código es un enlace y sería algo así:

<div id='flotante'>

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>texto o imagen</a>

</div>

lo que haremos será prescindir de la parte donde añadíamos el texto o imagen, del cierre del enlace y del div.

Añadimos a continuación el script de imágenes aleatorias y este sería el código completo.

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>

<script type='text/javascript'>
// <![CDATA[
imagenes = new Array(4)

imagenes[0] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[1] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[2] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"
imagenes[3] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"

aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])
// ]]>
</script>

</a>
</div>

Al final hemos cerrado el enlace que dejamos abierto </a> y también añadimos el cierre del </div>

» Donde url-de-la-imagen añadimos la url de las imágenes.

» Si deseamos añadir más imágenes aumentamos el número de líneas con:
imagenes[4] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'/>"

» Cada imagen va numerada en imagenes[X] modificaremos donde dice
imagenes = new Array(4) y sustituimos 4 por el número de nuestras imágenes contabilizando la primera imagen imagenes[0] como una imagen.

» Si deseamos que al pasar el ratón nos muestre el título añadiremos title de la siguiente forma

imagenes[1] = "<img border='0' src='url-de-la-imagen' style='position:fixed; bottom:0; right:0;'title='aquí-tu-texto'/>"





Las imágenes son creaciones de « Shadow Sneak »