Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Cómo quedarse sin amigos 2. Twitter. Buzz.

30/04/2010
Anterior: Cómo quedarse sin amigos 1. Facebook.


TWITTER. Seguidos.

BAJA DE USUARIOS SEGUIDOS. Desde INICIO > SIGUIENDO o desde PERFIL > SEGUIDOS, accedemos a una pantalla dónde se nos muestra la lista de personas a las que seguimos. Una vez allí, pinchamos en la rueda dentada y se despliega un menú.


En DEJAR DE SEGUIR eliminamos al usuario de nuestra lista. Ojo que no hay confirmación, pero si nos equivocamos, con volver a añadir al twitteador de nuevo, todo solucionado.

BLOQUEAR. Bloquear a un usuario significa que además de no querer seguirlo, tampoco queremos darle acceso para que te conteste o te siga. Es la opción siguiente a la de Dejar de seguir.

DENUNCIAR. Si detectamos un spammer, desde ese mismo lugar podemos denunciarlo mediante el último enlace.

BAJA APLICACIONES. Las aplicaciones son todos esos cacharritos que autorizamos en nuestra cuenta Twitter para obtener y mostrar distintos datos sobre nuestra cuenta, replicar twitts en otros servicios y otras utilidades diversas. Entrando en nuestra cuenta y luego en Configuración > Conexiones, nos aparece la lista de todas las que tenemos autorizadas. Aquellas que autorizamos sólo por probar o que simplemente ya no nos interesen, se pueden desautorizar pinchando en REVOCAR ACCESO.



GOOGLE BUZZ. Seguidos.

BAJA DE PERSONAS SEGUIDAS. Accedemos a nuestro Buzz y al principio de la página aparecen las personas que nos siguen y aquellas a las que seguimos. Si no se ven todas, pinchamos en MOSTRAR MAS. Todos los seguidos aparecen con la leyenda Siguiendo a. A la derecha hay un enlace, OPCIONES, que muestra un desplegable. Pinchar en DEJAR DE SEGUIR para hacer eso mismo.

BLOQUEAR PERSONAS. Desde el mismo sitio y siempre que se trate de personas que no sigamos, la última opción anterior se transforma en BLOQUEAR A. Aquí es dónde podremos impedir que alguien nos pueda seguir, comente nuestro Buzz, al tiempo que dejamos de aparecer en su lista de seguidores y eliminamos nuestros Buzz's de su cadena.


Generadores de CSS Sprites

28/04/2010
Siguiendo con el tema de los CSS Sprites, hay diversas herramientas gratuitas para poder generar automáticamente una sola imagen, sin necesidad de estar copiando, pegando y cuadrando uno a uno nuestros gráficos. Las que he encontrado no son tan eficientes como podría ser un ser humano a la hora de optimizar el espacio disponible, pero no cabe duda de que nos ahorrarán bastante tiempo si andamos con prisas o pocas ganas de currar.



CSS SPRITES GENERATOR. Subimos una a una las imágenes y el sprite queda disponible para descargar. Incluye las coordenadas para cada imagen y un ejemplo desde el que también se puede obtener el HTML necesario para mostrar individualmente las imágenes. Como opción, se puede cambiar el color del espacio libre.



CSS SPRITES. Más completo que el anterior, permite carga múltiple de imágenes y la posibilidad de generar un segundo juego de imágenes para efectos rollover, con seis opciones: desaturar, invertir, sepia, girar vertical, girar horizontal y relieve.



CSS SPRITE GENERATOR. Requiere subir las imágenes mediante un ZIP, pero tiene muchas opciones para generar el sprite como redimensión automática de las imágenes, definir espacio entre ellas, transparencia... También ofrece el CSS para obtener las imágenes individuales.



SMART SPRITES. Aplicación para descargar. No la he probado pero parece que es la más completa. Ya me direis...


Audio en tu web

26/04/2010
No es la mejor forma, pero al menos es fácil, fácil: utilizar EMBED.

<embed width="400" height="45" bgcolor="#f5f3e8" autostart="false" src="direccion_archivo"/></embed>


Simplemente con este código, obteneis la visualización de un reproductor sencillo desde el que se puede oir cualquier fichero de audio MP3, WAV o MID. Funciona con otros formatos, pero con estos casi que hay de sobra.

