Este servicio me parece muy interesante para el que necesite una especie de gadget que muestre una imagen aleatoria. La web que lo proporciona es Lorempixum y allí podréis encontrar un poco más de información.
Lo principal es que es muy fácil de utilizar, sin necesidad de javascript y que ni siquiera requiere registro. Simplemente hay que añadir dónde queráis insertar la imagen en cuestión, un código de imagen (SRC) y a modo de subdirectorios, los parámetros con las medidas.
<img scr="http://lorempixum.com/400/200"/>
Como veis, se trata de poner la dirección del servicio y a continuación, el ancho y el alto. No he probado los límites de tamaño máximo, pero con medidas razonables funciona. Podemos utilizar tantas como queramos, teniendo en cuenta que si usamos tamaños idénticos, nos saldrán imágenes idénticas:
lorempixum.com/170/200/
lorempixum.com/170/200/
lorempixum.com/150/200/
Con eso es suficiente, aunque hay algunas variantes que también pueden ser interesantes. Por ejemplo, podemos añadir después de las medidas, una palabra clave de entre las distintas opciones que podéis encontrar en la web y así centrar la temática de la imagen:
lorempixum.com/150/200/sports
lorempixum.com/150/200/city
lorempixum.com/150/200/food
Por último, anteponiendo una g a las medidas, forzaremos a que la imagen se muestre en tonos de gris:
lorempixum.com/g/500/300/technics
Servicio descubierto gracias al blog de Daniel Ulczyk.
Por fin he tenido un pequeño rato para ver esto del botón de Divoblogger. Algunos ya sabéis que con el código anteriormente facilitado, resulta imposible situar más de un botón en la misma página y por tanto, en la página inicio y las de navegación, sólo era visible en el primer post. Pues bien, viendo lo que el script del botón hacía, la solución es muy fácil.
Se trata de poner de nuestro lado lo que el PHP hacía del suyo, que es simplemente comprobar la existencia de la dirección del post en DivoBlogger y luego mostrar el botón adecuado (súbelo o vótalo). Todo eso se hace a través de un iframe.
El código para Blogger sería este y digo para Blogger porque para enviar la dirección adecuada, vamos a utilizar una variable de este sistema, data:post.url, que es la que contiene precisamente la URL de cada entrada:
De esta manera, podemos colocar todos los botones que nos apetezca.
Lo de centrarlo o situarlo en línea con otros botones, cosa que también habéis preguntado algunos, se hace insertando el código dentro de un div y dando a este, respectivamente, el estilo necesario para centrar o para flotar.
CENTRADO
<div style="width:ANCHO_DEL_BOTONpx;margin:0px auto;">CODIGO DEL BOTON</div>
VARIOS BOTONES EN LINEA
<div style="float:left;">CODIGO DEL BOTON1</div>
<div style="float:left;">CODIGO DEL BOTON2</div>
<div style="float:left;">CODIGO DEL BOTON3</div>
Y ya que estamos, para centrar diversos botones que están juntos como se explica en el último trozo, se ha de meter todo dentro de otro div como el del primer ejemplo, es decir, con un margin:0px auto y un width igual al ancho total de todos los botones sumado.
<div style="width:ANCHO_TOTALpx;margin:0px auto;">
<div style="float:left;">CODIGO DEL BOTON1</div>
<div style="float:left;">CODIGO DEL BOTON2</div>
<div style="float:left;">CODIGO DEL BOTON3</div>
</div>
Tal y como vimos en otras entradas anteriores sobre YouTube, al código de inserción que nos facilitan desde ese servicio se le pueden añadir cosas. Esas cosas son parámetros que sirven para ajustar la forma en que funciona el reproductor, como el alto y el ancho del visor o la reproducción automática. Hoy veremos otro parámetro más para que al pulsar playel vídeo comience exactamente dónde nos interesa y también, una manera de obtener algunas de las imágenes previas de cada vídeo.
El parámetro para situar el punto de comienzo de reproducción es start, que añadido junto con una cifra, permite que el vídeo comience a reproducirse exactamente desde un punto determinado. La cifra se corresponde con los segundos que queremos que se omitan. Esto no quiere decir que el vídeo se trunque, sino sólo que comenzará desde ahí.
Este es un ejemplo para que comience en el minuto 2 y 36 segundos. Esto pasado todo a segundos es exactamente 156. Como vimos anteriormente, los parámetros se añaden después del signo de interrogación (?) tras la dirección del vídeo y si ya hay otro parámetro (en el ejemplo rel=0) añadiendo además delante del parámetro, un símbolo &:
<div align="center"><iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/g1T71PGd-J0?rel=0&start=156" frameborder="0" allowfullscreen></iframe></div>
Si no vamos a necesitar ningún parámetro adicional y eliminamos los que pudiera llevar el código que copiamos, podemos indicar los minutos y segundos sin pasar todo a segundos, usando #t:
<div align="center"><iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/g1T71PGd-J0#t=2m36s" frameborder="0" allowfullscreen></iframe></div>
Y como siempre, la demo:
Y ahora vamos al tema de las vistas previas, para lo cual utilizaremos las mismas imágenes que captura el propio YouTube.
Aquí sólo hay que saber la identificación que YouTube le asigna al vídeo en cuestión y que es lo que encontramos dentro de la dirección del SRC, tras el EMBED. En el caso del ejemplo sería g1T71PGd-J0.
Con esto, sólo tenemos que utilizar esta dirección y sustituir las XXXXXX por nuestro identificador, para obtener la imagen:
Y descubriremos otras sorpresitas si cambiamos el 0 antes de la extensión jpg por 1, 2 y 3. Respectivamente, veremos:
¿Mola no? Pues esto puede servir para mostrar una imagen como enlace directo al sitio de YouTube dónde se puede ver el vídeo o, para lanzar desde ahí el vídeo para que se vea en una ventana modal tipo LightWindow. La lástima es que si bien la primera imagen se puede redimensionar para que se muestre más pequeña, con las otras tres no podemos hacer lo inverso porque perderían demasiada calidad.
Si tenéis curiosidad, probad que pasaría si utilizamos 4.jpg, pero creo que ya resulta de una menor utilidad tener una imagen fija de una cámara ;)
Todavía no había hablado de este nuevo agregador social porque estaba en Beta, pero parece que ya está totalmente lanzado. Se trata de DivoBlogger, un lugar a dónde puedes enviar cualquier artículo propio o ajeno para su promoción, con la única condición de que pertenezca a un blog.
Está basado en el código de Menéame y de ahí su parecido, pero la diferencia sobre él es la ya comentada de que las entradas pertenecen siempre a blogs y que se pueden mandar los propios artículos sin que por ello te corran a gorrazos, tal y como sí ocurre en el susodicho. Eso sí, como te pases con el autobombo, lo mismo te "apedrean". Ten mucho cuidado y no te excedas.
Los enlaces que remitas a DivoBlogger pasarán en primer lugar al Limbo, dónde permanecerán indefinidamente a menos que consigan acreditar una suficiente popularidad (votos). En ese caso pasarán al Olimpo, que es la portada del sitio con los enlaces más importantes a juicio de sus usuarios. Sin duda, una buena forma de promocionar tus entradas y de aumentar su visibilidad.
Si quieres facilitar la tarea del voto y/o envío a tus lectores hay un botón al estilo del de Facebook o Twitter para remitir el enlace de cada uno de tus posts. El código es muy sencillo:
Con eso ya tienes el botón funcionando. Lo normal será que lo insertes en la misma zona dónde tengas otros de este mismo tipo y si es el primero que decides poner, puedes hacerlo más concretamente justo después de <div class='post-header-line-1'> y te aparecerá debajo del título del post o después de <div class='post-footer'> para que aparezca justo al final del texto de la entrada.
Y para practicar y ver el sitio, ya puedes estar votando este mismo post... o enviarlo si eres el primero que lo lees ;)
Son sólo once, principalmente porque no quería alargar más el post, pero podían haber sido muchas más. Fonts2u es un sitio con una interminable colección de tipografías GNU/GPL, freeware, gratis para su uso personal, donationware, shareware o demo. Sólo hay que leer la información al respecto en el apartado de cada fuente y a funcionar
En cada muestra, el enlace directo a la página desde donde descargarla.
Cada vez que publico algo sobre un tema, inevitablemente surgen preguntas que no tienen nada que ver con la cuestión concreta pero que están en cierta forma relacionadas. Es el caso del sistema para usar YouTube como reproductor de audio, que ha dado lugar a la pregunta ¿Cómo hacer que un vídeo se reproduzca automáticamente? Cómo la respuesta es sencilla, allá vamos con la solución y su explicación.
Ahora mismo, cuando accedéis a la página de un vídeo, pinchando en Insertar, el servicio os ofrece un código basado en IFRAME (marco dónde se muestra el contenido de otra página), similar a este:
<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0" frameborder="0" allowfullscreen></iframe>
Además de el código de identificación del vídeo (ID_VIDEO), variarán las medidas de alto y ancho del IFRAME, según las originales de cada vídeo o las que vosotros marquéis, pero lo demás es idéntico en todos los casos.
En este tipo de código, tras la dirección (SRC) del vídeo, se pueden insertar algunas opciones con el símbolo ?, que en el caso del ejemplo consisten en no mostrar los vídeos relacionados (?rel=0). Pues bien, a partir de ahí podemos añadir otros parámetros, como en el caso que nos ocupa, la reproducción automática (autoplay=1), con un & y que para que sea correctamente interpretado en Blogger, añadimos con un &
<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Desde que entrasteis en el post, supongo que ya estáis comprobando que funciona ;) Si lo queréis parar, aquí está el reproductor.
El tiempo parece que no pasa por algunas canciones. Esta tiene casi 50 años.
Aprovecho aquí para comentar que no siempre es buena idea poner los reproductores en modo automático, ya que la mayoría somos mayorcitos y sabemos cuándo queremos oir/ver algo y dónde pinchar para hacerlo.
Hay mucha gente a la que incluso le molesta el audio automático en webs y puede ser que no le siente bien que le obliguéis a oir lo que en ese momento no le apetece. Y no olvidemos que la auto-reproducción, incrementa el tiempo de carga, puesto que en el código normal, esta no se produce hasta que no se pincha en el play. Evidentemente, esto va tanto por los reproductores sólo de audio, como por los de vídeo.
La forma de insertar el parámetro autoplay en el código antiguo, basado en OBJECT (para embeber) es muy similar. Como este otro nos permite algunas cosillas más -en las que ahora no vamos a entrar- veamos también cómo se obtiene.
Tras pinchar en Insertar, entre otras opciones, podréis ver un poco más abajo, una casilla de verificación con la leyenda "Utilizar código de inserción anterior". Este código anterior es precisamente el que se usaba hasta hace poco de manera única.
Cuando seleccionáis esa opción, aunque aparentemente no pase nada, el cuadro de texto que contiene el código cambia y en su interior encontramos un HTML basado en OBJECT, en lugar de IFRAME.
El código propuesto en esta ocasión tiene esta estructura:
Comprobaréis que es mucho más largo que el otro, pero es precisamente porque incluye parámetros y valores que permiten configurarlo.
Aquí, lo que hay que hacer es lo mismo que antes, pero teniendo cuidado de hacerlo en los dos sitios dónde aparecen las direcciones del vídeo. Es indiferente que se haga antes o después de otros parámetros:
Esta es una simpática aplicación para crear infografías tipo nube de tags (etiquetas), que nos pueden servir para ilustrar entradas o como motivo decorativo genérico de nuestro blog.
Su nombre es Wordle que supongo será un acrónimo de Word (palabra) y Puzzle, ya que eso más o menos es lo que parecen las imágenes obtenidas con ella.
Su funcionamiento es automático y sólo hay que acceder al apartado Create para introducir un texto concreto, una dirección de una página o incluso un feed. El programilla ya se encarga de generar un gráfico con las palabras que considera más relevante, situándolas con distintas orientaciones, tamaños y colores.
Si se desea, se pueden forzar algunas cosas, como la omisión de las palabras más comunes de determinado idioma (léase artículos y preposiciones). También son configurables los colores, la repetición de estos, la orientación de las palabras, el número máximo de las que se deben usar, el fondo, el tipo de fuente...
Y si acaso uno no tiene muchas ganas de trabajar, siempre puede pinchar en Randomize para generar una nueva nube con estilo totalmente aleatorio.
Se me ocurre que después de obtener la imagen deseada, se podría mapear para que tuviera una utilidad un poquito más práctica y las palabras sirvieran de enlace, pero eso ya conlleva un buen trabajo adicional.
Por cierto, para ver que hace bien su trabajo ¿sois capaces de reconocer en la primera imagen de esta entrada qué texto introduje? ¿Y qué feed en la segunda? Fácil ¿no?
Un poco tarde, como es costumbre por aquí, pero llegó el momento en que puedo contaros un poco las novedades que en las últimas semanas se han producido en Blogger.
Por orden cronológico, la primera fue el anuncio de la próxima renovación de la interface para el panel de control que al parecer está en desarrollo y sobre la que el pasado día 14 de Marzo informaban desde Blogger Buzz.
Se trata de un cambio aparentemente estético pero que está sustentado en Google Web Toolkit, uno más de tantos servicios Google que en este caso facilita el desarrollo de aplicaciones complejas JavaScript, pero de gran rendimiento, con lenguaje Java.
Esto que veis a continuación, sería como quedaría el escritorio.
En el mismo post también se comentaba el próximo lanzamiento de una función de descubrimiento de contenido relacionado con el del blog que en ese momento se está leyendo. Esto es algo que a priori me parece más interesante que lo anterior, desde mi perspectiva de consumidor de información en blogs.
No es nada que no pudiéramos hacer ya antes desde FeedBurner, pero siempre se agradece la incorporación y automatización de gagdets que nos hagan más fácil la vida.
Si no tienes cuenta en FeedBurner o no has incorporado tu feed allí, este cacharro te da de alta uno automáticamente. Más fácil, imposible.
En la entrada al respecto de Vagabundia, podéis ver cómo configurar un poco el aspecto del artilugio con CSS, así como lo que hay que hacer para que se muestre en español con un pequeño cambio en el código.
La última y seguramente más espectacular, es la que incorpora a través de nuestro feed, una serie de nuevas vistas para nuestro blog. Algunos las han bautizado como vistas dinámicas.
Se trata de una serie de plantillas muy ligeras, que obtienen los datos de nuestra fuente y los muestra en diversos formatos: Flipcard, Mosaic, Sidebar, Snapshot y Timeslide. Algunos de ellos son similares a algunas plantillas Tumblr y lo que es seguro es que sorprenden en Blogger.
De momento no se han incorporado totalmente al sistema Blogger, pero hay disponible una vista previa. Para acceder a la de tu blog, sólo tienes que añadir "/view" a la dirección de tu página principal. Si no puedes verlas, comprueba en tu panel de control que tu blog es público y que tiene el feed habilitado:
http://oloblogger.blogspot.com/view
Las ventajas que tienen este tipo de plantillas además de las meramente estéticas, son principalmente su rapidez de carga y la posibilidad de ir mostrando entradas sin limite en la misma página, simplemente haciendo scroll.
El inconveniente, a menos que en las versiones definitivas sea de otra manera, es que parece que no son personalizables, por lo que de momento nos tendremos que olvidar de los botones sociales, publicidad y demás gadgets.
