ElektroDanZ llamó mi atención sobre este gadget que había visto revoloteando por una página. Se trata de un pájaro azul, en clara alusión al icono de Twitter, que aparece por la parte superior y sobrevuela tu página según te vas desplazando verticalmente por ella.
Esto ya sería lo suficientemente entretenido como para publicarlo y que algunos os divirtais un poquito instalándolo en vuestra página. Pero lo mejor de todo es lo que hace. Resulta que este pajarraco, además de haceros compañía, es también un enlace a vuestra cuenta de twitter y al mismo tiempo, un boton de retweet. Esto le da un poco más de interés ¿no?
Supongo que a estas alturas de post, ya habreis visto el que he puesto de muestra. Posaros sobre él y vereis cómo se abren dos nuevos enlaces: twitéame y sígueme. Pues hala, ya estais pinchando para verlo funcionando. El propio pájaro, directamente es un enlace a vuestro perfil, pero bueno, queda mono lo de los enlaces que se despliegan.
Por último, si el bicho migratorio este os molesta para la lectura de alguna parte de la entrada, sólo teneis que sacudirle un poco con el puntero, para que cambie de sitio. Qué majo él.
El pack completo del creador (Floern), incluye también un par de utilidades para que al apuntar al pájaro, este reproduzca en un bocadillo tipo cómic, nuestro último twett. Pero eso se va a quedar para usuarios avanzados y con PHP a su alcance. Los de Blogger, hoy por hoy no tenemos fácil el acceso a ese lenguaje, así que nos conformamos con lo que veis.
INSTALACION
Simplemente buscais <data:post.body/> en vuestra plantilla (con artilugios expandidos) y antes de esa variable, insertais la llamada al script que he alojado en Google Code, así como las variables necesarias. Si teneis alguna modificación en vuestra plantilla quizás tengais que usar como referencia <div class='post-body entry-content'>. En este último caso, el código iría detrás.
<b:if cond='data:blog.pageType == "item"'><script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
var birdSprite="http://oloblogger.googlecode.com/files/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/oloman";
var tweetThisText = "Leyendo: <data:post.url/>";
tripleflapInit();
</script>
</b:if>
CONFIGURACION
Hay que cambiar el valor de la variable twitterAccount, para poner vuestra propia cuenta. El contenido de tweetThisText será lo que se escriba automáticamente en el status de Twitter al pinchar en twitéame. Ahi también podeis poner lo que querais, aunque sería conveniente conservar <,data:post.url/> porque eso hará que también se inserte automáticamente la dirección del post en el que se está. La dirección principal de la web, también podría ser otra alternativa.
Si quitais el condicional y su cierre, el pájaro será visible en todo tipo de páginas y no sólo en las entradas individuales. Aunque en este caso, no respondo de la dirección que se enviará.
OPCIONES
El código puede ser instalado perfectamente en un gadget en lugar de en la plantilla. En este caso, lo de incluir la dirección del post sería inviable porque las variables Blogger no funcionan si no están en la plantilla HTML. Si esto no es problema, sería suficiente con cambiar las comillas simples por dobles y todos los " por comillas simples. Por supuesto, el condicional sobraría.
MODIFICACIONES
Podeis utilizar este mismo artilugio para cualquier otro tipo de enlaces. Esto ya es algo más complicado, porque requiere cambiar los valores de twitterAccount, tweetThisText y para el botón que hace el retweet, la varible tweetthislink que se encuentra en el script:
var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);
Otra "maldad" que se me ocurre, sería cambiar todas las imágenes del sprite que son las responsables del movimiento del pájaro, por cualquier otro personaje que sea de vuestro agrado. Aunque claro, para esto ya hay que tener algo de mano con el fotochop(SIC).
RECOMENDACIONES
Como siempre, para no quedaros colgados el día menos pensado y para evitar la saturación del lugar dónde está alojado el script y la imagen, conviene que useis vuestro propio alojamiento y sustituyais luego las direcciones de ambos por las vuestras. Para ello, en los siguientes enlaces podeis descargar el fichero tripleflap.js y la imagen birdsprite.png.
Este blog es el resultado a manera de muestra de las herramientas tecnológicas que tienen las Mipymes para hacer un mejor uso de la gestión de servicio al cliente, basados en el resultado de nuestra investigación en la ciudad de Santiago de Cali.
viernes, 22 de octubre de 2010
miércoles, 20 de octubre de 2010
SimpleCart. Una tienda online... también para Blogger.
Hace unos pocos días me tropecé con este script que sirve para generar una especie de tienda online y que permite prescindir del uso de bases de datos. De esta manera se puede utilizar en plataformas que carecen de ellas como ocurre en Blogger. El tema de recordar lo que el usuario ha ido pinchando y que no desaparezca cada vez que se refresca o se cambia de página, lo han solucionado mediante unas cookies. Puede resultar primitivo y no muy seguro, pero el caso es que funciona y puede ser de utilidad en determinados casos, así que si tras ver esta demo os gusta el asunto, a continuación facilitamos los ficheros necesarios y explicamos brevemente cómo instalarlos.
1. En primer lugar, desde Elementos de Página añadimos un gadget tipo HTML/JavaScript (sin título para que este no sea visible). Para que no estorbe mucho lo creamos en la cabecera o en el pie de página. Allí copiamos todo el script adaptado para funcionar desde un gadget. Sin guardar, a continuación del código script, copiamos el estilo y las opciones configurables. Ya podemos guardar, aunque posteriormente tendremos que cambiar unos pocos datos.
Para una mayor facilidad a la hora de buscar algo, podríamos insertar el script en un gadget y el estilo en otro, sin ningún problema.
2. Ahora tenemos un par de opciones.
Ahora sólo resta configurarla con nuestros datos. Lo primero es buscar tras el estilo, la línea que contiene la variable simpleCart.email = "tupaypal@dominio.com"; Lo marcado en verde tiene que ser cambiado por vuestra propia cuenta PayPal.
Además es posible cambiar la moneda en la que se desea cobrar en la siguiente línea: simpleCart.currency = EUR;. Al principio del código del script hay una variable que contiene todo los códigos de las monedas admitidas en PayPal, entre las que se encuentran por ejemplo el peso mejicano (MXN) y el dólar USA (USD).
Una vez ajustadas estas dos cosas, teneis que poner vuestros artículos en lugar de los que se muestran en el ejemplo. Cada trozo de código como este, contiene la información necesaria para cada artículo distinto. Por tanto, será necesario un bloque con la misma estructura por cada artículo.
En verde lo que hay que personalizar. La primera imagen es la que se verá en el escaparate y la última la miniatura que se mostrará en el carro. Las etiquetas title, alt y el contenido del div item_name, deberán contener el nombre del artículo (en el ejemplo, Camiseta AA). El párrafo con clase item_Description, debe contener la descripción del artículo. Por último, el span item_price, es el que recoge el precio. Importante que los decimales se separen con notación inglesa, es decir, con un punto en lugar de una coma.
Para que se adapte al mayor número de plantillas posible sin tener que cambiar muchas cosas, he modificado un poco el estilo, el HTML y traducido los comentarios. Los valientes podeis adaptar todo esto a vuestro antojo, modificando el CSS para conseguir cosas como esta.
Hay muchas posibilidades porque todo funciona con las clases de los DIV's. Así, por ejemplo, se puede poner el escaparate en una página y el carro siempre visible en la barra lateral, como se puede ver en el blog de pruebas, tras haber seleccionado algún artículo previamente en la página de la tienda.. También he probado a poner enlaces en las imágenes y no hay problemas, así que casi seguro que hasta se podría usar algún tipo de ventana modal para mostrar una imagen ampliada.
Si disponeis de algún servicio de hosting bueno para los ficheros, alojarlos allí en lugar de en vuestra plantilla. Esto será especialmente util si la tienda la montais en una página, porque así no se llamará al script si no hace falta, aligerando la carga. No obstante ocupa poco más de 30k, así que tranquilos en cualquier caso. Los más avezados teneis los ficheros originales y toda la documentación del script en la página de SimpleCart (en inglés).
SimpleCart, encontrado vía TechieBlogger.
1. En primer lugar, desde Elementos de Página añadimos un gadget tipo HTML/JavaScript (sin título para que este no sea visible). Para que no estorbe mucho lo creamos en la cabecera o en el pie de página. Allí copiamos todo el script adaptado para funcionar desde un gadget. Sin guardar, a continuación del código script, copiamos el estilo y las opciones configurables. Ya podemos guardar, aunque posteriormente tendremos que cambiar unos pocos datos.
Para una mayor facilidad a la hora de buscar algo, podríamos insertar el script en un gadget y el estilo en otro, sin ningún problema.
2. Ahora tenemos un par de opciones.
- A) Tienda visible en una sola página. Creamos una página estática y en ella insertamos la parte HTML (copiar HTML versión post).
- B) Tienda visible en todas las páginas. Añadimos un nuevo gadget HTML/JavaScript y allí insertamos el HTML (fichero HTML). Recomendable crearlo en cabecera o pie.
Ahora sólo resta configurarla con nuestros datos. Lo primero es buscar tras el estilo, la línea que contiene la variable simpleCart.email = "tupaypal@dominio.com"; Lo marcado en verde tiene que ser cambiado por vuestra propia cuenta PayPal.
Además es posible cambiar la moneda en la que se desea cobrar en la siguiente línea: simpleCart.currency = EUR;. Al principio del código del script hay una variable que contiene todo los códigos de las monedas admitidas en PayPal, entre las que se encuentran por ejemplo el peso mejicano (MXN) y el dólar USA (USD).
Una vez ajustadas estas dos cosas, teneis que poner vuestros artículos en lugar de los que se muestran en el ejemplo. Cada trozo de código como este, contiene la información necesaria para cada artículo distinto. Por tanto, será necesario un bloque con la misma estructura por cada artículo.
En verde lo que hay que personalizar. La primera imagen es la que se verá en el escaparate y la última la miniatura que se mostrará en el carro. Las etiquetas title, alt y el contenido del div item_name, deberán contener el nombre del artículo (en el ejemplo, Camiseta AA). El párrafo con clase item_Description, debe contener la descripción del artículo. Por último, el span item_price, es el que recoge el precio. Importante que los decimales se separen con notación inglesa, es decir, con un punto en lugar de una coma.
Para que se adapte al mayor número de plantillas posible sin tener que cambiar muchas cosas, he modificado un poco el estilo, el HTML y traducido los comentarios. Los valientes podeis adaptar todo esto a vuestro antojo, modificando el CSS para conseguir cosas como esta.
Hay muchas posibilidades porque todo funciona con las clases de los DIV's. Así, por ejemplo, se puede poner el escaparate en una página y el carro siempre visible en la barra lateral, como se puede ver en el blog de pruebas, tras haber seleccionado algún artículo previamente en la página de la tienda.. También he probado a poner enlaces en las imágenes y no hay problemas, así que casi seguro que hasta se podría usar algún tipo de ventana modal para mostrar una imagen ampliada.
Si disponeis de algún servicio de hosting bueno para los ficheros, alojarlos allí en lugar de en vuestra plantilla. Esto será especialmente util si la tienda la montais en una página, porque así no se llamará al script si no hace falta, aligerando la carga. No obstante ocupa poco más de 30k, así que tranquilos en cualquier caso. Los más avezados teneis los ficheros originales y toda la documentación del script en la página de SimpleCart (en inglés).
SimpleCart, encontrado vía TechieBlogger.
Suscribirse a:
Entradas (Atom)