El único problema es encontrar un alojamiento para los ficheros que permita el hotlink. Fileden sirve para esto y para probar, podeis usar este fichero: http://www.fileden.com/files/2007/12/16/1648295/metromadrid.mp3.


El único atributo necesario para EMBED es SRC, que tiene que contener la dirección del recurso a incrustar, pero para lo de los sonidos, pueden venir bien otros atributos opcionales:

WIDTH: Ancho del área en la que se mostrará el recurso.
HEIGHT: Idem con el alto.
BGCOLOR: Color de fondo que rodea a la consola.
AUTOSTART: true/false para autoejecución automática o manual, respectivamente.
LOOP: true/false, permite reproducir en un bucle sin fin o una sola vez
HIDDEN: true/false para hacer la consola invisible/visible

Como con hidden="true" el reproductor no será visible, caso de incluir este atributo, será necesario incluir también un autostart="true" o no podremos pulsar el play.

A los que les preocupe la validación de su código, la etiqueta <embed> nunca ha sido parte de ninguna recomendación de la W3C para el HTML Así que aunque es soportada por la mayoría de navegadores, no está dentro del estándar y vuestro código no será validado si se incluye.


Cómo quedarse sin amigos 1. Facebook

23/04/2010
...y dejar de ser fan, y también dejar de seguir en Twitter, y en Google, y en Buzz... ¿Antisocial total? No. Sólo depurando un poco lo hecho anteriormente quizás de manera irreflexiva.

A veces no nos lo ponen fácil, pero tampoco es tan difícil:


FACEBOOK. Amigos.

BAJA DE AMIGOS. Desde la pestaña PERFIL, localizamos a la izquierda el cuadro AMIGOS y pinchamos en VER TODOS. Una vez tengamos a la vista la relación de amigos, localizamos a aquel que queramos dar de baja y pinchamos en la X que hay en la fila de su nombre. Aceptamos el mensaje de confirmación y vamos a por otro que este ya está frito.


BLOQUEAR/DENUNCIAR. Si hay un pesadito que te persigue o alguien con perfil falso/contenidos inadecuados/ect., puedes bloquear o denunciar respectivamente, pinchando en su avatar o accediendo a su perfil. En la columna izquierda, abajo del todo, tienes el link para ello: BLOQUEAR/DENUNCIAR.


FACEBOOK. Grupos.

ABANDONAR. Desde PERFIL, accedemos a la pestaña INFORMACION. Allí buscamos GRUPOS y pinchamos en VER TODO.


En la lista de grupos a los que estamos suscritos encontramos un ABANDONAR GRUPO a la derecha de cada uno. Ahí es dónde se puede pinchar para dejar de pertenecer a ese grupo.


DENUNCIAR. Si el grupo que quieres abandonar, incumple alguno de los términos de uso o simplemente aprecias que se trata de un grupo fraudulento, que practica spam o similar, lo primero de todo es denunciarlo. Pinchas en el nombre del grupo y cuando accedas a su página, abajo a la izquierda aparece DENUNCIAR. Seleccionas el motivo que más se ajuste y aceptas. Facebook estudiará cada caso.



FACEBOOK. Páginas.

DEJAR DE SER FAN. Accedemos a nuestro perfil y en la pestaña INFORMACION, aparecen las páginas de las que somos fans. Pinchamos en el icono de la que nos queremos dar de baja y cuando accedemos a la página, abajo, en la columna de la izquierda tenemos un enlace que dice DEJAR DE SER FAN. No hay confirmación previa en este caso y nada más pinchar dimitiremos de nuestro cargo.
DENUNCIAR PAGINA. Justo debajo del anterior hay un enlace con este mismo texto para notificar un uso inapropiado de la página.


FACEBOOK. Blogs.

DEJAR DE SEGUIR. Accedemos a nuestro perfil y en la pestaña INFORMACION o también en la pestaña BLOG (si no es visible, pinchar en +), aparecen todos los blogs de los que somos seguidores. Pinchamos en el que nos queremos dar de baja y cuando aparece la página vemos un botón a la derecha con la palabra FOLLOWING. Pinchando en él hacemos precisamente lo contrario (unfollow) que es precisamente lo que queremos.


NOTIFICAR BLOG. Debajo del todo en esa misma columna, REPORT THIS BLOG nos da acceso a una dirección de correo en la que se pueden comunicar abusos, infracciones de copyright, spam, contenido inapropiado, etc. Yo vi esta, aunque no sé si es para todos los casos.networkedblogs(a)ninua.com. En el correo hay que incluir un enlace al blog en cuestión.


