W3 Tricks - Tu Sitio de Trucos Web

14.11.10

Toca Piano con tu Teclado o Mouse

Si te gusta la música te va a emocionar este gadget un pequeño piano de una octava que puedes agregar a tu web o blog tiene el espacio justo para ser agregado en una barra lateral y así tus usuarios pueden divertirse haciendo música , para tocarlo usa el Mouse o si quieres manejar el teclado puedes pulsar todas las teclas de abajo ordenadas como un piano: z,s,x,d,c,v,g,b,h,n,j,m

Pruébalo:

Mini Pianogreat free widgetsWidgetboxMore info

Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('6a1a98e7-760b-41bd-85c6-26ab7fd0a354');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/mini-piano">Mini Piano</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

12.11.10

Simón Dice

El juego de Colores Simon Dice ya esta en widget para que puedas agregarlo a tu página web o Blog muy facilmente.

Pruébalo:

Simon made by Neave Games

Código:
<embed src="http://www.neave.com/games/get_game.php?swf=simon" name="neaveSimon" width="400" height="320" quality="high" pluginspage="http://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" allowscriptaccess="always"></embed><p><a href="http://www.neave.com/games/">Simon made by Neave Games</a></p>

En el juego Simon (el aparato) te muestra los colores que debes pulsar en el mismo orden, en cada ronda se aumenta de a un color por eso es muy bueno para la memoria.

Disfrútalo.

10.11.10

Traduce tu página web en un Instante

Si quieres un gadget que Traduzca toda tu página web en un instante llegaste al lugar adecuado, aquí esta un complemento para tu web o blog realmente útil, el cual usa la tecnología de Google Traslator y con solo un click tu pagina es traducida al instante.

Pruébalo:

Código:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
   pageLanguage: 'es'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Copia este código en cualquier lugar de tu web, puede ser en una barra superior o lateral y así tus usuarios siempre podrán traducir tu web algo muy bueno para acceder a otros mercados mediante la Internet.

9.11.10

A saltar con Frogger

El muy Clásico juego de Froger llego para que lo agregues a tu web creado por Neave, el juego es sencillo, eres una rana y tienes que ir a tu casa, lo malo es que tienes que pasar por una autopista muy congestionada y como si fuera poco pasar un rió saltando de tronco en tronco

Pruébalo:

Frogger made by Neave Games

Código:
<embed allowscriptaccess="always" height="484" name="neaveFrogger" pluginspage="http://get.adobe.com/flashplayer/" quality="high" src="http://www.neave.com/games/get_game.php?swf=frogger" type="application/x-shockwave-flash" width="448"></embed>

Copia este código en la parte de tu web en la que quieras que tus usuarios jueguen a ser Frogger, y listo un juego clásico más esta disponible en tu página.

5.11.10

Ocultar Email del Spam

Si quieres agregar tu Email de contacto en tu web, es importante que no lo agregues directamente en el Html por que los SpammerBots estan buscando direcciones de email mediante palabras claves como "mailto", "hotmail", "gmail" o "*@*.com", una vez almacenen la dirección de tu email la llenaran con miles de correos de publicidad y nadie quiere eso.

Por eso traigo una sencilla solución, mediante Javascript cortar la cadena e imprimirla.

Pruebaló:

Para Contactos comunícate al siguiente Email:

Código:

<script language="JavaScript">
document.write('<a href=mai'+'lto'+':'+'jaac'+'00'+'3'+'@'+'g'+'ma'+'il.'+'com>jaac'+'00'+'3'+'@'+'g'+'m'+'ail.'+'com</a>');
</script>

Importante: en href divide la cadena de tu email cortando las palabras claves "mailto", tu servidor de correo y tu nombre de usuario, tambien recomiendo que separes el @ y el Com del resto, y ya con Javascript concatenas usando 'cadena1'+'cadena2'. y listo, no es 100% efectivo ya que hay bots mas sofisticados pero te ayuda a reducir mucho el spam.

3.11.10

Tetris en tu Web

Si estas buscando el Gadget de Tetris para tu Web, llegaste al lugar indicado, uno de los juegos mas populares del mundo llega a este Blog gracias a Absolutist.com.

Pruébalo:

Código:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="500" height="380">
<param name="movie" value="http://absolutist.com/online/tetris/tetris.swf" />
<embed type="application/x-shockwave-flash" src="http://absolutist.com/online/tetris/tetris.swf"
width="500" height="380"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Copiando este Código en tu web tendrás un Juego Online gratis muy bueno, Disfruta de Tetris y prueba hasta que Nivel llegas.

Mascotas 3: Llego la Navidad con Pingüinos

Vuelvo con Otra mascota de ABowman Especial para la época que se avecina, son unos pingüinos que caminan en el Helado polo norte siguiendo tu Mouse y lo puedes agregar a tu web o blog muy fácilmente solo copiando el código, para que tu pagina se contagie con la Navidad, Claro que si eres un Linux Lover lo podrías dejar todo el año xD.

Pruébalo:

Código:

<object type="application/x-shockwave-flash" style="outline:none;" data="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?" width="300" height="200"><param name="movie" value="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

2.11.10

Botón Me Gusta de Facebook

Facebook es una gran Herramienta para compartir tu pagina web, por eso hace algún tiempo ya hize una entrada sobre como diseñar un Cuadro Me gusta de facebook, ahora voy a indicarles como hacer un Botón, lo cual es un poco diferente ya que no necesita crear una página como el anterior.

Primero ingresa Aquí, como puedes es un asistente muy bueno y fácil de usar, lo mas importante es que puedes ver que no pide "Facebook Page Url" como la Caja de Me Gusta, simplemente pide "Url To Like", En el cual puedes ingresar el Url que Tu desees (No solo Fanpages de Facebook, por lo cual te evitas el paso de crearla), ahora una vez ingreses la Url de tu Página, Blog o Sección del mismo puedes cambiar las opciones que quieras como el color, tamaño y fuente, ahora presiona el Botón "Get Code" y listo copias toda la sección del IFrame y la pegas en el lugar de tu web que mas desees.

Puedes agregar Like Buttons ilimitados si quieres para cada una de las Url de tu pagina.

Pruébalo:

Código:

Y ya con eso tienes un Botón de "Me Gusta" para tu Url.

1.11.10

Nombre del Sistema Operativo

Como ya he mostrado antes se puede obtener mucha información del Cliente o Usuario de tu Página web o Blog como: Ip y Nombre del Navegador, entonces por que no obtener el nombre del SO, con JavaScript es muy fácil:

Pruébalo:

Código:

<script language="JavaScript">
var OSName="Sistema Desconocido";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Su Sistema Operativo es: '+OSName);
</script>

Y listo, ya puedes mostrar el sistema operativo en tu pagina web.