-
►
2012
(19)
-
►
enero
(19)
- Optimizar SEO para Blogger. Evitar META duplicadas...
- Un lustro ¿Eso es mucho o es poco para un blog?
- Elemento que desaparece tras un tiempo. Portada de...
- Una solución para la paginación de comentarios ant...
- Conoce las preferencias de tus lectores con el nue...
- Avatar personalizado para comentarios (anidados) a...
- ¿Blog en blanco? Solución al problema con IE tras ...
- Cosas sencillas. Cambio tipografía para pie de fot...
- Almacenar y recuperar datos Blogger. Variables DAT...
- Almacenar y recuperar datos Blogger. Variables DAT...
- Todo sobre el nuevo sistema de comentarios Blogger...
- Formato a imágenes con CSS. Particularidades Blogg...
- Numerar los nuevos comentarios Blogger sin JavaScr...
- Volver al diseño de comentarios previo a las repli...
- Blogger. Configurar comentarios anidados. Lista de...
- Insertar respuestas (replies) Blogger en plantilla...
- Nuevos comentarios anidados en Blogger
- Formato a imágenes con CSS. Padding.
- Formato a imágenes con CSS. Clases.
-
►
enero
(19)
-
▼
2011
(105)
-
►
diciembre
(13)
- Feliz 2011 ¡Oops! (transiciones)
- Solucionando los problemas con el botón +1
- Sólo necesitas 5 herramientas para escribir los me...
- Text-shadow y el brillo de la Navidad
- Botones CSS con rollover sencillo
- Feliz Navidad Blogger. Iconos.
- Diseña la portada de tu nuevo timeline de Facebook...
- Error bX-l4u1mh (Diciembre 2011)
- Comentarios desplegables en Blogger
- Personalizando los botones sociales de AddThis
- Cinco trucos para poner nieve en tu blog ❄❄
- Plantilla para tienda online: Blogger Store
- Aviso automático en Twitter de nuevas entradas Blo...
-
►
noviembre
(13)
- Cubrir una capa con otra que se puede ocultar con ...
- Situar el gadget buscador junto al título del blog...
- Go Daddy simplifica el uso de dominios propios con...
- Cabecera en móviles para blogs sin cabecera
- Crear un sitemap con Herramientas para Webmasters
- Sitemaps y Blogger
- Facebook no permitirá importar contenido RSS a par...
- Problemas al acceder a la plantilla con la nueva i...
- Presentada la VI edición de los Premios 20Blogs
- Oloblogger.com Cambio de dominio con Blogger
- Alguien nos vigila...
- Marcar imágenes ampliables con un puntero distinto...
- Botón para que te sigan en Google Plus
- ► septiembre (6)
-
▼
febrero
(12)
- Carátulas con emoticonos para reproducir MP3
- Truquillo para insertar sólo audio desde YouTube
- Preguntas frecuentes. Cosas sencillas en Blogger I...
- Cuando un bloguero falta: Rosa, la del Escaparate....
- Un vídeo en tu perfil Facebook
- Modificar el aspecto del corte "Más información"
- Books por la Face. And the winner is...
- Todo Google de un vistazo. Atajos.
- Sencilla galería de imágenes... en horizontal
- Books por la Face. Ya tenemos candidatos.
- Efecto papel con puntas levantadas. CSS3.
- Informática básica
-
►
diciembre
(13)
-
►
2010
(138)
- ► septiembre (11)
-
►
2009
(119)
- ► septiembre (15)
-
►
2008
(110)
- ► septiembre (14)
-
►
2007
(57)
- ► septiembre (5)
-
►
2006
(3)
- ► septiembre (3)
Carátulas con emoticonos para reproducir MP3
27/02/2011
Muzicons es un servicio que nos facilita un pequeño reproductor de MP3 y que tiene como principal característica, la posibilidad de insertar en la carátula un dibujito tipo emoticono.
Para el usar el servicio, no es necesario registro, pero a diferencia de otras webs por el estilo, Muzicons no aloja los ficheros. Esto quiere decir que requiere de una dirección válida de un fichero tipo MP3 para funcionar, que tendrás que tener alojado previamente en otro espacio. Los que veis aquí los he tomado de GoEar y parecen funcionar bien.
Como el interface para crear un reproductor es muy sencillo, os dejo sólo una captura con apuntes sobre lo que hace cada parte.
Para eliminar el enlace que aparece abajo apuntando a Muzicons, del código que os facilitan sólo tenéis que borrar esto:
No es nada del otro jueves, pero así tenéis una opción estética más para poder poner audio en elblog.
Para el usar el servicio, no es necesario registro, pero a diferencia de otras webs por el estilo, Muzicons no aloja los ficheros. Esto quiere decir que requiere de una dirección válida de un fichero tipo MP3 para funcionar, que tendrás que tener alojado previamente en otro espacio. Los que veis aquí los he tomado de GoEar y parecen funcionar bien.
Como el interface para crear un reproductor es muy sencillo, os dejo sólo una captura con apuntes sobre lo que hace cada parte.
Para eliminar el enlace que aparece abajo apuntando a Muzicons, del código que os facilitan sólo tenéis que borrar esto:
<a href="http://muzicons.com/" style="font-size: 11px;" target="_blank">Muzicons.com</a>
No es nada del otro jueves, pero así tenéis una opción estética más para poder poner audio en elblog.
Truquillo para insertar sólo audio desde YouTube
21/02/2011
La idea es tan feliz como práctica y simple.
Muchas veces nos gusta cierto audio de un vídeo de YouTube, pero realmente la imagen no acompaña. Esto ocurre de manera especial con muchos temas musicales en los que alguien ha puesto una presentación que nada tiene que ver con el audio o incluso una imagen fija. Otras, sencillamente sólo nos interesa el audio y no queremos ocupar media entrada con el reproductor completo. Para estos casos, hay una manera muy fácil de mostrar sólo la barra de controles de YouTube, simulando un reproductor de audio.
El truco consiste en cambiar en el código para inserción, el valor del height que lleve el iframe o el object (según el caso) y poner 25, que es la altura de la barra. Eso hará que sólo se vea esa parte del reproductor.
El número marcado en verde es el que hay que sustituir por 25 para que se vea tal y como podéis observar en esta entrada.
Quede claro que esto no disminuye el tiempo de carga del vídeo, ya que sólo ocultamos la parte de imagen del mismo y no estamos prescindiendo de ninguna parte del fichero original, con todo su peso.
Lo dije: Idea feliz, práctica y simple. Una chapuza de las que me gustan.
Actualización.
Una aportación de El Cholija apuntaba la posibilidad de eliminar el extremo derecho del reproductor (boton de pantalla completa), reduciendo el ancho (width). Pero lamento comunicaros que en ese caso, lo único que conseguiremos será encoger la parte central. Pero bueno, también puede tener su utilidad para alguien.
Con width="300"
Con width="235"
Con width="95"
Muchas veces nos gusta cierto audio de un vídeo de YouTube, pero realmente la imagen no acompaña. Esto ocurre de manera especial con muchos temas musicales en los que alguien ha puesto una presentación que nada tiene que ver con el audio o incluso una imagen fija. Otras, sencillamente sólo nos interesa el audio y no queremos ocupar media entrada con el reproductor completo. Para estos casos, hay una manera muy fácil de mostrar sólo la barra de controles de YouTube, simulando un reproductor de audio.
El truco consiste en cambiar en el código para inserción, el valor del height que lleve el iframe o el object (según el caso) y poner 25, que es la altura de la barra. Eso hará que sólo se vea esa parte del reproductor.
<iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/XfuBREMXxts?rel=0" frameborder="0" allowfullscreen></iframe>
El número marcado en verde es el que hay que sustituir por 25 para que se vea tal y como podéis observar en esta entrada.
Quede claro que esto no disminuye el tiempo de carga del vídeo, ya que sólo ocultamos la parte de imagen del mismo y no estamos prescindiendo de ninguna parte del fichero original, con todo su peso.
Lo dije: Idea feliz, práctica y simple. Una chapuza de las que me gustan.
Actualización.
Una aportación de El Cholija apuntaba la posibilidad de eliminar el extremo derecho del reproductor (boton de pantalla completa), reduciendo el ancho (width). Pero lamento comunicaros que en ese caso, lo único que conseguiremos será encoger la parte central. Pero bueno, también puede tener su utilidad para alguien.
Con width="300"
Con width="235"
Con width="95"
Preguntas frecuentes. Cosas sencillas en Blogger II
19/02/2011
Más preguntas habituales con respuestas sencillas.
MODIFICAR EL ESTILO DE LA SALIDA DE RESULTADOS DEL GADGET BUSCADOR
Hablamos del artilugio que viene de serie con Blogger y que genera un cuadro buscador cuyos resultados aparecen incrustados dentro de la misma página, justo arriba de las entradas. Muy estético a mi parecer, por cierto.
Para modificar su aspecto una vez añadido el gadget, sólo tenemos que buscar (con plantillas de artilugios expandidas) el comentario...
A continuación podréis encontrar todo el estilo por defecto. Las clases que más a menudo queréis modificar son:
Si por ejemplo queréis que los resultados de búsqueda sólo incluyan el título del post, sin que se vea el sumario y la fecha, podríais incluir algo así.
¿POR QUÉ EL CÓDIGO DE UN GADGET NO FUNCIONA EN LA PLANTILLA Y VICEVERSA?
En una página normal esto no pasaría, pero Blogger es especial para interpretar el código y tiene una forma muy particular de hacerlo.
Nos referimos al código insertado dentro de HEAD o dentro de BODY porque el problema básicamente, es que la plantilla no admite comillas dobles (") y la parte CSS normalmente no lleva comillas.
De esta manera, todo el código interesante que veáis por ahí y que pretendáis instalar en vuestra plantilla, primero tiene que ser transformado. Las siguientes dos líneas serían un ejemplo de cómo insertar un código para mostrar una imagen. El primero sería el normal y el que valdría para un gadget. El segundo es el que nos exige Blogger en la plantilla. La única diferencia son las comillas dobles o simples.
Con el simple bloc de notas (Notepad) podéis hacerlo fácilmente con la función Reemplazar. Todas las comillas dobles las pasáis a sencillas (') y listo. Si el código incluye al mismo tiempo dobles y sencillas (por ejemplo en un script), la sustitución será dobles por sencillas y sencillas por ". Esto último (") sí lo admite Blogger. Y lo hace porque es una entidad HTML de carácter que precisamente los navegadores interpretan como comillas dobles.
Si usáis el bloc de notas, tendréis que realizar primero el cambio de las sencillas para no perderlas al cambiar las dobles:
Reemplazar dobles a ".
Reemplazar sencillas a dobles.
ENTIDADES DE CARACTERES HABITUALES
Y ya que estamos con entidades de caracteres, hay otras ocasiones en que un & u otro carácter nos da problemas en la plantilla. Es el caso también de los < >, que para HTML son indicativos de comienzo y fin de etiqueta y no los sabe interpretar de otra manera mas que de esa.
Las equivalencias para sustituirlos por entidades son las siguientes:
EJECUTAR CÓDIGO EN UNA ENTRADA
Otra particularidad de Blogger es que el código escrito en una entrada no se interpreta correctamente si hay saltos de líneas entre ídem. Esto no pasa en gadgets o en plantilla, dónde además es conveniente crear saltos entre líneas para visualizar más cómodamente el código.
La solución también es simple: eliminar todos los retornos de carro que encontréis en el código que queréis poner.
Así, el código del script para crear frases aleatorias, que en la plantilla podría ir perfectamente de esta manera:
Mientras que en una entrada tendría que ir así para que funcionara:
Si pegais ambos códigos en un bloc de notas y ampliáis la pantalla, podréis observar que el segundo no tiene ningún salto de línea.
Nota: Como hemos visto en otro punto el primer código es para la plantilla. Para un gadget, las comillas simples (') tendrían que ser sustituidas por dobles (").
MODIFICAR EL ESTILO DE LA SALIDA DE RESULTADOS DEL GADGET BUSCADORHablamos del artilugio que viene de serie con Blogger y que genera un cuadro buscador cuyos resultados aparecen incrustados dentro de la misma página, justo arriba de las entradas. Muy estético a mi parecer, por cierto.
Para modificar su aspecto una vez añadido el gadget, sólo tenemos que buscar (con plantillas de artilugios expandidas) el comentario...
<!-- override gsearch.css -->
A continuación podréis encontrar todo el estilo por defecto. Las clases que más a menudo queréis modificar son:
- #uds-searchControl .gsc-results
{Cuadro general del gadget. Para cambiar el fondo, el margen y el padding, por ejemplo} - #uds-searchControl .gsc-tabhActive
{Aspecto de la pestaña activa} - #uds-searchControl .gs-result .gs-title
{Título de cada resultado} - #uds-searchControl .gs-result .gs-snippet
{Sumario de cada resultado} - #uds-searchControl .gsc-cursor-page
{Números inferiores para paginación} - #uds-searchControl .gsc-cursor-current-page
{Número página actual}
Si por ejemplo queréis que los resultados de búsqueda sólo incluyan el título del post, sin que se vea el sumario y la fecha, podríais incluir algo así.
#uds-searchControl .gs-result .gs-snippet,
#uds-searchControl .gs-result .gs-visibleUrl,
#uds-searchControl .gs-result .gs-publishedDate,
#uds-searchControl .gs-result .gs-relativePublishedDate {display:none;height:0px;width:0px;visibility:hidden;}
#uds-searchControl .gs-result .gs-visibleUrl,
#uds-searchControl .gs-result .gs-publishedDate,
#uds-searchControl .gs-result .gs-relativePublishedDate {display:none;height:0px;width:0px;visibility:hidden;}
¿POR QUÉ EL CÓDIGO DE UN GADGET NO FUNCIONA EN LA PLANTILLA Y VICEVERSA?En una página normal esto no pasaría, pero Blogger es especial para interpretar el código y tiene una forma muy particular de hacerlo.
Nos referimos al código insertado dentro de HEAD o dentro de BODY porque el problema básicamente, es que la plantilla no admite comillas dobles (") y la parte CSS normalmente no lleva comillas.
De esta manera, todo el código interesante que veáis por ahí y que pretendáis instalar en vuestra plantilla, primero tiene que ser transformado. Las siguientes dos líneas serían un ejemplo de cómo insertar un código para mostrar una imagen. El primero sería el normal y el que valdría para un gadget. El segundo es el que nos exige Blogger en la plantilla. La única diferencia son las comillas dobles o simples.
<img src="imagen.jpg"/>
<img src='imagen.jpg'/>
<img src='imagen.jpg'/>
Con el simple bloc de notas (Notepad) podéis hacerlo fácilmente con la función Reemplazar. Todas las comillas dobles las pasáis a sencillas (') y listo. Si el código incluye al mismo tiempo dobles y sencillas (por ejemplo en un script), la sustitución será dobles por sencillas y sencillas por ". Esto último (") sí lo admite Blogger. Y lo hace porque es una entidad HTML de carácter que precisamente los navegadores interpretan como comillas dobles.
Si usáis el bloc de notas, tendréis que realizar primero el cambio de las sencillas para no perderlas al cambiar las dobles:
Reemplazar dobles a ".
Reemplazar sencillas a dobles.
ENTIDADES DE CARACTERES HABITUALESY ya que estamos con entidades de caracteres, hay otras ocasiones en que un & u otro carácter nos da problemas en la plantilla. Es el caso también de los < >, que para HTML son indicativos de comienzo y fin de etiqueta y no los sabe interpretar de otra manera mas que de esa.
Las equivalencias para sustituirlos por entidades son las siguientes:
< ► &gt;
& ► &amp;
" ► &quot;
► &nbsp; (espacio blanco)
' ► &apos;
& ► &amp;
" ► &quot;
► &nbsp; (espacio blanco)
' ► &apos;
EJECUTAR CÓDIGO EN UNA ENTRADAOtra particularidad de Blogger es que el código escrito en una entrada no se interpreta correctamente si hay saltos de líneas entre ídem. Esto no pasa en gadgets o en plantilla, dónde además es conveniente crear saltos entre líneas para visualizar más cómodamente el código.
La solución también es simple: eliminar todos los retornos de carro que encontréis en el código que queréis poner.
Así, el código del script para crear frases aleatorias, que en la plantilla podría ir perfectamente de esta manera:
<script type='text/javascript'>
function frasesaleatorias (){
frases = new Array();
frases[0] = 'Comenta, que es gratis.';
frases[1] = 'Por cada comentario regalo un abrazo virtual.';
frases[2] = 'quot;Comenta que algo queda.';
frases[3] = 'No por mucho comentar, amanece más tarde.';
frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.';
aleatorio = Math.random() * (frases.length);
aleatorio = Math.floor(aleatorio);
document.write(frases[aleatorio]);
}
</script>
function frasesaleatorias (){
frases = new Array();
frases[0] = 'Comenta, que es gratis.';
frases[1] = 'Por cada comentario regalo un abrazo virtual.';
frases[2] = 'quot;Comenta que algo queda.';
frases[3] = 'No por mucho comentar, amanece más tarde.';
frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.';
aleatorio = Math.random() * (frases.length);
aleatorio = Math.floor(aleatorio);
document.write(frases[aleatorio]);
}
</script>
Mientras que en una entrada tendría que ir así para que funcionara:
<script type='text/javascript'> function frasesaleatorias (){ frases = new Array(); frases[0] = 'Comenta, que es gratis.'; frases[1] = 'Por cada comentario regalo un abrazo virtual.'; frases[2] = 'quot;Comenta que algo queda.'; frases[3] = 'No por mucho comentar, amanece más tarde.'; frases[4] = 'Tienes dos opciones: Opinar aquí o callar. Tú eliges.'; aleatorio = Math.random() * (frases.length); aleatorio = Math.floor(aleatorio); document.write(frases[aleatorio]); } </script>
Si pegais ambos códigos en un bloc de notas y ampliáis la pantalla, podréis observar que el segundo no tiene ningún salto de línea.
Nota: Como hemos visto en otro punto el primer código es para la plantilla. Para un gadget, las comillas simples (') tendrían que ser sustituidas por dobles (").
Cuando un bloguero falta: Rosa, la del Escaparate.
17/02/2011
Llevo toda la tarde intentando confirmar que esto no era mas que la típica noticia, distorsionada por la sucesión de varias personas contándola. Pero a estas alturas, todavía deseando que esto no sea así y que en un rato tenga que hacer un gran desmentido, la noticia es que otros blogueros en contacto habitual con la editora de El Escaparate, han informado de que Rosa Torre ha fallecido.
Cuando me lo han dicho, enseguida he acudido a Gem@, que junto con Rosa fueron las dos personas con las que yo comencé a aficionarme al blogging y sobre todo, a esto de los códigos. Sus respectivos sitios fueron mis primeros blogs de cabecera. Según escribía el correo, se me saltaban las lágrimas y ahora mismo, según escribo esto, me está pasando exactamente lo mismo.
Es curioso como Internet puede generar relaciones y sentimientos entre personas, idénticos a los de la vida real. Con Rosa he intercambiado comentarios en nuestros respectivos blogs, correos electrónicos, algún msn, palabras en su chat de Dejotas Radio e incluso compartido alguna opinión en Eternamente Cabreada, su otro blog. Pero esto ha sido suficiente como para que su pérdida me importe tanto como la de un amigo de toda la vida.
Muchas veces me he preguntado por este o este otro blog que había dejado de actualizar repentinamente. Me preguntaba por la historia personal del que estaba detrás de esos textos y sobre todo, por el motivo por el que habría dejado de escribir. Todas las veces, el autor reaparecía pasado un tiempo o incluso veía su nick en otro medio.
Pero los indicios previos, algunas (pequeñas) informaciones que tenía y sobre todo la confirmación directa de Grandolina por medio de familiares suyos, parecen constatar que esta vez, desgraciadamente, no va a ser así.
A primera hora de la tarde, antes de conocer la noticia, he estado leyendo un post publicado en su blog y seguro que en el futuro seguiré encontrando allí cosas que necesite. Ella sigue estando presente, mezclada con HTML, CSS, trucos, consejos, etc. Cuando un bloguero falta, siempre nos deja algo... a todos.
Que te vaya muy bien Rosa.
Cuando me lo han dicho, enseguida he acudido a Gem@, que junto con Rosa fueron las dos personas con las que yo comencé a aficionarme al blogging y sobre todo, a esto de los códigos. Sus respectivos sitios fueron mis primeros blogs de cabecera. Según escribía el correo, se me saltaban las lágrimas y ahora mismo, según escribo esto, me está pasando exactamente lo mismo.
Es curioso como Internet puede generar relaciones y sentimientos entre personas, idénticos a los de la vida real. Con Rosa he intercambiado comentarios en nuestros respectivos blogs, correos electrónicos, algún msn, palabras en su chat de Dejotas Radio e incluso compartido alguna opinión en Eternamente Cabreada, su otro blog. Pero esto ha sido suficiente como para que su pérdida me importe tanto como la de un amigo de toda la vida.
Muchas veces me he preguntado por este o este otro blog que había dejado de actualizar repentinamente. Me preguntaba por la historia personal del que estaba detrás de esos textos y sobre todo, por el motivo por el que habría dejado de escribir. Todas las veces, el autor reaparecía pasado un tiempo o incluso veía su nick en otro medio.
Pero los indicios previos, algunas (pequeñas) informaciones que tenía y sobre todo la confirmación directa de Grandolina por medio de familiares suyos, parecen constatar que esta vez, desgraciadamente, no va a ser así.
A primera hora de la tarde, antes de conocer la noticia, he estado leyendo un post publicado en su blog y seguro que en el futuro seguiré encontrando allí cosas que necesite. Ella sigue estando presente, mezclada con HTML, CSS, trucos, consejos, etc. Cuando un bloguero falta, siempre nos deja algo... a todos.
Que te vaya muy bien Rosa.
Un vídeo en tu perfil Facebook
16/02/2011
Leo en Mashable que existe una utilidad para poder colocar un vídeo en el perfil de Facebook. Sí, un vídeo en lugar de una aburrida imagen. Y digo que lo leo porque soy más bien tímido y no la he llegado a instalar personalmente. Puede que a algún músico, cantante, actor u orador, esta nueva aplicación le sea especialmente útil. O quizás simplemente quieras dar una sorpresa a alguien. Si a alguien le interesa y prueba, por favor que nos cuente el resultado.
La página para poder hacer esto es Flip Your Profile, desarrollada por Cisco como forma de promocionar una de sus líneas de videocámaras.
Hay un par de peros. Uno es que sólo podrán ver el vídeo aquellos que tengan instalado el plugin. El resto verán la foto normal del perfil. O sea, que si el invento cuaja como las aplicaciones para cambiar las imágenes del perfil, lo verá mucha gente, pero si no, pues lo verás tú y cuatro más. El resto, la foto de siempre.
El segundo es que una vez que subas tu vídeo, un anuncio se publicará automáticamente en tu muro con el texto "¡Increible! Puedes poner vídeos en tu perfil de Facebook. Consigue la APP para ver mi vídeo." Esto ya es más molesto, aunque supongo que será una sola vez y que se podrá borrar sin problemas, tal y como ocurre con algunas otras aplicaciones, incluidas las de las imágenes para el perfil. Cosas de la publicidad viral.
Como no es una función nativa de Facebook, la manera de instalar el vídeo no es tan ágil como con otras aplicaciones, pero para eso estamos. Estos son los pasos a seguir.
Si el vídeo lo quieres colgar en una página de fans o en un grupo, no podrás usar este sistema y tendrás que enviar el fichero por correo a una dirección que se facilita en ese mismo sitio.
Como se trata de ficheros pesados y la demanda es importante, puede que la página no funcione ágilmente cuando te metas. También es muy posible que se demore bastante la subida del vídeo. Tranqui.
Lo digo a menudo, pero como con lo de hacer copias de seguridad, no me canso: no hay que instalar todo lo que se ve. Cada uno debe decidir qué es lo que le resulta útil y que no, individualmente. Ya dije al principio que yo no lo he probado, así que esperamos las opiniones de los que sí lo hagan.
La página para poder hacer esto es Flip Your Profile, desarrollada por Cisco como forma de promocionar una de sus líneas de videocámaras.
Hay un par de peros. Uno es que sólo podrán ver el vídeo aquellos que tengan instalado el plugin. El resto verán la foto normal del perfil. O sea, que si el invento cuaja como las aplicaciones para cambiar las imágenes del perfil, lo verá mucha gente, pero si no, pues lo verás tú y cuatro más. El resto, la foto de siempre.
El segundo es que una vez que subas tu vídeo, un anuncio se publicará automáticamente en tu muro con el texto "¡Increible! Puedes poner vídeos en tu perfil de Facebook. Consigue la APP para ver mi vídeo." Esto ya es más molesto, aunque supongo que será una sola vez y que se podrá borrar sin problemas, tal y como ocurre con algunas otras aplicaciones, incluidas las de las imágenes para el perfil. Cosas de la publicidad viral.
Como no es una función nativa de Facebook, la manera de instalar el vídeo no es tan ágil como con otras aplicaciones, pero para eso estamos. Estos son los pasos a seguir.
- Ve a Flip Your Profile y descarga el plugin adecuado para tu navegador. Hay versiones para Chrome, Safari, Firefox o Internet Explorer. Tras hacerlo, reinicia tu navegador para activarlo.
- Ahora verás los iconos para conectar tu perfil con Flip SG. Una vez conectados ya podrás ver cualquier vídeo en el perfil de otros.
- Para crear el tuyo ve a la pestaña Profile Maker y sube un vídeo que previamente hayas grabado con un máximo de 10MB y formatos flv, mp4 o h.264. Hay otra opción para poder grabar uno sobre la marcha con tu webcam. En este caso, con una duración máxima de 10 segundos. Podrás repetirlo sin subirlo si no te gusta.
Si el vídeo lo quieres colgar en una página de fans o en un grupo, no podrás usar este sistema y tendrás que enviar el fichero por correo a una dirección que se facilita en ese mismo sitio.
Como se trata de ficheros pesados y la demanda es importante, puede que la página no funcione ágilmente cuando te metas. También es muy posible que se demore bastante la subida del vídeo. Tranqui.
Lo digo a menudo, pero como con lo de hacer copias de seguridad, no me canso: no hay que instalar todo lo que se ve. Cada uno debe decidir qué es lo que le resulta útil y que no, individualmente. Ya dije al principio que yo no lo he probado, así que esperamos las opiniones de los que sí lo hagan.
Modificar el aspecto del corte "Más información"
15/02/2011
Me refiero con el título, al jump-link o corte para leer más, que se puede insertar manualmente en una entrada mediante el correspondiente icono de la barra de herramientas del editor Blogger (pestaña Redactar) y que sirve para mostrar en la página inicio o en las de navegación, sólo una porción de dicha entrada.

Si queremos, también se puede crear ese corte desde la pestaña HTML, tecleando manualmente <!--more--> Ese conjunto de letras y símbolos que no es más que un comentario de código, no visible, es interpretado por Blogger como un "leer más".
En un principio, la forma más fácil de modificar el aspecto de ese corte es desde Diseño ► Elementos de Página ► Entradas del Blog ► Editar. Ahí podemos configurar unas cuantas cosas y entre ellas, el texto que saldrá al final del resumen y que sirve de enlace para ver el post completo.

En Texto del enlace de la página de entrada es dónde podremos introducir el nuevo texto deseado. Por defecto viene Más información »
Si además queremos crear algún efecto para que cambie el enlace al pasar el puntero por encima de ese texto, ya no nos queda más remedio que echar mano del CSS. Para ello, como siempre, tenemos que insertar las nuevas propiedades antes del cierre del skin (]]></b:skin>).
La clase que controla ese enlace es jump-link y, por ejemplo, para un cambio de color y de tamaño como este...
...lo que habría que insertar sería algo así:
Pero vamos a dar una vueltecita de tuerca más e intentemos cambiar el texto por una imagen. Hemos usado una construída con una tipografía no estándar, pero podríamos hacerlo exactamente igual con cualquier otro tipo de imagen.
Al ancla (.jump-link a) hay que darle un tamaño (width/height) igual al de la imagen que se quiera utilizar. Para que no salga el texto que por defecto lleva el enlace, le asignamos un tamaño cero. Y por último, el toque mágico del display:block para que la imagen a pesar de carecer de texto, sirva en toda su extensión como link.
Si por último, queremos añadir un efecto rollover con una segunda imagen, sólo tendremos que añadir un poquito más de código:

Si queremos, también se puede crear ese corte desde la pestaña HTML, tecleando manualmente <!--more--> Ese conjunto de letras y símbolos que no es más que un comentario de código, no visible, es interpretado por Blogger como un "leer más".
En un principio, la forma más fácil de modificar el aspecto de ese corte es desde Diseño ► Elementos de Página ► Entradas del Blog ► Editar. Ahí podemos configurar unas cuantas cosas y entre ellas, el texto que saldrá al final del resumen y que sirve de enlace para ver el post completo.

En Texto del enlace de la página de entrada es dónde podremos introducir el nuevo texto deseado. Por defecto viene Más información »
Si además queremos crear algún efecto para que cambie el enlace al pasar el puntero por encima de ese texto, ya no nos queda más remedio que echar mano del CSS. Para ello, como siempre, tenemos que insertar las nuevas propiedades antes del cierre del skin (]]></b:skin>).
La clase que controla ese enlace es jump-link y, por ejemplo, para un cambio de color y de tamaño como este...
...lo que habría que insertar sería algo así:
.jump-link a {
line-height: 16px;
font-size: 12px;
color: #990000;
}
.jump-link a:hover {
font-weight: bold;
font-size: 16px;
color: #993366;
}
line-height: 16px;
font-size: 12px;
color: #990000;
}
.jump-link a:hover {
font-weight: bold;
font-size: 16px;
color: #993366;
}
Pero vamos a dar una vueltecita de tuerca más e intentemos cambiar el texto por una imagen. Hemos usado una construída con una tipografía no estándar, pero podríamos hacerlo exactamente igual con cualquier otro tipo de imagen.
.jump-link {
background:url(http://2.bp.blogspot.com/-st4ammxnU3U/TVhd9nVN5bI/AAAAAAAANBQ/3CcJvJLyNFc/s400/leermas.gif) no-repeat;}
.jump-link a {
width:140px;
height:30px;
font-size:0px;
display:block;
}
background:url(http://2.bp.blogspot.com/-st4ammxnU3U/TVhd9nVN5bI/AAAAAAAANBQ/3CcJvJLyNFc/s400/leermas.gif) no-repeat;}
.jump-link a {
width:140px;
height:30px;
font-size:0px;
display:block;
}
Al ancla (.jump-link a) hay que darle un tamaño (width/height) igual al de la imagen que se quiera utilizar. Para que no salga el texto que por defecto lleva el enlace, le asignamos un tamaño cero. Y por último, el toque mágico del display:block para que la imagen a pesar de carecer de texto, sirva en toda su extensión como link.
Si por último, queremos añadir un efecto rollover con una segunda imagen, sólo tendremos que añadir un poquito más de código:
.jump-link a:hover {
background:url(http://4.bp.blogspot.com/-d2UnnFjI4d0/TVhd91PuRqI/AAAAAAAANBY/oQbqZXeQbgA/s400/leermas2.gif) no-repeat;
}
background:url(http://4.bp.blogspot.com/-d2UnnFjI4d0/TVhd91PuRqI/AAAAAAAANBY/oQbqZXeQbgA/s400/leermas2.gif) no-repeat;
}
Books por la Face. And the winner is...
13/02/2011
El número del sorteo de la ONCE del día 12 de Febrero de 2011 ha sido el 01711. Y diréis ¿y qué? Pues que cuatro personas gracias a la diosa fortuna, se han llevado por la cara, otros tantos lotes de libros compuestos por las dos obras:
Un par de títulos que generosamente ha proporcionado nuestro patrocinador Ediciones Urano y que por su temática, seguro serán de interés para estos lectores habituales de Oloblogger que participaron en nuestro concurso, que acertaron las preguntas planteadas y que finalmente tuvieron la suerte de que su número saliera. Estos son:
Rogamos a estas cuatro personas, que nos comuniquen a través del correo
sus respectivas direcciones para el envío de los libros.
Gracias a Ediciones Urano, gracias a los que participaron, gracias a todos los que siguen Oloblogger y ¡enhorabuena a los premiados!.
Un par de títulos que generosamente ha proporcionado nuestro patrocinador Ediciones Urano y que por su temática, seguro serán de interés para estos lectores habituales de Oloblogger que participaron en nuestro concurso, que acertaron las preguntas planteadas y que finalmente tuvieron la suerte de que su número saliera. Estos son:
- Tatiana Sierra
- Pi Carmona
- ElSuricato Worldgeekweb
- Mercedes Ríos
Rogamos a estas cuatro personas, que nos comuniquen a través del correo
sus respectivas direcciones para el envío de los libros.Gracias a Ediciones Urano, gracias a los que participaron, gracias a todos los que siguen Oloblogger y ¡enhorabuena a los premiados!.
Todo Google de un vistazo. Atajos.
10/02/2011
Que Google que originalmente era un sencillo buscador, ahora se ha convertido en un monstruo de Internet, creo que no se le escapa a casi nadie. Y lo de monstruo va tanto por el tamaño conseguido, como por su potencial peligro.
No sé si todo el mundo es totalmente consciente de la cantidad de servicios que Google ofrece a los internautas. Prácticamente todo lo deseable: soporte para blogs (Blogger), alojamiento de imágenes (Picasa), alojamiento de vídeos (Youtube), gestión de feeds (FeedBurner), lector de feeds (Google Reader), alojamiento documentos (Google Docs), base de datos de proyectos de código (Google Code), correo electrónico (GMail), servicio de rutas y mapas (Google Maps, Earth), soporte publicitario (Adsense), acortador de URL's (Goo.gl), navegador (Chrome), chat (Google Talk), ... y otros muchos más hasta superar en número los 100 servicios. Y además, gratis.
Siendo así, es bastante probable que la mayoría de vosotros utilicéis habitualmente al menos cinco o seis servicios de estos, pero puede que algunos, como un servidor, usen muchos más.
Para todos nosotros, el plugin (extensión) para el navegador Google Shortcuts puede ser de utilidad en cuanto que nos instala en la barra de herramientas, una serie de iconos (atajos), para poder acceder rápidamente a nuestros servicios Google favoritos.
Igual se podría hacer con los favoritos o marcadores, pero este sistema parece bastante más práctico en cuanto a que todo queda permanentemente a la vista.
Actualmente está disponible para Firefox y para Chrome y para instalarlo sólo es necesario pinchar en el enlace correspondiente.
Tras hacerlo podréis ver una serie de iconos que por defecto quedan automáticamente instalados en la barra. Desde el icono de la rueda dentada se puede acceder a una ventana emergente para añadir o quitar servicios según las necesidades de cada uno e incluso ordenarlos. También se puede añadir un icono a cualquier URL aunque no corresponda a un servicio Google.
Algunos botones como por ejemplo el del acortador, realizan su tarea sin salir de la pantalla dónde estamos. Estando en determinada dirección, es suficiente con pinchar en el atajo de Goo.gl para tener en nuestro portapapeles la dirección acortada, disponible para pegar dónde queramos.
Actualización: Un truco que he aprendido en DDG. Este código sería el que habría que meter en un nuevo botón, para que este sirviera como botón de retweet. Cuando pinchemos en él se abrirá un tweet con la dirección corta de la página que estemos viendo, listo para añadir lo que queramos y enviarlo.
Evidentemente, también podría servir como simple generador de direcciones acortadas si no enviamos el tweet.
No sé si todo el mundo es totalmente consciente de la cantidad de servicios que Google ofrece a los internautas. Prácticamente todo lo deseable: soporte para blogs (Blogger), alojamiento de imágenes (Picasa), alojamiento de vídeos (Youtube), gestión de feeds (FeedBurner), lector de feeds (Google Reader), alojamiento documentos (Google Docs), base de datos de proyectos de código (Google Code), correo electrónico (GMail), servicio de rutas y mapas (Google Maps, Earth), soporte publicitario (Adsense), acortador de URL's (Goo.gl), navegador (Chrome), chat (Google Talk), ... y otros muchos más hasta superar en número los 100 servicios. Y además, gratis.
Siendo así, es bastante probable que la mayoría de vosotros utilicéis habitualmente al menos cinco o seis servicios de estos, pero puede que algunos, como un servidor, usen muchos más.
Para todos nosotros, el plugin (extensión) para el navegador Google Shortcuts puede ser de utilidad en cuanto que nos instala en la barra de herramientas, una serie de iconos (atajos), para poder acceder rápidamente a nuestros servicios Google favoritos.
Igual se podría hacer con los favoritos o marcadores, pero este sistema parece bastante más práctico en cuanto a que todo queda permanentemente a la vista.
Actualmente está disponible para Firefox y para Chrome y para instalarlo sólo es necesario pinchar en el enlace correspondiente.
Tras hacerlo podréis ver una serie de iconos que por defecto quedan automáticamente instalados en la barra. Desde el icono de la rueda dentada se puede acceder a una ventana emergente para añadir o quitar servicios según las necesidades de cada uno e incluso ordenarlos. También se puede añadir un icono a cualquier URL aunque no corresponda a un servicio Google.
Algunos botones como por ejemplo el del acortador, realizan su tarea sin salir de la pantalla dónde estamos. Estando en determinada dirección, es suficiente con pinchar en el atajo de Goo.gl para tener en nuestro portapapeles la dirección acortada, disponible para pegar dónde queramos.
Actualización: Un truco que he aprendido en DDG. Este código sería el que habría que meter en un nuevo botón, para que este sirviera como botón de retweet. Cuando pinchemos en él se abrirá un tweet con la dirección corta de la página que estemos viendo, listo para añadir lo que queramos y enviarlo.
javascript:window.open('http://twitter.com/share?url='+location.href);
Evidentemente, también podría servir como simple generador de direcciones acortadas si no enviamos el tweet.
Sencilla galería de imágenes... en horizontal
07/02/2011
Anteriormente vimos un sistema para hacer una galería de imágenes con miniaturas como esta:
La cuestión es que algunos necesitan o simplemente prefieren, que las miniaturas se muestren arriba de la imagen principal y no a la izquierda. Lo cierto es que esa es una forma de que las imágenes a tamaño "original" se vean más grandes.
En aquella entrada ya se explicó cómo instalar todo, por lo que ahora sólo vamos a indicar los cambios que sobre aquel código habría que hacer para conseguir esto.
Sólo necesitamos ajustar la parte CSS. Los cambios los he marcado en verde para que los encontréis más rápido. Después del código comento un poco los cambios.
Como podéis ver, lo único que hemos hecho ha sido ampliar el ancho destinado para la imagen principal (#jgal li.active img --> 500px) y al no necesitar espacio a la derecha de las miniaturas, también el de estas, que ahora será el mismo que en aquella (#jgal --> 500px). Luego reposicionamos el punto de origen para mostrar la imagen principal, en función del nuevo diseño (#jgal li img --> top:160px left:0px).
Por último, para cambiar el tamaño de las miniaturas y que cuadren con el nuevo ancho disponible, hay que cambiar el ancho y alto de estas en #jgal li y después ajustar el top de jgal li img. Así recolocamos consecuentemente la imagen principal. Por cierto, que las miniaturas no tienen porque ser cuadradas.
Un ejemplo con:
La cuestión es que algunos necesitan o simplemente prefieren, que las miniaturas se muestren arriba de la imagen principal y no a la izquierda. Lo cierto es que esa es una forma de que las imágenes a tamaño "original" se vean más grandes.
En aquella entrada ya se explicó cómo instalar todo, por lo que ahora sólo vamos a indicar los cambios que sobre aquel código habría que hacer para conseguir esto.
Sólo necesitamos ajustar la parte CSS. Los cambios los he marcado en verde para que los encontréis más rápido. Después del código comento un poco los cambios.
<style type="text/css">
#gallery {display: none;}
#jgal {padding:0;margin:0;list-style: none; width: 500px;}
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 160px; left: 0px; display: none; }
#jgal li.active img { display: block; width:500px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>
#gallery {display: none;}
#jgal {padding:0;margin:0;list-style: none; width: 500px;}
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 160px; left: 0px; display: none; }
#jgal li.active img { display: block; width:500px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>
Como podéis ver, lo único que hemos hecho ha sido ampliar el ancho destinado para la imagen principal (#jgal li.active img --> 500px) y al no necesitar espacio a la derecha de las miniaturas, también el de estas, que ahora será el mismo que en aquella (#jgal --> 500px). Luego reposicionamos el punto de origen para mostrar la imagen principal, en función del nuevo diseño (#jgal li img --> top:160px left:0px).
Por último, para cambiar el tamaño de las miniaturas y que cuadren con el nuevo ancho disponible, hay que cambiar el ancho y alto de estas en #jgal li y después ajustar el top de jgal li img. Así recolocamos consecuentemente la imagen principal. Por cierto, que las miniaturas no tienen porque ser cuadradas.
Un ejemplo con:
#jgal {width:500px;}
#jgal li {width: 34px; height: 84px;}
#jgal li img {top:100px; left:0px;}
#jgal li.active img {width:500px;}
#jgal li {width: 34px; height: 84px;}
#jgal li img {top:100px; left:0px;}
#jgal li.active img {width:500px;}
Books por la Face. Ya tenemos candidatos.
04/02/2011

Bueno, bueno, bueno. Tal y como anunciamos en nuestra entrada Sorteamos cuatro pares de books por la face, el pasado lunes terminó el periodo para que nos remitieráis los nombres de los autores de los libros a sortear.
Las pistas se publicaron respectivamente, los días 22 y 25 de Enero en nuestra página Facebook. Y aunque allí siguen para general constancia, fueron las siguientes:
❖ Ediciones Urano - Una empresa muy activa: Groundswell
Una simple búsqueda de la palabra 'Groundswell', en adición de 'empresa' y/o 'activa' si hubiera sido necesario, nos lleva invariablemente a El mundo Groundswell, escrito por Josh Bernoff y Charle Li. Ambos autores son vicepresidentes de Forrester Research y los encargados de las investigaciones relacionadas con cómo usamos las nuevas tecnologías y todo lo relacionado con la Web 2.0 .
El libro trata sobre el fenómeno y los efectos de la implantación en nuestras vidas de las redes sociales surgidas al amparo de Internet. A este movimiento, los autores del libro lo llaman el mundo Groundswell. Con muchos ejemplos y datos estadísticos, este libro permite entrar a fondo en este mundo para aprender a participar y aprovechar todo su potencial.
❖ Ediciones Urano - El único demonio inglés de seis letras
Esta pista era más sutil. Las claves eran 'demonio', 'inglés' y el número de letras (seis). Con cualquier traductor online, la palabra demonio arroja una serie de voces inglesas. La que llevaba al título era una de seis letras: 'Daemon'. Esta palabra junto con la editorial (Urano, aunque con Umbriel también sale), nos lleva a la obra homónima de Daniel Suárez.
El título resume el contenido de este libro. Un daemon (de las siglas de la expresión inglesa Disk And Execution MONitor) es un programa informático que se ejecuta en segundo plano sin control directo del usuario, normalmente de forma continua. Estos procesos no pueden ser cerrados de forma definitiva porque se reinician automáticamente.
Si bien los daemons son necesarios y generalmente benignos, el que es protagonista de este thriller y que se activa a la muerte de su creador, no lo es tanto, provocando una cadena de acontecimientos que amenazan con acabar con el mundo interconectado que nos rodea.
Pues esos son los libros y esos sus autores. Me consta que muchos lo intentaron, pero realmente pocos nos remitieron las respuestas correctas, así que la lista de participantes para el sorteo es un poco corta. La ventaja para ellos es que las matemáticas no engañan y la mitad se llevarán los cuatro lotes de libros.
El número a la izquierda es el orden en que nos llegaron las respuestas correctas y a la derecha los números con los que participa cada persona una vez aplicado el algoritmo que se explicó en su momento. Sobre el sistema, aclarar que sólo se tendrá en cuenta el último número del sorteo ONCE del día 12 y que he cambiado el número 37 por el 8 para simplificar las cosas. Como el sorteo está por celebrar, el cambio no perjudica a nadie y todos tienen ahora exactamente las mismas oportunidades.
Prometemos ponerlo más fácil la próxima vez, pero sólo un poco. Mientras tanto, podéis ver otras promociones de nuestro patrocinador, en la página Facebook de Umbriel Editores. ¡Suerte!

Bueno, bueno, bueno. Tal y como anunciamos en nuestra entrada Sorteamos cuatro pares de books por la face, el pasado lunes terminó el periodo para que nos remitieráis los nombres de los autores de los libros a sortear.
Las pistas se publicaron respectivamente, los días 22 y 25 de Enero en nuestra página Facebook. Y aunque allí siguen para general constancia, fueron las siguientes:
❖ Ediciones Urano - Una empresa muy activa: Groundswell
Una simple búsqueda de la palabra 'Groundswell', en adición de 'empresa' y/o 'activa' si hubiera sido necesario, nos lleva invariablemente a El mundo Groundswell, escrito por Josh Bernoff y Charle Li. Ambos autores son vicepresidentes de Forrester Research y los encargados de las investigaciones relacionadas con cómo usamos las nuevas tecnologías y todo lo relacionado con la Web 2.0 .
El libro trata sobre el fenómeno y los efectos de la implantación en nuestras vidas de las redes sociales surgidas al amparo de Internet. A este movimiento, los autores del libro lo llaman el mundo Groundswell. Con muchos ejemplos y datos estadísticos, este libro permite entrar a fondo en este mundo para aprender a participar y aprovechar todo su potencial.
❖ Ediciones Urano - El único demonio inglés de seis letras
Esta pista era más sutil. Las claves eran 'demonio', 'inglés' y el número de letras (seis). Con cualquier traductor online, la palabra demonio arroja una serie de voces inglesas. La que llevaba al título era una de seis letras: 'Daemon'. Esta palabra junto con la editorial (Urano, aunque con Umbriel también sale), nos lleva a la obra homónima de Daniel Suárez.
El título resume el contenido de este libro. Un daemon (de las siglas de la expresión inglesa Disk And Execution MONitor) es un programa informático que se ejecuta en segundo plano sin control directo del usuario, normalmente de forma continua. Estos procesos no pueden ser cerrados de forma definitiva porque se reinician automáticamente.
Si bien los daemons son necesarios y generalmente benignos, el que es protagonista de este thriller y que se activa a la muerte de su creador, no lo es tanto, provocando una cadena de acontecimientos que amenazan con acabar con el mundo interconectado que nos rodea.
Pues esos son los libros y esos sus autores. Me consta que muchos lo intentaron, pero realmente pocos nos remitieron las respuestas correctas, así que la lista de participantes para el sorteo es un poco corta. La ventaja para ellos es que las matemáticas no engañan y la mitad se llevarán los cuatro lotes de libros.
El número a la izquierda es el orden en que nos llegaron las respuestas correctas y a la derecha los números con los que participa cada persona una vez aplicado el algoritmo que se explicó en su momento. Sobre el sistema, aclarar que sólo se tendrá en cuenta el último número del sorteo ONCE del día 12 y que he cambiado el número 37 por el 8 para simplificar las cosas. Como el sorteo está por celebrar, el cambio no perjudica a nadie y todos tienen ahora exactamente las mismas oportunidades.
Prometemos ponerlo más fácil la próxima vez, pero sólo un poco. Mientras tanto, podéis ver otras promociones de nuestro patrocinador, en la página Facebook de Umbriel Editores. ¡Suerte!
0. Lourdes Dinares (0, 2, 4 y 6)
1. Tatiana Sierra (1, 3, 5 y 7)
2. Paco Delgado Fernandez (0, 2, 4 y 6)
3. Pi Carmona (1, 3, 5 y 7)
4. Cristina Velazquez (0, 2, 4 y 6)
5. ElSuricato Worldgeekweb (1, 3, 5 y 7)
6. AntonioEZafra (0, 2, 4 y 6)
7. Mercedes Ríos (1, 3, 5 y 7)
1. Tatiana Sierra (1, 3, 5 y 7)
2. Paco Delgado Fernandez (0, 2, 4 y 6)
3. Pi Carmona (1, 3, 5 y 7)
4. Cristina Velazquez (0, 2, 4 y 6)
5. ElSuricato Worldgeekweb (1, 3, 5 y 7)
6. AntonioEZafra (0, 2, 4 y 6)
7. Mercedes Ríos (1, 3, 5 y 7)
Efecto papel con puntas levantadas. CSS3.
03/02/2011
Muy majo y muy fácil, este efecto que he visto en Nimbupani. Consiste en proyectar una sombra doble por debajo de una capa y girarla un poco para que simule un papel levemente levantado por dos de sus puntas. Utiliza algunas de las nuevas propiedades CSS3, por lo que es sencillo deducir, que el truco no será visible con IE8 e inferiores.
Todo se basa en crear una nueva clase que en este ejemplo vamos a llamar papel. Las propiedades las vamos a insertar como siempre, en la parte CSS de la plantilla. En Blogger, antes de ]]></b:skin>.
La primera definición no tiene nada de particular, porque sólo tiene propiedades comunes para cuadros con texto como el tamaño, fuente, margen, etc. En este ejemplo, hemos incluido también una imagen de fondo que simula papel cuadriculado, pero eso también es modificable. Lo único que no se puede alterar es el position:relative; para poder posteriormente ubicar bien las sombras.
Luego utilizamos before y after para colocar precisamente antes y después de la capa principal, sendas sombras que giramos un poco con transform y así darles algo más de realismo. Con bottom la movemos un poco hacia arriba y con el z-index con valor negativo, se termina de conseguir el efecto al llevar la sombra detrás de la capa con el contenido principal.
Para que os hagais una mejor idea de lo que hacen todas esas propiedades, esta imagen es una captura del mismo código pero sin z-index, para apreciar la sombra que ahora queda por encima de la capa principal. La línea roja es una marca dibujada a mano para que podais apreciar lo que quedaría por debajo de ella y lo que sobresaldría por debajo, formando el efecto deseado.

Una vez el código CSS está en nuestra plantilla, sólo tenemos que aplicar la clase papel a los elementos para los que queramos este tipo de sombra.
Cambiando los valores de las propiedades podréis conseguir sombras distintas y si en el estilo quitamos la pseudo clase after y sus propiedades, tendremos sólo una sombra en la esquina de la izquierda. Ocurre a la inversa si quitamos la parte de before:
Variaciones a partir de aquí, las que queráis.
Todo se basa en crear una nueva clase que en este ejemplo vamos a llamar papel. Las propiedades las vamos a insertar como siempre, en la parte CSS de la plantilla. En Blogger, antes de ]]></b:skin>.
.papel {
display:block;
position:relative;
margin:10px;
padding:20px;
font-family:"Courier New";
font-size:120%;
font-weight:bold;
background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/TUQ4mutGAlI/AAAAAAAAMz4/nZvfKXcAje0/s1600/cuadriculado.jpg);
}
.papel:before, .papel:after {
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
content: "";
}
.papel:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.papel:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
right: 10px;
}
display:block;
position:relative;
margin:10px;
padding:20px;
font-family:"Courier New";
font-size:120%;
font-weight:bold;
background:url(http://3.bp.blogspot.com/_0eC4K-qZ7AM/TUQ4mutGAlI/AAAAAAAAMz4/nZvfKXcAje0/s1600/cuadriculado.jpg);
}
.papel:before, .papel:after {
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
content: "";
}
.papel:before {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.papel:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
right: 10px;
}
La primera definición no tiene nada de particular, porque sólo tiene propiedades comunes para cuadros con texto como el tamaño, fuente, margen, etc. En este ejemplo, hemos incluido también una imagen de fondo que simula papel cuadriculado, pero eso también es modificable. Lo único que no se puede alterar es el position:relative; para poder posteriormente ubicar bien las sombras.
Luego utilizamos before y after para colocar precisamente antes y después de la capa principal, sendas sombras que giramos un poco con transform y así darles algo más de realismo. Con bottom la movemos un poco hacia arriba y con el z-index con valor negativo, se termina de conseguir el efecto al llevar la sombra detrás de la capa con el contenido principal.
Para que os hagais una mejor idea de lo que hacen todas esas propiedades, esta imagen es una captura del mismo código pero sin z-index, para apreciar la sombra que ahora queda por encima de la capa principal. La línea roja es una marca dibujada a mano para que podais apreciar lo que quedaría por debajo de ella y lo que sobresaldría por debajo, formando el efecto deseado.