FACEBOOK. Aplicaciones.

ELIMINAR. Desde INICIO en la columna de la izquierda localizamos el grupo APLICACIONES. Allí pinchamos en EDITAR (si no es visible, primero pinchamos en MAS). A la derecha de cada aplicación instalada aparece una X gris. Pinchando en la correspondiente eliminamos la aplicación que ya no queremos tener.



DENUNCIAR APLICACION. Las aplicaciones también se pueden denunciar. Por lo general, en el pie de página podemos encontrar un enlace para ello.


Rollover con CSS y sprites.

21/04/2010
A los que alguna vez hayais pinchado en El botón que no hace nada del pie de página, os sonarán estos enlaces. Anteriormente, tanto estos como el rollover correspondiente, lo tenía hecho con JavaScript, pero desde que descubrí cómo funcionaban los sprites, están construidos mediante esta técnica.

Incluyendo la imagen que forma el texto principal, con este recurso he logrado pasar de 12 solicitudes al servidor por cada visita, a tan sólo 4. Dividir esto por 3 no está mal ¿no? Visto el contador, si lo hubiera hecho desde el principio, en lugar de acumular más de 150.000 solicitudes -cosa que mi servicio de alojamiento ya me estaba penalizando- llevaría sólo unas 50.000. El otro día explicábamos un poco por encima que es esto de los sprites y hoy toca por fin ver cómo se lleva esto a la práctica.

Para construir con esta técnica unos botones que además incluyan un efecto rollover, en primer lugar se necesitan las imágenes que lo van a formar. Lo normal será diseñar dos por botón, una para la simular el reposo y otra para el efecto pulsación. No hay inconveniente en incluir una tercera para el click o incluso una cuarta para cualquier cosa que nos pueda deparar el CSS3. Todo esto es según lo que pensemos hacer.

Una vez creadas, las colocamos ordenadamente en una sola imagen como la de la derecha y ya nos quedamos con un sólo fichero. Cada botón en este caso es de 50x50 pixels por lo que, para contener las 6 imágenes que vamos a utilizar, el sprite tendrá 100x150 px.

Ahora viene lo más importante. Creamos las clases y las pseudoclases que vamos a utilizar y les damos valores. Todo esto debe ir en la hoja de estilo o en el caso de Blogger, antes del cierre ]]></b:skin>

.botonrss, .botonword {
text-indent:-9999px;
overflow:hidden;
margin:0px;
}
.botonrss a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) 0px 0px;
}
.botonrss a:hover {
background-position: 0px -50px;
}
.botonrss a:active {
background-position: 0px -100px;
}
.botonword a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) -50px 0px;
}
.botonword a:hover {
background-position: -50px -50px;
}
.botonword a:active {
background-position: -50px -100px;
}

Veis que hemos definido una nueva clase por cada boton (botonrss y botonword). La clase principal tiene un text-indent con un valor negativo alto, que en unión del overflow:hidden, nos servirá para que en el caso de que incluyamos texto en el enlace que formará el botón (accesibilidad se llama esto), aquel no sea visible por quedar muy desplazado. Todo ello sin mover también la imagen, que permanecerá dónde debe.

Luego vemos que para los enlaces, se define con exactitud la medida que tendrá el botón (alto y ancho, en el ejemplo 50x50 px) y un fondo posicionado según la ubicación de la imagen base correspondiente a cada uno. Teniendo en cuenta que la primera coordenada es la horizontal y la segunda la vertical, la imagen del botón rss comienza en la posición [0px.0px] y, por tanto, ese es el valor que se debe poner para mostrar el botón normal. Observando el gráfico de la derecha, podemos deducir que las coordenadas para la imagen del botón normal para Word son 50px 0px y eso es lo que ponemos en la clase correspondiente (.botonword a).

Los valores de las coordenadas tienen que ser negativos porque es como si tuviéramos una ventana de sólo 50x50 px, detrás de la cual se ve parte de una alfombra. Siguiendo con el símil, al poner valores negativos tiramos de la esquina superior izquierda de la alfombra (fondo) y la movemos los pixels indicados a la izquierda y arriba respectivamente, viéndose a través de la ventana justo lo que necesitamos ver.

