jueves, 30 de junio de 2011

Oloblogger

Oloblogger


Mostrar últimos tweets en el blog y configurar su aspecto

Posted: 29 Jun 2011 04:02 AM PDT

Hace tiempo vimos los gadgets oficiales de Twitter, entre los que encontrábamos uno para mostrar tweets. Era dinámico, con actualización constante y muy mono, pero quizás en alguna ocasión necesitemos algo más sencilo y que podamos modificar para integrar totalmente con el estilo del blog.

Pues para eso, lo más básico es utilizar un JavaScript también de Twitter y adaptado para Blogger, que nos mostrará los últimos tweets de la cuenta que queramos mediante una lista simple. El estilo lo tomará del que tengamos definido por defecto para este tipo de elementos en nuestro blog.

<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script>

Este código puesto en la barra lateral o en una entrada, proporcionará los últimos tweets de la cuenta que se indique tras user_timeline. En el ejemplo está puesta la mía por lo que tenéis que sustituir ese usuario por el vuestro. El número tras count= indica el número de tweets a mostrar y también es modificable.


Con eso tenemos lo que pretendíamos, pero si lo que queremos es dar un formato particular a esa lista, lo podemos hacer añadiendo algo de estilo. Para ello podemos meter todo en un div con una clase y luego definir las propiedades correspondientes en nuestro css. Incluso se puede insertar directamente antes del código. Para ir viendo otras posibles modificaciones, también hemos añadido en el siguiente ejemplo una cabecera con nuestro nombre de usuario. Nada impide incluir también una imagen, un enlace, un botón de "seguir", etc.:

<style type="text/css">
.listatwitter {
margin:0px auto;
width:400px;
padding:20px;
background:#cccccc;
color:#000080;
text-align:left;
}
</style>
<div class="listatwitter">
<h2>
@oloman</h2>
<ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript">
</script>
<script src="http://twitter.com/statuses/user_timeline/singenio.json?callback=twitterCallback2&amp;count=5" type="text/javascript">
</script>


El script que hace todo esto es visible accediendo a su dirección http://twitter.com/javascripts/blogger.js. Si queremos cambiar algunas cosas más, todavía podemos hacerlo modificando ese código. Por ejemplo, un cambio sencillo y que reduce bastante su extensión, sería suprimir la fecha-enlace de cada tweet. En este caso hasta podremos incluirlo directamente en el gadget para no tener que tirar del de Twitter. Sólo tenemos que quitar previamente la llamada al script original y meterlo entre etiquetas script:

<style type="text/css">
.listatwitter {
margin:0px auto;
width:400px;
padding:20px;
background:#cccccc;
color:#000080;
text-align:left;
}
</style>
<div class="listatwitter"><a href="http://twitter.com/oloman" class="twitter-follow-button" data-lang="es">Follow @oloman</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript">function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
</script>
<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&count=5" type="text/javascript">
</script>




Vagabundia

Vagabundia


Navegar etiquetas debajo de las entradas

Posted: 29 Jun 2011 08:07 PM PDT

Si entendí bien la pregunta de Josema, su idea es que, cuando se haga click en el enlace de una etiqueta, las entradas de esa etiqueta se muestren así como normalmente se muestran las entradas relacionadas debajo de cada post,es decir, una imagen y un resumen de la misma.

Hace mucho tiempo había puesto algo parecido que requería de la librería Prototype y que terminé quitando porque ... no me acuerdo por qué pero seguro que era una buena razón o no.

Ahora repito la experiencia y veremos qué pasa pero, sin librerías extras ya que luego de un par de años y doscientos mil quinientos treinta y dos errores, más o menos he logrado comprender como funciona esto de Json que es, claro, lo que debe usarse en cualquiera de estos casos porque no hay otra manera de filtrar y acceder a los datos de Blogger que no sea leyendo los feeds.


Lo que cuento es lo que puede verse en la parte inferior de las entradas individuales de este blog; allí, se ven las etiquetas que tiene la entrada (salvo cuando me olvido de ponerlas) y debajo, las entradas relacionadas que también se leen con Json y muestran cuatro entradas tomadas al azar. Los enlaces de esas etiquetas, abren las páginas por defecto que crea Blogger que son de tipo:

http://miblog.blogspot.com/search/label/NOMBRE_etiqueta

La idea es reemplazar esos enlaces para que, en lugar de abrir una página, se puedan ver sin salirse de la página y navegar por ellas, avanzando o retrocediendo por todas las entradas que existan con esa etiqueta, sin importar si son veinte o cientos ya que intentaremos no colapsar el sitio, cargando los scripts uno por uno y borrándolos de la memoria una vez que ya no se usan.

