Las marquesinas son texto en movimiento. Ya funciona con ambos
navegadores (hasta hace poco Netscape no lo implementaba, el 7 ya lo
hace).
La etiqueta es <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>. Sin atributos quedará:
<BODY> <MARQUEE> Aquí pongo el texto </MARQUEE>
</BODY>
Aquí pongo el texto
Así vemos los que tiene por defecto y que son: ocupa todo el ancho del
cuadro, tiene la altura de la línea de texto y va de derecha a
izquierda.
Podemos poner varias frases si colocamos <P> o <BR> dentro.
<BODY>
<MARQUEE> Aquí pongo un texto <P>
Y aquí otro
</MARQUEE>
</BODY>
Aquí pongo el textoY aquí otro
Vamos a empezar a meter atributos y a cambiar un poco la cosa.
Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.
<BODY>
<MARQUEE WIDTH=70% HEIGHT=40> Aquí pongo el texto </MARQUEE>
</BODY>
Que se verá con 70% de ancho (del cuadro azul que para los efectos es como si fuera la pantalla completa) y 40 px de alto.
Aquí pongo el texto
El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.
<BODY>
<MARQUEE BGCOLOR=#7070ff> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
No funciona con imágenes como fondo.
No he conseguido alinear el texto que rodea al cuadro de marquesina con la vieja ALIGN, que toma valores de top, bottom, middle, left y right.
Según todos lo manuales debería funcionar como lo hacían en la etiqueta
<IMG> pero no me funciona con Explorer 6 y con Netscape 7 hace
cosas raras.
El atributo BEHAVIOR es el que da más juego, su valor por defecto es scroll que significa que aparece por la derecha, se va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:
<BODY>
<MARQUEE BEHAVIOR=slide> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
Para verlo funcionar actualiza la página ya que al pararse y funcionar sólo una vez, no lo vemos.
<BODY>
<MARQUEE BEHAVIOR=alternate> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
DIRECTION servirá para definir hacia donde mando el texto que, por
defecto, va hacia la izquierda. Yo puedo mandarlo a la derecha así:
<BODY>
<MARQUEE DIRECTION=right> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
O hacia arriba o abajo con down y up.
<BODY>
<MARQUEE HEIGHT=50 DIRECTION=up> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
La velocidad de desplazamiento varía con SCROLLAMOUNT, que marca los
saltos según el valor numérico; y SCROOLDELAY que determina el retraso
en el movimiento en milisegundos. Veámoslo:
<BODY>
<MARQUEE SCROLLAMOUNT=40> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
Mareante...
<BODY>
<MARQUEE SCROLLDELAY=1000> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
Y este desespera (le he puesto 1000, que es un segundo).
El atributo LOOP (indefinido por defecto, como ya hemos visto), define el número de veces que vamos a ver moverse el texto.
<BODY>
<MARQUEE LOOP=2> Aquí pongo el texto
</MARQUEE>
</BODY>
Aquí pongo el texto
Tendremos que actualizar la página.
Los atributos HSPACE Y VSPACE los conocemos, definirían el espacio horizontal y vertical del texto fuera de la marquesina.
<BODY>
<MARQUEE BGCOLOR=yellow VSPACE=20> Aquí pongo el texto
</MARQUEE>
Otro texto.
</BODY>
Aquí pongo el textoOtro texto
Ni que decir tiene que podemos aplicar otras etiquetas como la de
centrado, por ejemplo. Le pondremos color para que se distinga del
fondo.
El tema del alojamiento de los scripts
es un tema recurrente debido a que no todos los servicios gratuitos de
hosting admiten este tipo de archivos, o bien, porque pueden tardar
mucho en cargar si el ancho de banda del hosting es reducido, lo que
trae consigo que el blog tarde en cargar.
Si bien podemos alojarlos en Google Sites o Dropbox también podemos alojar los scripts en la propia plantilla, de este modo el tiempo de carga de la página será menor y dejaremos de estar dependiendo de un servicio externo a Blogger.
Alojar los scripts directo en la
plantilla funciona para casi todos los casos, aunque es posible que
haya uno u otro script que se resista y ese sí tendremos que alojarlo en
un servicio independiente.
Para alojar los scripts en la plantilla hay dos formas, una es entrando a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:
<script type='text/javascript'>
//<![CDATA[ ...contenido del script...
//]]>
</script>
Habremos de agregar donde se indica el contenido del script.
¿Cómo sacar el contenido del script?
Pega la URL del script en la barra de direcciones de tu navegador, si
abre una página llena de códigos ese es el contenido del script; si en
su lugar descarga un archivo con extensión .js entonces abre el archivo
con WordPad y copia y contenido del script.
La otra opción es entrar en Diseño | Añadir un gadget | HTML/Javascript y ahí pegar en un sólo elemento el contenido de todos los scripts que quieras. Se haría casi de la misma forma:
<script type='text/javascript'> ...contenido del script...
</script>
Con cualquiera de estas dos formas tendremos los scripts alojados en
nuestra propia plantilla con lo que dejaremos de depender de otros
servicios y nos ahorraremos algo de tiempo en la carga de la página al
no depender del ancho de banda de los demás.
La gran ventaja de este reproductor es que servirá si los visitantes de
nuestra página acceden a ella a través de dispositivos móviles
(smartphones/tablets) usando los navegadores Firefox o Chrome, si se
hace desde una PC lo pueden hacer a través de cualquier navegador. Su
código es muy sencillo, solo deben agregar la url de la ip de la radio y
listo. El código se debe agregar en modo HTML o en un gadget
HTML-Javascript. Si no quieren que la reproducción inicie
automáticamente retiren la palabra "autoplay" de la primera línea del
código.
------------------------------------
<audio autoplay controls>
<source src="URL de la IP de la RADIO/;stream.nsv" type="audio/mpeg"></source>
Tu navegador no soporta audio en HTML5. Por favor usa Firefox o CHROME.
</audio>
------------------------------------
Por favor revisen luego de agregar la URL de la IP de la radio que no
falte o sobre un caracter, por ejemplo que queden dos barras inclinadas
al final de la URL de la ip, o falten o sobren unas comillas.
Ahora, para obtener la URL de una emisora conozco la siguiente forma, ingresa a esta página mundoXAT.com selecciona un género, y luego haz clic sobre el botón "Obtener IP",
ahora, notarás que cada URL termina con un número antecedido con dos
puntos, ese último número que sigue a los dos puntos es el puerto, en dado caso que quieras usar un reproductor personalizado que use Flash y necesites el puerto y la URL.
La forma más fácil de colocar una radio en tu página, MP3 Player
es un reproductor que puedes configurar en varios aspectos, qué botones
mostrar, qué colores, y qué funciones agregar. Los pasos para poner
este reproductor en tu página son muy sencillos, 1º coloca el código que
está más abajo ya sea en un Gadget HTML o en una entrada en modo HTML;
para el Gadget la ruta sería: Diseño / Añadir un gadget / y seleccionas HTML-Javascript y 2º agrega la URL de la estación de Radio que quieras compartir, agregándole al final la extensión « /;stream.nsv »
para que el código reconozca la URL como Stream; más adelante te
muestro donde y cómo conseguir la URL de una Radio en la internet.
<param name="FlashVars" value="mp3=URL de tu estación de Radio/;stream.nsv&showstop=1&showvolume=1&volumewidth=50&volume=150&bgcolor1=191787&bgcolor2=000000" />
</object>
Si quieres que inicie automáticamente al ingresar a la página agrega: &autoplay=1después de &volume=150
Si quieres cambiar el color de los botones agrega: &buttoncolor=ff3805 después de los otros colores.
Si quieres cambiar el color de los botones que se muestra cuando se coloca el mouse sobre ellos, agrega:
&buttonovercolor=56ff3d después de los otros colores.
"bgcolor" value="#000000" Define el color HTML del fondo del Reproductor (Esquinas más que todo).
&volume=150 Define el nivel de volumen. Cero lo más bajo - 200 lo más alto.
&bgcolor1=191787 Define el color HTML desde la parte media del reproductor hacia arriba.
&bgcolor2=000000 Define el color HTML desde la parte media del reproductor hacia abajo.
Si quieres puedes visitar su página principal MP3 Player y editar aún más el código del reproductor, te muestro a continuación una imagen para que te guíes más rápido.
Radio a través de Dewplayer
Una muy buena opción, permite elegir si la radio inicia automáticamente
o no al ingresar a la página, solo debes subir el archivo .swf de su
reproductor a un servidor en la nube, te recomiendo hacerlo a través de DRIVE (Leer en el tema la parte del enlace público). Dropbox ya no permite crear enlaces públicos en las cuentas nuevas.
Los pasos son muy sencillos, 1º subes el
archivo dewplayer-vol.swf a DRIVE para tener su URL o link pública, 2º
coloca el código que está más abajo ya sea en un Gadget HTML o en una
entrada en modo HTML; para el Gadget la ruta sería: Diseño / Añadir un gadget / y seleccionas HTML-Javascript y 3º agrega la URL de la estación de Radio que quieras compartir, agregándole al final la extensión « /;stream.nsv » para que el código reconozca la URL como Stream, y también coloca la url pública del archivo .swf.
Descargar Archivo dewplayer-vol.swf
Código del Reproductor de la Radio
<object type="application/x-shockwave-flash" data="URL del archivo dewplayer-vol.swf" width="240" height="20" id="dewplayer-vol"> <param name="movie" value="URL del archivo dewplayer-vol.swf" />
<param name="flashvars" value="mp3=URL de tu estación de Radio/;stream.nsv" />
<param name="wmode" value="transparent" />
</object>
Si quieres que la Radio inicie automáticamente al ingresar a la página agrega lo siguiente al final del link/URL de la Radio « &autostart=1 » si también quieres ajustar el volumen agrega lo siguiente « &volume=50 » siendo 0 lo más bajo y 100 lo más alto.
Un ejemplo del código con autostart y volume.
<object type="application/x-shockwave-flash" data="URL del archivo dewplayer-vol.swf" width="240" height="20" id="dewplayer-vol"> <param name="movie" value="URL del archivo dewplayer-vol.swf" />
<param name="flashvars" value="mp3=URL de tu estación de Radio/;stream.nsv&autostart=1&volume=50" />
<param name="wmode" value="transparent" />
</object>
Desde la página de Dewplayer también
puedes descargar el archivo.swf, la diferencia es que en el zip que
ellos tienen disponible para la descarga vienen muchos archivos y te
podrías confundir, de todas maneras la puedes visitar y ver todo lo que
ofrecen (página en inglés y francés).
Radio a través del reproductor de Microsoft
No publico un ejemplo ya que este reproductor inicia automáticamente
aunque se coloque en su código que no lo haga, eso sí, su gran ventaja
es que es muy fácil de usar. En pruebas que realicé (4-4-2012) en el
único navegador que no se visualizó fue en Opera. Para usarlo solo
debes colocar el siguiente código siguiendo los mismos pasos del
reproductor anterior.
<embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
showgotobar="false" transparentatstart="true" autostart="true"
showstatusbar="true" src="URL de tu estación de Radio" type="application/x-mplayer2" height="45" width="250" bbclient="0" name="MC1"></embed>
Puedes modificar su ancho desde "width".
Radio a través de Cadenatop
Esta es una radio que ya viene lista, es decir, ya viene con cuatro
opciones musicales para que los visitantes de tu página elijan la que
quieran. Tiene en contra que inicia automáticamente, aunque en su página
principal brindan un código para que no lo haga, en las pruebas que
realicé (4-4-2012) ese código no funciona y la radio inicia de todas
maneras.
Top Latino Radio: Lo más escuchado en el mundo latino, en español e inglés.
Radio Reggae: Solo música reggae, en español y en inglés.
Top Urbano: Música urbana, hip hop y reggaeton.
Top-x: Música de los 90′s en inglés.
Para usar este reproductor solo debes colocar el siguiente código siguiendo los mismos pasos del primer reproductor.
Si tienes un blog de noticias con muchos colaboradores seguro publicarás más de cinco post al día, por lo que actualizar la página principal del blog es básico para el lector.
Este
script hace que la página se actualice automáticamente cada determinado
tiempo, sin necesidad de presionar ningún botón de "Actualizar".
El
script original hace que se recargue todo el blog, tanto la portada
como las entradas individuales, yo le he hecho una modificación para que
sólo se actualice la portada que es donde aparecen los post nuevos, de
esta forma quién esté leyendo una entrada individual no verá
interrumpida su lectura con la recarga de la página.
El
script hará que cada minuto se recargue sola la página principal, para
modificar el tiempo entre una actualización y la siguiente cambia lo que
está en rojo. Ahí está en 60 segundos, si quisieras menos tiempo cambia
el valor en milisegundos, por ejemplo 10 segundos sería 10000.
Si quieres que el script haga que se actualicen también las páginas individuales entonces el código que deberás pegar antes de </head> es el siguiente:
Bueno, lo prometido es deuda y aunque no siempre puedo cumplir mis promesas esta vez va a ser que sí. Aquí tenéis aquel gadget para mostrar tweets que publiqué en anteriores entradas en un par de versiones (1) (2) y que por el cambio de API de Twitter dejó de funcionar.
Para que todo vuelva por sus fueros he echado mano deaquel código de Jason Mayesque vimos al principio de verano y que nos permitía leer el feed de Twitter y mostrarlo adaptado a nuestras necesidades, aunque para simplificar la instalación lo he alojado en Google Code y así sólo hay que hacer una llamada para que funcione.
Adicionalmente lo he combinado con el truquillo delslider jQuery más sencilloy entre una cosa y otra obtenemos un rotador de tweets que podemos personalizar tanto en contenido como en aspecto.
Y aquí lo tenemos con un primer estilo, el mismo que ya vimos y que muchos tenéis pero que no os funciona. Bueno, que no os funcionaba ;)
Ticker para mostrar enlaces a entradas extraídos desde un feedhttp://ow.ly/38v3cr
El código, en el caso de Blogger, hay que incluirlo dentro de un gadget tipo HTML/JavaScript y es el siguiente. Si ya tenéis jQuery en vuestra plantilla la primera línea la tenéis que suprimir:
¿Y qué tenemos que cambiar de ahí? Pues casi nada. Sólo la ID correspondiente a vuestro propio gadget de Twitter porque el que veis es el mío. Ahora si no se genera desde la página oficial, pues no funcionará nada. Es el número347086380704342017que veis en el código.
La forma de obtenerlo está detallada enMostrar tweets tras el fin de la API 1 de Twitter, en el apartado2. Relacionar con el gadget oficial, pero básicamente se trata de acceder a lapágina de gadgets Twitter, crear uno que muestre el tipo de datos que deseamos (cronología, favoritos, etc.) y copiar la identificación que se le asigna.
Otra cosa que se puede cambiar es el número de tweets a mostrar. Es ese tercer parámetro de la funcióntwitterFetcher.fecth, o lo que es lo mismo, ese número5.
Por último, el intervalo de tiempo entre tweets es en el ejemplo el parámetro4000e indica la demora en milisegundos.
Y para conseguir otro estilo distinto pues sólo se trata de ajustar la parte CSS. Este sería otro ejemplo de aspecto utilizando otras reglas de estilo. En concreto las que vienen tras la demo.
Ticker para mostrar enlaces a entradas extraídos desde un feedhttp://ow.ly/38v3cr
Nota: Para no tirar todos del mismo fichero y que un día se le inflen las narices a Google Code y nos deje tirados bloqueándolo, lo mejor sería que descargarais el ficheroTwitter-post-fetcher-7.js, lo alojarais bajo vuestro propio control (en el mismo Google Code o Dropbox, por ejemplo) y que sustituyerais la dirección que puse por la vuestra.
No hace mucho vimos como montar unslidermuy simple para mostrar una serie de imágenes fijas (con o sin enlace) que iban pasando de manera secuencial. La cosa es que esto no cubre las necesidades de algunos que quieren que esas imágenes sean extraídas de las entradas del propio blog y que al mismo tiempo sirvan de enlace para acceder directamente a las mostradas.
Eso es lo que se viene llamandoslider de entradas recientesy precisamente lo que vamos a ver a continuación para tener una variante más completa de aquel visor de imágenes que vimos.
Evidentemente el código ya no será tan simple pero tampoco es que sea muy largo, así que en lugar de cargar un fichero externo, propongo que se meta en la plantilla y que luego ya carguemos el feed desde un gadget.
Enesta página de pruebaspodéis ver una demostración de cómo funciona con el código que veremos a continuación.
Lo primero de todo sería colocar antes del</head>de nuestra plantilla, lo mismo que la otra vez: la librería jQuery, los estilos de la caja que forma el slider (estos también se pueden poner en la parte CSS) y el código que generaba laanimación.
Como decía, esto es exactamente lo mismo que vimos enPosiblemente el slider jquery más sencilloy la diferencia radica sólo en cómo vamos a construir la lista de imágenes/enlaces. En aquel la hacíamos manualmente y ya habíamos terminado, pero en esta ocasión crearemos una función que leerá un feed y de ahí extraerá título, URL e imagen de los últimos posts, creando automáticamente esa lista.
En esa parte de arriba, lo único que habría que tener en cuenta es no duplicar la carga de jQuery que es lo que hace la primera línea. Si ya lo tenemos en nuestro plantilla esa línea hay que omitirla.
Y esta es la función que recopila los datos y crea la lista. Hay que ponerla a continuación de lo anterior:
<!-- Obtener elementos entradas recientes-->
<script type='text/javascript'>
//<![CDATA[
var numposts_gal = 6;
var salida_gal = '';
function galeriaposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
if (numposts_gal > numPosts) {numposts_gal = numPosts;}
for (i = 0; i < numposts_gal; ++i) {
var entrada = json.feed.entry[indexPosts[i]];
var titulo = entrada.title.$t;
for (var k = 0; k < entrada.link.length; k++) {
if ( entrada.link[k].rel == 'alternate') {enlace = entrada.link[k].href;break;}
}
if ("content" in entrada) {var contenido = entrada.content.$t;}
x = contenido;
a = x.indexOf("<img");
b = x.indexOf("src=\"", a);
c = x.indexOf("\"", b + 5);
d = x.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {var imagen = d;}
else {var imagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZqyufYShPjwcefeFgbngzQBzpXTygqkY9-Bjo-GPPiEGQg8Ajchavi0Pjkvfzw8RlwnKu13iC3u6kqToeNjcgIdGK9fqXiEznbO2pD4qp0pDnIR8jbilD_GTa1Ink6409gNKmd1C4Ac/s0/sin-imagen.png';}
salida_gal += '<div><a href="' + enlace + '"><img src="' + imagen + '" /></a>';
salida_gal += '<p>' + titulo + '</p></div>';
}
document.getElementById('slider').innerHTML = salida_gal;
}
//]]>
</script>
Y ahora viene el último paso que es situar en el lugar dónde queremos que salga el slider, una caja vacía con la id#slidery la llamada a la función que generará la lista de imágenes/título/enlace.
Tal cual viene se puede incluir en un gadget tipo HTML/JavaScript para ponerlo bajo la cabecera o encima del cuerpo de las entradas.
<!-- SLIDER HOME RECIENTES -->
<div id='slider'></div>
<script style='text/javascript'>
var numposts_gal = 6; // Número de entradas a mostrar
</script>
<script src='http://www.oloblogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=galeriaposts&max-results=10'></script>
En ese trozo es dónde personalizaremos el número de entradas a mostrar y el feed desde dónde queremos cargar las imágenes. En este mismo orden son las dos cosas marcadas en verde. Se puede poner cualquier dirección de feed y no sólo el propio.
Si por casualidad alguien quiere ver más de 10 entradas, el valor trasmax-resultsdeberá ser aumentado.