A partir de aquí ya sólo es necesario asignar propiedades a background-position para las distintas pseudoclases que queremos utilizar (en el ejemplo hover y active), calculando en cada caso las coordenadas que les corresponden.

Tal y cómo se ha puesto en el ejemplo (display:block) los botones se quedarán en vertical ocupando distintas líneas, pero no hay nada que un float no pueda arreglar para que queden a la misma altura. Lo que ocurre es que entonces tendremos que echar mano de una capa más, con el ancho de todos los botones junto y que encierre a los DIV que forman los botones. También podríamos utilizar position si fuera necesario.

El último paso será mostrar las imágenes con HTML. Para ello es suficiente con insertar allí dónde queramos que se vean un DIV con la clase correspondiente.

<div class="botonrss"><a href="URL_ENLACE1">Enlace RSS</a></div>

<div class="botonword"><a href="URL_ENLACE2">Enlace Word</a></div>


Y ya tenemos nuestros botoncitos con rollover hechos mediante sprites. Estos de ejemplo tienen un enlace vacío para que trasteeis a gusto:



Mostrar una imagen sin enlace es bastante más sencillo, ya que sería suficiente con definir sólo la clase principal e insertar un div sin contenido.

.imagenrss {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) 0px 0px;
}
.imagenword {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) -50px 0px;
}

<div class="imagenrss"></div><div class="imagenword"></div>



El sprite a utilizar puede ser tan complejo como queramos y contener muchas o pocas imágenes. Lo que prima es disminuir en lo posible el número de solicitudes para cargar imágenes y el tamaño del sprite en relación con lo que ocuparían las imágenes que lo forman por separado.


Informe sobre el estado de la blogosfera hispana

19/04/2010
El pasado viernes se publicó el Informe sobre el estado de la blogosfera hispana 2010 de Bitacoras.com. El estudio se realiza tomando como base los datos que la conocida red social tiene de todos los blogs y bloggers en ella registrados y que son muchos: edad, sexo, localización, hora/día a la que publican, temas que tratan, enlaces entrantes/salientes, popularidad...
  • Número de blogs indexados en Bitacoras.com: 417.371
  • Número de posts indexados: 6.344.246
  • Número de enlaces procesados 35.289.497
  • Número de bloggers registrados con perfil completo: 157.773


Hay datos realmente interesantes, aunque las conclusiones mejor que las saque cada cual. No se puede olvidar que aunque la muestra es bastante numerosa, no por ello deja de estar sesgada al referirse exclusivamente a los blogs que este servicio administra. A esto añadidle que algo más de la mitad de ellos son españoles y seguramente, hasta podríamos quitarle al informe el adjetivo hispana. Además, ya se sabe que lo única conclusión absolutamente cierta en estadística, es que de cada 100 personas, 6 son exactamente media docena.

Por ejemplo, me ha sorprendido mucho que las mujeres sólo representen el 22% de los bloggers. En función de los comentarios que se vierten en este blog, tenía la sensación de que más o menos la cosa estaba por mitad. Me pregunto si quizás las señoras no son partidarias de inscribirse en Bitacoras, son más remisas a declarar este dato al registrarse que los señores, o es que realmente son más consumidoras de contenidos que creadoras.


Una de las conclusiones previsibles, aunque sorprendente por lo pequeño del número, es que sólo un 5,4% de los blogs registrados publican con cierta frecuencia. Este dato, aunque no cuadra del todo con ninguna de las cifras publicadas (1h, 24h, semana, mes, etc.), supongo que incluye los blogs que han publicado algo en los últimos siete días o con mayor frecuencia. Pero es que si tenemos en cuenta todos los que han publicado en los últimos seis meses, no llegamos ni al 20%. Dicho de otra manera, el 80% de los blogs no han publicado nada en los últimos seis meses.


Y es que la vida del bloguero es muy dura ¿O tal vez no?


Texturas molonas

16/04/2010
DeviantART es una pequeña gran joya como ayuda para el diseño de nuestro blog. Hay infinidad de imágenes de muy buena calidad y es difícil no encontrar aquello que necesitemos. Precisamente el gran número de ellas, es nuestro peor enemigo y es que resulta facilísimo perderse navegando por sus galerías e ir dando saltos de un sitio a otro.