El criterio básico es utilizar el mismo esquema que en esta otra entrada y como no puedo pensar en abstracto y no existe un esquema idéntico en todas las plantillas, me limito a mostrar qué hice y las variaciones deberán ser investigadas ya que son casi infinitas.

Primero, expando la plantilla y busco el lugar donde tengo agregados los posts relacionados y allí, haré dos cosas, indicaré la altura del DIV que los contiene y debajo, agregaré una serie de etiquetas con IDs específicos que son en aquellas donde el script escribirá los datos:
<div class='post-footer-line post-footer-line-4'>   <div id='postsrelacionados' style='height:190px;'>     <script type='text/javascript'>mostrarrelacionados();</script>   </div>   <div style='clear:both;'/> </div>  <div class='post-footer-line post-footer-line-5'>   <div id='etiquetasbajopost' style='height:0px;'>     <div id='navetiquetas'/>     <div id='navetiquetassel'/>     <div id='navetiquetasfooter'/>   </div> </div>
Si guardo, todo queda igual que antes, los posts relacionados no cambian y debajo hay etiquetas sin contenido que tienen altura cero justamente para ocultarlas ya que intentaré permutar entre ellos y el nuevo sistema, ocultando uno cuando se muestra el otro y viceversa.

Busco ahora el LOOP donde Blogger escribe las etiquetas y por las dudas, condiciono los enlaces porque sólo quiero que esto funcione en las páginas individuales:
<b:loop values='data:post.labels' var='label'>   .......   <b:if cond='data:blog.pageType == "item"'>     <a expr:onclick='&quot;setnavetiquetas(\&quot;&quot; + data:label.name + &quot;\&quot;);return false;&quot;' href='javascript:void(0);' rel='tag'><data:label.name/></a>   <b:else/>     <a expr:href='data:label.url' rel='tag'><data:label.name/></a>   </b:if>   ....... </b:loop>
Y ahora, el script que va antes de </head> que también podemos condicionar y cuyo contenido puede verse en este archivo de texto


Como siempre, algo de estilo a gusto de cada uno que también ponemos antes de </head>:

miércoles, 29 de junio de 2011

Vagabundia

Vagabundia


Convertir SWF en HTML con Swiffty

Posted: 28 Jun 2011 08:00 PM PDT

Swiffty es una herramienta de Google que convierte archivos de SWF de Flash en HTML5 y, pese a ser experimental, lo hace bastante bien con las limitaciones obvias de todo conversor, claro, ya que no funcionará en muchos casos y no tendrá sonidos pero de todos modos es más que interesante.

Lamentablemente, como para muchos, Chrome se ha transformado en el nuevo Dios Digital, la información que nos dan sobre el tema es errónea porque, en lugar de probar y ver y sacar conclusiones propias, hay quienes se limitan a repetir como loros lo que el mismo Google afirma, pese a que esa afirmación es falsa.


Uno entra en Swiffy y le aparece un cartel de advertencia diciendo que esto no funcioanará en nuestro navegador (Firefox, por ejemplo) y claro, uno le hace caso proque es posible que así sea y quiere probar algo desconocido así que mejor seguir las reglas pero, uno también es de esos que usa el viejo método de ver para creer así que no se resigna a seguir las reglas a piejuntilla.

No, no es sólo por llevar la contra sino porque uno lee que lo que hace la herramienta es utilizar gráficos de tipo SVG (Scalable Vector Graphics) y esa clase de contenido, hace rato que está disponible en otros navegadores por lo tanto, es probable que también funcione y claro, así es; Firefox 5 lo muestra bastante bien, dependiendo del contenido ya que este tipo de cosas es algo que los navegadores van incorporando poco a poco y, como aún hay una mostruosa guerra de empresas e intereses, cada uno lo hace a su modo o como puede:

Tampoco lo de "HTML5" es tan así. Las etiquetas y scripts necesarios para mostrar este tipo de gráficos son genéricas así que pueden ser usadas en casi cualquier tipo de página web

Basta de quejas que no le importan a nadie. Usé la herramienta para hacer pruebitas y funciona.

Uno selecciona el archivo SWF a convertir, acepta las condiciones y nos muestra el resultado junto con el original. Si vamos para abajo, alli veremos un enlace con la URL del archivo html que podemos descargar y utilizar en cualquier parte. Si lo abrimos con el block de notas, veremos algo así:
<!doctype html> <html>   <head>     <meta charset="utf-8">     <title>Swiffy output</title>     <script src="http://www.gstatic.com/swiffy/v1/runtime.js"></script>     <script> swiffyobject = { ... una larguísima cantidad de código ... }; </script>     </head>   <body style="overflow:hidden;margin:0;">     <script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>     <script>stage.start();</script>   </body> </html>
Lo voy a poner en Blogger, olvídandome del HTML5; obvio, como es largo, lo pondré en un blog auxiliar copiando y pegando sólo los scripts; unos en el head y los otros en una entrada. Eso es todo, ahora, basta insertarlo con un IFRAME:



Un par de ejemplos más que se encuentran en l galería de Swiffy:

martes, 28 de junio de 2011

Vagabundia

Vagabundia


Transicionitis y el slideshow de dhteumeuleu.com

Posted: 27 Jun 2011 08:00 PM PDT

"¿Tiene usted transicionismo crónico?"

Dice Gem@ que su comentario no lo escribió ella sino su subconsciente pero poco importa ese detalle. Bien, diría yo ¿por qué no reconocerlo? SI ¿Será grave, doctor?

Así que acá vamos con el mismo slideshow originalmente llamado The trip of a lifetime y destruido por mi hace unos dias para poderlo probar en Blogger pero, ahora modificado aún más, haceindo uso y abuso de la propiedad transition para hacer casi lo mismo aunque claro, esta propiedad no es entendida por Internet Explorer pero igual, el slideshow seguirá funcionando normalmente.

No voy a inventar la rueda así que me basaré en lo que había antes que era bastante manual y seguiré en la misma línea para no complicarme la vida.

El HTML es similar:
<div id="contenedor2">   <div id="screen2">     <div id="pane2">       <img src="URL_IMAGEN_1"/>       <img src="URL_IMAGEN_2"/>       <img src="URL_IMAGEN_3"/>       <img src="URL_IMAGEN_4"/>       <img src="URL_IMAGEN_5"/>       <img src="URL_IMAGEN_6"/>       <img src="URL_IMAGEN_7"/>       <img src="URL_IMAGEN_8"/>       <img src="URL_IMAGEN_9"/>     </div>     <div id="nav2">       <div class="title2">ejemplo slideshow</div>       <a href="javascript:void(0);" onclick="dtht(0,0);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(550,0);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(1100,0);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(0,400);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(550,400);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(1100,400);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(0,800);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(550,800);" class="scrollTo"></a>       <a href="javascript:void(0);" onclick="javascript:dtht(1100,800);" class="scrollTo"></a>     </div>   </div> </div>
Nuevamente, todo se basa en la posición de las imágenes; sabiendo que todas miden 550x400 (o yo las fuerzo a que midan eso), las pongo una al lado de la otra y dimensiono el contenedor (pane2) para que "se acomoden" formando un rectángulo de 3x3; eso, lo hago dimensionando ese contenedor para que mida tres veces el ancho y tres veces el alto de cada imagen.

Luego, se mete ese enorme rectángulo dentro de otro más pequeño y a ese, se le pone la propiedad overflow:hidden para que sólo muestre una parte.

Como ese enorme rectángulo con las nueve imágenes, está posicionado de forma asoluta dentro el otro, basta cambiar sus propeidades left y top para mostrar otro sector y, como además, ese rectángulo tiene la propiedad tarnsition, cada uno de esos cambios se mostrará animado.

Todo eso, se define en el CSS que en este caso es este:
<style>   #contenedor2 {     background-color: #000;     border-radius: 4px;     box-shadow: 0 0 5px #ABC inset;     height: 400px;     margin: 0 auto;     padding: 20px;     position: relative;     width: 550px;   }   #contenedor2 br {display:none;}   #screen2 {     height: 400px;     left: 0;     margin: 0;     overflow: hidden;     position: relative;     top: 0;     width: 550px;   }   #pane2 {     font-size:0;     height: 1200px;     position: absolute;     top: 0;left: 0;     width: 1650px;     -moz-transition:all 0.7s ease 0s;     -webkit-transition:all 0.7s ease 0s;     -o-transition:all 0.7s ease 0s;     transition:all 0.7s ease 0s;   }   #pane2 img {     height: 400px;     width: 550px;   }   #nav2 {     background-color: #000;     background-color: rgba(0, 0, 0, 0.7);     border-radius: 4px;     left: 0;     margin: 0;     padding: 5px;     position: absolute;     top: 120px;     width: 93px;   }   #nav2 a {     background-color:#333;     float: left;     height: 25px;     margin: 3px;     overflow: hidden;     text-decoration: none;     width: 25px;   }   #nav2 a:hover, #nav2 a:focus { background: #F00; }   #nav2 a:visited { background-color: #666; }   #nav2 a:active, #nav2 a.active { background: #FFF; }   .title {     color: #FFF;     font-family: Helvetica;     font-size:12px;     font-weight: bold;     margin-bottom: 0.5em;     text-align:center;   } </style>
Por último necesitamos JavaScript porque queremos cambiar esa posición con un click así que nos falta la función que es muy pequeña:
<script> function dtht(l,t) {   var obj = document.getElementById("pane2");   obj.style.left = -l + "px";   obj.style.top = -t + "px";   return false; } </script>









Correo Vaishnava

Archivo del blog