Dos forma de insertar tweets en una página web |
Embed Tweet es un servico que permite insertar un tweet en cualquier página web de manera hiper-simple. Para utilizarlo, debemos tener agregado el script genérico antes de </head>:
<script src='http://embedtweet.com/javascripts/embed_v2.js' type='text/javascript'></script>
A partir de ese momento, cada vez que queremos mostrar alguno, sólo es necesario escribir un enlace con la URL correspondients; por ejemplo, si el tweet fuese este:
http://twitter.com/oloman/statuses/17254283321
bastaría poner algo así donde se nos ocurra mostrarlo:
http://twitter.com/oloman/statuses/17254283321
bastaría poner algo así donde se nos ocurra mostrarlo:
<a href="http://twitter.com/oloman/statuses/17254283321"> el tweet </a>
Como se puede ver en el ejemplo, todos los botones son operativos así que desde nuestra misma página, puede ser respondido, retweetado, etc.
Para quienes usan WordPress, hay un plugin disponible que puede descargarse en formato ZIP.
Para quienes usan WordPress, hay un plugin disponible que puede descargarse en formato ZIP.
REFERENCIAS:Oloblogger
Un poco diferente es el servicio que ofrece Between; allí, lo que podemos hacer es ver y publicar una conversaciones entre dos usuarios.
Para eso, vamos a la página, colocamos los nombres de usuario y selecionamos alguna de las opciones de personalización que incluyen establecer las fechas a filtrar y algunas otros detalels como colores y tamaño. El resultado será un iframe que luego, si no nos convence, podemos modificar directamente porque las opciones son bastante evidentes:
user1 es el @nombre de un usuario
user2 es el @nombre de otro usuario
date1 fecha desde (formato Jan-01-2010)
date2 fecha hasta desde (formato Jun-30-2010)
order indica si las ordenamos en forma ascendente o ascendente (asc|des)
No tiene muchos misterios pero, hay que tener en cuenta que si las conversaciones son muchas, el tiempo que tarda en ser mostrado puede llegar a ser excesivo.
Para eso, vamos a la página, colocamos los nombres de usuario y selecionamos alguna de las opciones de personalización que incluyen establecer las fechas a filtrar y algunas otros detalels como colores y tamaño. El resultado será un iframe que luego, si no nos convence, podemos modificar directamente porque las opciones son bastante evidentes:
user1 es el @nombre de un usuario
user2 es el @nombre de otro usuario
date1 fecha desde (formato Jan-01-2010)
date2 fecha hasta desde (formato Jun-30-2010)
order indica si las ordenamos en forma ascendente o ascendente (asc|des)
No tiene muchos misterios pero, hay que tener en cuenta que si las conversaciones son muchas, el tiempo que tarda en ser mostrado puede llegar a ser excesivo.
REFERENCIAS:TechCrunch
Creando botones sencillos para un menú |
Usando CSS es muy sencillo crear botones de cualquier tipo, en este caso, las explicaciones son de vanseodesign y se aplican a un menú pero, podría hacerse con cualquier otra parte.
El HTML básico de un menú es algo así:
<div id="miMenu">
<ul id="listaMenu">
<li><a href="URL_enlace1">Enlace 1</a></li>
<li><a href="URL_enlace2">Enlace 2</a></li>
<li><a href="URL_enlace3">Enlace 3</a></li>
<li><a href="URL_enlace4">Enlace 4</a></li>
</ul>
</div>
¿Cuales son las propiedades a tener en cuenta?
/* primero que nada, el contenedor, el rectángulo donde se mostrará el menú
#miMenu {
/* si es necesario, aquí podemos definir anchos, márgenes o fondos /*
}
/* luego, las definiciones de la lista */
ul#listaMenu1 {
/* reseteamos las propiedades por defecto /*
list-style: none;
margin: 0;
padding: 0;
/* y podemos agregar propiedades para las fuentes de los textos */
}
/* cada item de la lista */
ul#listaMenu1 li {
/* las mostraremos una al lado de la otra */
display: inline;
}
/* y la clave es definir los enlaces como bloques que floten; de ese modo, podemos agregarles porpiedades gráficas con facilidad */
ul#listaMenu1 li a {
display: block; /* esto, transforma el enlace en un rectángulo al que podemos dimensionar */
float: left; /* son bloques pero flotan, los veremos uno al lado del otro */
text-align: center; /* centramos el texto */
text-decoration: none; /* para que no se subrayen los enlaces */
margin-right: 2px; /* en este ejemplo, cada botón se separa un poco del adyacente */
/*
el tamaño podemos definirlo de varias formas, por ejemplo
height: 20px;
line-height: 20px;
width: 100px;
otra forma es usar padding y de ese modo, su tamaño es dinámico, varia según el texto */
padding: 5px 20px;
*/
padding: 5px 20px;
/* por último, los colores y los bordes */
background: #5F3222;
border-top: 2px solid #815444;
border-right: 2px solid #3D1000;
border-bottom: 2px solid #3D1000;
border-left: 2px solid #815444;
color: #EEE;
}
/* y el efecto hover donde simplemente, cambiamos esos colores */
ul#listaMenu1 li a:hover {
background: #A37666;
color: #000;
border-top: 2px solid #815444;
border-right: 2px solid #C59888;
border-bottom: 2px solid #C59888;
border-left: 2px solid #815444;
}
Las camisetas de Glennz |
Glenn Jones es un diseñador gráfico de Nueva Zelandia que bajo el pseudónimo de GLENNZ, ha descubierto que su negocio es vender camisetas con sus trabajos y allí está su tienda online, recibiendo pedidos y distribuyendolas por todo el mundo.No, no pienso comprar ninguna porque veinte dólares es un poco mucho pero, vale la pena mirar los diseños.
Click para ampliar las imágenes.
Además, en una de sus páginas hay wallpapers para móviles que pueden ser descargados gratuitamente:
REFERENCIAS:blog.glennz.com
Los botones para compartir de Blogger |
Por fin Blogger Buzz ha decidido hacer público que los botones de compartir están disponibles en todos los blogs; casi un mes después de haberlos agregados y varios dias después que Rosa 
nos contara que habían comenzado a funcionar 
El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:
nos contara que habían comenzado a funcionar El includable que controla todo eso ya fue incorporado a todas las plantillas así que podemos verlo si expandimos los artilugios:
<b:includable id='shareButtons' var='post'> <b:if cond='data:post.sharePostUrl'> ....... </b:if> </b:includable>
Lo que puede faltar en algunas plantillas es el código que carga esa parte y que debería encontrarse dentro del includable de las entradas, por lo general, en el pie de página, por ejemplo, luego del ícono de edición:
<b:includable id='post' var='post'>
.......
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
.......
<!-- share buttons -->
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>De no existir, simplemente lo agregamos allí o donde se nos ocurra mostrarlo; además se debe habilitar como cualquier otra opción. Para eso, hay que ir a Diseño, hacer click en Editar Entradas del blog y marcar la casilla correspondiente.
Como todo elemento de Blogger, puede ser eliminado pero para eso no basta borrar el includable ya que es uno de esos elementos "obligatorios", por más que lo borremos, volverá a aparecer. Para quitarlo, hay que eliminar el contenido y dejar las etiquetas del includable:
<b:includable id='shareButtons' var='post' />
Así, tal como está pensado, posee una serie de propiedades por defecto, algunas de las cuales podemos modificar pero no demasiado.
.post-share-buttons {
display: inline-block;
margin: 0 0.5em !important;
vertical-align: middle;
width: 106px;
}
.share-button {
background: url("/img/share_buttons.png") no-repeat scroll left center transparent !important;
display: block;
float: left;
height: 22px;
overflow: hidden;
width: 21px;
}
a.share-button:hover {text-decoration: none;}
.share-button-link-text {
left: -999px;
position: absolute;
}
.sb-email {background-position: 0 0 !important;}
a.sb-email:hover {background-position: 0 -22px !important;}
a.sb-email:active {background-position: 0 -44px !important;}
.sb-blog {background-position: -21px 0 !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-blog:active {background-position: -21px -44px !important;}
.sb-twitter {background-position: -42px 0 !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-twitter:active {background-position: -42px -44px !important;}
.sb-facebook {background-position: -63px 0 !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-facebook:active {background-position: -63px -44px !important;}
.sb-buzz {background-position: -84px 0 !important;width:22px;}
a.sb-buzz:hover {background-position: -84px -22px !important;}
a.sb-buzz:active {background-position: -84px -44px !important;}La más simple es ocultar cualquiera de ellos con display:none aunque, como se trata de un sprite, si ocultamos el primero o el último, se perderá el efecto de "curva" de esos botones; es decir, esta pensado para ser usado así como viene; de todos modos:
.sb-email {display:none;} /* oculta el ícono de email */ .sb-blog {display:none;} /* oculta el ícono de blog */ .sb-twitter {display:none;} /* oculta el ícono de Twitter */ .sb-facebook {display:none;} /* oculta el ícono de Facebook */ .sb-buzz {display:none;} /* oculta el ícono de Goggle Buzz */
El rectángulo que los contiene tiene un clase CSS que es posible sobrescribir y de esa manera, posicionarlo con cierta exactitud donde se nos ocurra. Para eso, me parece que lo mejor es utilizar las propiedades de posición (left top right bottom) aunque podría usarse cualquier otra:
.post-share-buttons {
display: block;
margin: 0 auto !important;
position: relative;
top: -30px;
}Aunque no lo utilicemos y sigamos empleando nuestros propios íconos para compartir, podríamos sacar ventaja de ellos porque nos ayudará a simplificar nuestros códigos y a darles una mejor terminación. Por ejemplo, en una entrada anterior se mostraba la forma de agregar esos botones y bastaría cambiar un poco ese código:
<a expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"" + data:top.shareToFacebookMsg + "\", \"height=430,width=640\"); return false;"' title='Compartir en Facebook' target='_blank' rel='nofollow'> texto/imagen Facebook </a> <a expr:href='data:post.sharePostUrl + "&target=twitter"' title='Enviar a Twitter' target='_blank' rel='nofollow'> texto/imagen Twitter </a> <a expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"" + data:top.shareToBuzzMsg + "\", \"height=415,width=690\"); return false;"' title='Compartir con Google Buzz' target='_blank'> texto/imagen Google Buzz </a> <a expr:href='data:post.sharePostUrl + "&target=email"' title='Enviar por correo electrónico' target='_blank' rel='nofollow'> texto/imagen EMail </a>
Y agregamos el de enviar al blog:
<a expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"" + data:top.blogThisMsg + "\", \"height=270,width=475\"); return false;"' title='Escribe un blog' target='_blank' rel='nofollow'> texto/imagen Blogger </a>
Para que esto funcione debemos habilitar la opción y eliminar <b:include data='post' name='shareButtons'/> de nuestra plantilla.
No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario
No hay mucho más que eso excepto, esperar que ahora que ya está funcionando, reparen el problema con Facebook ya que, vaya uno a saber por qué motivo, de un tiempo a esta parte no se muestra el resumen de las entradas tal como ocurría antes y entonces, el compartir se transforma en algo bastante precario
monkeyFly: Mejoras para nuestro Twitter |
monkeyFly es una extensión para Firefox, script de Greasemonkey o extensión para Google Chrome que amplia las posibilidades de nuestra página de Twitter, agregando opciones extras tales como simplicar la subida de imágenes, utilizar pestañas y columnas, acceder rápidamente a diferentes atajos y personalizar la forma en que mostraremos nuestras listas.
El error cuando no hay título en los gadgets |
Esta es una de esas cosas que suelen pasar en Blogger, un error temporal o un cambio de los tantos que se hacen y sobre los que nunca nos enteramos. El tema es que por ahora, cuando agregamos o modificamos un gadget, el campo del título es obligatorio y si lo dejamos en blanco, aparece un mensaje de error que nos impide guardarlo.
La solución a este inconveniente la leía hace un par de dias en El escaparate de Rosa y, como me han hecho esa pregunta varias veces, lo mejor que podemos hacer es remitirnos a su entrada para resolver las cosas.
La solución a este inconveniente la leía hace un par de dias en El escaparate de Rosa
y, como me han hecho esa pregunta varias veces, lo mejor que podemos hacer es remitirnos a su entrada para resolver las cosas.
Básicamente, la idea es colocar como título, cualquier tipo de etiqueta HTML sin contenido tal como <h2></h2>, así, sin espacios intermedios porque si llega a tener algún contenido, dependiendo de nuestro diseño de plantilla, veremos "algo" y la idea es no ver nada en absoluto.
No me había dado cuenta de este asunto porque, en realidad, es algo que ya me había pasado varias veces a lo largo de estos años y estaba convencido que ese campo era obligatorio por lo tanto, nunca lo dejaba vacio y si quería ocultar el título en el blog, lo eliminaba directamente de la plantilla.
Sí, ya sé que a veces, expandir los artilugios y modificar los códigos de la plantilla causa stress pero, creo que es mejor hacer eso y que cada gadget tenga su título aunque luego, lo eliminemos o modifiquemos porque, cuando no lo tiene, lo que vemos en la pantalla de diseño es confuso. Allí, cada elemento se muestra con su título y si ese campo está vacio, lo que se muestra es el tipo de gadget y si hay varios del mismo tipo, es difícil saber cuál es cuál ya que todos son iguales:
No me había dado cuenta de este asunto porque, en realidad, es algo que ya me había pasado varias veces a lo largo de estos años y estaba convencido que ese campo era obligatorio por lo tanto, nunca lo dejaba vacio y si quería ocultar el título en el blog, lo eliminaba directamente de la plantilla.
Sí, ya sé que a veces, expandir los artilugios y modificar los códigos de la plantilla causa stress pero, creo que es mejor hacer eso y que cada gadget tenga su título aunque luego, lo eliminemos o modifiquemos porque, cuando no lo tiene, lo que vemos en la pantalla de diseño es confuso. Allí, cada elemento se muestra con su título y si ese campo está vacio, lo que se muestra es el tipo de gadget y si hay varios del mismo tipo, es difícil saber cuál es cuál ya que todos son iguales:
Colocándole un título, será más sencillo saber cuál es cuál, tanto en la pantalla de diseño como en la plantilla misma:
Por supuesto, cada cuál lo hará como le resulte más cómodo pero si se quiere usar este método, basta expandir los artilugios, buscar el widget:
<b:widget id='HTML6' locked='false' title='el COSO sin titulo' type='HTML'>
y luego, eliminar el código que por defecto dice algo así:
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
Tal vez, en alguna plantilla se muestre diferente pero basta que encontremos el dato que siempre es data:title
Editar esa parte de la plantilla no sólo sirve para eliminar el título, también nos permite personalizarlos porque nada impide que lo que mostremos sea algo diferente de lo que hemos colocado en el campo respectivo cuando lo creamos:
Editar esa parte de la plantilla no sólo sirve para eliminar el título, también nos permite personalizarlos porque nada impide que lo que mostremos sea algo diferente de lo que hemos colocado en el campo respectivo cuando lo creamos:
<b:widget id='HTML6' locked='false' title='el COSO sin titulo' type='HTML'>
.......
<h2 class='title'>
cualquier <span>TITULO</span>
</h2>
Tabla de caracteres Unicode (continuación) |
Más caracteres estarfalarios que pueden usarse en una página web.
| ☀ | ☀ | ☁ | ☁ | ☂ | ☂ | ☃ | ☃ |
| ☄ | ☄ | ★ | ★ | ☆ | ☆ | ☇ | ☇ |
| ☈ | ☈ | ☉ | ☉ | ☊ | ☊ | ☋ | ☋ |
| ☌ | ☌ | ☍ | ☍ | ☎ | ☎ | ☏ | ☏ |
| ☐ | ☐ | ☑ | ☑ | ☒ | ☒ | ☓ | ☓ |
| ☚ | ☚ | ☛ | ☛ | ☜ | ☜ | ☝ | ☝ |
| ☞ | ☞ | ☟ | ☟ | ☠ | ☠ | ☡ | ☡ |
| ☢ | ☢ | ☣ | ☣ | ☤ | ☤ | ☥ | ☥ |
| ☦ | ☦ | ☧ | ☧ | ☨ | ☨ | ☩ | ☩ |
| ☪ | ☪ | ☫ | ☫ | ☬ | ☬ | ☭ | ☭ |
| ☮ | ☮ | ☯ | ☯ | ☰ | ☰ | ☱ | ☱ |
| ☲ | ☲ | ☳ | ☳ | ☴ | ☴ | ☵ | ☵ |
| ☶ | ☶ | ☷ | ☷ | ☸ | ☸ | ☹ | ☹ |
| ☺ | ☺ | ☻ | ☻ | ☼ | ☼ | ☽ | ☽ |
| ☾ | ☾ | ☿ | ☿ | ♀ | ♀ | ♁ | ♁ |
| ♂ | ♂ | ♃ | ♃ | ♄ | ♄ | ♅ | ♅ |
| ♆ | ♆ | ♇ | ♇ | ♈ | ♈ | ♉ | ♉ |
| ♊ | ♊ | ♋ | ♋ | ♌ | ♌ | ♍ | ♍ |
| ♎ | ♎ | ♏ | ♏ | ♐ | ♐ | ♑ | ♑ |
| ♒ | ♒ | ♓ | ♓ | ♔ | ♔ | ♕ | ♕ |
| ♖ | ♖ | ♗ | ♗ | ♘ | ♘ | ♙ | ♙ |
| ♚ | ♚ | ♛ | ♛ | ♜ | ♜ | ♝ | ♝ |
| ♞ | ♞ | ♟ | ♟ | ♠ | ♠ | ♡ | ♡ |
| ♢ | ♢ | ♣ | ♣ | ♤ | ♤ | ♥ | ♥ |
| ♦ | ♦ | ♧ | ♧ | ♨ | ♨ | ♩ | ♩ |
| ♪ | ♪ | ♫ | ♫ | ♬ | ♬ | ♭ | ♭ |
| ♮ | ♮ | ♯ | ♯ | ♰ | ♰ | ♱ | ♱ |
| ✐ | ✐ | ✑ | ✑ | ✒ | ✒ | ✓ | ✓ |
| ✔ | ✔ | ✕ | ✕ | ✖ | ✖ | ✗ | ✗ |
| ✘ | ✘ | ✙ | ✙ | ✚ | ✚ | ✛ | ✛ |
| ✜ | ✜ | ✝ | ✝ | ✞ | ✞ | ✟ | ✟ |
| ✠ | ✠ | ✡ | ✡ | ✢ | ✢ | ✣ | ✣ |
| ✤ | ✤ | ✥ | ✥ | ✦ | ✦ | ✧ | ✧ |
| ❤ | ❤ | ✩ | ✩ | ✪ | ✪ | ✫ | ✫ |
| ✬ | ✬ | ✭ | ✭ | ✮ | ✮ | ✯ | ✯ | ✰ | ✰ | ✱ | ✱ | ✲ | ✲ | ✳ | ✳ | ✴ | ✴ | ✵ | ✵ | ✶ | ✶ | ✷ | ✷ | ✸ | ✸ | ✹ | ✹ | ✺ | ✺ | ✻ | ✻ | ✼ | ✼ | ✽ | ✽ | ✾ | ✾ | ✿ | ✿ | ❀ | ❀ | ❁ | ❁ | ❂ | ❂ | ❃ | ❃ | ❄ | ❄ | ❅ | ❅ | ❆ | ❆ | ❇ | ❇ | ❈ | ❈ | ❉ | ❉ | ❊ | ❊ | ❋ | ❋ |
| ❍ | ❍ | ❏ | ❏ | ❐ | ❐ | ❑ | ❑ |
| ❒ | ❒ | ❖ | ❖ | ❘ | ❘ | ❙ | ❙ |
| ❚ | ❚ | ❛ | ❛ | ❜ | ❜ | ❝ | ❝ |
| ❞ | ❞ | ❡ | ❡ | ❢ | ❢ | ❣ | ❣ |
| ❥ | ❥ | ❦ | ❦ | ❧ | ❧ | ✁ | ✁ |
| ✂ | ✂ | ✃ | ✃ | ✄ | ✄ | ✆ | ✆ |
| ✇ | ✇ | ✈ | ✈ | ✉ | ✉ | ✌ | ✌ |
| ✍ | ✍ | ✎ | ✎ | ✏ | ✏ |
REFERENCIAS:Tabla de caracteres Unicode
overflow: Cuando las cosas se desbordan |
La propiedad overflow no la usamos mucho pero ahí está, en casi todas las plantillas de Blogger y se utiliza para determinar qué ocurriía si un elemento es más grande que el objeto que lo contiene.
Parece chino básico pero es simple; siempre hablamos de contenedores y contendidos; un contenedor es una etiqueta como por ejemplo, un DIV al que podemos dimensionar y adentro, colocamos "algo":
Parece chino básico pero es simple; siempre hablamos de contenedores y contendidos; un contenedor es una etiqueta como por ejemplo, un DIV al que podemos dimensionar y adentro, colocamos "algo":
<div style="border: 4px solid #B00; margin: 10px auto; height: 100px; width: 150px;">
<img src="una_IMAGEN" />
</div>
Como el contenido que ponemos (una imagen de 128 x 82 pixeles), es más pequeño que el contenedor (el DIV tiene 150 x 100 pixeles), todo se ve bien pero, si en el mismo DIV colocamos una imagen más grande (por ejemplo, de 200 x 128 pixeles), como el contenedor no es lo suficientemente grande, el contenido se desbordará:
Esta es una particularidad de las etiquetas de bloque o contenedores, se adaptan automáticamente al tamaño del contenido entonces, uno podría pensar que no hace falta dimensionarlas y es cierto pero, muchas veces debemos hacerlo ya que ciertas cosas deben tener anchos fijos. Por ejemplo, los rectángulos que conforman nuestra plantilla (el área de entradas, la sidebar, etc) tienen una cierta dimensión que debemos preservar:
Y si en uno de esos contendores, colocamos algo "demasiado grande", nuestro blog colapsará:
Es por eso que en las plantillas vemos cosas como estas:
#main-wrapper {
.......
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
.......
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}La propiedad overflow le indica al navegador que debe hacer cuando ocurren estos desbordameintos y tiene cuatro valores posibles:
visible si el elemento es grande, no se corta sino que aparecen barras de desplazamientos (es el valor por defecto excepto en las etiquetas BODY y TEXTAREA que por defecto tienen el valor auto
scroll se fuerza a que se muestren barras de desplazamiento aunque el contenido sea menor que el contenedor
hidden todo lo que excede es cortado
auto deja que el navegador decida si las barras de desplazamiento son o no son necesarias
visible si el elemento es grande, no se corta sino que aparecen barras de desplazamientos (es el valor por defecto excepto en las etiquetas BODY y TEXTAREA que por defecto tienen el valor auto
scroll se fuerza a que se muestren barras de desplazamiento aunque el contenido sea menor que el contenedor
hidden todo lo que excede es cortado
auto deja que el navegador decida si las barras de desplazamiento son o no son necesarias
Eventualmente, también puede usarse overflow-x o overflow-y que hacen lo mismo pero sólo sobre uno de los ejes, o el horizontal o el vertical.
Esta propiedad es la que nos permite, por ejemplo, crear listas largas en pequeños espacios
Esta propiedad es la que nos permite, por ejemplo, crear listas largas en pequeños espacios
| Blanco Marrón Azul Amarillo Verde Gris Celeste Rosa |
Siempre es bueno tener definida esta propiedad en todos los contenedores cuyo ancho deseamos controlar pero, siempre es demasaido tiempo y a veces, en ciertas condiciones, esto nos impide hacer determinadas cosas. Por ejemplo, una alternativa interesante que solemos ver en ciertos sitios es que algunos sectores se muestran en alguna clase de etiqueta con barras de scroll pero, cuando colocamos el puntero del ratón encima, el contenedor se expande avanzando hacia la derecha y se superpone a la sidebar para facilitar su lectura.
Podemos hacerlo sólo con CSS si es que eliminamos esa propiedad que restringe el ancho; sino, ocurrirá algo así:
Podemos hacerlo sólo con CSS si es que eliminamos esa propiedad que restringe el ancho; sino, ocurrirá algo así:
Vivamus ut eros gravida augue suscipit fermentum in et enim? Pellentesque porttitor; nisiet.
También suele hacerse con alguna librería como jQuery pero si buscamos algo simple no hace falta nada de eso, basta usar algún script que quite esa propiedad temporalmente y luego la restaure.
Este es un ejemplo donde se permuta el ancho del contenedor cada vez que hacemos click:
Este es un ejemplo donde se permuta el ancho del contenedor cada vez que hacemos click:
Vivamus ut eros gravida augue suscipit fermentum in et enim? Pellentesque porttitor; niset.
<script>
function demoExpandir(cual) {
var objdemo, estado;
objdemo = document.getElementById(cual);
maindemo = document.getElementById('main-wrapper');
estado = objdemo.style.overflowX;
if(estado=='visible') {
objdemo.style.width = '500px';
objdemo.style.overflowX = 'scroll';
maindemo.style.overflow = 'hidden';
} else {
objdemo.style.width = '865px';
objdemo.style.overflowX = 'visible';
maindemo.style.overflow = 'visible';
}
}
</script>
<style>
#demo {
background-color: #FFF;
border: 1px solid #999;
color: #000;
display: block;
font-size: 20px;
overflow-y: auto;
padding: 15px;
position: relative;
white-space: pre;
width: 500px;
z-index: 100;
}
</style>
<div id="demo" onclick="demoExpandir();"> ....... el contenido ....... </div>
Reel: Un script que ... vaya uno a saber |
Lo más probable es que esto no sirva absolutamente para nada pero no importa, como logré que funcione, es suficiente para ponerlo. Además, es una curiosidad divertida.
Reel es un plugin para JQuery que, dada una imagen, puede mostrar una secuencia animada similar a la que podría mostrarse con otro tipo de lenguajes. Por supuesto, no se trata de otra cosa que una simulación y hacer algo así es más que excesivo ya que necesitamos crear la imagen gigante que luego será mostrada en partes, sea esta un panorama de 360º o una rotación que es el ejemplo que incluyo en esta entrada: una imagen "pesadita" de 1656 x 756, ideal para los que se preocupan por las velocidades.
No pienso explicarlo simplemente porque no tiene mucho sentido pero, si alguien quiere experimentar, puede descargar el demo completo desde la página del autor donde estan los scripts y todos los ejemplos disponibles.
¿Cómo funciona? Simplemente moviendo el ratón dentro de la imagen o utilizando la rueda de desplazamiento si tenemos una:
Reel es un plugin para JQuery que, dada una imagen, puede mostrar una secuencia animada similar a la que podría mostrarse con otro tipo de lenguajes. Por supuesto, no se trata de otra cosa que una simulación y hacer algo así es más que excesivo ya que necesitamos crear la imagen gigante que luego será mostrada en partes, sea esta un panorama de 360º o una rotación que es el ejemplo que incluyo en esta entrada: una imagen "pesadita" de 1656 x 756, ideal para los que se preocupan por las velocidades.
No pienso explicarlo simplemente porque no tiene mucho sentido pero, si alguien quiere experimentar, puede descargar el demo completo desde la página del autor donde estan los scripts y todos los ejemplos disponibles.
¿Cómo funciona? Simplemente moviendo el ratón dentro de la imagen o utilizando la rueda de desplazamiento si tenemos una:
PACIENCIA QUE LA IMAGEN PUEDE TARDAR
String avoider deluxe |
Humor y comida |
 |  |
| Eggbert Casanova by Rerinha | Suicide OREO by Rerinha |
 |  |
| Vampire egg by partyeskimo | The Cola wars by caycowa |
 |  |
| OMG by Ytse80 | You’re toast by cake-monster |
Click para ver las imágenes.
REFERENCIAS:designzzz.com
Iconos sociales sólo con CSS |
Este es otro experimento de Nicolas Gallagher. Se trata de crear íconos a diferentes redes sociales pero, usando sólo CSS.
La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.
El HTML es una lista común:
La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.
El HTML es una lista común:
<ul id="typo"> <li id="Trss"><a href="javascript:void(0);" title="Suscribirse via RSS ">RSS</a></li> <li id="Ttwitter"><a href="javascript:void(0);" title="Compartir en Twitter">Twitter</a></li> <li id="Tfacebook"><a href="javascript:void(0);" title="Compartir en Facebook">Facebook</a></li> </ul>
Y ahora, las definciones. Primero que nada, las generales:
ul#typo {
font: 0.875em/1 Arial, sans-serif;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#typo li {
float: left;
height: 66px;
margin: 20px 20px 0 0;
width:66px;
}
ul#typo li a {
border: 1px solid transparent;
display: block;
height: 64px;
overflow: hidden;
line-height: 64px;
text-decoration: none;
width: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul#typo li a:hover, ul#typo li a:focus, ul#typo li a:active {
border-color: #000;
opacity: 0.8;
}La parte sofisticada es la creación de cada uno de esos íconos y aquí hay tres ejemplos.
#Tfacebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4);
}
#Ttwitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#76DDF8;
background:#daf6f7;
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
background:linear-gradient(top, #dbf7f8, #88e1e6);
}
#Trss a {
position:relative;
width:60px;
padding:0 2px;
border-color:#ea6635;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#e36443;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
background:-moz-linear-gradient(top, #f19242, #e36443);
background:linear-gradient(top, #f19242, #e36443);
}
#Trss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#Trss a:after {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:22px;
height:22px;
border-style:double;
border-width:24px 24px 0 0;
border-color:#fff;
-moz-border-radius:0 50px 0 0;
-webkit-border-radius:0 50px 0 0;
border-radius:0 50px 0 0;
}
Cargar scripts de manera dinámica |
Pese a que este artículo de El MicoX fue publicado hace ya varios años, no deja de ser muy interesante y una técnica útil. Se trata de cargar archivos de JavaScript de manera condicional, es decir, sólo cuando nosotros queremos y, de esta manera, aliviar la carga general de nuestro sitio.
Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.
La teoría de esto es muy simple, sólo requerimos un poco de código:
Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.
La teoría de esto es muy simple, sólo requerimos un poco de código:
<script type='text/javascript'>
//<![CDATA[
function include(archivo) {
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>
Esa función, cargará un archivo de JavaScript de manera dinámica; por ejemplo, si hacemos click en este enlace, estamos tratando de ejecutar algo que no existe:
No pasará nada, tal vez el navegador no dirá que hay un error, es que el código del enlace es este:
<a href="javascript:miFuncion();"> ....... </a>
Y, como se quiere ejecutar algo que no existe, simplemente no pasa nada así que ahora, cargaremos el script con la función. En este ejemplo, usando otro enlace:
<a href="javascript:include('URL_archivo');"> ....... </a>Probamos:
¿Habrá pasado algo?
Intentemos ejecutar la función con el mismo enlace anterior:
Intentemos ejecutar la función con el mismo enlace anterior:
Tres packs y 510 íconos |
Tomorrow again: Otra galería experimental |
Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ 
que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.
Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador. En este ZIP
he colocado el script adaptado, el CSS, las imágenes de ejemplo y un archivo TXT con el código HTML para ser insertardo en un post donde sólo basta cambiar los enlaces.
¿Qué se necesita hacer?
Primero que nada el script que, podemos agregarlo directamente en una entrada:
que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador. En este ZIP
he colocado el script adaptado, el CSS, las imágenes de ejemplo y un archivo TXT con el código HTML para ser insertardo en un post donde sólo basta cambiar los enlaces.¿Qué se necesita hacer?
Primero que nada el script que, podemos agregarlo directamente en una entrada:
<script type='text/javascript' src='URL_tomorrowagain.js' ><script>O podemos agregarlo a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>Luego, el CSS con estas definiciones mínimas:
<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}
/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx;
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}
/* la imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.
Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:
Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:
<div id="screen"> <img class="panel" src="URL_imagen1"> <img class="panel" src="URL_imagen2"> <!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar --> </div> <img id="imagenREAL" src="URL_imagen1" /> <script type="text/javascript"> window.onload= function(){panel.init();} </script>
Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.
El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.
El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.
Este es un ejemplo: 330x490 | 490x320
El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.
El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.
Este es un ejemplo: 330x490 | 490x320
