0

Dos animaciones de Pixar



REFERENCIAS:Poca Tinta

0

Iconos sociales

Bubble Text Social Icons
Incluye 29 íconos de 256x256 en formato PNG creados por Frogx3.descargar
Mini Social Icon Set
Incluye 30 íconos de 16×16 en formato PNG.descargar
Cheers
Incluye 12 íconos de 128×128 en formato PNG creados por Helen Gkizi.descargar

0

Windows Live SkyDrive Explorer

Aunque Windows Live SkyDrive nos jugó una mala pasada y no nos deja usarlo para cierto tipo de archivos que necesitamos ejecutar desde el blog, aún así, sigue siendo una buena alternativa para alojarlos porque es sencillo de manejar y útil cuando compartimos información que debe descargarse.

Sus 25 gigas de espacio, la posibilidad de establecer restricciones al acceso y el hecho de aceptar casi cualquier formato, lo siguen teniendo entre mis sitios de uso corriente.

En todo caso, una molestia en su manejo es que ciertas funciones como subir archivos son más cómodas con el ActiveX que sólo funciona en Internet Explorer pero, eso tiene remedio con un software muy interesante llamado Windows Live SkyDrive Explorer que, por lo que he visto, funciona muy bien y ahorra tiempo.

Lo instalamos en Windows descargándolo gratuitamente y desde ese momento, podremos acceder a cualquiera de nuestras cuentas de SkyDrive desde el Explorador de Archivos, sea este el de Windows o cualquier otro que utilicemos. Aparecerá como carpeta virtual dentro de Mi PC y, de alguna manera, funciona como un FTP.


Click en el ícono y accedemos de manera tradicional, con nuestra ID y contraseña. a partir de ese momento, estaremos conectados y sincronizados con el servicio hasta que apaguemos la PC o cerremos la sesión con el botón Logout que se adosa a la barra de herramientas del explorador.

Se nos mostrará como árbol de directorios y se mostrarán los archivos alojados, su tamaño, tipo, fecha de creación, etc. Podremos crear carpetas y subcarpetas,  renombrar, copiar, pegar, eliminar, tanto archivos individuales como estructuras enteras del mismo modo en que lo haríamos en nuestra PC, arrastrando y soltando o bien usando los menues.



REFERENCIAS:ghacks.net

0

Imágenes extra grandes en Blogger

Leyendo el título cualquiera diría que Blogger está dando pasos agigantados, y es cierto.Pero un día da dos pasos adelante y al otro retrocede tres.
Cuando añadió el formulario incrustado nos sorprendió gratamente a todos, se veía la intención de mejorar las carencias tan necesarias. Paciencia, nos decíamos, ya se dieron cuenta que estamos aquí.
Lo último ha sido algo nuevo, algo inútil y algo que no funciona.
Podemos ver lo nuevo accediendo desde Blogger in draft en el editor de entradas hay una nueva opción cuando subimos una imagen, antes el tamaño mayor era de 400. Ahora, podemos añadir imágenes "Extra grandes" de 640 ojito con ese tamaño que no quiere decir que todos podamos mostrar ese tamaño de imágenes.
¿Por qué? porque si nuestro espacio para las entradas (main-wrapper) es menor de 640px las imágenes tomarán el espacio que les falta y desplazarán aquello que tengan más cercano, la sidebar o el propio contenido de las entradas.


Lo inutil es este aviso que podemos ver accediendo también por Blogger in draft si, ya sé que por ese medio tenemos acceso a las cosas que están en fase experimental ¿sólo lo vemos los usuarios? porque lleva allí más de una semana y nadie hace nada al respecto.
Consultado con J.Miur me aclara que está relacionado con la la Ubicación.
Plantilla de diseño/Entradas del blog/Editar/Ubicación
Pero no se cansen que aunque no esté marcado y eliminen la parte correspondiente a la plantilla seguirá saliendo.



Mucha euforia, bombo y platillo, no dábamos crédito al avatar de comentarios, y en cierto modo no es extraño porque no hay que dar crédito a algo que ha sido un visto y no visto.
El "estamos solucionado el problema" dura ya dos semanas ¿o quizás más?


Ese icono rojo con la ramita blanca soy yo

0

Iconos sociales y Halloween

0

Cambiar una palabra por un logo o una imagen

Una de las posibilidade del JavaScript es que nuestro blog puede tener ciertas características y luego, algún tipo de código las puede cambiar muy rápidamente y sin que esto sea evidente para los visitantes. Un ejemplo típico de esto son los emoticones en los comentarios; alguien escribe cierta combinación de caracteres como :) y una función se encarga de buscarlos y cambiarlos por una imagen sonrisa

Con el mismo criterio y de manera simple, también es posible modificar otro tipo de textos, en realidad, cualquiera.

