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.

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.

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:

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 != &quot;&quot;'>
  <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:

<b:widget id='HTML6' locked='false' title='el COSO sin titulo' type='HTML'>
.......
<h2 class='title'>
  cualquier <span>TITULO</span>
</h2>

Más caracteres estarfalarios que pueden usarse en una página web.

☀	☀	☁	☁	☂	☂	☃	☃
☄	☄	★	★	☆	☆	☇	☇
☈	☈	☉	☉	☊	☊	☋	☋
☌	☌	☍	☍	☎	☎	☏	☏
☐	☐	☑	☑	☒	☒	☓	☓
☚	☚	☛	☛	☜	☜	☝	☝
☞	☞	☟	☟	☠	☠	☡	☡
☢	☢	☣	☣	☤	☤	☥	☥
☦	☦	☧	☧	☨	☨	☩	☩
☪	☪	☫	☫	☬	☬	☭	☭
☮	☮	☯	☯	☰	☰	☱	☱
☲	☲	☳	☳	☴	☴	☵	☵
☶	☶	☷	☷	☸	☸	☹	☹
☺	☺	☻	☻	☼	☼	☽	☽
☾	☾	☿	☿	♀	♀	♁	♁
♂	♂	♃	♃	♄	♄	♅	♅
♆	♆	♇	♇	♈	♈	♉	♉
♊	♊	♋	♋	♌	♌	♍	♍
♎	♎	♏	♏	♐	♐	♑	♑
♒	♒	♓	♓	♔	♔	♕	♕
♖	♖	♗	♗	♘	♘	♙	♙
♚	♚	♛	♛	♜	♜	♝	♝
♞	♞	♟	♟	♠	♠	♡	♡
♢	♢	♣	♣	♤	♤	♥	♥
♦	♦	♧	♧	♨	♨	♩	♩
♪	♪	♫	♫	♬	♬	♭	♭
♮	♮	♯	♯	♰	♰	♱	♱
✐	✐	✑	✑	✒	✒	✓	✓
✔	✔	✕	✕	✖	✖	✗	✗
✘	✘	✙	✙	✚	✚	✛	✛
✜	✜	✝	✝	✞	✞	✟	✟
✠	✠	✡	✡	✢	✢	✣	✣
✤	✤	✥	✥	✦	✦	✧	✧
❤	❤	✩	✩	✪	✪	✫	✫
✬	✬	✭	✭	✮	✮	✯	✯
✰	✰	✱	✱	✲	✲	✳	✳
✴	✴	✵	✵	✶	✶	✷	✷
✸	✸	✹	✹	✺	✺	✻	✻
✼	✼	✽	✽	✾	✾	✿	✿
❀	❀	❁	❁	❂	❂	❃	❃
❄	❄	❅	❅	❆	❆	❇	❇
❈	❈	❉	❉	❊	❊	❋	❋
❍	❍	❏	❏	❐	❐	❑	❑
❒	❒	❖	❖	❘	❘	❙	❙
❚	❚	❛	❛	❜	❜	❝	❝
❞	❞	❡	❡	❢	❢	❣	❣
❥	❥	❦	❦	❧	❧	✁	✁
✂	✂	✃	✃	✄	✄	✆	✆
✇	✇	✈	✈	✉	✉	✌	✌
✍	✍	✎	✎	✏	✏

REFERENCIAS:Tabla de caracteres Unicode

Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.

leer artículo actualizado

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:

PACIENCIA QUE LA IMAGEN PUEDE TARDAR

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

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:

<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.

• RSS
• Twitter
• Facebook

#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;
}