En esta ocasión, me ha llamado la atención una colección de más de 30 packs del usuario Cloaks. con cerca de 150 texturas distintas: madera, vintage, grounge, humo, oscuras, orientales, papel... todas de una calidad excelente. Ideales para fondos.

Para estas y otras imagenes que llegueis a utilizar, no olvideis respetar los términos de uso fijados para cada trabajo. La mayoría son bastante magnánimos para los gorrones como nosotros y por ejemplo, en este de ahora, es suficiente con acreditar al autor mediante un enlace a su cuenta o a su sitio. Además, tenemos que saber que no se nos permite un uso comercial o su redistribución.


CSS Sprites

14/04/2010
Ahora que parece que Blogger se preocupa por la velocidad de carga de nuestros blogs y que diversas noticias indican que este factor va a ser determinante en el posicionamiento de todas las web, quizás sea especialmente interesante conocer esta técnica que sirve para aligerar la carga de una página.

El origen de los sprites está en los videojuegos. Con ellos, a partir de unos gráficos maestros y una serie de instrucciones, se consigue ir dibujando los distintos elementos animados de un juego.


Por extensión, los CSS sprites son un conjunto de imágenes contenidas a su vez dentro de una sola y que mediante CSS podemos mostrar individualmente.

El de la derecha es el sprite que el archi-conocido buscador Google utiliza actualmente para sus páginas de resultados. Creo que podeis reconocer fácilmente los distintos elementos gráficos que componen una de esas páginas.

La imagen de la izquierda es una captura del pie de página. Si accedeis a una página real y vais seleccionando las distintas letras de la palabra Goooooooooogle, así como la flecha azul, podreis comprobar que no es una sola imagen, sino varias montadas una al lado de la otra.

La idea es la siguiente:
- tenemos una sola imagen con todos los gráficos que necesitamos
- allí dónde queramos mostrar una de las imágenes (o un trozo cualquiera del conjunto), creamos una capa con determinado ID
- mediante CSS asignamos a cada ID un ancho y alto concreto e igual al tamaño de la imagen a mostrar
- como fondo de todas las capas creadas para este fin, usamos la misma imagen... la que contiene todos los gráficos
- mediante background-position desplazamos el fondo para que se vea el trozo que necesitamos

Esto se puede utilizar tanto para las imágenes principales que forman la estructura del blog como para pequeños elementos que utizamos repetitivamente.

VENTAJAS

Las solicitudes son las peticiones que un navegador hace a un servidor para obtener los datos necesarios para ir montando una página. Cuando el HTML ordena visualizar el texto de una entrada, se produce una petición y por tanto una solicitud. Adicionalmente, si la entrada contiene una imagen, se realiza otra petición/solicitud para obtener esa imagen, ya que esta tiene su propia dirección y por tanto es un ente independiente. Cada imagen más que haya, cualquier llamada a un script, a un archivo flash, etc. se corresponde con una nueva solicitud y así hasta completar la página.

Cada solicitud, además de los datos propios del contenido que se quiere mostrar, incluye otros necesarios para el transporte y control de los propios datos. Por tanto, no ocupa los mismos recursos hacer una solicitud que hacer siete, a pesar de que la suma de contenidos sea la misma.

Imaginemos siete imágenes con sus respectivas conexión-datos de control-contenido-desconexión frente a una sola imagen con lo mismo. Los datos de contenido podrían ser más o menos equivalentes, pero los demás se reducirían divididos casi por siete.

Sobre esto, los datos de los contenidos podría pensarse que son más pesados en una imagen maestra -mucho más grande- que en siete individuales -más pequeñas-, pero esto ni es siempre así ni es relevante el posible incremento. Sólo hice una prueba, pero en ella, ocho imágenes individuales de 200x40 px pesaban un total 25,07KB, mientras que un solo sprite con las mismas imágenes de 800x80 (4x2) con las mismas ocho imágenes, pesaba tan sólo 13,10KB.

Además, podemos optimizar nuestro sprite ajustando los espacios vacíos y utilizando imágenes que podrían dar lugar a diversas imágenes dependiendo del trozo que cojamos. No es un ejemplo fácil de aplicar, pero de las siguientes imágenes, la de la izquierda podría servir perfectamente para mostrar todas las fechas posibles con una tipografía especial, con imágenes y sin utilizar otro tipo de aplicaciones. Sin embargo, con algo más de programación, pero la de la derecha también podría servir. La primera ocupa 28,19KB y la segunda 8,38KB. Es cuestión de ir valorando si merece la pena teclear más código para reducir la carga de imágenes.