Supongamos que nos gustaría que en las entradas, cada vez que hacemos referencia a nuestro sitio, en lugar de aparecer un enlace como texto, quisiéramos que se muestre una imagen, alguna clase de logo. Es sencillo de hacer, escribimos el código en la entrada y listo:

...etiam rhoncus iaculis magna ac accumsan sed at dui et eros mollis hendrerit ...
<a href="mi_URL" target="_blank"><img src="mi_LOGO" /></a>
No hay problema pero ... hay que escribirlo ... eso mismo lo podríamos hacer de manera automática y evitarnos el trabajo de recordar el código; para eso, sólo necesitamos de una función cuya estructura elemental sería algo así:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
bodyText.innerHTML = elTexto;
}
//]]>
</script>
¿Qué hará eso? Una vez que las entradas son mostradas, buscará dentro de ellas una PALABRA y la reemplazará por un código HTML que deberemos establecer nosotros.

¿Qué palabra? Cualquiera pero es recomendable que usemos una plabra inventada, algo que podamos recorar con facilidad y que no tenga otro posible uso. Por ejemplo, podría usar MILOGO y hacer que en lugar de verse esa palabra, se viera una imagen que fuera un enlace a mi sitio:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/MILOGO/g,'<a href="http://misitio.blogspot.com" target="_blank"><img src="URL_imagen" style="vertical-align:text-bottom;" /></a>');
bodyText.innerHTML = elTexto;
}
//]]>
</script>
Coloco entonces eso antes de </head> y me faltaría hacer que se ejecutara. Para que esto funcione sin problemas y sin interferencias, lo que debemos hacer es identificar las entradas de manera precisa, dándoles un ID exclusivo. Expandiendo los artilugios, buscaremos algo así:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Y reemplazaremos lo indicado por esto:
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>reemplazaLogos(&#39;<data:post.id/>&#39;);</script>
¿Podría usarse más de una palabra? Sí, bastaría agregar líneas como esta, una debajo de la otra:
elTexto = elTexto.replace(/OTRAPALABRA/g,'CODIGO_HTML');
En este ejemplo online se lo puede ver en funcionamiento.

0

Otras formas de añadir estilos a las listas

Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.


Estilos CSS antes de ]]></b:skin>

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

En HTML:

<div id="list8">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

0

VideoSurf_ Ampliando la búsqueda de videos

VideoSurf es una extensión para Firefox que amplia los resultados de la búsqueda de videos mostrándolos de manera más que interesante.

Una vez instalada, podremos habilitarla o deshabilitarla para diferentes sitios: Google, Yahoo, Twitter, YouTube y FiendFeed


VideoSurf es un buscador de videos muy potente que además, dispone de un API para desarrolladores y un widget que podemos insertar en cualquier página web.


REFERENCIAS:Lifehacker

0

Deseos de volar



0

META Page-Enter y Page-Exit (sólo en IE)

Esto es un poco "antiguo" y sólo funciona en Internet Explorer pero, ya que lo preguntan, lo contesto aunque no creo que sea algo para recomendar sino un resabio de la guerra entre Microsoft y Netscape, cuando ambos peleaban por controlar el mercado de los navegadores.

Sin embargo, no deja de ser sorprendente el uso de los filtros de IE y es una pena que no se hayan estandarizado.

Se trata de las transiciones entre páginas, es decir, la página a la que entramos no se muestra de modo normal sino que aparece con alguna clase de efecto visual (más información).

El código que se utiliza se incluye en una etiqueta META en el HEAD de la página y hay 24 efectos disponibles que pueden verse sólo cuando entramos a una página o cuando salimos de ella:
<meta http-equiv='Page-Enter' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >

<meta http-equiv='Page-Exit' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >
donde el VALOR de Duration es el tiempo expresado en milisegundos (normalmente es 1) y el de Transition es un número de orden que indica el tipo de transición (0 a 23).
  • Transition=0 Box in
  • Transition=1 Box out
  • Transition=2 Circle in
  • Transition=3 Circle out
  • Transition=4 Wipe up
  • Transition=5 Wipe down
  • Transition=6 Wipe right
  • Transition=7 Wipe left
  • Transition=8 Vertical blinds
  • Transition=9 Horizontal blinds
  • Transition=10 Chess across
  • Transition=11 Chess down
  • Transition=12 Random dissolve
  • Transition=13 Split vertical in
  • Transition=14 Split vertical out
  • Transition=15 Split horizontal in
  • Transition=16 Split horizontal out
  • Transition=17 Strips left down
  • Transition=18 Strips left up
  • Transition=19 Strips right down
  • Transition=20 Strips right up
  • Transition=21 Random bars horizontal
  • Transition=22 Random bars vertical
  • Transition=23 Random
