Oloblogger

Seguimos valorando cosas con semáforos CSS de colores

2012-05-25T16:19:00.000+02:00

El otro día vimos cómo hacer una especie de semáforo que nos permitiera marcar elementos de nuestra web con un código de colores. Allí usábamos un sistema basado en una lista que nos facilitaba tener elementos ilimitados de color, pero que no nos dejaba demasiada libertad para usar distintos colores en distintas posiciones.

Freepick

En este caso en lugar de listas usaremos un div simple, para lo que no se me ocurrió otra cosa mas que utilizar :after y :before. Alguno ya puede imaginar que con esto no podremos obtener más de tres círculos y así es, pero sin embargo podremos usar muchísimos colores.

El código CSS sería este:

.semaforo,
.semaforo:before,
.semaforo:after {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
margin: 0 auto;
}
.semaforo:before {
position: absolute;
left: -100px;
content: "";
}
.semaforo:after {
position: absolute;
right: -100px;
content: "";
}
.verde:before {background: limegreen;}

.naranja {background: orange;}

.rojo:after {background: red;}

¿Imagináis lo que se verá si escribimos simplemente <div class="semaforo verde"></div>?

Este sería el resultado de <div class="semaforo rojo verde naranja"></div>

La manera de crear más colores siempre estará limitada por la imposibilidad de repetir colores en distinta posición. Es decir, en el centro pueden ir tantos colores como queramos pero esos quedarán excluidos para derecha e izquierda porque el navegador daría prioridad al que pusiéramos en último lugar en la hoja de estilo. De la misma manera, los que usemos para la derecha no podrán ir ni en el centro ni en la izquierda y análogamente con los de la izquierda.

De esta manera, para añadir más colores tendríamos que decidir dónde queremos que aparezcan cuando los usemos, incorporando la clase correspondiente (centro), la clase con :before (izquierda) o la clase con :after (derecha). La parte dónde definimos los colores de fondo sería la que habría que ir ampliando:

.verde:before {background: limegreen;}
.azul:before {background: blue;}

.naranja {background: orange;}
.amarillo {background: yellow;}

.rojo:after {background: red;}
.violeta:after {background: purple;}

Obviamente, si así lo necesitamos, podemos usar los efectos de gradientes y sombras que aplicamos en la anterior entrada con el fin de dar más realismo a los círculos, añadiendo por ejemplo este estilo en la primera definición:

background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4),
0 0 1px #000;

Una variante de este último código que sí que nos permitiría usar cualquier color en cualquier sitio sería la siguiente. Ahora lo que hacemos es usar diferentes nombres de clase según la posición dónde queremos que se muestre cada uno. Para fines nemotécnicos, a las que irán a la izquierda le hemos añadido una i y a las de la derecha una d. El resto son para el centro.

.verde {background: limegreen;}
.naranja {background: orange;}
.rojo {background: red;}
.azul {background: blue;}
.amarillo {background: yellow;}
.violeta {background: purple;}

.verdei:before {background: limegreen;}
.naranjai:before {background: orange;}
.rojoi:before {background: red;}
.azuli:before {background: blue;}
.amarilloi:before {background: yellow;}
.violetai:before {background: purple;}

.verded:after {background: limegreen;}
.naranjad:after {background: orange;}
.rojod:after {background: red;}
.azuld:after {background: blue;}
.amarillod:after {background: yellow;}

Ahora con escribir <div class="semaforo naranja violetai rojod "></div> o <div class="semaforo amarillo rojoi rojod "></div> nos aparecerá esto:

Otro Dabblet para ver esto último: Otro semáforo CSS

Una última cosa. Si queréis máxima compatibilidad con las distintas versiones de navegadores, deberéis añadir antes de las propiedades box-shadow, border-radius, linear-gradient y radial-gradient (cuando se usen), la misma propiedad pero con los prefijos que ya hemos visto en otras ocasiones. Esto es para las dos entradas que hemos visto sobre el tema. Ejemplo:

-o-border-radius: 50%;
-webkit-border-radius: 50%;
-mox-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;

Semáforos: Indicadores de colores con CSS. 3 versiones

2012-05-24T19:05:00.000+02:00

Esto comenzó inicialmente buscando una manera de incorporar a este blog algún sistema para marcar el nivel de dificultad de las cosas publicadas. Ya sabéis: fácil, medio o difícil.

El caso es que lo primero (y único) que se me pasó por la cabeza fue usar una especie de código gráfico, tipo semáforo, para indicar esos distintos niveles mediante colores. Pero me fui liando, liando y terminé con alguna cosa más y sobre todo con esto que veis a continuación. Es una imagen jpg, pero juro por la batería de mi iPhone que está hecho con CSS. Lo veremos después.

Como decía, lo de los colores puede servir para marcar de una manera gráfica distintos niveles de dificultad, pero también podría servir para una codificación de preferencias, recomendaciones, valoración de artículos, opiniones de películas y en general, para calificar cualquier otra cosa que se os ocurra.

Alguno se preguntará que por qué no hago una imagen, la pego en el post y me dejo de gaitas, pero además de que esto es simple aprendizaje recreativo, encontré varios inconvenientes en eso cuando estaba desarrollando la idea de los niveles de dificultad.

Para empezar tendría que diseñar varias imágenes: verde, naranja, rojo, verde-naranja, naranja-rojo y verde-naranja-rojo, en total seis combinaciones posibles. Luego tendría que tener alojadas esas seis imágenes en algún sitio que me quedara a mano y cada vez que publicara un post, tendría que acudir allí para copiar y pegar la dirección de la que me interesara. E insisto en lo de cada vez.

Como problema añadido, si deseaba en el futuro cambiar el modelo de imagen tendría que volver a repetir todo el proceso, desde el diseño hasta el alojamiento y lo peor, modificar todos los posts con semáforos o renunciar a ello y dejarlos como quedaran. Si quisiera ampliar el número de luces para tener una gama más amplia de colores, pues ocurriría lo mismo. En fin, una complicación grande de cara al futuro.

La ventaja de utilizar CSS es la habitual de este lenguaje: codifico una vez y luego con capas y clases voy construyendo lo que quiera. Si quiero cambiar el diseño sólo tengo que cambiar las propiedades y todas las "imágenes" se actualizarán automáticamente.

El código básico para crear los círculos sería este:

ul.semaforo {
position: relative;
width: 100px; /* para 5 (ancho li x nº de círculos total) */
margin: 10px auto;
padding: 0;
list-style-type: none;
}
ul.semaforo li {
position: relative;
display: block;
float: left;
width: 20px; /* ancho de cada círculo */
height: 20px;
border-radius: 50%;
background: lightgrey;
}

Con eso y este HTML conseguiríamos una serie de círculos grises; tantos como elementos de lista (li) añadamos:

El toque mágico CSS consistiría en añadir las clases de los colores a usar, asociados con la pseudoclase :nth-of-type(n). Esto nos permitirá asignar secuencialmente a cada elemento de la lista un color diferente:

.rojo li:nth-of-type(1) {
background: #cc0000;
}
.naranja li:nth-of-type(2) {
background: #FF9326;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}
.azul li:nth-of-type(4) {
background: #3366ff;
}
.amarillo li:nth-of-type(5) {
background: #ffff00;
}

Con esto ya sólo tenemos que añadir a <ul class="semaforo"> el color que deseamos mostrar. Así, con <ul class="semaforo naranja"> el resultado sería este:

Y con <ul class="semaforo azul"> este otro:

También se podrían combinar varios colores, mostrándose cada uno en la posición definida: <ul class="semaforo verde rojo amarillo">

O todos: <ul class="semaforo verde rojo amarillo azul naranja">

Como decía antes, cambiando las propiedades CSS se puede cambiar todo el aspecto de una vez y así, colocándole un fondo al contenedor general, cambiando un poco el estilo a la lista para que los círculos queden en vertical y añadiendo algunas sombras y gradientes, me salió esto otro que es lo mismo que mostraba al principio de la entrada.

Las sombras para dar realismo a las luces las saqué de este post que casualmente publicó hace unos días Codrops y que me vino fenomenal para rematar el diseño que tenia a medias.

En estos sí que podéis seleccionar zonas con el puntero para comprobar que efectivamente es CSS y no una imagen:

En este botón podéis desplegar el código para verlo:

Ver/Ocultar

<ul class="semaforo verde">
<li></li>
<li></li>
<li></li>
</ul>

/* Semáforo CSS vertical */

ul.semaforo {
float:left;
position: relative;
width: 100px;
margin: 0 50px;
padding: 15px;
list-style-type: none;
border: 6px double grey;
background: black;
background: linear-gradient( -90deg, #45484d 0%, #000000 100%);
border-radius: 20%;
box-shadow: 0px 0px 0 20px rgba(0,0,0,.8);
}
ul.semaforo li {
position:relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: lightgrey;
margin: 10px 0;
background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
inset -2px -1px 40px rgba(0,0,0,0.4),
0 0 1px #000;
}
ul.semaforo li:after {
content: "";
width: 60px;
height: 30px;
position: absolute;
left: 20px;
top: 10px;
box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
border-radius: 30px / 15px;
}
.rojo li:nth-of-type(1) {
background: #ff0000;
}
.naranja li:nth-of-type(2) {
background: #ff9933;
}
.verde li:nth-of-type(3) {
background: #00ff00;
}

Obviamente, si cambiamos el ancho y alto de los círculos o los colores de cada elemento de la lista, podremos adaptar este cacharrito a nuestras necesidades particulares. Se trata de un sistema de valoración o marcaje subjetivo que cada cual tendrá que añadir a los elementos que crea necesario de la manera que guste, así que de todo esto sólo debéis tomar la idea y la mecánica de construcción.

Para además de ver el código poder experimentar sobre él las modificaciones que gustéis, este es el Dabblet del primer ejemplo y este el del segundo.

En el título anuncié 3 versiones, pero la entrada está quedando demasiado densa así que la que falta la dejaré para otro día. La idea será utilizar :after y :before para construir una señal de sólo tres cuerpos circulares, pero veremos también la forma de compensar esa limitación explicando un sistema que nos permitirá usar cualquier color en cualquiera de los círculos indistintamente.

Por cierto. No tengo iPhone así que no sé si debéis creerme con lo que escribo.

Error al instalar plantillas con la nueva interfaz de Blogger

2012-05-22T21:32:00.001+02:00

Hace unos días un lector me dijo que tenía problemas para instalar una plantilla prediseñada que encontró acorde a sus gustos. Un error de esos que acostumbra a mostrarnos el Nuevo Escritorio era el causante de sus problemas.

Fue Mikiktz y comentaba que al subir una nueva plantilla el sistema le mostraba el siguiente mensaje:

Tu plantilla no se ha podido analizar debido a que su formato no es correcto. Asegúrate de que todos los elementos XML estén cerrados correctamente. Mensaje de error de XML: Content is not allowed in prolog.

Sinceramente, no sé si esto que más o menos voy a traducir desde Simplex Design le servirá a Mikiktz o no, pues a mí nunca me ha sucedido y no puedo comprobar su eficacia, pero por si le resulta de utilidad a alguien, allá va el truco.

Al parecer el problema que han detectado se muestra cuando los gadgets incorporados en la nueva plantilla, no coinciden con los instalados en ese momento en el blog. Por ejemplo, si tienes el gadget de Entradas Populares añadido en tu actual plantilla y la nueva que pretendes instalar no lo lleva incorporado, entonces te aparecerá el error. Lo que habría que hacer sería eliminar el gadget y reinstalarlo tras subir la nueva plantilla.

Si realmente ese es el factor común y por tanto el origen del problema, la solución es tan fácil como aparenta.

Tiene su lógica. En Simplex Design nos recuerdan que con el antiguo interfaz aparecía un aviso con los gadgets que no "cuadraban", preguntándonos si queríamos guardarlos o borrarlos. De esta manera, los pasos a seguir que nos recomiendan son:

Hacer una copia de seguridad (esto siempre)
Copiar el contenido de los gadgets en Notepad o similar
Eliminar todos los gadgets
Instalar la nueva plantilla
Añadir de nuevo los gadgets que hemos guardado en 2

Yo añadiría que no es posible ni necesario copiar los gadgets de serie, pues sus códigos son automáticos y no accesibles. Sólo salvaría los tipo HTML/JavaScript, Imágenes, Texto y si acaso las listas de enlaces/blogroll. Pero quizás a alguno le convenga no hacer esto último para así aprovechar para actualizarlos.

Incluso probaría primero quitando todos los que no se pueden manipular desde la ventana de instalación de gadgets y ya sólo como último recurso, los segundos que comento.

Los que tengan problemas de este tipo ya nos contarán si esto les sirvió y cómo lo hicieron. Espero...

Programación horaria de elementos con Google Drive

2012-05-21T19:00:00.000+02:00

En el último post comentaba la idoneidad de acoger a la tortuga como mascota, pero es que en realidad sería ese bicho el más adecuado para este blog. Ya hace varios meses que alguien solicitó una variante sobre este código que servía para mostrar automáticamente a partir de una lista de elementos (texto, imágenes, sonidos, vídeos, etc.), uno distinto según la hora de acceso al sitio, cumpliendo así determinada programación previa del administrador.

Esta variante consistiría en tener a su vez una sublista dentro de cada intervalo horario, de manera que teniendo cada hora una lista fija, dentro de esa hora se mostrara cada vez un contenido distinto al azar.

Por si con tanta hora, intervalo y listas no lo termino de explicar bien, concreto el asunto con el ejemplo que vamos a ver hoy. Disponemos de una programación de vídeos que podéis ver en esta hoja de cálculo. El código que veremos servirá para que los vídeos 1, 2 y 3 sólo se vean cuando estemos entre las 00:00 y la 01:00. Los vídeos 4, 5 y 6 lo mismo pero entre la 01:00 y las 02:00. Y así sucesivamente...

Así en cada acceso veremos aleatoriamente uno de los vídeos, pero no de entre todos los listados, sino sólo de entre los del tramo correspondiente.

Este el sitio de prueba que he montado para la ocasión para que esté algo más claro:

Demo

Ya he anticipado que vamos a usar una hoja de Google Drive (antes Docs) y eso es para no tener que crear un interminable array dentro del correspondiente código JavaScript. Esto también nos permitirá cambiar fácilmente la programación con sólo acceder a la hoja y variar los datos.

Cómo preparar la hoja de cálculo de Google Drive lo vimos anteriormente, así que pasamos directamente al código JavaScript. Se podría situar en un gadget tipo HTML/JavaScript o en la propia plantilla antes de </head>:

La primera parte (función leermusica) obtiene la hora en al que nos encontramos (sólo la hora, entre 0 y 23), un número aleatorio (0, 1 ó 2) y luego con ambos datos calcula que fila hay que leer (cual). Como tenemos tres elementos por hora guardados en la hoja de cálculo, usamos una fórmula que nos dará los valores de la siguiente tabla (izquierda):

Si tuviéramos por ejemplo cuatro elementos para cada hora, la fórmula sería la de la derecha y el número aleatorio tendría que calcularse como Math.round(Math.random()*3) para que pudiéramos obtener 0, 1, 2 ó 3, es decir, cuatro valores.

Si en la hoja de cálculo hemos grabado correctamente los títulos y los datos de tres en tres filas (siguiendo el ejemplo), toda la lectura funcionará correctamente. Como podéis ver, el resto es sólo leer los datos de la la fila usando el mismo sistema de leer hojas de cálculo que publicamos en Google Docs como base de datos: leer y mostrar con JavaScript.

CONTENIDO_CELDA = json.feed.entry[NUM_FILA].gsx$TITULO_COLUMNA.$t;

La única diferencia importante es que en la otra ocasión necesitábamos leer todos los datos para tenerlos disponibles y así poder mostrar sucesivamente distintas frases aleatorias. Ahora para una mayor rapidez, sólo leemos el dato que necesitamos.

La segunda función (mostrarmusica) simplemente escribe lo que hemos leído con un formato absolutamente personalizable (sólo hay que ir escribiendo HTML dentro de la variable salida) y finalmente lo inserta dentro de la capa con la ID enviada desde dónde llamamos la función. En el ejemplo es videoshorarios.

Preparada la hoja y el script, nos falta hacer una llamada al feed de la hoja para leer el dato que necesitamos con leermusica, crear la capa dónde meteremos el resultado (videoshorarios) y por último ejecutar la segunda función (mostrarmusica) para efectivamente mostrarlo. Lo siguiente habría que insertarlo justo dónde queremos que se muestre el elemento programado. En este caso nuestro vídeo con sus correspondientes rótulos:

Aquí lo único que hay que tener en cuenta es que la clave de la hoja de cálculo tiene que ser la misma que nos facilitó el servicio de Google al publicarla como feed tipo RSS. No hay más.

Para terminar, podemos aplicar un estilo básico (o el que queráis) para centrar el vídeo y formatear un poco el texto de los rótulos. Se puede añadir en la hoja de estilo o si lo usamos como gadget, antes del anterior entre etiquetas style:

.codigo {width: 600px; margin: 0 auto;}
.titulo {text-align: center; font-size: 20px; font-weight: bold;}
.autor {text-align: center; font-size: 16px; font-style: italic;}

Última remesa de logos recibida

2012-05-19T14:09:00.000+02:00

Como habréis podido comprobar los habituales, ando algo flojo con mi vida online y eso incluye como no podía ser de otra manera este blog. El motivo es muy sencillo y es que mi alter ego offline está muy ocupado actualmente con diversos asuntos de índole personal a los que no tengo más remedio que dar prioridad

Cosas de la vida terrenal que espero no ocupen demasiado tiempo. Parte seguro que sí, pero la otra parte espero despacharlas en unas semanas.

Este preámbulo sólo pretende servir de excusa y de disculpa a los afectados, por no haber publicado la última tanda de logos que tras mi solicitud habéis tenido a bien ir remitiéndome. De verdad que no pensaba recibir más de tres o cuatro pero finalmente han sido bastantes más (25) y alguna que otra idea suelta adicional sin plasmar gráficamente pero que también se agradece.

Pero como rezan los conocidos dichos, más vale tarde que nunca y lo prometido es deuda, así que hoy he sacado un rato para poderlo hacer y aquí están los que faltaban por mostrar.

No he comentado los publicados anteriormente pero hoy no tengo más remedio que hacerlo con dos. En uno alguien ha tenido la osadía de incluir una imagen de mi jeta retocada y tengo que reconocer que hasta que no me lo indicó expresamente, fui incapaz de reconocerme. Para empezar, yo no tengo casi pelo en la cabeza.

El otro es porque no sé si es una indirecta o no, pero esa tortuga me ha matado. Refleja exactamente mi velocidad de aprendizaje y de publicación

Los gustos de cada uno son diferentes y por tanto habrá opiniones muy distintas para los trabajos realizados, pero el hecho de gastar unos minutos (o más) del tiempo propio en beneficio de otros, a mí me parece muy admirable, así que mil gracias a todos los que habéis colaborado o de alguna manera participado. No deja de sorprenderme la de gente tan maja que me voy encontrando por la Red.

A ver si encuentro la manera de ponerlos todos juntos en un lugar adecuado.

Una seguidora

El resto de logos recibidos aquí y aquí.

Cambiar imágenes con CSS. Presentando al equipo

2012-05-15T17:15:00.000+02:00

Esta es una cosa relativamente sencilla pero que con una combinación de gráficos adecuada puede quedar bastante bien. Se trata de disponer de dos imágenes y hacer una sustitución simple con CSS aprovechando la pseudoclase hover, pero la imaginación de cada cual es la que puede convertir simple código en algo agradable a la vista.

Es el caso de Alba Diethelm, que quería presentar en su espacio web (en construcción) mediante un sistema similar, a los miembros del equipo de su nuevo proyecto. De ella es esta idea y las imágenes de este ejemplo ilustrativo y nosotros sólo hemos puesto la parte técnica.

Pasando el cursor por encima de cada cara podréis ver los nombres y cargos de cada componente del grupo. Si os gusta, más adelante la explicación y el código con el que hacer esto.

La construcción del HTML es la habitual de una imagen con enlace y el truco en esta parte sólo consiste en insertar dentro de dicho enlace, una segunda imagen entre etiquetas span. Estas serían las dos primeras y como veis no tienen ninguna ciencia: una con la cara y otra que además de la cara lleva un rótulo.

Con las etiquetas span lo que conseguimos es poder independizar cada par de imágenes dentro de cada enlace. La segunda aparecerá solapada sobre la primera, pero sólo se verá cuando hagamos hover. La estructura sería esta:

La parte CSS también es fácil pues sólo hace falta estilo para los enlaces de la clase que hemos creado (presentar), sus span y el hover.

El contenedor general será el enlace, al que le asignaremos una posición relativa para luego poder situar de manera absoluta la segunda imagen dentro de él. Lo que conseguiremos con esto es que ambas imágenes realmente estén una encima de otra en el mismo espacio, el destinado al enlace.

Luego pondremos una opacidad nula a la segunda imagen -la de dentro del span-, o lo que es lo mismo, la haremos transparente. Para que se vea al hacer hover, aplicamos a ese estado una opacidad total y así será cómo logremos ver el contenido.

Así que esto es lo que hay que teclear (o copiar) en nuestra hoja de estilo:

.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: block;
float: left;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
}
.presentar a:hover span {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

A partir de aquí y cómo decía al principio, la imaginación de cada uno es lo importante. Con esto se podría hacer también por ejemplo un menú gráfico, ya que los enlaces que aquí hemos dejado vacíos (#) se podrían rellenar perfectamente para que llevaran a algún lado. Seguro que se os ocurren otras utilidades.

Lo que viene al final es una pequeña variante en la que la segunda imagen se ha desplazado un poco con respecto a su respectivo original de manera que la alternancia de ambas simulen movimiento.

Estas dos demos combinadas y el código publicado, también lo podéis encontrar subido a Dabblet.

Comprobando código, Dabblet nos hace la vida más fácil

2012-05-10T17:41:00.000+02:00

Ya he citado un par de veces este servicio llamado Dabblet, pero como fue muy de pasada llegó el momento de comentarlo un poco más. Pero sólo lo justo, lo prometo.

Se trata de un sitio de pruebas que permite escribir CSS y HTML en dos espacios diferentes y que, en tiempo real, según se teclean caracteres, nos muestra el resultado en un tercer hueco.

La utilidad para los que trabajamos con código parece evidente, ya que permite comprobar rápidamente cómo funciona lo diseñado y realizar ajustes viendo sobre la marcha cómo van quedando las cosas.

Para una primera impresión hay una opción (-prefix-free) que nos simulará el uso de prefijos para compatibilidad con los distintos navegares y así evitaremos triplicar o cuadruplicar líneas CSS. Una vez todo en orden y comprobado ya habrá tiempo de añadirlos.

Existen tres modos diferentes de visualización, opción para ajuste de tamaño de fuente y la posibilidad de que el código se solape o no por encima del resultado.

No requiere registro aunque será necesario hacerlo en Github si queremos guardar los resultados para después compartirlos directamente, mediante un enlace o embebiendo en otro sitio.

Este es un ejemplo para ver directamente en Dabblet o en Github. En el primero comprobaréis que podéis trastear cambiando, añadiendo o quitando cosas del CSS o del HTML.

Lo siguiente sería el resultado de embeber aquí la parte de código HTML (sólo como ejemplo, para no hacerlo muy extenso) con el código que nos da Github.

Hay otros servicios similares pero la simpleza de la interface de este me resulta bastante práctica y muy agradable.

Tontería con nth-child, transition y rotate

2012-05-09T17:05:00.000+02:00

Ayer en lugar de publicar algo me puse a experimentar un poco con CSS. Al final me salió esta cosa que como reza el título para que nadie se lleve a engaños, es una tontería que sólo sirve para pasar el rato y quizás para algún tipo de rótulo muy específico, pero me ha gustado el resultado como demostración.

La cosa va de transiciones sobre rotación y opacidad aplicadas sobre un texto al hacer hover. Básicamente, el HTML lo que hace es asignar una clase y luego mediante etiquetas span, separar los distintos grupos de caracteres que vamos a ir animando. Por un lado una frase de dos palabras y por otro los caracteres individuales de una tercera: HOVER AQUÍ / O / L / O / B / L / O / G / G / E / R. Puro ombliguismo, oiga.

<div class="rotulo">
<span>Hover aquí</span><span>O</span><span>l</span><span>o</span><span>b</span><span>l</span><span>o</span><span>g</span><span>g</span><span>e</span><span>r</span></div>

Este sería el resultado y ahora vemos el CSS.

Hover aquíOloblogger

Tener esos caracteres delimitados por separado con etiquetas span, nos va a permitir controlarlos también de manera separada. Para eso usaremos :nth-child(n), una pseudoclase que nos permite atacar individualmente el elemento n de una serie.

En este caso la serie será la de los distintos span que hemos montado dentro de la capa con clase .rotulo:

.rotulo span:nth-child(1) {...}
.rotulo span:nth-child(2) {...}
etc

Los números entre paréntesis hacen referencia al ordinal de los diferentes span que el intérprete se va encontrando bajo la clase rotulo. En el ejemplo el 1 se corresponderá con "Hover aquí", el 2 con la "O", el 3 con la "L" y así sucesivamente.

Otra cosa que también se usa es opacity, de manera que en el estado normal cada span tendrá un valor 1 ó 0 según queramos que inicialmente se vea o no. Evidentemente, en el estado :hover tendrá el valor contrario para que desaparezca o aparezca respectivamente.

Para que el cambio sea suave con estados intermedios añadimos también un transition, al que adicionalmente le damos unos tiempos propicios para que haya una pequeña demora entre la aparición de un span y el siguiente, de manera que aparezcan progresivamente uno tras otro.

Por último hay un transform: rotate de 360º para que las letras que aparecen sueltas lo hagan "rodando".

¿Me compliqué con la explicación? Pues entonces echa un vistazo al CSS comentado a ver si ahí se aprecia mejor cómo se hace esto y para qué sirve cada parte...

/* Contenedor general */
.rotulo { position: relative; overflow: hidden;
background: #000; height: 80px; color: #fff; }

/* Span's inicialmente ocultos */
.rotulo span { opacity: 0; position: absolute;
font-family: Arial, sans-serif; font-size:50px; padding: 10px; text-transform: uppercase; }

/* 1º span sí lo mostramos y su transición se demora 0.5 seg. */
.rotulo span:nth-child(1) { opacity: 1; left: 100px; transition: all .4s ease .5s; }
/* La transición del resto se inicia escalonadamente */
.rotulo span:nth-child(2) { transition: all .3s ease; }
.rotulo span:nth-child(3) { transition: all .3s ease .2s; }
.rotulo span:nth-child(4) { transition: all .3s ease .4s; }
.rotulo span:nth-child(5) { transition: all .3s ease .6s; }
.rotulo span:nth-child(6) { transition: all .3s ease .7s; }
/* Los últimos 5 caracteres aparecen a la vez */
.rotulo span:nth-child(7),
.rotulo span:nth-child(8),
.rotulo span:nth-child(9),
.rotulo span:nth-child(10),
.rotulo span:nth-child(11) { transition: all .3s ease .8s; }

/* Todos visibles y rotando al hacer hover */
.rotulo:hover span { opacity: 1; transform: rotate(360deg); }

/* 1º hace lo contrario, desaparece hacia la derecha y no rota */
.rotulo:hover span:nth-child(1) { opacity: 0; left: 9999px; transform: rotate(0deg); transition: all .5s; }

/* Distancia progresiva para que no se solapen los caracteres */
.rotulo:hover span:nth-child(2) { left: 40px; }
.rotulo:hover span:nth-child(3) { left: 90px; }
.rotulo:hover span:nth-child(4) { left: 130px; }
.rotulo:hover span:nth-child(5) { left: 180px; }
.rotulo:hover span:nth-child(6) { left: 230px; }
.rotulo:hover span:nth-child(7) { left: 270px; }
.rotulo:hover span:nth-child(8) { left: 320px; }
.rotulo:hover span:nth-child(9) { left: 370px; }
.rotulo:hover span:nth-child(10) { left: 420px; }
.rotulo:hover span:nth-child(11) { left: 470px;}

Si lo vais a utilizar y queréis máxima compatibilidad, los transition y transform hay que repetirlos con todos los prefijos para los distintos navegadores. Por ejemplo, el primero que se usa quedaría así:

.rotulo span:nth-child(1) { opacity: 1; left: 100px;
-webkit-transition: all .4s ease .5s;
-moz-transition: all .4s ease .5s;
-o-transition: all .4s ease .5s;
-ms-transition: all .4s ease .5s;
transition: all .4s ease .5s;

}

En este Dabblet podéis encontrar el código completo.

Slider adaptable sin JavaScript, sólo CSS

2012-05-07T17:00:00.001+02:00

Esta forma de contruir un slider de imágenes que vi en CSS Science tiene dos cosas que me gustan. Una es que todo se monta con CSS y no es necesario utilizar JavaScript. La otra es que la caja del visor se adapta al tamaño de la ventana automáticamente. Es fácil comprobarlo abriendo y cerrando esta misma que estás leyendo.

El truco principal por así llamarlo, es flotar las imágenes una junto a otra y ocultarlas mediante un overflow. Luego, mediante unos botones radio a modo de controles, se van aplicando unos márgenes negativos equivalentes a 0, 1, 2, 3 y 4 veces el 100% del ancho del contenedor y así es como se logra ir viendo las distintas imágenes. Cinco en este ejemplo.

Una transición hace simula el efecto slider y como comentan en la página, todo lo demás es estilo.

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

Aunque entiendo la mecánica no es un código que sea capaz de explicar completamente, así que sólo os daré las instrucciones justas y necesarias para que lo podáis instalar.

El fichero CSS completo es algo extenso, así que aquí lo dejo plegado. Lo que hay que hacer con él es copiarlo y pegarlo antes del cierre }]]></b:skin>, en la parte de estilo. También podéis descargarlo desde este enlace o desde este otro.

Ver/Ocultar

#slider {
text-align: center;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#slider label, a {
color: #444444;
cursor: pointer;
text-decoration: none;
}
#slider label:hover, #slider a:hover {
color: #000 !important;
}
#slider label, #slider #active, #slider img { -moz-user-select:none;-webkit-user-select:none; }