Conviene no ajustar demasiado los espacios vacíos, por si posteriormente necesitamos añadir algún gráfico más y, sobre todo, alojar la imagen correspondiente dónde podamos cambiarla sin que varíe su dirección. De lo contrario, cualquier modificación nos obligaría a modificar todas las direcciones de los correspondientes backgrounds.

En botones es dónde mejor se puede apreciar la diferencia. Un rollover con JavaScript produce una doble petición al servidor (onmouseover, onmouseout), una para cada imagen, además de que toma su tiempo cargar la segunda con el desagradable efecto de no visualizarse hasta pasados unos instantes. Por otra parte, no se necesitan solicitudes adicionales para realizar efectos hover, active o focus, porque la imagen estará cargada desde el principio.

Más adelante veremos cómo se hace en la práctica todo esto.

Por cierto que, sin querer, me ha quedado un curioso efecto óptico ¿No parecen más grandes las letras y dígitos de la derecha que los de la izquierda? Pues son exactamente iguales.

Actualización: Sobre esto último, no os molesteis siquiera en comprobarlo. Las imágenes se redimensionaron automáticamente y realmente la de la izquierda es más pequeña de lo que debería en este post :D


SimpleCart. Una tienda online... también para Blogger.

12/04/2010
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.
  • 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.
Desde ya, podemos ver una tienda en funcionamiento. Trastear si quereis con los botones de Añadir, Vaciar Carro y las pequeñas flechas en las miniaturas del carro, que sirven para incrementar/decrementar la cantidad de cada artículo solicitada. Incluso podeis pinchar en el botón PAYPAL para ver que conecta bien con dicho servicio, transfiriendo la lista de artículos seleccionados, su descripción y el importe total.

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.

<!-- Crea un DIV CON LA CLASE "simpleCart_shelfItem" -->
<div class="simpleCart_shelfItem">
<img src="http://img85.imageshack.us/img85/8136/tshirt1x.jpg" alt="Camiseta AA" title="Camiseta AA" class="item_image" />
<h5 class="item_name">
Camiseta AA</h5>
<p class="item_Description">
Cualquier campo que quieras para tus artículos, puede ser generado creando una etiqueta con la clase "item_[field-name]"
</p>
<span class="item_price">26.00€</span>
<a id="s2" href="javascript:void();" class="item_add">Add to Cart</a>
<span class="item_thumb">http://img85.imageshack.us/img85/8136/tshirt1x.jpg</span>
</div>


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.

Actualización: Ver cómo aplicar el envío por correo electrónico.


Aviso: Phishing contra Blogger.

10/04/2010
Me parece interesante ayudar a difundir esta entrada de Vagabundia, en la que se habla de un nuevo intento de conseguir las contraseñas de usuarios Blogger, a través del ya conocido sistema phishing o "ir de pesca".


Según leo allí, en spamloco ya advertían en febrero de una campaña similar por parte de Zeus, una de las redes zombis más grandes y más perniciosas que existen y esta no le va a la zaga en cuanto a elaboración.


Con información sensible, siempre observa el destino de los enlaces que te ofrecen antes de pinchar en ellos. Cualquier información sobre tí y sobre todo, tus contraseñas, forman un botín muy apetitoso para muchos delincuentes.


Seguir, seguir y seguir.

09/04/2010
Según Blogger, seguir sirve para que el autor y los lectores de determinado blog, sepan que eres seguidor (!?). Como cosa adicional, nos permite añadir al blog seguido a nuestra Lista de lectura del escritorio.

Tal y como lo cuentan, esto último queda en un segundo plano y lo importante es lo primero: que sepan que les seguimos.


En Twitter nos explican algo menos auto-referente y nos dicen que seguir significa recibir las actualizaciones del seguido en nuestro propio historial y que si eres seguidor de alguien, podrás intercambiar mensajes privados.

Esta parece una explicación algo más lógica que la anterior: sigo a alguien para ver lo que twittea directamente en mi timeline. Pero... ¿Cómo se explica que en este servicio haya usuarios que tengan más de 100.000 seguidos, 10.000 ó tan siquiera 1.000. Yo con menos de 20 casi no puedo leer todos los twitts que me llegan y seguro que me pierdo muchos muy interesantes.