Hay un efecto especial llamado Blend que tiene un parámetro específico:
<meta http-equiv='Page-Enter' content='blendTrans(Duration=VALOR)' / >
El resultado de los efectos puede verse en este demo pero sólo en Internet Explorer:

TRANSICIONES
xx - Blend in
00 - Box in
01 - Box out
02 - Circle in
03 - Circle out
04 - Wipe up
05 - Wipe down
06 - Wipe right
07 - Wipe left
08 - Vertical blinds
09 - Horizontal blinds
10 - Chess across
11 - Chess down
12 - Random dissolve
13 - Split vertical in
14 - Split vertical out
15 - Split horizontal in
16 - Split horizontal out
17 - Strips left down
18 - Strips left up
19 - Strips right down
20 - Strips right up
21 - Random bars horizontal
22 - Random bars vertical
23 - Random

0

Bave Circus




REFERENCIA:Punto geek

0

Incrustar múltiples videos de YouTube

Claro que podemos incrustar múltiples videos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta. También es cierto que podemos recurrir a algún truco que resuelva esto o usar alguna ventana modal.

Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.

Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:
<div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'425','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});

function cargarVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script>
Todo eso en una sola línea si se trata de una entrada de Blogger.

ID_VIDEO_1 es el ID del primer video, el que aparecerá por defecto
425 y 344 son el ancho y alto del video
contenedorYT es el ID del DIV donde se mostrará el video
reproductorYT es el ID del reproductor en si mismo

Debajo, pondremos nuestra lista de videos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:
<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
<a href="javascript:cargarVideo('ID_VIDEO_2');"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a>
.......
<a href="javascript:cargarVideo('ID_VIDEO_N');"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a>
</div>
Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el video fuera este:
http://www.youtube.com/watch?v=uKkbn-pdCMA
nuestro enlace sería así:
<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>
El resultado, será un video incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.

You need Flash player 8+ and JavaScript enabled to view this video.

0

Iconos Twitter para Halloween

Ya quedan pocos días para Halloween, así que en DesingBlog han pensado que sería una buena idea para aquellos que gusten de decorar su blog con este motivo, el disponer de un icono "terrorífico" para el enlace de Twitter.

En DesingBlog nos la presentan como una "espeluznante" calabaza, aunque a decir verdad, a mi me parece de los más simpática.

Están disponibles en un archivo PNG con tres tamaños diferentes.

Twitter Halloween

0

Kerixep

Click en la imagen para jugar.

0

Favicon en la sidebar

k_nelita me ha pedido que explique la forma de añadir un sistema de publicidad creado con esas pequeñas imágenes de 16x16 que conocemos por favicon.

Los favicones están incluidos en una tabla.

<div class="side-favicon ">
<div class="favicon">
<table fcellpadding="0" align="center">
<tbody>
<tr>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
<tr>
</tr>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
<td>
<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>
<td>
</td></tr>
</tbody>
</table>
</div></div>

La vamos a incluir en un gadget de HTML y las filas de la tabla dependerán de la cantidad de líneas de favicones que deseamos añadir.
En la tabla del ejemplo añadí dos líneas para tres favicones en cada línea, pero podemos aumentar la cantidad de favicones dependiendo del ancho de la sidebar.
El código para cada favicón lo añadimos entre <td> y <td>
Cuando los favicones cubren una línea pasaremos a la línea siguiente, las etiquetas <tr> y </tr> serán las encargadas de producir el salto de línea..

El favicon es un enlace que nos llevará a la url que le indiquemos.

<a href="ur-pagina" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Le añadimos target="_blank" para que abra en ventana nueva, también le podemos añadir la etiqueta rel="nofollow" para que Google no tenga en cuenta esos enlaces, eso ya dependerá de cada uno.

<a href="ur-pagina" target="_blank" rel="nofollow" title="título">
<img border="0" alt="texto-alternativo" src="url-imagen"/></a>

Guardamos los cambios y añadimos los estilos, nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos:

.favicon {
padding:2px;
text-align:center;
}

.favicon a img {
background-color: #fff;
border:1px solid #ccc;
padding:2px 2px;width:16px
}

div.side-favicon {
background:#FFFF;
border:1px dashed #C0C0C0;
margin:0 0 20px;
padding:4px 4px;
}

Con "background" podemos cambiar el color de fondo, el tipo de borde y color en "border"


0

Packs íconos de noobr.net

NovoDangos
Incluye 9 íconos en formato PNG.descargar
Blacy
Incluye 50 íconos en formato PNGdescargar
Yolks
Incluye 40 íconos de 50×50 en formato PNG.descargar

REFERENCIAS:noobr.net/

0

