martes, 31 de mayo de 2011

Vagabundia

Vagabundia


Sumando sombras

Posted: 30 May 2011 08:00 PM PDT

Las sombras que se pueden agregar con la propiedad text-shadow en los navegadores que la soporta, tienen la particularidad de ser aditivas es decir, se pueden ir acumulando sobre el mismo texto, separando las distintas definiciones con una coma.

Así que, empezamos con un texto normal:
<style> h1.demo3d {     color: #FFF;     font-family: Helvetica,Arial,sans-serif;     font-size: 100px;     text-align: center; } </style>

3D Text


y le ponemos una sombra:
text-shadow: 0 10px 0 #ABC;

3D Text


o le ponemos otra sombra:
text-shadow: 1px 13px 0 #456;

3D Text


también podemos ponerle las dos al mismo tiempo:
text-shadow: 0 10px 0 #ABC, 1px 13px 0 #456;

3D Text


donde, el orden es importante ya que si lo invertimos,el resultado será otro:
text-shadow: 1px 13px 0 #456, 0 10px 0 #ABC;

3D Text


y una más con el mismo color del fondo para serpara las dos últimas:
text-shadow: 0 5px 0 #101921, 0 10px 0 #ABC, 1px 13px 0 #456;

3D Text


¿Cuántas se pueden poner? Nadie lo sabe.

lunes, 30 de mayo de 2011

Vagabundia

Vagabundia


Los parámetros del botón de Twitter

Posted: 29 May 2011 08:00 PM PDT

Hace unos días, Jabba tenía una inquietud respecto al botón de Twitter. El tema era si es posible agregar ese botón en el home del blog, sin condicionarlo para que sólo se vea en las páginas individuales y que funcione, enviando la información correcta, es decir, el título de la entrada y su URL, aún cuando en el home no haya sólo una entrada sino varias.

"... en el caso de Twitter, que yo presuponía que sería más sencillo por ser simplemente un enlace con un script no hay manera. Se comparte sin problemas si estás en la página individual del post pero desde la portada del blog o desde cualquier otra página que no sea la url del post individual siempre comparte la url principal.

El código base que proporcionan en la web de Twitter es éste:"
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="elblogdejabba" data-lang="es">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Y ese mismo código modificado siguiendo las indicaciones que leo en la entrada de compartir entradas y en el anterior comentario me queda tal que así:
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='elblogdejabba' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
Así, a simple vista, parece lógico y lo es pero no funciona. Y no funciona porque Twitter nos dice que si queremos poner opciones diferentes, los atributos a usar también son diferentes.

Si queremos agregar el ya no tan nuevo botón de Twitter y vamos a la página de opciones del servicio, allí veremos varias de ellas, divididas en cuatro pestañas:

Botón es el tipo y es el que se muestra en el atributo data-count="valor" y el valor a usar puede ser vertical, horizontal o none

Texto del Tweet es una de las claves ya que nos da dos posibilidades, usar el título de la página en que esta el botón o escribir cualquier otro; en una página individual no hay problema pero en otras será importante definirlo y se agregará otro atributo llamado data-text="XXXXXXX" donde XXXXXXX es el texto que hayamos escrito y es justamente el que usaremos luego para poner el título de nuestra entrada.

URL es similar a lo anterior, por defecto se muestra la dirección donde está el botón pero, podemos poner cualquier otra y en ese caso, se agrega otro atributo más llamado data-url="XXXXXXX" donde XXXXXXX es la dirección que hayamos escrito y ese es el atributo a usar en este caso.

Idioma no tiene problemas, se detecta automáticamente y se agrega el atributo data-lang="es".

Como opción extra, podemos agregar hasta dos cuentas de Twitter para que los usuarios sigan después de compartir el contenido; la primera usa el atributo data-via="nombre" y la segunda el atributo data-related="nombre y descripción".

Así que definidas todas esas cosas, el código que nos dan dice esto:
<a href="http://twitter.com/share" class="twitter-share-button" data-url="XXXXXXX" data-text="XXXXXXX" data-count="horizontal" data-via="vagabundia" data-related="elblogdejabba:El Blog de Jabba" data-lang="es">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Es verdad que hay más detalles que pueden ser personalizados via API pero, por ahora nos quedamos acá y ahora, reemplazar esas XXXXXXX por los datos que nos da Blogger así que:

data-text="XXXXXXX" se transformará en:
expr:data-text='&quot;&quot; + data:post.title + &quot;&quot;'

y data-url="XXXXXXX" se transformará en:
expr:data-url='&quot;&quot; + data:post.url + &quot;&quot;'

El código quedará de este modo, algo estrafalario pero funcional:
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='vagabundia' data-related='elblogdejabba:El Blog de Jabba' expr:data-url='&quot;&quot; + data:post.url + &quot;&quot;' expr:data-text='&quot;&quot; + data:post.title + &quot;&quot;' href='http://twitter.com/share' target='_blank'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
Al que le agrego target='_blank' para que no se abra en la misma ventana de la entrada y, tal cual está, agregado al post-footer de cualquier plantilla, puede ser utilizado tanto en entradas individuales, en el home o cualquier otra página de Blogger.


domingo, 29 de mayo de 2011

Vagabundia

Vagabundia


Blogger: Fin de semana con problemas varios

Posted: 28 May 2011 08:36 PM PDT

Esta entrada sólo es para calmar lo nervios de quienes están sufriendo otro de esos fines de semana con Blogger creando problemas aquí y allá.

En estos dias, no hay uno sino varios síntomas diversos, algunos de ellos confirmados por Blogger Issues y otros reportados en distintos foros y en varios sitios de ayuda

Problemas para salir de nuestra cuenta: Dicas Blogger, The Real Blogger Status
Gadget de Seguidores: dicasblogger, The Real Blogger Status

Además, se habla de problemas con los comentarios, problemas para entrar en el mismo Blogger, etc etc.

Obviamente, nada podemos hacer salvo esperar y de eso se trata esta entrada, evitar que nos ataque la locura de buscar errores en nuestros sitios, imaginar hackers, virus o cualquier otra paranoia.

Esta vez, la culpa no es por algo que nosotros hayamos hecho así que, si somos algunos de los afectados, hay que relajarse y en todo caso, abrir la puerta y salir al mundo que sigue allí, un poco más convulsionado que Blogger pero sigue allí.

sábado, 28 de mayo de 2011

Vagabundia

Vagabundia


ImgToCSS: OK pero el CSS brilla por su ausencia

Posted: 27 May 2011 08:00 PM PDT

imgtocss dice que hace una cosa pero no la hace o si la hace pero no cómo dice hacerla.

Uno diría que si se llama ImgToCSS converirá una imagen en alguna clase de reglas de estilo y claro, si uno es curioso, se preguntará cómo puede ser eso y mira el resultado que parece perfecto:

imagen originalimagen convertida

Es más, uno sube su imagen que no debe ser muy grande y el resultado es perfecto pero ¿dónde está el CSS?


No hay nada, ni una miseria propeidad, todo se limita a ser una gigantesca tabla donde cada celda equivale a un pixel de color que usa el atributo bgcolor así que el resultado final es un cógigo ENORME y poco pràctico para usarlo en emails tal como se promociona. para que tengan una idea, la segunda de ellas pesa casi 400 KB.

De todos modos, funciona como curiosidad pero prefiero text-image.com.

REFERENCIAS:webintenta.com

viernes, 27 de mayo de 2011

Vagabundia

Vagabundia


Dos generadores de fondos

Posted: 26 May 2011 08:02 PM PDT

Estos son do generadores de gráficos online que no tienen demsiadas opciones y por lo tanto, son muy simples de usar. Se ruega encarecidamente no criticar mis obras de arte.


BGmaker nos sirve para crear fondos. Elegimos el tamaño y luego vamos dibujando cómo podamos.

El resultado puede ser guardado como imagen PNG así que luego basta subir esa imagen y colocarla en una etiqueta usando la propiedad background:
<div style="background: transparent url(mi_imagen) repeat left top;"> ....... </div>


GradientMaker es similar excepto que nos permite generar gradientes sencillas seleccionando su tamaño, el color inicial y el color final ya sean estas horizontales o verticales. El resultado lo podemos guardar en formato PNG, GIF o JPG.


Correo Vaishnava

Archivo del blog