Igual pasa con nuestros contactos de MSN, los usuarios de Bitácoras, fans y grupos de Facebook y tantas y tantas redes sociales que podemos encontrarnos en internete.

Imagen: El Amargado

Me da la impresión de que por simple notoriedad social, queremos aparecer con el máximo número de seguidores posible. Esto es lícito e incluso mayoritariamente deseado -según parece- y no hay más que darse una vuelta por tuenti o feisbuk para comprobar que el exhibicionismo está en auge. En ocasiones todo esto parece una competición a ver quién tiene más amigos, más seguidores, más fans, más... Desde el punto de vista SEO, seguro que esto es muy importante pero particularmente sólo puedo decir que no, no me gusta.

La manera mas rápida de conseguir seguidores cuando hay algún artilugio de seguimiento de por medio, es prodigarse con el yotesigo-tumesigues. Nos lanzamos a seguir gente, páginas, organismos o grupos casi indiscriminadamente, con la intención de que nuestra altruista acción sea recompensada con un recíproco seguimiento. Y lo mejor del caso es que parece que esto funciona.

Personalmente me desagrada cada vez que recibo un aviso de que un tal John Smith o un tal Jing Li, me siguen en este o aqueste servicio. Son presuntos no-hispanoparlantes y por ello intuyo que se hacen seguidores míos sólo pretendiendo que me haga seguidor de ellos, sin probablemente importarles un comino lo que publico ¿De qué me sirve un seguidor que no me sigue de verdad? Principalmente por esto, no practico la acción a la inversa y no he podido comprobar la eficacia del tesigo-mesigues en mis propias carnes, pero sí que he visto varios ejemplos.

Muchas entidades comerciales ya usan esta técnica para conseguir seguidores, con la diferencia sobre los comunes mortales de que las primeras, una vez conseguido su objetivo (ganar seguidores), incluso te eliminan de sus listas sin ningún remordimiento. Algunas ni se molestan en ello porque no tienen la más mínima intención de leernos y sólo quieren engrosar la cifra de seguidores en su casillero, porque ¿alguien se cree que por ejemplo, BritneySpears lea a sus 420.000 seguidos, Barack Obama a sus más de 700.000, Downing Street a más de 400.000, El País a más de 45.000, Despegar más de 4.000, etc. etc. etc...?

O mucho me equivoco o esto es más un acto protocolario de agradecimiento a quiénes les siguen, que un auténtico interés por ver lo que otros escriben. Y esto siendo magnánimo con los que te borran después de conseguir que te apuntes a ellos.

Punto y aparte (o seguido) es el asunto de algunos grupos y aplicaciones Facebook, como el timo del Contador de visitas para tu perfil, el Informe amigo y otros supuestos servicios similares que sirven sólo para... no sé realmente para qué sirven, porque no hacen nada de lo que prometen a pesar de tener miles de fans o seguidores.

La acción de seguir algo no te obliga indefinidamente a hacerlo. Si sigues por SEO, continúa en ello; si sigues por interés en el contenido, continúa en ello; pero si sigues por seguir, hay botones para dejar de hacerlo en todos los servicios. Nadie te va a pedir cuentas.


Enlaces de navegación desaparecidos

07/04/2010
En algunas plantillas que os descargais (no suele ocurrir con las que Blogger proporciona), se echan de menos los casi imprescindibles enlaces de navegación Entradas antiguas/Home/Entradas más recientes.


Las causas pueden ser diversas, pero hay un par de ellas que por su recurrencia y lo fácil de su solución, creo que merece la pena comentarlas, ya que os han dado la lata a bastantes de vosotros.

1
La primera es que el diseñador de la plantilla que os bajasteis, consideró que no eran útiles los enlaces de navegación y simplemente los ocultó. Para comprobar si este es nuestro caso, accedemos a la plantilla y buscamos blog-pager, que es el nombre de la clase que controla el cacharrito:

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
height:0px;
width:0px;
display:none;
text-align:center;
margin:0px auto;
}

La primera clase es para las entradas más recientes y la segunda para las más antiguas, mientras que la última sirve para el contenedor general de todos, antiguos, recientes y home. Si como se ve en el ejemplo, #blog-pager tiene alguna propiedad que hace su altura o anchura cero, o un display:none, el artilugio será no-visible.