#slider input {
display: none;
}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#slider article img {
width: 100%;
max-width:100% !important;
}
#slides .inner {
width: 500%;
line-height: 0;
}
#slides article {
width: 20%;
float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #bbb;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('http://img140.imageshack.us/img140/7481/nextfy.png') no-repeat;
float: right;
margin: 0 -70px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('http://img7.imageshack.us/img7/152/prevrt.png') no-repeat;
float: left;
margin: 0 0 0 -70px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
background: #333;
border-color: #333 !important;
}
/* Info Box */
#slider .info {
line-height: 20px;
margin: 0 0 -150%;
position: absolute;
font-style: italic;
padding: 30px 30px;
opacity: 0;
color: #000;
text-align: left;
}
#slider .info h3 {
color: #333;
margin: 0 0 5px;
font-weight: normal;
font-size: 22px;
font-style: normal;
}
/* Slider Styling */
#slides {
margin: 45px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 4px #666;
padding: 1%;
background: #fff;
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slider #controls {
margin: -25% 0 0 15%;
width: 70%;
height: 50px;
}
#slider #controls label {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
#slider .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* Responsive Styling */
@media only screen and (max-width: 850px) and (min-width: 450px) {
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #active {
margin: 22% 0 0;
}
}
@media only screen and (max-width: 450px) {
#slider #controls {
margin: -28% 0 0 24%;
width: 50%;
height: 50px;
}
#slider #active {
margin: 23% 0 0;
}
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #slides .info {
opacity: 0 !important;
}
#slider #controls label {
-moz-transform: scale(0.6);
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
}

Otra opción sería alojarlo en un servicio externo y luego hacer una llamada desde la plantilla mediante una de estas fórmulas:

Enlace a alojamiento externo desde plantilla. Insertar antes de <b:skin><![CDATA[/*:

Enlace a alojamiento externo desde un post (o desde plantilla, antes de </head>:

Una vez que tenemos nuestro CSS ya sólo resta construir el visor en sí mismo mediante HTML. Esta sería la estructura. Los DIV INFO y su contenido son opciones:

<div id="slider">
<input checked type="radio" name="slider" id="slide1" />
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<input type="radio" name="slider" id="slide4" />
<input type="radio" name="slider" id="slide5" />
<div id="slides">
<div id="overflow">
<div class="inner">
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
<article><div class="info">
<h5>Título</h5>
<a href="#">Autor</a></div>
<img src="URL_IMAGEN" />
</article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
<div id="active">
<label for="slide1"></label><label for="slide2"></label><label for="slide3"></label><label for="slide4"></label><label for="slide5"></label></div>
</div>

¿Buscando una fuente original? Pues aquí tienes 18

2012-05-04T18:25:00.000+02:00

Si tienes un proyecto de blog muy específico al que no le cuadra ninguna de las tipografías que ves por ahí, quieres destacar algún texto específico o simplemente tener disponible más fuentes para tu editor de texto, en esta entrada de Splashnology quizás veas cumplidos tus deseos.

Es una recopilación de 18 fuentes gratuitas a mi parecer bastante bien seleccionadas. Algunas sólo tienen licencia para usos específicos y otras proporcionan una autorización más general, así que si vais a utilizar alguna lo conveniente es que comprobéis previamente dicha licencia.

Estas son una pequeña muestra de las que encontrareis allí. Una de ellas tiene la curiosidad de que se paga mediante la emisión de un tweet. El proveedor es la página Pay with a Tweet con nombre autoexplicativo.

Comentan que al crear un sitio web se deben considerar todos los detalles, hasta el más pequeño y la tipografía no es precisamente una cuestión menor. Y creo que no les falta razón.

Más gadgets para las vistas dinámicas de Blogger. Traductor

2012-05-02T19:05:00.001+02:00

Blogger acaba de incorporar a su lista de gadgets incorporables a las vistas dinámicas, los ya conocidos en las plantillas normales Lista de Blogs y Lista (simple), valga la redundancia de listas.

Además, también está disponible desde hoy para estas plantillas el traductor, algo que siempre ayuda a que tu blog pueda ser leído en aquellos lugares del mundo dónde no hablan como es debido, o sea, en español.

El gadget es lo suficientemente pequeño como para no estorbar mucho y puesto en un lugar visible puede servir de acicate para muchos despistados extrañoparlantes que tropiecen y caigan en tu blog, ya que las entradas se podrán mostrar en 50 idiomas diferentes, algunos tan peculiares como el Swahili o el esperanto.

El traductor no será visible en las plantillas normales pero siempre se puede incorporar manualmente siguiendo las instrucciones de la página Google Traductor, desde la que podemos copiar el código necesario una vez configurado según nuestras necesidades.

Para los perezosos interesados, el código sin ningún aditamento especial sería este y sólo habría que incorporarlo como gadget tipo HTML/JavaScript. Si queréis por ejemplo hacer el seguimiento desde Google Analytics, ya tenéis que que conseguir el código desde el anterior enlace desplegando la Configuración adicional del paso 3:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Poco a poco, ya son 12 los cacharritos que de serie podemos añadir a las vistas dinámicas:

Botón +1
Insignia de Google
Traductor
Seguidores
Lista de blogs
Lista de enlaces
Lista
Etiquetas
Enlaces de suscripción
Perfil
Archivo del blog
Cabecera

Blogger Store: Slider en IE, gastos en carro, productos desaparecidos y otros flecos

2012-05-02T17:00:00.001+02:00

Slider vacío en Internet Explorer

En Internet Explorer -al menos en la versión 8- el slider que muestra los productos en formato de carrousel aparece vacío de contenido. El problema está en el propio script y en la interpretación de código que hace este bonito y simpático navegador, que le asigna un alto de valor cero al contenedor de imágenes. Por eso no se ven.

Para no andar trasteando el código, la solución más rápida y fácil que he encontrado ha sido forzar un alto desde la parte CSS. De esta manera, añadiendo lo siguiente antes del cierre del SKIN, el problema parece que se soluciona:

.caroufredsel_wrapper {height:144px !important;}

Mostrar importe gastos de envío en el carro

Por defecto no vienen los gastos de envío en ninguna plantilla, pero aprovechando que nosotros hemos explicado cómo incorporarlos, vamos a ver también cómo hacer que se vean en el carro junto al importe total de la compra. Esto servirá para que el cliente los vea antes de hacer el pedido en firme y que no se lleve una desagradable sorpresa al final por no haber contado con ellos.

Para ello sólo hay que utilizar una caja vacía con una clase determinada que el script ya rellena con la cifra. La clase es simpleCart_shippingCost y hay que insertarla de la manera que se ve a continuación usando como referencia las líneas en gris:

<div class='menu-cart'>
<a class='mycart' href='#'>En el carro : <span class='simpleCart_quantity'/> item(s)</a>
Precio total : <span class='simpleCart_total'/>
+ Gastos: <span class='simpleCart_shippingCost'/>
<div class='bag'>
<div class='simpleCart_items'/>

Mejorar formato presentación del carro

Cuando los títulos de las entradas (nombres de productos) son de distinta longitud en cuanto caracteres, en el carro se descuadra el conjunto artículo - miniatura - cantidad - coste.

Los más cortos generan un hueco en la parte inferior que hemos marcado en azul en la siguiente captura:

De nuevo se puede resolver esto con CSS. Simplemente limitamos en altura la clase que controla estos títulos (.bag .itemname) y añadimos un overflow:hidden; para que en ningún caso se desborde de su caja. En gris una posible referencia para su inserción:

.bag .itemname {
height: 54px;
overflow:hidden;
}
.bag .itemname a {
font:bold 10px Helvetica,Arial,sans-serif;
color:#000;
letter-spacing:-1px;
text-transform:uppercase;
}

Productos que desaparecen cuando se va llenando el carro

Si las pruebas sobre esta plantilla las habéis hecho con pocos productos, posiblemente no os hayáis dado cuenta de esto, pero cuando vas navegando y añadiendo productos, llega un momento en el que de forma aparentemente aleatoria, algunos desaparecen del carro. Es apreciable cuando se cambia de pantalla (de inicio a un producto, de un producto a otro, etc.) Y no es que se caigan, no.

Como decía, no he logrado detectar en qué circunstancias exactas ocurre esto pero intuitivamente imaginé que tendría que ver con las cookies que van guardando lo que se va seleccionando. Paradójicamente no se trata de que el tamaño de la cookie sea demasiado pequeño, sino al contrario. Quede claro que no sé la causa pero con este cambio parece que se soluciona el problema.

Tenemos que editar la versión del script SimpleCart que estemos utilizando y en la línea siguiente, cambiar el tamaño máximo de cookie que viene con el valor 4000, por una cifra inferior. Con 2000 mis pruebas fueron positivas.

me.cookieDuration = 30; // default duration in days
me.storagePrefix = "sc_";
me.MAX_COOKIE_SIZE = 2000;
me.cartHeaders = ['Name','Price','Quantity','Total'];
me.events = {};

Aquí la plantilla Blogger Store y aquí el script SimpleCart actualizados con estas nuevas modificaciones.

¿Encontráis más problemas? Aprovechad que parece que ya voy lanzado... ;)

Nos hemos puesto a fondo con esta plantilla y hemos publicado también los siguientes artículos:

Crear enlace para descarga directa desde Google Drive

2012-04-30T13:50:00.000+02:00

Tengo que decir que Google Drive no me ha sorprendido casi nada.

Unos pocos gigas gratis más que Dropbox (si no tenemos en cuenta las continuas promociones de este), algunas ventajas quizás en lo que respecta a compartir ficheros, pero tan incómodo para otras cosas como lo era Google Docs. Oh, espera... si es lo mismo. No sé qué opinarán los entendidos, pero yo abro mi Drive y me sale todo lo que tenía en Docs y prácticamente las mismas opciones.

La aplicación de escritorio que permite enlazar la nube y tu disco duro es realmente la novedad, algo que no hacía ningún servicio. Hmmmm... bueno quizás esto sí que lo hacía también algún otro.

Pero bueno, sea como fuere y aunque sea temporal, Google Drive está en el candelero y siendo objeto al menos de una más o menos masiva utilización experimental. Por eso de que muchos estamos probando, vamos a ver una demanda que ya ha surgido sobre el nuevo servicio y que se soluciona igual que con ~~el antiguo~~ Google Docs. Se trata de crear un enlace mediante el cual podamos facilitar la descarga directa de cualquier fichero sin necesidad de acceder previamente a él.

Para esto último sólo tendríamos que facilitar la dirección y el usuario, tras ver el contenido, podría bajarlo a su disco duro desde Archivo > Descargar o simplemente pulsando CTRL+S. Sin embargo para lo otro -descarga directa- tendremos que tener en cuenta si el formato del archivo es el original o está transformado al de Google y en este último caso, de qué tipo es.

La primera opción -ficheros no transformados- es la más fácil. Sólo tenemos que obtener la ID del archivo bien desde su URL cuando estamos viéndolo o bien desde la opción Compartir. La dirección del enlace deberá tener este formato y en el lugar de las X deberá ir la identificación del fichero:

https://docs.google.com/uc?export=download&id=XXXXXXXXXXXXXXXX

Aquí algunos ejemplos:

Para los archivos que hayamos creado directamente desde Google como ocurre con los documentos, presentaciones, hojas de cálculo, formularios, dibujos y tablas, así como para los que hayamos hecho con otros programas pero posteriormente hayan sido subidos y transformados con Google Drive, los enlaces serán de otra forma y además habrá que adaptarlos según el tipo de fichero.

Las adaptaciones son bastante lógicas. Empezando con los documentos de texto los formatos de salida pueden ser .doc, .html, .jpeg, .odt (Open Document), .pdf, .png, .rtf (formato de texto enriquecido), .txt y zip.

Este sería el formato de la URL a utilizar y como antes, las X representa la ID del fichero. En EXTENSION indicaremos el formato de salida de entre los mencionados anteriormente:

https://docs.google.com/feeds/download/documents/Export?docID=XXXXXXXXXXXXXXXX&exportFormat=EXTENSION&format=EXTENSION

Que el formato tenga en este caso que aparecer dos veces no es una errata, sino una necesidad para compatibilizar los formatos que históricamente ha usado este servicio. Aquí un enlace para descarga de un documento Google con salida en PDF:

Descargar pdf

Para hojas de cálculo este sería el link:

https://spreadsheets.google.com/feeds/download/spreadsheets/Export?key=XXXXXXXXXXXXXXXX&exportFormat=EXTENSION

Y las salidas posibles: xls, csv, pdf, ods, tsv y html.

Descargar hoja de cálculo

Dibujos. Formatos de salida permitidos: jpeg, pdf, png y svg.

https://docs.google.com/feeds/download/drawings/Export?docID=XXXXXXXXXXXXXXXX&exportFormat=EXTENSION

Las presentaciones admiten salidas en pdf, png, ppt y txt.

https://docs.google.com/feeds/download/presentations/Export?docID=XXXXXXXXXXXXXXXX&exportFormat=EXTENSION

Más información en Google Developers, Google Apps Platform: Downloading documents and files

Las imagénes ilustrativas de esta entrada proceden de capturas de Google Drive.

10 pequeñas cosas que alguna vez te pueden hacer falta para tu blog

2012-04-29T13:23:00.000+02:00

Acceder a tu blog tras borrar tu cuenta Google

La cuenta en Blogger está asociada a tu cuenta en Google. No borres nunca esta última a menos que quieras que desaparezcan todos los servicios que tienes en Google, incluidos tus blogs que se volverán inaccesibles como administrador.

Si lo hiciste accidentalmente o adrede y te arrepientes después, accede a Recuperación de cuentas Google y rellena el formulario que encontrarás allí lo antes posible. No tienes ninguna garantía de que tu demanda sea atendida pero no puedes hacer nada más... aparte de rezar.

Aquí otro apartado por si tienes otro tipo de dificultades para acceder a tu cuenta.

Enlaces de descarga para Dropbox

Cuando quieras facilitar un enlace para descargar algún fichero alojado en Dropbox, sólo tienes que añadir a la dirección que nos facilita ese servicio (Botón derecho > Copiar enlace público), los caracteres ?dl=1

http://dl.dropbox.com/u/57549161/Imagenes/smileys.jpg?dl=1

Enlace normal | Enlace descarga

Una línea CSS que sólo lee Internet Explorer 9

Cualquier línea de la hoja de estilo que termine en \9; en lugar de un simple punto y coma, sólo será interpretada por IE9. Ejemplo:

margin-top: 10px;
margin-top: 8px\9;

Eso creará un margen superior de 10px en todos los navegadores excepto en el mencionado. En esos el margen será de 8px.

Algunos autores comentan que ese sufijo sirve no sólo para la versión 9 sino también para la 8, la 7 y hasta la 6, pero como no tengo todos esos navegadores no lo he podido comprobar. Es cuestión de probar si alguien tiene esa inquietud.

Volver a la antigua interfaz de Blogger

Desconozco si alguna vez quitarán definitivamente esta posibilidad, pero todavía hay errores al modificar plantillas que se pueden evitar editando desde la interfaz "antigua", por lo que mejor la dejan lo máximo posible.

Para acceder a ella hay que buscar el icono de rueda dentada que aparece en la parte superior derecha de todas las secciones del Escritorio. Pinchando en él desplegamos el menú y ahí la tenemos.

Introducir comentarios que no se interpretan

Los comentarios son textos marcados de una forma determinada para que el navegador los reconozca como tales y no los interprete como código. Esos comentarios no se visualizarán en forma alguna al ver la página correspondiente.

Puede ser útil introducir comentarios en nuestra plantilla para marcar qué hace cada parte. También puede ser práctico para marcar código que introducimos de prueba, de manera que luego podamos fácilmente localizarlo para corregirlo o eliminarlo, sobre todos si va dividido en varias partes.

Por último, también podremos anular temporalmente líneas de código marcándolas como si fueran comentarios.

La manera de hacerlo depende del tipo de código de que se trate:

En la parte de estilo (CSS): /* Comentario */
En la parte HTML:
Dentro de un script: // Comentario

Forzar el uso de un solo tipo de plantilla en Vistas Dinámicas

Supongamos que hemos modificado una de las distintas Vistas Dinámicas, que esa es la que nos gusta y que ahora lo que se pretendemos es que el usuario no tenga acceso a las otras. En Nuevo Blogger 2011 podemos ver cómo hacer eso.

Encontrar la opción Socialize en FeedBurner

Desde hace tiempo no aparece ese apartado en el menú de FeedBurner y precisamente con él es con el que podemos conectar nuestro blog y Twitter para que se publiquen automáticamente en el servicio del pajarraco nuestras nuevas entradas. En este enlace se explica un truco para que aparezca.

Edición directa del HTML de las plantillas en Vistas Dinámicas

Simplemente accede al menú Plantilla y podrás ver una dirección de este tipo:

http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxxxx#template

En la barra del navegador cambias blogger.g por html y listo.

http://www.blogger.com/html?blogID=xxxxxxxxxxxxx#template

Ojito con lo que tocamos por ahí ;)

Generar un enlace/acceso directo a los comentarios

Si necesitas crear un enlace en alguna parte que lleve directamente a la parte de comentarios de una entrada, sólo tienes que usar este código. La cantidad de comentarios acumulados sale gracias a <data:post.numComments/>. Puedes dejar esa data como enlace o poner un texto directamente. En este último caso no saldrá el numerito, claro.

Usar tipografías no estándar

Google Web Fonts es una muy buena opción mientras existan navegadores que no soporten @font-face o no tengamos un buen sitio dónde alojar las fuentes. Más de 500 tipografías libres que puedes ir filtrando por familia, grosor del trazo, inclinación o ancho, hasta encontrar la que te guste. Luego con una simple línea en tu plantilla, ya tendrás la fuente disponible.

Recuperar entradas eliminadas accidentalmente

Es fácil pero no siempre posible. Tampoco es demasiado improbable. Para ello tendrás que localizar la ID del post en tu propio feed o en la caché de los buscadores. Si la encuentras se podrá recuperar. Vagabundia explica el proceso completo.

Crear una copia de seguridad de la plantilla

Para evitar que trasteando la plantilla nos carguemos algo importante y que tengamos que empezar de cero a reconstruirla, conviene hacer una copia de seguridad de vez en cuando.

Las entradas no deben preocuparnos tanto pues van por otro lado, pero quitar o poner algo de más cuando editamos la plantilla, sí que puede tener como resultado algún que otro desastre.

Esta utilidad la encontramos en el Escritorio, en el apartado Plantilla. Accediendo nos encontraremos arriba a la derecha un botón con la leyenda Crear copia de seguridad/restablecer.

Pinchando en él se nos abre una pequeña ventana y el primer botón es el que nos permite descargar a nuestro disco duro el HTML y CSS de nuestro blog. Se nos grabará con un largo número identificativo del blog y la extensión .xml. No hay problema en renombrarlo y de hecho creo que lo mejor es hacerlo con la fecha del día de la descarga. Así si tenemos varias sabremos cuál es la última.

El día que necesitemos recuperar nuestro formato sólo tendremos que volver al mismo sitio y pinchando en Examinar, seleccionar el fichero guardado. Con Subir nuestro blog volverá a recuperar la plantilla anteriormente guardada.

Usar menos la tecnología y mover más las neuronas

¿Alguna observación? ¿Adecuado el título de la entrada? Bueno pues vamos a seguir hasta el número de los supersticiosos...

Quizás no es tanto de aplicación en el mundo blog como en el mundo real, pero ayer mismo con un grupo de amigos coincidimos todos en que si bien algo ganamos por otro lado, la mayoría estamos perdiendo habilidades mentales básicas con tanta tecnología.

Cada vez ejercitamos menos nuestro cerebro para conseguir más agilidad o eficacia en cosas como la lógica, el cálculo, atención, habilidad verbal, la memoria... Ahora si tenemos que ver a cuánto tocamos en una comida que hay que pagar a escote, casi nadie se molesta en calcularlo de cabeza o siquiera en tomar una servilleta y garabatear una división. Ahí está la calculadora del móvil para hacerlo.

Y a propósito de este invento ¿cuántos números de teléfono sabías de memoria antes de empezar a grabar contactos en tu agenda y cuantos sabes ahora? Muchísimas personas ni siquiera saben/recuerdan su propio número de móvil.

Iconos CC o totalmente libres. Como los quieras en Iconspedia

2012-04-27T12:30:00.000+02:00

Almacenes de iconos hay muchos, pero lo que me ha gustado de este que el otro día nos descubrió Nekokoshan, es su buscador y el sistema de navegación a través de los resultados. Su nombre es Iconspedia.

Además de la búsqueda simple por término también se puede seleccionar una categoría para encontrar resultados dentro de un determinado tema, elegir sólo los de cierto tamaño o encontrar paquetes en lugar de iconos sueltos. O varios de esos parámetros combinados.

Otra opción muy interesante nos permite marcar el tipo de licencia que tienen las imágenes. Ahí podemos seleccionar entre los distintos tipos que ofrece Creative Commons (atribución, no derivados, compartir igual, etc.) o elegir iconos libres bajo modalidades similares (uso personal, uso no comercial...).

Una vez que escogemos un resultado concreto accedemos a una especie de ficha dónde recibimos toda la información:

si forma parte de un paquete
autor
licencia
tamaño máximo disponible
formatos para descarga

Esta captura no es del todo real pues hay publicidad entre la muestra gráfica y la información adicional, pero sirve para hacerse una idea.

Más abajo se pueden ver bajo un sistema de pestañas, los iconos relacionados con el seleccionado. También encontraremos otros iconos pertenecientes al mismo paquete cuando este forme parte de uno e incluso otros paquetes relacionados con ese.

Si haces tus pinitos como diseñador, podrías remitir a Iconspedia aquellos iconos de creación propia. Naturalmente con el crédito que desees indicando la licencia bajo la cual los compartes. Para esto ya se requiere registro.

Presentar los posts populares como barras de colores

2012-04-26T17:06:00.000+02:00

Este efecto consiste en transformar el gadget de entradas más populares de manera que en lugar del típico blogroll, se vean unas barras gruesas de distintos colores y tamaños que contendrán el título (y enlace) del post y una pequeña miniatura.

Para ciertos diseños puede quedar muy cuco y aunque el código es un poco largo, realmente se instala en unos pocos pasos y la mayoría son de copiar y pegar.

Supongo que estará en más sitios, pero un servidor vio esto en HelpBlogger y sólo ha añadido el código para edición rápida del gadget, algunas pequeñas explicaciones adicionales y esta página de demostración dónde se puede ver en acción.

Demo

0Un paso previo sería eliminar el gadget de serie caso de que lo tuviéramos instalado. Se podría sustituir por el que veremos más adelante, pero creo que es más fácil así. Sin miedo, que si no os sale esto -que os saldrá- o no os gusta una vez puesto, con añadirlo de nuevo estará todo solucionado.

Escritorio ► Diseño ► Gadget Entradas Populares ► Editar ► Eliminar

1Ahora editamos la plantilla. Mejor NO expandir plantillas de artilugios para que el código no se haga muy largo y confuso.

Escritorio ► Plantilla ► Edición HTML ► Continuar

Lo primero sería copiar justo después de /* Variable definitions =========== el código necesario para generar unas variables que después podremos utilizar desde el Diseñador de plantillas para cambiar fácilmente los colores.

Para las últimas versiones de plantillas sería este:

Para las plantillas anteriores (no las clásicas), sería este otro y la diferencia es que no nos saldrían todos los colores en la misma opción del menú:

2Ahora nos vamos algo más abajo y en la parte CSS insertamos el estilo. Para no fallar, lo hacemos justo antes de ]]></b:skin>:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Además de otras propiedades más comunes como márgenes, bordes, fuentes, etc., si os fijáis todo esto no es más que asignar un color de fondo distinto a cada uno de los elementos de la lista que forma la relación de posts, usando las variables que generamos en el paso anterior. Para ello utilizamos la pseudoclase first-child y los selectores que nos permiten usar el siguiente elemento (+li), el siguiente del siguiente (+li+li) y así hasta completar los cinco que vamos a poder conseguir con este código.

Si queréis añadir más de cinco ya tenéis los dos primeros sitios que habrá que ampliar: las variables y el estilo. Si no vais a necesitar/querer el diseñador para cambiar los colores, el paso 1 os lo podéis saltar y directamente ponéis un código de color hexadecimal en lugar de $(PopularPosts.background.colorX).

Los números en cada content también los podéis cambiar por otra cosa, como por ejemplo una flecha o un asterisco. Cualquier entidad HTML os podría servir, pero también está la opción de colocar una pequeña imagen. En fin por ahí van los tiros para modificar cosas.

3Ahora hay que buscar un b:widget para insertar el nuevo artilugio. En un principio se podría poner detrás o delante de cualquiera pero si buscáis la section correspondiente al bloque dónde lo queréis colocar, pues os ahorráis luego tener que moverlo. Por ejemplo, en la plantilla demo lo coloqué en la sidebar, justo el primero:

<b:section-contents id='sidebar-right-1'>
AQUÍ PARA QUE SALGA EL PRIMERO
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
TAMBIÉN PODRÍA IR AQUÍ
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
O AQUÍ

Este es el código que habría que insertar en ese lugar:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>

</div>
</b:includable>
</b:widget>

Guardamos y ya tenemos nuestras coloridas barras a falta de unos pequeños ajustes.

4Seleccionar el número correcto de entradas a mostrar para lo cual editamos el gadget bien desde Diseño, bien con el icono de edición rápida y marcamos Mostrar un máximo de 5 entrada(s), tantas como colores hemos definido con los anteriores códigos.

5Por último, si queremos cambiar los colores de cada barra sólo habrá que acudir al Diseñador de Plantillas...

Escritorio ► Plantilla ► Personalizar ► Avanzado ► PopularPosts Backgrounds

...y desde allí ir seleccionando los que nos gustan.

Blogger Store: Configurar gastos de envío e inclusión en pedidos email

2012-04-24T17:03:00.000+02:00

En la documentación de SimpleCart está perfectamente explicado el tema de los gastos de envío, pero aún así he recibido muchas preguntas sobre cómo incluirlos. Quizás es porque no se explica exactamente dónde se debe poner el código que allí citan o quizás es simplemente porque algunos estáis peleados con el inglés.

Sea por la razón que fuere, vamos a intentar explicarlo a nuestra manera a ver si se terminan las dudas con este tema y de paso vamos a completar la función que hicimos anteriormente para los pedidos por e-mail, de manera que también se transmitan estos gastos.

La manera de incluir gastos de manejo/envío es incluyendo el recargo dentro de las opciones configurables del script. Esa parte está en la plantilla bajo el título "Simple Cart Setting". Estas son en concreto las líneas y el lugar dónde insertar lo que iremos viendo después.

Pues de la misma manera que ahí aparece la divisa (simpleCart.currency = EUR;), para configurar los gastos hay que añadir una línea con el sistema deseado. Las opciones son las siguientes y para los cálculos de ejemplo se han considerado 3 productos que suman un importe de 100€:

Una cantidad fija para todo el pedido

simpleCart.shippingFlatRate = 10.00;

Gastos: 10€

Un porcentaje sobre el importe total

simpleCart.shippingTotalRate = 0.05;

Gastos: 5€ (5% sobre 100€)

Una cantidad fija por cada producto en el carro

simpleCart.shippingQuantityRate = 3.00;

Gastos: 9€ (3€ x 3 productos)

No hay ningún problema en usar dos o incluso tres de estas tasas combinadas, aunque hay que tener en cuenta que los importes serán acumulativos:

Gasto fijo por pedido más porcentaje sobre el importe total

simpleCart.shippingFlatRate = 10.00;
simpleCart.shippingTotalRate = 0.05;

Gastos: 10€ + 5€ (5% sobre 100€) = 15€

Importe fijo por producto más un porcentaje sobre el importe total

simpleCart.shippingQuantityRate = 3.00;
simpleCart.shippingTotalRate = 0.05;

Gastos: 9€ (3€ x 3 productos) + 5€ (5% sobre 100€) = 14€

Gasto individual para ciertos productos

La combinación de estos tres tipos de gastos, simultáneamente y con los mismos porcentajes que se han puesto de ejemplo aquí, están actualmente en la web-demo que creamos hace tiempo. Si no os cuadran los números es porque seguro que habéis metido en vuestro carro el penúltimo artículo del panel (Camiseta hombre - Beisbol). Notaréis que hay 5€ de más.

El motivo es que también se puede incluir una cantidad concreta para un producto concreto. Esto se hace de manera distinta, insertando un input no visible con la clase item_shipping en el cuerpo de la entrada correspondiente al producto. En este caso pusimos:

Gastos: 9€ (3€ x 3 productos) + 5€ (5% sobre 100€)
+ 5€ (cuando uno de los 3 es este) = 19€

Gasto individual según tallas/tamaños

También es posible indicar para un mismo producto, distinto importe de gastos según la talla. Para ello previamente había que incluir un select con la estructura que vimos en Configuraciones desde el escritorio y Creando un producto (Blogger Store: Instalación, ajustes y crear productos).

Ahora lo que haremos será usar una función que pondremos también dentro de ese mismo apartado de configuración que vimos al principio y que tendremos que construir de manera personalizada según lo que queramos. Aquí hemos usado los value de nuestro select que eran S, M, L y XL. Como podéis ver sólo se trata de anidar condicionales con estos valores y multiplicar el coste fijo según la talla, por la cantidad de unidades solicitadas.

CartItem.prototype.shipping=function(){
if(this.size){
if( this.size == 'S' ){
return this.quantity*1.00;
} else if( this.size == 'M') {
return this.quantity*2.00;
} else if( this.size == 'L') {
return this.quantity*3.00;
} else {
return this.quantity*4.00;
}
} else {
return this.quantity*0.00;
}
}

Nótese que el último else sería para los casos en los que no existiera talla, por lo que sería un sustituto del coste fijo por artículo que podíamos generar con shippingQuantityRate.

Otra variante para cargar gastos no lineales en función del importe total:

simpleCart.shipping = function(){
if (simpleCart.total){
if ( simpleCart.total < 10 ){return 3;} else if ( simpleCart.total < 25){return 3.50;} else if (simpleCart.total < 100){return 7;} else {return 9;} } }

Creo importante volver a destacar que todas las variantes aquí vistas son ACUMULATIVAS y que de ponerlas todas, se generarían gastos por todos los conceptos. Por tanto, habrá que combinarlas con mucha lógica y mucho cuidado.

Aplicando gastos de envío al pago por email

Todo esto funciona perfectamente con PayPal y Google Checkout, pero no para los pedidos por correo electrónico. El motivo no es otro que cuando os presenté esa opción, no caí en esto de los gastos de envío. Por tanto habrá que modificar esa parte de la función para que los tome y los remita. Así es cómo quedaría:

me.emailCheckout = function() {
var remite = prompt("Introduzca correo de contacto: ");

if (remite != '' && remite != null) {

itemsString = "";
esubtotal = 0;
egastos = 0;
etotal = 0;
for( var current in this.items ){
var item = this.items[current];
esubtotal = item.quantity * item.price;
itemsString += item.name;
if (item.size) itemsString += "Talla " + item.size + "\n";
if (item.color) itemsString += "Color " + item.color + "\n";
itemsString += item.quantity + " x " + item.price + " = " + String(esubtotal) + me.currency + "\n";
etotal += esubtotal;
};
if (me.shippingCost){
itemsString += "\nSubtotal = " + etotal + "\n";
itemsString += "Gastos de envio = " + me.shippingCost + "\n";
etotal += me.shippingCost;
};
itemsString +="\nTotal: " + String(etotal) + me.currency + "\n" + "Remitente: " + remite;
var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "http://singenio.com/email.php";
form.acceptCharset = "utf-8";
form.appendChild(this.createHiddenElement("jcitems", itemsString));
form.appendChild(this.createHiddenElement("jcremite", remite));

document.body.appendChild(form);
me.empty();
form.submit();
document.body.removeChild(form);
if (p == null || p=='');

}
return;
};
me.customCheckout = function() {
return;
};

Tengo que recordar que el fichero PHP que se incluye en el anterior código no os servirá mas que para pruebas. Ese PHP remite el pedido al correo que debe incluir el comprador como medio de contacto y lo que realmente tendría que hacer es enviarlo a vosotros, al vendedor. En esta entrada se explica como hay que construir ese PHP correctamente.

He actualizado el script simpleCart2email.js con esta última modificación para que podáis descargarlo y sustituirlo por el anterior que vimos. También he actualizado la plantilla y ahora se incluyen todos los supuestos de gastos simultáneamente. Creo que es más fácil que quitéis los que no necesitéis en lugar de indicaros dónde añadir vuestro caso concreto.

En otro arranque que me de, a ver si pienso en la manera más fácil de incluir los gastos de envío en el visor del contenido del carro y compruebo una solución que me parece haber encontrado para los artículos que desaparecen cuando se añaden muchos.

Nos hemos puesto a fondo con esta plantilla y hemos publicado también los siguientes artículos:

Microdatos Schema en plantillas Blogger

2012-04-23T17:20:00.000+02:00

Hace un par de días estaba creando un blog para unas pruebas, cuando me percaté de que en la plantilla aparecían metadatos (Rich Snippets) de los que carecía mi modificada plantilla. Parece pues que las nuevas sí los llevan y son los de aquel estándar que vimos hace tiempo y que se llamaba Schema.

Estos microdatos (también microformatos) contienen información no visible pero de interés para los buscadores: el título de la entrada, la descripción o sumario, la miniatura de imagen que nos gustaría mostrar, etc. y son los que aparecen junto a cada resultado de búsqueda y que Google llama fragmentos enriquecidos. Su finalidad es mostrar a los usuarios por qué la página es relevante para su consulta.

En esta página de Herramientas para webmasters de Google amplían más la información sobre este concepto:

Si Google comprende el contenido de las páginas de tu sitio, podemos crear fragmentos enriquecidos con información detallada que sirva de ayuda para consultas específicas de los usuarios. Por ejemplo, el fragmento de la página de una receta podría mostrar el tiempo total de preparación, una foto y la valoración de la receta, el de un restaurante podría mostrar la valoración media y el intervalo de precios y el de un álbum musical podría incluir una lista de canciones con enlaces para reproducirlas. Estos fragmentos enriquecidos ayudan a los usuarios a saber si un sitio es relevante para su búsqueda y pueden aumentar el número de visitas que reciben las páginas de ese sitio.

Las marcas correspondientes vienen como atributos con nombres itemscope, itemtype e itemprop. Los dos primeros son los que indican que se van a utilizar estos microdatos y el tipo de web de la que se van a extraer.

En este caso el que se usa es el llamado BlogPosting y que tiene unas propiedades (itemprop) adaptadas a las características de este tipo de sitios. En el enlace podéis ver toda la nomenclatura utilizada y la descripción de cada tipo de elemento.

Pero lo que más nos interesa a nosotros una vez que sabemos para qué sirve, es saber dónde y cómo introduce Blogger esto, para nosotros hacer lo propio. Ellos son los ideólogos de esos fragmentos y al mismo tiempo los promotores de nuestra plataforma, así que supongo que algo sabrán sobre el tema y que convendrá hacerles caso.

Voy a reproducir las líneas enteras dónde encontré microdatos para tenerlas de guía y así saber dónde los tenemos que insertar. Las líneas no son consecutivas pero para que las encontréis más fácil, las he agrupado por cercanía entre ellas.

En el includable id='post' var='post' aparecen las primeras, el que define el tipo de página (blog), el título de cada entrada como nombre del elemento y el contenido de la entrada como articleBody (cuerpo del artículo):

En la parte de la plantilla destinada a móviles (id='mobile-post' var='post') aparecen casi de idéntica manera, aunque incluyen también una marca para el autor, otra para la url y otra para la fecha de publicación.

En la zona id='mobile-index-post' está la última:

Una vez incluidos estos nuevos trozos en vuestra plantilla, podéis comprobar el resultado introduciendo la dirección de cualquier página en esta herramienta de Google Webmasters.

Las imágenes de esta entrada fueron obtenidas de Digital Organics y Google Webmasters Tools.

Cambio de tamaño en la imagen de las páginas Facebook

2012-04-20T18:58:00.000+02:00

Puede que lo vieras o quizás te pasó desapercibido por venir junto con el resumen semanal de datos, pero si fue lo segundo, ese precioso montaje que hiciste para el banner principal de tu página en Facebook, posiblemente se desbarajuste el próximo día 26 de Abril. Lo comunicaron vía e-mail el pasado jueves:

facebook

Hola:
El 26 de abril cambiaremos el tamaño de la foto del perfil de las páginas. Te informamos de este cambio con antelación para que puedas actualizar tu foto ese día. Las nuevas fotos tendrán 160 x 160 píxeles y estarán situadas a 23 píxeles del margen izquierdo y 210 píxeles del borde superior de la página.

En los perfiles personales ya se ha visto ese cambio y la nota anterior es para avisar que las páginas (fan pages) serán las siguientes. Realmente lo único que cambiará será el tamaño de la imagen pequeña que aparece en la zona inferior izquierda, pero si te salió la vena creativa en su momento e hiciste algo del estilo de lo que crearon estos tipos, es posible que ahora tengas que reestructurar todo.

Lo cierto es que posiblemente habrá que esperar a esa fecha y entonces realizar los cambios que sean oportunos, porque entre lo que han hecho con los perfiles personales y lo que anuncian que van a hacer con las páginas, algo no cuadra.

Como decía, en los primeros los cambios ya son visibles, pero si bien la distancia a la izquierda es la que comentan, la que hay hasta el borde superior de la página es mayor. En concreto 232px. Si quisieron decir hasta el borde bajo la barra de herramientas pues entonces es inferior (192px).

Esta es la captura de una página tal y como se ve ahora por si queréis intentar anticiparos al cambio. El recuadro con marcador amarillo representa la nueva posición siguiendo al pie de la letra los datos del aviso. Aquí se muestra reducida pero pinchando en ella la podréis ver a tamaño real.

También podéis preparar una segunda versión con ese cuadro algo más abajo por si no la consideran. Esta mide 38px. Y ahora que me doy cuenta, en la captura del perfil personal erré y consideré la barra de 40px, pero perdonadme que no la cambie, ya que la que interesa es la segunda y esa está bien.

Ajustando (de nuevo) el título y la descripción en Blogger

2012-04-20T15:00:00.000+02:00

No hace mucho comentábamos la novedad de Blogger que permitía introducir desde el Escritorio el contenido de la etiqueta meta correspondiente a la descripción del blog, algo que resulta bastante interesante de cara a forzar lo que los buscadores encuentran y muestran sobre nuestros sitios.

Pues bien... ayer me avisó Felipe OI de que el uso de la etiqueta <meta expr:content='data:blog.metaDescription' name='description'/> estaba provocando que esa información apareciera duplicada en nuestras páginas.

Esto no es algo grave, pues sólo una de ellas será tomada por el buscador de turno y como son exactamente iguales, lo mismo nos da que escoja una que otra. Sin embargo podemos hacer las cosas bien, así que vamos a ello y de paso volvemos a ver lo de los title's.

El problema por así llamarlo, está en el include característico de Blogger que va al principio de todos sus blogs en la forma <b:include data='blog' name='all-head-content'/>. Ahora, después de siglos viéndolo, descubro parcialmente lo que hace y que simplemente es insertar durante la carga de nuestro blog una serie de encabezamientos. Esto es algo que ahora me parece evidente tras fijarme un poco más en el name.

Pues el asunto es que no sé desde cuándo, pero entre estos encabezamientos automáticos también se incluye ahora la descripción del blog. Siempre que la hayamos activado previamente mediante aquella nueva opción que comentaba al principio, claro. Por tanto, si también tenemos la data:blog.metaDescription, dicha descripción se duplica... inútilmente.

Con condicionales podemos hacer distintos giros para mostrar una información u otra según el tipo de página en el que estemos o incluso discriminando si tenemos esa descripción grabada en un post o no. Pensad que los que llevamos un tiempo con el blog no disponíamos de esa meta-descripción entonces y que ahora no es cuestión de ponerse a editar uno por uno todos los posts para incluirla. Mejor que se haga en automático aunque el resultado no sea el óptimo

En este tipo de cosas hay diversas opiniones y cada cual tiene unas necesidades o ganas de currar distintas. Aclaro esto porque un servidor ha escogido la opción que le parece más efectiva con el menor trabajo posible y que es la que sigue.

Un blog sin modificar tiene justo antes de la apertura de skin sólo un par de líneas:

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

Ahí va lo de las cabeceras automáticas, el título de cada página -lo que saldrá en la pestaña del navegador- y listo. Observaréis que ya no viene data:blog.metaDescription y eso que veis es suficiente para funcionar sin problemas. Pero esta combinación podría ser mejor:

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<title><data:blog.pageName/>: <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<b:if cond='data:blog.metaDescription'>
<b:else/>
<meta expr:content='data:blog.pageName + "texto_corto"' name='description'/>
</b:if>

En primer lugar seguimos teniendo el all-head-content, pues además de la descripción, también inserta otras cosas convenientes por una parte y necesarias por otra.

Luego tenemos una condición para distinguir distintos títulos según el tipo de página y una variable data para cada caso. Realmente sólo diferenciamos la página principal del resto pero creo es suficiente como vereis. Los resultados con esa estructura serán los siguientes (entre paréntesis un ejemplo con este blog):

Página principal: Nombre del blog (Oloblogger)
Página etiquetas: Etiqueta: Nombre del blog (Recursos: Oloblogger)
Navegación recientes/antiguas: : Nombre del blog (: Oloblogger)
Página estática: Título página: Nombre del blog (Sobre este blog: Oloblogger)
Entrada: Título de la entrada: Nombre del blog (Ajustando el título en Blogger: Oloblogger)

Por último está lo de la descripción, para la cual sólo distinguimos dos casos. Entiendo que previamente hemos activado la descripción desde el Escritorio (ver cómo). Si hay una descripción en la entrada, se muestra. De lo contrario utilizamos el nombre de la página (data:blog.pageName) más un pequeño texto a nuestro gusto. Esto último es opcional.

Y el resultado sería:

Página principal: La descripción genérica grabada
Página etiquetas: La descripción genérica grabada
Navegación recientes/antiguas: : La descripción genérica grabada
Página estática: Título de la página
Entrada: Descripción particular del post o Título de página si no se ha grabado descripción

Y como proponía Felipe, se puede aprovechar que estamos en esa parte del código para añadir dentro de esos condicionales las correspondientes metaetiquetas de Facebook.

Generador de cajas con triángulo: CSS Arrow

2012-04-19T17:15:00.000+02:00

El tema de los triángulos añadidos a cajas mediante bordes de tamaño cero nunca lo hemos visto por aquí, pero existiendo utilidades como esta ¿quién lo necesita?

Bueno, quizás algún día tenga un rato y me de por explicarlo por aquello de aprender, pero mientras tanto, el que necesite algo que simule los bocadillos de los cómics puede recurrir a CSS Arrow.

Como veis en la captura sólo hay que indicar la posición dónde se quiere, el tamaño de la flecha y los colores de caja y borde. El sistema nos facilitará de manera automatizada todo el CSS necesario.

Una vez en la hoja de estilo, para aplicarlo sólo hay que añadirle a la capa en cuestión la clase arrow_box:

<div class="arrow_box"> CONTENIDO </div>

A .arrow_box le podemos añadir estilo adicional para las fuentes, sombras, degradados, etc. y el resultado será algo como esto:

Fácil ¿no es cierto?

Google Docs como base de datos. Citas tecnológicas al azar

2012-04-17T17:00:00.001+02:00

Como seguro que para algunos me enrollé de más en las anteriores entradas y lo que queréis es menos explicación y más acción, en esta veremos el código completo del ejemplo de frases tecno-informáticas aleatorias que construimos anteriormente. Prácticamente para sólo copiar y pegar.

De todas formas, esto sólo os permitirá ver resultados de mi lista y sacar los datos cómo propuse. Si queréis hacer la vuestra o sacar los datos de otra forma, no os va a quedar más remedio que leer el tutorial completo siguiendo los enlaces que podéis encontrar al final.

Vamos a tomar primero la opción más fácil que es la de incluir el código como gadget HTML/JavaScript. Como anuncié, aquí va el código que vimos en las otras entradas pero todo seguidito, así que sólo tenéis que añadir un gadget nuevo y pegar esto.

Cambiando la primera parte (estilo) podéis personalizar el formato de salida. Aquí tenéis ese mismo código en un fichero .txt

Como gadget podréis ponerlo en la barra lateral, en la cabecera, encima de las entradas, bajo estas, en el footer... Pero si queréis meterlo en el cuerpo de las entradas esto ya requiere hacerlo por partes.

Para este caso mejor grabamos la parte de estilo y el script hasta el salto de línea en la plantilla, antes de </head>, sustituyendo previamente (para Blogger) todas las comillas dobles por simples y viceversa. Luego, la segunda parte tras el salto se inserta en la parte de la entrada que gusteis (también intercambiando las comillas).

Pero para las entradas, mejor todavía podemos incluir el estilo en la parte CSS (ya sin la apertura y cierre STYLE), alojar el script en otro sitio, añadir delane una llamada a ese alojamiento externo e incluir todo dónde queramos mostrar las citas. Yo lo he alojado en Dropbox y he cambiado las comillas, así que a falta de que le deis estilo, esto sería lo único que habría que insertar:

Y si esto anterior todavía no os parece suficientemente fácil, pues pulsáis este botón, aceptais la instalación y luego sólo os resta cambiarlo de sitio desde Diseño arrastrando y soltando dónde queráis dejarlo.

Pero en fin, si habéis aprovechado la clase, vosotros mismos podréis hacer otras cosas. Aquí tengo otro ejemplo muy parecido en el cual a partir de una hoja con cuatro columnas, aleatoriamente se escoge una frase de cada columna para formar bonitas frases demagógicas. Un artilugio que sin duda haría las delicias de cualquier aspirante a político.

Generar otra frase demagógica

Esta es la hoja de cálculo correspondiente y lo siguiente el código por si a alguien le interesa:

Parece una tontería, que lo es, pero con esas catorce filas y cuatro columnas, se pueden generar más de 38.000 frases distintas.

Tutorial completo:

Google Docs como base de datos. Preparar hoja de cálculo
Google Docs como base de datos. Leer y mostrar con JavaScript
Google Docs como base de datos. Frases tecnológicas aleatorias

Google Docs como base de datos. Leer y mostrar con JavaScript

2012-04-16T23:00:00.000+02:00

En la anterior entrada vimos cómo preparar la hoja de datos y en esta veremos el código necesario para recuperar esos datos.

Fuente

A mi parecer, la cuestión más interesante sobre esto que estamos viendo sería precisamente esta parte. Lo vamos a conseguir con una función Javascript que va a leer los datos del feed de la hoja y que aquí hemos llamado leerCITAS. Esta función recibirá la dirección de ese feed y leerá los datos concretos que necesitamos.

Según los lea los irá guardando en un array (o variable que contiene una lista de datos) y así los tendremos disponibles para mostrarlos con una segunda función (mostrarCITAS). Además desde esta segunda daremos el formato básico a esos datos.

Función para leer datos

Esta sería la primera parte del código:

Explicando un poco lo que hace el código anterior, línea a línea:

Preparar matriz para que se puedan guardar frases
Preparar matriz para que se puedan guardar autores
Inicializar contador para el total de frases
Comienzo función leerCITAS, que recibirá un dato en forma de dirección feed (json)
Asignamos a totalfrases el valor correspondiente a la longitud del feed recibido (cuántos datos hay)
Comienzo bucle para repetir tarea desde el primer dato hasta el último
Asignamos al primer elemento de la matriz frase[i] (y sucesivos) el primer elemento que encontramos en la columna citas
Asignamos al primer elemento de la matriz autor[i] (y sucesivos) el primer elemento que encontramos en la columna autores
Fin del bucle
Fin de la función

Función para escribir datos

Ya tenemos los datos en memoria y ahora lo que necesitamos es otra función que los muestre. La llamaremos mostrarCITAS. Aquí simplemente iremos añadiendo a una variable (salida) los datos obtenidos, formateándolos con HTML simple. Así luego podremos mostrarlos dentro de una ID cuyo nombre se corresponde con el dato que recibe la función (donde). Previamente y en este ejemplo, hemos hecho una selección aleatoria de qué fila de datos vamos a mostrar.

Conviene incluir clases para después poder cambiar el aspecto final de los dos elementos (frase, autor) con CSS y eso es lo que veis también a continuación.

...
function mostrarCITAS(donde) {
var salida = "";
var max = totalfrases-1;
var alea = Math.round(Math.random()*max);
var cual = alea;
salida += "<span class='frase'>";
salida += frase[cual];
salida += "<br/>";
salida += "<span class='autor'>"+autor[cual]+"</span>";
salida += "</span'>";
document.getElementById(donde).innerHTML = salida;
}
</script>

Comienzo función mostrarCITAS, que recibirá un dato en forma de ID que llamamos donde
Inicializar salida, que contendrá lo que devolverá la función
Asignamos a max el valor que antes obtuvimos en totalfrases y le restamos 1 para cuadrar lo siguiente
Asignamos a alea un valor aleatorio entre 0 y 1 y lo multiplicamos por max para conseguir una fila al azar de entre las disponibles
Añadimos a salida una apertura span con clase frase para formatear el bloque completo
Añadimos a salida la frase escogida al azar
Añadimos a salida un salto de línea
Añadimos a salida el autor correspondiente a la frase, metido entre etiquetas span y con clase autor
Añadimos a salida el cierre del primer span que abrimos
Obtenemos el contenido del elemento con la ID recibida en la función y lo sustituimos por todo lo que hemos ido incorporando en salida
Fin de la función

Variantes

En este ejemplo hemos mostrado dos celdas de una misma fila aleatoriamente, pero una vez que las tenemos todas cargadas, sería fácil mostrar cualquiera.

Otra posibilidad sería leer sólo el dato que nos interesa y de hecho, si en el anterior código primero corriéramos la rutina que genera el número aleatorio y luego leyéramos sólo ese dato, estas funciones serían más eficientes. Supongo que me disculpáis sabiendo que se trata sólo de un ejemplo ilustrativo.

También se me ocurre que tras cargar todo podríamos usar un condicional para ir buscando por una columna un dato concreto. Por ejemplo podría ser un autor y así poder ver todas las frases que coincidan con ese autor.

En fin, la realidad es que podemos leer de esta manera todo lo que queramos y luego, con esta segunda parte del script, ya configuraríamos de manera personal qué es lo que se quiere mostrar y cómo.

Leer con JSON y ejecutar scripts

Así que ya tenemos toda la infraestructura. Hemos construido nuestra hoja de cálculo con sus datos y un script que sirve para leer y escribir lo que hay en ella. Sin embargo, todavía no veremos nada en nuestra página.

Para casi terminar, allí dónde queremos que se vean los datos colocamos la llamada a esas funciones y un div con una ID para que se inserte allí el contenido de la base de datos seleccionado. El orden será este: llamada a leerCITAS, div con ID y ejecución de mostrarCITAS para sustituir.

La llamada es a la dirección de la hoja de cálculo en formato lista (list) pero en lugar de usar la dirección original que termina en basic, usamos esta otra que termina en values (dirección completa marcada en verde). Ahi es dónde pedimos los datos usando la antes creada leerCITAS mediante el parámetro callback.

Como se ha dicho y se ve arriba, después viene un div sin contenido con una id (frasesaleatorias) y por último la llamada a la función que mostraba una frase y un autor al azar, formateaba la salida y luego incluía el resultado dentro de ese div. Evidentemente, el nombre de su ID tiene que coincidir con la que enviamos mediante mostrarCITAS.

Dar estilo con CSS

Ya sólo nos quedará asignar estilo CSS a las clases utilizadas en el script; en este ejemplo, .frases y .autor.

Como estamos sólo mostrando frases, poca cosa podemos hacer aparte de cambiar fuentes, colores y bordes, así que aquí termina esto y para ver todo el código junto, os remitimos a la última parte de esta serie.

Tutorial completo (pendiente publicación):

Google Docs como base de datos. Preparar hoja de cálculo
Google Docs como base de datos. Leer y mostrar con JavaScript
Google Docs como base de datos. Frases informáticas aleatorias

Google Docs como base de datos. Preparar hoja de cálculo

2012-04-16T17:00:00.000+02:00

Hace tiempo comentamos que Google Docs podría usarse como una especie de base de datos. Sería sólo un apaño pero cuando no disponemos de un hosting que nos proporcione este tipo de servicio para gestionar paquetes de información, lo que vamos a ver seguro que nos sirve para hacer algo limitado pero muy similar.

Fuente

Se trataría de construir en primer lugar una hoja de cálculo, para poder almacenar elementos de una manera ordenada. Luego la publicaríamos en formato RSS para, por último, mediante un código JavaScript al efecto, poder leerlos mediante JSON y así poder mostrarlos dónde y cómo queramos.

Esto puede sacarnos de algún que otro apuro y quizás ser útil para montar cosas que ahora mismo ni se nos pasa por la cabeza intentar.

Para que se vea cómo funciona todo esto vamos a ilustrarlo con la creación de una hoja de cálculo con citas informáticas y sus autores, para después mostrar una de ellas de manera aleatoria.

Eso ya lo podíamos hacer metiendo todas las frases en un array JavaScript, pero la ventaja de contar con la hoja de cálculo como soporte es que podremos modificar, añadir o borrar fácilmente todo aquello que queramos desde la hoja, sin necesidad de tocar el script.

Este forma de grabar y recuperar datos la vimos en una entrada sobre cómo crear una galería de imágenes con Google Docs, publicada en Vagabundia y aunque esta está adaptada para este ejemplo, el procedimiento es el mismo.

El resultado que obtendremos será algo cómo esto. Hay 95 citas distintas y es fácil incorporar más ¿alguien se imagina modificando el script para redactarlas?

Cambiar frase

Crear hoja de cálculo en Google Docs

Comenzamos por crear la hoja de datos accediendo a Google Docs. Tras registrarnos o hacer login, allí es fácil encontrar el menú de creación y la opción Hoja de Cálculo.

Supongo que todos sabéis rellenar una por lo que sólo creo necesario explicar que cada columna será un conjunto de datos homogéneos y que es necesario asignar un título a cada una de ellas.

Ese título es el que nos servirá luego para poder encontrar y recuperar el dato que queremos mostrar mediante la expresión gsx$TITULO.$t;. A alguno puede que le suenen esos símbolos de dólar y esa estructura y es que como hemos dicho, para leer la hoja vamos a publicarla como feed para poder leerla después en formato JSON.

Compartir hoja de cálculo

Tras escribir los títulos, las citas y sus autores, tenemos que hacer esa hoja pública (en modo sólo lectura) para que después podamos tirar de ella desde cualquier otra página.

Como las imágenes de capturas están reducidas, si alguna no la veis bien os recuerdo que todas se pueden ampliar pinchando en ellas.

Pinchamos en el botón superior que reza Compartir y en la ventana que se abre, Cambiar. En la siguiente ventana tendremos que seleccionar Público en la Web y Guardar. Tras estos pasos la ventana anterior nos mostrará una dirección que es la que dará acceso a esta hoja.

Este es el que nos generó este ejemplo y la parte importante es la que va tras la palabra key, que cómo podéis adivinar, es la identificación de la hoja. Ese dato tendremos que usarlo más adelante. Si queréis ver la hoja completa para seguir el ejemplo, este es el enlace.

https://docs.google.com/spreadsheet/ccc?key=0AtzEI6cl1Hv6dG9wMHpqcVdqbzJhZjlWQ1VScXFVSmc

Si lo hacéis comprobaréis que sólo podéis ver los datos pero no modificarlos. Esto es porque NO se seleccionó la opción de acceso a edición. Si alguna vez os interesa que cualquiera pueda modificar esos datos, ahí es dónde hay que pinchar, pero para cosas como las que estamos viendo, absteneros de hacerlo o puede que alguien os fastidie la lista intencionada o accidentalmente.

Acceso de edición:

	Permitir que cualquier persona modifique los elementos (no se requiere iniciar sesión)

Publicar hoja de cálculo en formato RSS

Ahora vamos a publicar esta hoja como feed. Esa opción está en Archivo ► Publicar en la Web. En la ventana siguiente -abajo reproducida- tenemos que pinchar en Iniciar la publicación. En ese momento se habilita la parte inferior y hay que seleccionar de entre las distintas opciones la de RSS. Se genera un nuevo enlace, este con acceso al feed.

Tutorial completo:

Google Docs como base de datos. Preparar hoja de cálculo
Google Docs como base de datos. Leer y mostrar con JavaScript
Google Docs como base de datos. Frases informáticas aleatorias

Lista de URL's para enviar artículos a redes sociales

2012-04-11T17:01:00.000+02:00

Toda red social o agregador que se precie, tiene sus propios botones oficiales para que los sitios que generan contenido puedan instalarlos y así facilitar la transmisión de enlaces a través de ellos. Pero se conoce que cuanto más caché tienen o pretenden, más complican las cosas para aumentar su propio control y el resultado no es otro que el que conocemos los que tenemos más de un cacharrito de estos.

Supongo que alguno que otro tendrá el Me gusta de Facebook y/o el +1 de Google Plus y no creo que quepa duda que uno y otro son farragosos en cuanto a código y lentos en cuanto a carga.

Existen opciones asíncronas que permiten mitigar sus efectos, pero lo único que conseguimos en realidad es amontonar el problema para el final, no solucionarlo. Sin embargo no es esta la única alternativa.

Casi nadie lo publicita, pero también existen cargadores sencillos que con una URL simple y unos pocos parámetros, realizan una tarea equivalente y si no todas, las mayoría de las redes disponen de ellos.

La desventaja de usarlos es que en algunos casos no dispondremos de contadores ni otras utilidades que pudieran incorporar esos botones y lo mismo ocurrirá con los gráficos originales. Sin embargo tendremos una carga mucho más rápida y podremos personalizar las imágenes cómo queramos, pudiendo integrarlos perfectamente en nuestro sitio.

Estos son los que he encontrado en una pequeña batida y creo que no deben faltar muchos, pero no hay inconveniente en que propongáis más para aumentar la lista. En cada icono podréis ver una demo de cómo funcionan y si confirmáis el envío pues estupendo ;)

Bitacoras

Bitácoras

http://bitacoras.com/anotaciones/LINK

(Si el post ya está en esta red, enlaza con la página para votar)

Delicious

http://del.icio.us/post?url=LINK&title=TÍTULO

Digg

http://digg.com/submit?url=LINK&title=TÍTULO

Divoblogger

http://divoblogger.com/submit.php?url=LINK

Divulgame

Divúlgame

http://www.divulgame.net/submit.php?url=LINK

Facebook

http://www.facebook.com/sharer.php?u=LINK&t=TITULO

Facebook

http://www.facebook.com/sharer.php?s=100&p[title]=TÍTULO&p[summary]=TEXTO&p[url]=LINK

Fresqui

http://fresqui.com/post?url=LINK&title=TÍTULO

Google

Google+

https://plus.google.com/share?url=LINK

http://www.linkedin.com/shareArticle?mini=true&url=LINK&title=TÍTULO&summary=TEXTO&source=ORIGEN

Menéame

http://www.meneame.net/submit.php?url=LINK&title=TÍTULO

Orkut

http://promote.orkut.com/preview?nt=orkut.com&du=LINK&tt=TÍTULO

http://pinterest.com/pin/create/button/?url=LINK&media=URL_IMAGEN&description=TEXTO

http://reddit.com/submit?LINK&title=TÍTULO

Stumbleupon

http://www.stumbleupon.com/submit?url=LINK&title=TÍTULO

Tuenti

http://www.tuenti.com/share?url=LINK

Twitter

http://twitter.com/home?status=TEXTO

(En TEXTO se pueden incluir links o nicks de usuarios con @)

Bonus

Google Bookmarks

Añadir enlace a Google Bookmarks

http://www.google.com/bookmarks/mark?op=add&bkmk=LINK&title=TÍTULO

Imprimir página

javascript:window.print();

Convertir a PDF

Convertir a PDF/Imprimir

http://www.printfriendly.com/print?url=LINK

Seguir desde escritorio

http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxxxxx

Oloblogger

Seguimos valorando cosas con semáforos CSS de colores

Semáforos: Indicadores de colores con CSS. 3 versiones

Error al instalar plantillas con la nueva interfaz de Blogger

Programación horaria de elementos con Google Drive

Última remesa de logos recibida

Cambiar imágenes con CSS. Presentando al equipo

Comprobando código, Dabblet nos hace la vida más fácil

Tontería con nth-child, transition y rotate

Slider adaptable sin JavaScript, sólo CSS

Gran ola

Pez

Estilo libre

Vista de Río

En el arco

¿Buscando una fuente original? Pues aquí tienes 18

Más gadgets para las vistas dinámicas de Blogger. Traductor

Blogger Store: Slider en IE, gastos en carro, productos desaparecidos y otros flecos

Slider vacío en Internet Explorer

Mostrar importe gastos de envío en el carro

Mejorar formato presentación del carro

Productos que desaparecen cuando se va llenando el carro

Crear enlace para descarga directa desde Google Drive

10 pequeñas cosas que alguna vez te pueden hacer falta para tu blog

Acceder a tu blog tras borrar tu cuenta Google

Enlaces de descarga para Dropbox

Una línea CSS que sólo lee Internet Explorer 9

Volver a la antigua interfaz de Blogger

Introducir comentarios que no se interpretan

Forzar el uso de un solo tipo de plantilla en Vistas Dinámicas

Encontrar la opción Socialize en FeedBurner

Edición directa del HTML de las plantillas en Vistas Dinámicas

Generar un enlace/acceso directo a los comentarios

Usar tipografías no estándar

Recuperar entradas eliminadas accidentalmente

Crear una copia de seguridad de la plantilla

Usar menos la tecnología y mover más las neuronas

Iconos CC o totalmente libres. Como los quieras en Iconspedia

Presentar los posts populares como barras de colores

Blogger Store: Configurar gastos de envío e inclusión en pedidos email

Una cantidad fija para todo el pedido

Un porcentaje sobre el importe total

Una cantidad fija por cada producto en el carro

Gasto fijo por pedido más porcentaje sobre el importe total

Importe fijo por producto más un porcentaje sobre el importe total

Gasto individual para ciertos productos

Gasto individual según tallas/tamaños

Aplicando gastos de envío al pago por email

Microdatos Schema en plantillas Blogger

Cambio de tamaño en la imagen de las páginas Facebook

Ajustando (de nuevo) el título y la descripción en Blogger

Generador de cajas con triángulo: CSS Arrow

Google Docs como base de datos. Citas tecnológicas al azar

Google Docs como base de datos. Leer y mostrar con JavaScript

Función para leer datos

Función para escribir datos

Variantes

Leer con JSON y ejecutar scripts

Dar estilo con CSS

Google Docs como base de datos. Preparar hoja de cálculo

Crear hoja de cálculo en Google Docs

Compartir hoja de cálculo

Publicar hoja de cálculo en formato RSS

Lista de URL's para enviar artículos a redes sociales

Bitácoras

Delicious

Digg

Divoblogger

Divúlgame

Facebook

Facebook

Fresqui

Google+

Linkedin

Menéame

Orkut

Pinterest

Reddit

Stumbleupon

Tuenti