viernes, 26 de agosto de 2011

Oloblogger

Oloblogger


100 tutoriales para 100 tipos distintos de menús

Posted: 25 Aug 2011 10:00 AM PDT

Esto más que un post es una simple referencia, pero me ha parecido tan completo y práctico este artículo de Noupe, que creo que merece la pena que lo conozcáis al tiempo que lo dejo grabado en mi bitácora para mi propia memoria.

Se trata de una genial recopilación con 100 tipos de menús distintos de la que destaco que incluye siempre un tutorial sobre cómo construirlos y, en la mayoría de casos, una demo para comprobar previamente cómo van a funcionar una vez instalados.


Hay incluso algunos que anteriormente ya vimos sólo como fuente de inspiración, pero que en esta ocasión aparecen también explicados. Varios funcionan con resultados espectaculares gracias a jQuery u otras librerías, pero muchos de los que están hechos simplemente con CSS tampoco le van a la zaga.

Los agradecimientos, en su caso, deben ir para @DanielUlczyk (Diseniorweb y Ulczyk), que nos dió a conocer esta entrada mediante un tweet.


jueves, 25 de agosto de 2011

Oloblogger

Oloblogger


Jugando a adivino con la API de Google Plus

Posted: 24 Aug 2011 11:50 AM PDT

No me parece que sea improvisación el que todavía no esté disponible la API para desarrolladores de Google Plus. Aunque parezca el bombazo del siglo y G+ haya tenido un bestial crecimiento inicial y metido millones de usuarios en la saca, esto no quiere decir que tenga ya la posición de líder a la que están acostumbrados.

De momento es hasta natural que un buen montón nos hayamos puesto a probarlo. Las cosas nuevas llaman la atención y nadie quiere quedarse atrás. Digamos que hasta es obligatorio hablar de ellas porque de lo contrario ¿de qué íbamos a escribir todos los sitios que publicamos cosas sobre el mundo digital? El sistema viral de invitaciones y las expectativas generadas previamente por todos los medios, han hecho también su parte.

Pero lejos de encontrarse en una posición de liderazgo, G+ simplemente está recuperando posiciones en la parrilla de salida y ahora mismo está en plena pelea para acercarse a Facebook, la red social más similar y con el mayor trozo del pastel hoy día. Algunos dicen que también va a por un cacho de Twitter e intentar mojarle la oreja a otros, pero esto último no lo veo tan claro por la sustancial diferencia en cuanto a concepto.

El caso es que en general muchos somos muy comodones y nos gusta más aquello a lo que estamos acostumbrados y dominamos por puro tiempo de dedicación. Experimentar está bien, pero modificar hábitos, ajustar programas y andar locos buscando cómo se hace ahora eso que ya sabíamos de memoria cómo se hacía en nuestra aplicación habitual, cuesta trabajo (#yoconfieso que sigo usando Word 2000). En definitiva, nos cuesta cambiar si no hay una mejora muy evidente.

Con esta premisa, imaginad que existiera desde el principio algo que nos permitiera publicar automáticamente desde nuestros actuales sitios a Google Plus. Pues eso, posiblemente la nueva red se convertiría en una simple réplica de lo publicado en esos otros lugares, lo que conllevaría menos originalidad de contenidos, menor interacción entre usuarios y probablemente un mayor desinterés por acceder a ella ¿Podría ser este el motivo por el que Google Buzz o Wave no cuajaron? Pues a lo mejor sí y por eso Google, tirando de memoria, ha hecho las cosas ahora de otra manera.

Se ha anunciado que habrá API para desarrolladores, pero dados los tiempos que corren, lo sorprendente sería que no fuera así. La cuestión es cuándo y aquí mi opinión es que será cuando la gráfica de nuevas incorporaciones comience a suavizar su actual tendencia fuertemente ascendente. O sea, el plan sería conseguir usuarios (o curiosos) y el mayor contenido posible (un sitio así con poco movimiento es muy triste) y cuando se agote un nicho incorporar otras cosas y conseguir otro trocito.

La segunda fase comenzó con la incorporación de juegos, esos que tanto hicieron por Facebook y que crean dependencia de la red que los ofrece cuando consiguen que los usuarios interactúen con ellos y entre ellos.

La siguiente la desconozco porque si fuera capaz de crear una buena estrategia para este tipo de cosas, probablemente me ganaría la vida con ello. Sin embargo, haciendo una apuesta -seguramente equivocada- antes que publicar la API intentaría conseguir una mayor integración con otros servicios Google de éxito ya contrastado, dar una vueltecita de tuerca creando alguna utilidad específica para móviles (quizás pensando en Twitter) y cosas por el estilo que consiguieran más usuarios y más actividad.

Por otro lado no pasa desapercibido para nadie que Chrome está ganando cuota de mercado ¿verdad? Pues ahora reflexionad sobre la gran cantidad de extensiones que están saliendo para este navegador relacionadas con G+ y que permiten enviar contenido desde allí a otros sitios. Lo dicho, yo dejaría lo de la API para cuando más tarde mejor.


sábado, 20 de agosto de 2011

Oloblogger

Oloblogger


Rotador con transición (fade) para imágenes con enlaces

Posted: 19 Aug 2011 04:20 AM PDT

El Javascript que veremos más adelante sirve para lo que anuncia el título de la entrada, mostrar diversas imágenes con sus correspondientes enlaces, dentro del mismo espacio. Esto es lo que normalmente se entiende como rotar imágenes. Además lleva incorporado un efecto fade que consiste en desvanecer una imagen poco a poco y hacer aparecer la siguiente en el mismo sitio de idéntica manera.

Lo bueno que tiene es que es un código relativamente corto que se puede insertar en la plantilla directamente y que no es necesaria ninguna librería adicional. Por contra, presenta el inconveniente de que no se puede usar más de una vez por página. Esto quiere decir que se puede usar en la barra lateral si no se usa además en alguna entrada, ya que en ese caso nos fallaría uno de los dos cuando se viera esa entrada en concreto.

Pasa lo mismo si se usa en entradas sucesivas, que se muestran enteras en la página Inicio y en las de navegación. Al coincidir dos en la misma página, como se ha dicho, una de ellas no funcionaría.

Sin embargo, si el blog tiene entradas resumidas, tipo sumarios, el problema desaparece. La razón es evidente y es que en los sumarios no se cargaría el rotador, sino simplemente una imagen ilustrativa.

Aquí tenéis un ejemplo en funcionamiento en el que el enlace es la dirección original de cada imagen. Tiene añadido una ventana modal (lightwindow), pero eso es sólo para lucirme un poco :) y para que veáis una variante distinta del simple enlace a otra dirección:



El siguiente trozo de código es el que tenéis que insertar antes del </head> en vuestra plantilla. He puesto juntos la parte CSS y el script para facilitar su instalación y desinstalación, aunque lo más recomendado es poner cada cosa en su sitio, es decir el estilo con el resto del CSS y en el head, el script.

<!-- ROTADOR IMAGENES -->
<style type='text/css'>
#rotator {
border:0;
padding:0;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 500px;
height: 280px;
}
#rotator img {
border: 0;
padding: 0;
width: 100%;
}
</style>

<script type='text/javascript'>
//<![CDATA[
/* CREDITOS: http://slayeroffice.com/code/imageCrossFade/index.html */

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Una vez que tenemos esto en la plantilla, para crear un rotador de este tipo ya sólo hay que hacer una relación de imágenes con enlace y encerrarlo en un div con la clase rotator, como ya se ha dicho, bien en un gadget, bien en una entrada.

Para Blogger habrá que redactarlo todo quitando los saltos de línea para evitar efectos indeseados.

<div id="rotator">
<a href="URL_ENLACE1"><img alt="" src="URL_IMAGEN1" /></a>
<a href="URL_ENLACE2"><img alt="" src="URL_IMAGEN2" /></a>
<a href="URL_ENLACE3"><img alt="" src="URL_IMAGEN3" /></a>
<a href="URL_ENLACE4"><img alt="" src="URL_ENLACE4" /></a>
</div>

Los retoques personalizados que se pueden hacer están destacados en verde en el código y son los siguientes:

El width y el height de #rotator en la parte de estilo, es lo que marca el tamaño de la caja que contendrá las imágenes. Hay que tener en cuenta que esta caja no se adapta a las imágenes, sino al revés, estas se ven limitadas por la caja y ocuparán todo el ancho disponible redimensionándose proporcionalmente en altura.

Así, en un principio, todas deberán tener las mismas dimensiones o al menos ser proporcionales. Aunque no quede perfecto, tampoco hay demasiado problema si esto no es así, ya que lo que pudiera exceder del alto disponible simplemente no se verá. Con lo que si hay que tener más cuidado es con usar imágenes mucho más pequeñas que la caja, ya que al agrandarse se verán con una calidad mala. También hay que cuidar de no usar imágenes con formato vertical y una caja horizontal. El resultado no será muy bonito que digamos.

Otra posible configuración es la velocidad de cambio. En el script están programados 3 segundos (3000 milisegundos), pero en esta línea podéis cambiar ese valor:

setTimeout(so_xfade,3000);


miércoles, 10 de agosto de 2011

Oloblogger

Oloblogger


Una solución para los botones +1 rebeldes.

Posted: 09 Aug 2011 07:30 AM PDT

No es el caso de un servidor, pero algunos me han comentado que la nueva versión del Botón +1 para Google Plus no pita del todo bien en todos los casos. Los síntomas son que cuando se introduce el nuevo código o se utiliza simultáneamente para invitar a recomendar cada entrada y el blog entero, en ocasiones el botón no es visible. No es un mal común pero sí parece que ocurre en ocasiones.

La solución la vi en Spice Up Your Blog, gracias al aviso de Ozl y Andrés y es bien sencilla. Consiste en usar un código alternativo que aunque no es del propio de G+, funciona desde siempre sin problemas. Es el de AddThis.

Este servicio nos facilita un código con el que podemos incluir de una tacada, una serie de botones con varios diseños optativos, que además incluyen una gran variedad de redes sociales. La cosa consiste en utilizar sólo la parte del código que nos interesa y que en este caso es la que mostrará el botón +1. Sería esta:

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e13aac8372bd045"></script>

Para las entradas se puede dejar el script nuevo (o el antiguo si os da problemas este; lo tenéis en esta entrada) y si se quiere añadir también la recomendación para el blog, se utilizaría adicionalmente el código de AddThis insertándolo en un gadget tipo HTML/JavaScript.

Es una chapuza temporal mientras alguien no averigua o soluciona cual es el problema real. Sería interesante que comentarais si efectivamente esto soluciona lo de la desaparición del botón.


Correo Vaishnava