Con quitar esas líneas (en verde en el ejemplo) u otras en ese mismo lugar, que pudieran provocar la invisibilidad del gadget, ya tendremos solucionado el asunto.

2
Otra opción, siempre tras comprobar lo anterior, es que también debido al diseño de la plantilla, los enlaces están en su sitio, son visibles, pero otras capas se solapan por encima provocando que definitivamente no se vean.

Lo primero que tenemos que hacer para ver si esta solución es la buena, es acceder a nuestra plantilla con Expandir plantillas de artilugios seleccionado y buscar si tenemos este código:

<b:include name='nextprev'/>

Esto es una llamada a la pequeña rutina que genera los enlaces. Si la teneis, probablemente estamos en este caso del solapamiento.

Para estar más seguros de que esta es la causa, también podeis acceder a vuestra página (no a la plantilla) y mediante el botón derecho y Ver código fuente, visualizamos nuestro idem ya interpretado. Buscamos de nuevo blog-pager y comprobamos que efectivamente lo tenemos.

Y ahora, la solución: insertar una línea que elimine algún posible FLOAT que provoque que se solapen las entradas por encima de los enlaces. Este es el código de referencia y en verde lo que hay que insertar.

...
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div>
<div style='clear:both;'/>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>

<b:if cond='data:top.showStars'>
...


Estos dos casos generan la gran mayoría de los problemas que conozco. Si ninguno de ellos es el vuestro y tras intentar lo que se explica seguís sin ver los enlaces de navegación, ya tendreis que ir al enlace del principio de esta entrada, dónde se explica con más detalle cómo funciona este artilugio.


CSS3. Texto en columnas

05/04/2010
Cuanto más conozco el CSS3, más me va gustando. Hoy he descubierto una de las nuevas propiedades de este estándar que facilita algo que hasta ahora era bastante complicado de hacer: estructurar un texto en columnas, al modo de las de un periódico.

Las propiedades son column-count y column-width.

La primera permite definir en cuántas columnas queremos que se divida el texto de determinada capa y la segunda, el ancho de cada una. Son dos propiedades que normalmente se usarán de manera alternativa, ya que mientras column-count hace invariable la cantidad de columnas, column-width lo que fija es el ancho mínimo de cada columna, ajustando el número de columnas en función del espacio disponible. Esto que parece un poco un trabalenguas, quizás se vea mejor probando a ensanchar y a encoger la ventana de este ejemplo, en el cual se han introducido los dos tipos de propiedades.

Complementariamente disponemos de dos propiedades más que permiten especificar el espacio entre columnas (column-gap), así como introducir una línea vertical de división (column-rule).

Como es habitual, ahora falta que los distintos navegadores vayan incorporando estas propiedades para facilitarnos el asunto a los que nos dedicamos a teclear código, pero de momento, para Firefox, Chrome y Safari, ya podemos hacer uso de los prefijos -moz- y -webkit- para que la cosa funcione.

.columnas {
-moz-column-width: 200px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-width: 200px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;
}

La inserción del código anterior en nuestro CSS, servirá para definir columnas de 200px de ancho, con una separación entre columnas de 20px y una línea discontinua negra de 1px de separación, además de que el texto salga justificado dentro de dichas columnas.

El definir anchos de columna fijo hará que en diseños de ancho de página variable, el número de columnas se ajuste al espacio de ventana disponible. Ventanas de algo más de 800px darán lugar a cuatro columnas en el ejemplo, pero cuando la ventana se reduzca, las columnas se irán estrechando hasta un mínimo de 200px para cada una, momento a partir del cual se reformateará todo con una columna menos. Si fuéramos ampliando la ventana, pasaría a la inversa y en el momento en que cupiera una quinta columna de 200px, se pasaría a mostrar el texto en cinco columnas. Esto es lo que se puede apreciar en la parte superior del susodicho ejemplo.

.columnas4 {
-moz-column-count: 4;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;

Este otro código en el que sólo cambia la primera propiedad, hace que invariablemente se muestren cuatro columnas, cambiando su anchura a medida que vayamos haciendo más grande o más pequeña la ventana del navegador. Es lo que se puede ver en la parte inferior del mismo ejemplo.

La forma de aplicarlo es simplemente mediante la aplicación de la clase correspondiente al texto:

<div class="columnas">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, etc.
</div>

Esto facilita bastante las cosas ¿no?

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba