REFERENCIAS:Pierre Beteille (Monkeyman) en Flickr
Efecto hover sobre las imágenes |
Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.
La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
<div class="imgteaser">
<a href="javascript:void(0);">
<img src="URL_imagen" />
<span class="more">» Leer Más</span>
<span class="desc">
<strong>EL TITULO</strong>
....... el texto a mostrar .......
</span>
</a>
</div>
La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:
<style type="text/css">
.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
overflow: hidden;
position: relative;
width:600px; /* establecemos el ancho total (imagen + marco) */
}
.imgteaser a {text-decoration: none;}
.imgteaser a:hover {cursor: pointer;}
.imgteaser a img { /* la imagen en si misma */
background-color: #456; /* el color del marco */
border: none;
margin: 0;
padding: 10px; /* le ponemos un marco alrededor */
width: 580px; /* forzamos el tamaño de la imagen */
}
.imgteaser a .more { /* es el área traslúcida de LEER MAS */
background-color: #123; /* color de fondo */
/* las propiedades del texto */
color: #FFF;
font-size: 14px;
padding: 5px 10px;
/* transparencia */
filter:alpha(opacity=65); /* IE genérico */
opacity:.65; /* Firefox */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
/* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
right: 10px;
}
.imgteaser a .desc {display: none;}
.imgteaser a:hover .more {visibility: hidden;}
.imgteaser a:hover .desc { /* es el texto del caption en si mismo */
background-color:#345; /* color de fondo */
display: block;
margin: 0;
width: 580px; /* ocupará el mismo ancho de la imagen */
/* las propiedades del texto */
color: #FFF;
font-size: 12px;
padding: 10px;
/* transparencia */
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
/* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
left: 10px;
}
.imgteaser a:hover .desc strong { /* el texto LEER MAS */
display: block;
font-size: 14px;
line-height: 2em;
}
</style>
REFERENCIAS:The Art of Hand Coding
Prism: Crear aplicaciones desde Firefox |
Hace unos meses, ZonaFirefox nos contaba que la futura versión de Firefox traería, entre otras novedades, la posibilidad de crear aplicaciones web de escritorio, es decir, no sólo guardar páginas sino tener acceso a servicios de manera independiente. Para esto, utilizaría Prism, algo similar a Adobe AIR.Ahora, leyendo ghacks.net veo que Mozilla se ha adelantado en este tema y ha aparecido la primera beta de Prism y que esta, funciona en las versiones actuales del navegador así que ... a probar se ha dicho.
Vamos a la página de Prism y allí tenemos dos opciones, lo agregamos como extensión o la podemos descargar de manera independiente de tal forma que funcionará como cualquier otro programa portable. Hay versiones para Windows, Mac y Linux. También hay un Bookmarklet Experimental que nos permite hacer lo mismo sin necesidad de descargar nada.
Opté por la primera que me parece más intuitiva así que allí está, disponible en el menú Herramientas ¿Cómo lo puedo usar? Es tan sencillo que asombra.
Por ejemplo, voy a entrar en GMail con el navegador, como lo haría normalmente. Una vez allí, en Herramientas hago click en Convert Website to Application. Se abrirá una ventana de opciones:
Por ejemplo, voy a entrar en GMail con el navegador, como lo haría normalmente. Una vez allí, en Herramientas hago click en Convert Website to Application. Se abrirá una ventana de opciones:
URL es la página donde estamos
Name el nombre descriptivo que le daremos
Show navigation, Shoy status message and progress, Enable navigation keys y Display in the notification area son las opciones de la ventana en la que veremos la aplicación
Marcaremos una o varias de las opciones de Create Shortcuts: con Desktop la agregamos al Escritorio, con Start Menu al Menú Inicio y con Quick Launch Bar a la barra de acceso rápido de Windows.
Por último Icon nos permite usar el ícono por defecto de la página o seleccionar uno cualquiera.
Hecho esto, veremos el acceso en la PC y bastará hacer click en él para abrirla, tengamos el navegador abierto o no. Como la aplicación ejecuta una versión minimizada de Firefox, veremos que es muy rápida.
Aparentemente, en las próximas versiones habrá más posibilidades como mostrar alertas y trabajar offline (más información)
Muy interesante es la Wiki del proyecto donde hay una serie de paquetes ya pre-armados para crear aplicaciones de diferentes servicios conocidos (más información):
Name el nombre descriptivo que le daremos
Show navigation, Shoy status message and progress, Enable navigation keys y Display in the notification area son las opciones de la ventana en la que veremos la aplicación
Marcaremos una o varias de las opciones de Create Shortcuts: con Desktop la agregamos al Escritorio, con Start Menu al Menú Inicio y con Quick Launch Bar a la barra de acceso rápido de Windows.
Por último Icon nos permite usar el ícono por defecto de la página o seleccionar uno cualquiera.
Hecho esto, veremos el acceso en la PC y bastará hacer click en él para abrirla, tengamos el navegador abierto o no. Como la aplicación ejecuta una versión minimizada de Firefox, veremos que es muy rápida.Aparentemente, en las próximas versiones habrá más posibilidades como mostrar alertas y trabajar offline (más información)
Muy interesante es la Wiki del proyecto donde hay una serie de paquetes ya pre-armados para crear aplicaciones de diferentes servicios conocidos (más información):
- Gmail: gmail.webapp
- Google Docs: gdocs.webapp
- Google Groups: groups.webapp
- Google Analytics: ganalytics.webapp
- Google Reader: greader.webapp
- Facebook: facebook.webapp
- Twitter: twitter.webapp
- BBC Radio Player bbcradioplayer.webapp
- Flash Earth: FlashEarth.webapp
- Flickr: flickr.webapp
- Google Reader + GTalk : PRISM-bundle-google-reader-with-gtalk.webapp
- Google Webmaster Tools: google_webmastertools.webapp
- Meebo: meebo.webapp
- Pandora: pandora.webapp
Colocar una imagen asociada a una etiqueta en el sidebar |
Juan me preguntaba si era posible colocar una imagen en la sidebar que identificara la etiqueta a la que correspondía una entrada. Es decir, si un post tuviera la etiqueta ANIMACIÓN se mostrase una imagen específica y si tuviera la etiqueta BLOGGER se mostrase otra, etc, etc, etc.
Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.
Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.
Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:
Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.
Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.
Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:
<script>var etiquetaPOST;</script>
Ahora, deberíamos buscar la parte del código de los posts donde se leen y muestran las etiquetas de cada entrada así que expandimos los artilugios y buscamos esto:
<b:loop values='data:post.labels' var='label'>
<script>etiquetaPOST='<data:label.name/>';</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
y agregamos eso indicado en color que hará que se guarde la etiqueta en esa variable, con una limitación, si la entrada tiene más de una, guardará la última; podríamos modificarlo para que guarde la primera pero, aún así, sólo guardará una.
Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.
Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:
Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.
Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:
<script type='text/javascript'>
listaCategorias=new Array('CATEGORIA1','CATEGORIA2','CATEGORIA3');
imgsCategorias=new Array(
'URL_imagenCATEGORIA1',
'URL_imagenCATEGORIA2',
'URL_imagenCATEGORIA3'
);
cual=listaCategorias.indexOf(etiquetaPOST);
if(cual==-1) {
laImagen='URL_imagenPORDEFECTO';
} else {
laImagen=imgsCategorias[cual];
}
salida='<img id="logocat" src="' + laImagen + '"/>';
document.write(salida);
</script>
Donde, reemplazamos CATEGORIA1, CATEGORIA2 y CATEGORIA3 por los nombres de las nuestras y, si tenemos más, ponemos cada una de ellas entre comillas simples y separadas por comas.
La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.
Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.
Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:
La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.
Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.
Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:
<b:widget id='HTMLXX' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'><data:content/></div>
<b:else/>
<style>#HTMLXX {display: none;}</style>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
De esta manera, nos aseguramos que sólo se muestre en las páginas individuales.
Divagando sobre blogs y conversaciones |
Pués la verdad, el comentario de Maite en una entrada reciente, me ha puesto a pensar y, de alguna manera, se entremezcla con uno de los tópicos del recientemente creado Foro de SpamLoco.
Decía:
Decía:
Yo os leo siempre de lo mismo en mil sitios y sigo estando pez, no entiendo de redes sociales, no estoy dentro de ninguna, ni de twiter, ni facebook ni ninguna, por lo que no se como funcionan y tampoco se lo que me pierdo.
Pero no consigo saber por qué le tenéis tanta manía a lo de los seguidores, a ver si explicandomelo tú desde el principio puedo enterarme de una vez.
A mi me gusta porque mucha gente viene y no comenta, sin embargo, no se por qué, se hace seguidor y al hacerlo me da una pista de su propio blog y así he podido conocer sitios estupendos relacionados con mi tema (y no relacionados) de los que no hubiera tenido idea si no fuese por esa ventanita.
Dentro de sus contactos y sus propios seguidores sigo conociendo más direcciones que me interesan... Para mí resulta muy útil desde un punto de vista no de presunción sino de información.
Si lo quito pierdo posibilidades. Cómo encontrarles si no? Esa es la pregunta básica más que nada. Si tienes tiempo y paciencia explicamelo, por favor, a ver si por fin me entero de cuál es la historia.
Aunque he tratado de contestarlo, mi respuesta me parece incompleta o, mejor dicho, su comentario me ha llevado hacia otras direcciones y eso, siempre es bienvenido.
Más allá de la anecdota de ese gadget de seguidores y de su buen o mal uso, el tema de "sígueme" "soy tu fan" o "presumamos" me parece bastante más profundo. Imagino que en algún momento, los sociologos deberán ponerse a estudiar esto: ¿Cómo funciona la gente común cuando su vida se traslada a internet? ¿Somo lo mismo acá que allá? Tiendo a pensar que sí pero es evidente que no; sin duda, esta pseudo-realidad exacerba algunas cosas. Los generosos comparten más en la web que en la vida real; los egoistas son más egoistas, los buenos son más buenos y los malos son peores ¿Será una especie de borrachera 2.0 que hace que ciertas características personales se hagan más evidentes?
No digo que alguien sea distinto acá que allá sino que eso que lo caracteriza, se ve con más facilidad. El nick elegido, el avatar que usamos, los títulos que elegimos, la forma de expresarnos ... no hace falta un psicólogo para interpretarlos; los símbolos son obvios, muestran más que un millón de palabras.
Pero, hablar de toda la web sería inapropiado, es un universo demasiado amplio. Los blogs sólo son una parte de ese universo y deberían unirlos ciertas caracterísiticas, sin embargo, tengo la sensación que, poco a poco, son más las cosas que los separan que aquellas que los unen y de alguna manera, eso, terminará por destruirlos como medio.
Medio. Recalco la palabra porque esa es la clave y de allí lo interesante del comentario de Maite. Para ella, ese gadget es un medio y desde ese punto de vista no tiene nada que discutirse. Lo usa, le sirve y está bien pero ¿todos lo usaran de la misma manera? Me temo que no y tampoco tendría importancia salvo que, en muchos casos, el medio es en realidad un fin; el blog, termina existiendo para que ese numeríto mágico aumente y aumente y aumente. Algunos piensan: "cuanto más alto sea, mejor seré" lo que lamentablemente lleva a otros a la conclusión contraria: "cuanto más bajo sea, peor seré".
Ese es el dilema de los blogs. Ser lo que son o ser egoblogs.
Si un blog se transforma en sinónimo de sitio elitista donde alguien dicta cátedra, escribe y se queda mirando a ver las reacciones que ha generado, perderá su escencia. Si un blogger mira la cantidad de meneos que tiene una entrada antes de leer los comentarios, y reflexionar sobre lo que estos dicen, dejará de ser un blog y su sitio sólo será una forma barata de crearse un negocito en lugar de buscarse un trabajo hombreando bolsas en el puerto.
Poco a poco, la blogocosa se llena de elites, es casi "humanamente" inevitable; algunos pseudo-emprendedores han encontrado en este tipo de plataformas una forma fácil de juntar monedas; no tienen que invertir nada, el riesgo es escaso, si sale bien, genial, si sale mal, creamos otro y nos tiramos a la pileta; total, el mundo está lleno de giles y en alguna parte debe haber alguien dispuesto a comprarnos lo que vendemos: aire.
Y como si fuera poco, la elite se rie de nosotros y comentan entre ellos: "pobrecitos, son unos aficionados".
Y tienen razón.
Pero están equivocados.
Somos aficionados y eso es lo que queremos. Eso es lo que deberíamos rescatar antes que sea demasiado tarde. Los blogs SON para aficionados. Los blogs SON personales. Que alguno lo haya tomado como negocio no está mal, lo que está mal es que nos hagan creer que ese es el único camino, que esa es la escencia de este medio, que todos debemos ir en esa dirección o apartarnos.
Un blog es todo lo contrario de eso que nos quieren vender.
Un blog tiene sólo un fin: la conversación.
Un blog es una red social perfecta porque sólo requiere un interlocutor: uno mismo.
Si a eso se le agregan otras voces llegamos al Nirvana. No importa si son dos, cien o miles. Las voces que llegan desde afuera enriquecen la conversación y la llevan hasta lugares que uno no habría sospechado.
Un blog es eso: un sitio donde escucho lo que dice el otro.
Un blog soy yo mismo haciendo un blog.
Más allá de la anecdota de ese gadget de seguidores y de su buen o mal uso, el tema de "sígueme" "soy tu fan" o "presumamos" me parece bastante más profundo. Imagino que en algún momento, los sociologos deberán ponerse a estudiar esto: ¿Cómo funciona la gente común cuando su vida se traslada a internet? ¿Somo lo mismo acá que allá? Tiendo a pensar que sí pero es evidente que no; sin duda, esta pseudo-realidad exacerba algunas cosas. Los generosos comparten más en la web que en la vida real; los egoistas son más egoistas, los buenos son más buenos y los malos son peores ¿Será una especie de borrachera 2.0 que hace que ciertas características personales se hagan más evidentes?
No digo que alguien sea distinto acá que allá sino que eso que lo caracteriza, se ve con más facilidad. El nick elegido, el avatar que usamos, los títulos que elegimos, la forma de expresarnos ... no hace falta un psicólogo para interpretarlos; los símbolos son obvios, muestran más que un millón de palabras.
Pero, hablar de toda la web sería inapropiado, es un universo demasiado amplio. Los blogs sólo son una parte de ese universo y deberían unirlos ciertas caracterísiticas, sin embargo, tengo la sensación que, poco a poco, son más las cosas que los separan que aquellas que los unen y de alguna manera, eso, terminará por destruirlos como medio.
Medio. Recalco la palabra porque esa es la clave y de allí lo interesante del comentario de Maite. Para ella, ese gadget es un medio y desde ese punto de vista no tiene nada que discutirse. Lo usa, le sirve y está bien pero ¿todos lo usaran de la misma manera? Me temo que no y tampoco tendría importancia salvo que, en muchos casos, el medio es en realidad un fin; el blog, termina existiendo para que ese numeríto mágico aumente y aumente y aumente. Algunos piensan: "cuanto más alto sea, mejor seré" lo que lamentablemente lleva a otros a la conclusión contraria: "cuanto más bajo sea, peor seré".
Ese es el dilema de los blogs. Ser lo que son o ser egoblogs.
Si un blog se transforma en sinónimo de sitio elitista donde alguien dicta cátedra, escribe y se queda mirando a ver las reacciones que ha generado, perderá su escencia. Si un blogger mira la cantidad de meneos que tiene una entrada antes de leer los comentarios, y reflexionar sobre lo que estos dicen, dejará de ser un blog y su sitio sólo será una forma barata de crearse un negocito en lugar de buscarse un trabajo hombreando bolsas en el puerto.
Poco a poco, la blogocosa se llena de elites, es casi "humanamente" inevitable; algunos pseudo-emprendedores han encontrado en este tipo de plataformas una forma fácil de juntar monedas; no tienen que invertir nada, el riesgo es escaso, si sale bien, genial, si sale mal, creamos otro y nos tiramos a la pileta; total, el mundo está lleno de giles y en alguna parte debe haber alguien dispuesto a comprarnos lo que vendemos: aire.
Y como si fuera poco, la elite se rie de nosotros y comentan entre ellos: "pobrecitos, son unos aficionados".
Y tienen razón.
Pero están equivocados.
Somos aficionados y eso es lo que queremos. Eso es lo que deberíamos rescatar antes que sea demasiado tarde. Los blogs SON para aficionados. Los blogs SON personales. Que alguno lo haya tomado como negocio no está mal, lo que está mal es que nos hagan creer que ese es el único camino, que esa es la escencia de este medio, que todos debemos ir en esa dirección o apartarnos.
Un blog es todo lo contrario de eso que nos quieren vender.
Un blog tiene sólo un fin: la conversación.
Un blog es una red social perfecta porque sólo requiere un interlocutor: uno mismo.
Si a eso se le agregan otras voces llegamos al Nirvana. No importa si son dos, cien o miles. Las voces que llegan desde afuera enriquecen la conversación y la llevan hasta lugares que uno no habría sospechado.
Un blog es eso: un sitio donde escucho lo que dice el otro.
Un blog soy yo mismo haciendo un blog.
IE8.js: Resolviendo incompatibilidades de IE |
Vaya, leí entusiasmada hasta que llegué al final. Suena a chiste eso de "no están implementados en Internet Explorer" es como decir que algo está riquísimo pero no podemos comerlo porque nos va a sentar mal Pués sí. Gem@
tiene razón en sentir eso luego de leer que algunas de las alternativas más avanzadas del CSS aún no han sido incorporadas a Internet Explorer, aunque algunas de ellas ya funcionan en la versión más reciente del navegador IE8 que puede ser descargada sin restricciones desde la página de Microsoft.Sin embargo hace tiempo, había comentado en una entrada, que en Google Codes podíamos encontrar la solución y es hora de volver sobre ese tema.
Dean Edwards es el creador de una serie de scripts muy pequeños que podemos cargar directamente sin necesidad de alojarlos nosotros y que permiten solucionar esas limitaciones, agregando a IE, una serie de funciones que no posee. Hay dos versiones IE7.js e IE8.js que contiene al anterior y que es el que conviene usar.
¿Qué cosas resuelve?
Permite el uso de selectores CSS:
parent>child adjacent + sibling adjacent ~ sibling .multiple.classes :hover :first-child [attr] [attr="value"] [attr~="value"] [attr|="value"] [attr^="value"] [attr$="value"] [attr*="value"] ::after ::before :active :focus :checked :contains() :disabled :empty :enabled :indeterminate :lang() :last-child :not() :nth-child() :nth-last-child() :only-child :target
Agrega y corrige la forma de interpretar ciertas propiedades CSS:
background-attachment background-image bottom cursor display font-size margin max-height max-width min-height min-width overflow position right border-spacing (para tablas) box-sizing content soporta attr() y url() opacity property: inherit
Agrega y corrige la forma de interpretar ciertos elementos HTML:
abbr img label button[type=submit] form object
Soluciona además los problemas de márgenes dobles y otros detalles específicios aunque para esto último hay una librería extra llamada ie7-squish.js.
También corrige el uso de imágenes PNGs transparentes pero, con una limitación, lo hace sólo si la imagen tiene este tipo de nombre: *-trans.png
No lo hará en el 100% de los casos pero, si miran la página de demos, verán que lo hace bastante bien
¿Cómo lo usamos, simplemente agregamos esto antes de </head>:
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->
REFERENCIAS:code.google.com
Pseudo-clases y pseudo-elementos (3) |