Una vez el código CSS está en nuestra plantilla, sólo tenemos que aplicar la clase papel a los elementos para los que queramos este tipo de sombra.
<div class="papel">
<img src="http://3.bp.blogspot.com/_0eC4K-qZ7AM/TURH6M8uRFI/AAAAAAAAMz8/qx6QdcHuLgI/s320/nota.gif" />
</div>
<img src="http://3.bp.blogspot.com/_0eC4K-qZ7AM/TURH6M8uRFI/AAAAAAAAMz8/qx6QdcHuLgI/s320/nota.gif" />
</div>
Cambiando los valores de las propiedades podréis conseguir sombras distintas y si en el estilo quitamos la pseudo clase after y sus propiedades, tendremos sólo una sombra en la esquina de la izquierda. Ocurre a la inversa si quitamos la parte de before:
<div class="papel">
Con un color plano adecuado, podemos conseguir sin imágenes una base para escribir texto a modo de post-it.
</div>
Con un color plano adecuado, podemos conseguir sin imágenes una base para escribir texto a modo de post-it.
</div>
Variaciones a partir de aquí, las que queráis.
Informática básica
02/02/2011
El ordenador nació para resolver problemas que antes no existían
Bill Gates.El problema de los virus es pasajero. En un par de años estará resuelto.
John McAfee, 1988Los ordenadores son inútiles. Sólo pueden darte respuestas.
Pablo Ruiz Picasso.El único sistema seguro es aquél que está apagado en el interior de un bloque de hormigón protegido en una habitación sellada rodeada por guardias armados.
Gene Spafford.Cuarenta y dos.
Pensamiento profundo.
Suscribirse a:
Entradas (Atom)


