Navbar transparente Blogger

A través de un comentario me entero por Fran administrador de Bailadicción que hay dos nuevas opciones para mostrar la barra de Blogger (Navbar) que yo aún no había visto: "Claro transparente" y "Oscuro transparente".

Navbar

Dependiendo del color de fondo del blog no en todos los casos el resultado es demasiado aceptable por lo que he comprobado...

Podéis ver como queda el "Claro transparente" sobre fondo blanco en los blogs de Fran.

0

Brevísima crónica del colapso de Blogger

En horas de mi madrugada (vaya uno a saber la hora de otros lugares de este planeta) Blogger colapsó.

Bah, eso no sorprende a nadie pero, no fue un colpasito de esos comunes y corrientes, fue un colpsón monumental, se murió todo, absolutamente todo, era como si lo hubieran desenchufado o, si, como me decía Nico, alguien hubiera derramado el vino sobre las consolas. El kaput fue completo, total, de antología, no sólo no podía accederse al escritorio sino que tampoco podía verse ningún blog en ninguna parte del mundo.

Mirando la búsqueda de Twitter era increible ver como aparecían quejas, preguntas e insultos a razón de 30 mensajes por segundo en todos los idiomas:


Al rato (bastante rápido si nos guiamos por otros antecedentes similares), Blogger informaba (también en Twitter, claro, si no podía hacerlo en otro lado) que: "estaba investigando el apagón (SIC) ocurrido en blogger.com y of course daba gracias por la paciencia (de santos) y afirmaban que estaban trabajando para resolver el problema".

Pasó media hora y la humanidad se unía en un solo grito: What the heck is wrong with Blogger? ...

Pasaron 45 minutos ... pasó una hora ... pasaron dos horas y por fin Blogger dijo: "We have fully restored Blogger functionality. Thanks for your patience."

Si usted no tuvo la suerte de participar en este Rocky-Blogger-Horror-Show, espero que mi crónica de los hechos haya sido lo suficientemente descriptiva. Si no lo fue, no importa, no se perdió de nada, solo de una serie de números de error ininteligibles pero, eso lo resolvemos rápido. Elija el que más le guste:

bX-9d2teg
bX-goamst
bX-5eka1d

En fin, me uno a lo que decía un usuario: La canción favorita de Blogger es "I'm Down" así que, ahora que funciona, me permito ofrecérsela de regalo.


You telling lies thinking I can't see, you can't cry 'cos you're laughing at me
I'm down ... oh yes I'm down, down, down, down, down, down, down, down, down, down ...

0

Crear una encuesta con Google Docs

Así cómo Google Docs nos permite usar los feeds de los documentos creados para utilizarlos como bases de datos mínimas, también tiene opciones más simples a las que podemos acceder para generar utilidades de distinto tipo. Una de ellas son los formularios:


El ejemplo más sencillo es un formulario con una encuesta.

Es cierto que Blogger dispone de un gadget para encuestas pero, es bastante limitado. Por el contrario, los formualrios de Google Docs tienen muchísimas opciones: textos simples, múltiple choice, listas, escalas, etc; y además, todas ellas pueden combinarse y generar encuestas entrelazadas entre si de varias páginas de longitud.


No hay mucho que explicar al respecto, basta crear un formulario nuevo y jugar un rato con las diferentes alternativas ya que el sistema es bastante amigable y podemos editarlo tantas veces como se nos ocurra.

Si bien el resultado por defecto es un texto plano, hay muchas plantillas que pueden seleccionarse que resuelven el tema gráfico aunque sea parcialmente.

Una vez que ya hemos creado nuestra encuesta, basta guardarla y listo. En el menú More Actions veremos una opción Embed que nos dará el código para insertarla en una página web y que, como todo código HTML, podemos personalizar un poco:
<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx" width="760" height="583" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Obviamente, el tamaño suele ser excesivo así que es mejor cambiarlo para adaparlo a nuestro siito pero, también podemos usar alguna ventana modal para mostrarlas ya que se trata de una página web. En este caso, usando LightWindow:
<a class="lightwindow" params="lightwindow_width=670,lightwindow_height=560" href="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx">ENLACE</a>
Este es un ejemplo concreto .. aunque un poco tonto, claro verguenza


Aún más interesante es que los resultados son accesibles de dos formas a través del menú See Responses, podemos verlos como un gráfico (Sumary) y , como el formulario creado es una hoja de cálculo, podemos acceder a ella y ver la información recogida.


Aunque, como esos resultados también son una página web, podemos mostrarlos del mismo modo que la encuesta en si misma:


Desde el menú Share de la hoja de cálculo, podemos seleccionar Set Notifications Rules para que nos envien un mail cada vez que alguien responde, compartirla, etc (más información).