W3 Tricks - Tu Sitio de Trucos Web

30.11.10

Recibir Donaciones vía Paypal

Paypal.com, para los que no la conocen, es una empresa que te permite hacer transacciones con Dinero Real en un entorno Virtual Seguro, no es la única en su especie pero si la mas reconocida (creo), la puedes usar para Vender (ya que tiene muchas utilidades como Carrito de Compras) y Comprar (ya que varias otras páginas reciben dinero de PayPal por ejemplo Ebay.com), pero hoy nos vamos a concentrar en el Botón de Donaciones, Este botón es un widget que al presionarlo te envia un formulario para enviar una Donación mediante otra cuenta PayPal o una tarjeta de Crédito, si recibes donaciones puedes usar este dinero en tiendas electronicas o puedes solicitar que te giren un cheque y asi el dinero virtual se convierte en real (en algunos paises)

Primero, si no tienes cuenta PayPal, debes crear una dando click Aquí, entras y presionas "Registrarse Hoy Mismo", después ingresas tu País e Idioma y presionas "Abrir una Cuenta", y ahí te aparece un formulario el cual debes llenar con tus datos, el correo electrónico que uses es muy importante ya que es básicamente tu Nombre de Usuario (o Nickname) y lo usas para todas las transacciones.

Segundo, Una vez abres tu cuenta ya podemos crear el Botón de Donaciones da click Aquí para ir a esta ventana:

Como puedes ver en esta ventana se puede seleccionar ademas de Donaciones, Carro de Compras, Compra de Artículo, Regalos y Suscripciones, pero por ahora solo nos dedicaremos a Donativos, ademas en este formulario debes llenar lo que te pide en el primer paso como Nombre, Divisa y Tipo de Contribución, los otros 2 pasos son solo para Clientes Pro.

Una Vez hecho esto presionas "Crear Botón" y aparece el Código del Widget de Donativos, este al igual que cualquier Widget o Gadget lo puedes agregar en cualquier parte de tu web, y lleva a un formulario en el cual se hace el donativo

Pruébalo:

Código:

<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----

">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/es_XC/i/scr/pixel.gif" width="1" height="1">

</form>

Este es mi código, para agregar dinero a mi Cuenta de Paypal, para tu propia cuenta debes hacer todos los pasos que te mencione antes y así generar tu propio Código, claro que si quieres hacer un donativo bienvenido sea :D

28.11.10

Jardín Zen

Otro gadget relajante de la pagina LocalHealers.com un Jardín Zen que puedes agregar a tu página web o blog para que "la energía virtual fluya", si le das click a los peces Koi saltaran para ti.

Pruébalo:

Magical Waterfall and Fish Pondgreat 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('b19e56c7-89d7-4b31-8fa2-7269eea4c2a7');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/magical-waterfall-and-fish-pond-by-buddhahands">Magical Waterfall and Fish Pond</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>

Agrega este código en tu página para tener este jardín virtual en tu web o blog.

26.11.10

Cambiar puntero de Mouse con JavaScript

La forma más fácil de cambiar el tipo de cursor es agregar una propiedad style = "cursor: tipo de cursor" dentro de la etiqueta HTML a la cual le desea cambiar el cursor, puede ser en una imagen como <img style = "cursor: crosshair"> u otras etiquetas como <td>, <input>, <div>, etc... , En las siguientes 2 tablas estan los tipos de cursores que puedes usar:

Pruébalo:

auto	crosshair	default	pointer
help	move	text	wait

nw-resize	n-resize	ne-resize
w-resize	hand	e-resize
sw-resize	s-resize	se-resize

Código:

<table border="1" cellpadding="5" cellspacing="1"><tr>
   <td><p style="cursor: auto" >auto</p></td>
   <td><p style="cursor: crosshair">crosshair</p></td>
   <td><p style="cursor: default" >default</p></td>
   <td><p style="cursor: pointer" >pointer</p></td>
  </tr><tr>
   <td><p style="cursor: help" >help</p></td>
   <td><p style="cursor: move" >move</p></td>
   <td><p style="cursor: text" >text</p></td>
   <td><p style="cursor: wait" >wait</p></td>
</tr></table>
<br />
<table border="1" cellpadding="5" cellspacing="1"><tr>
   <td><p style="cursor: nw-resize">nw-resize</p></td>
   <td><p style="cursor: n-resize" >n-resize</p></td>
   <td><p style="cursor: ne-resize">ne-resize</p></td>
  </tr><tr>
   <td><p style="cursor: w-resize" >w-resize</p></td>
   <td><p style="cursor: hand" >hand</p></td>
   <td><p style="cursor: e-resize" >e-resize</p></td>
  </tr><tr>
   <td><p style="cursor: sw-resize">sw-resize</p></td>
   <td><p style="cursor: s-resize" >s-resize</p></td>
   <td><p style="cursor: se-resize">se-resize</p></td>
</tr></table>

Úsalos en tu web para lo que necesites, sirven en todas los navegadores en todas las etiquetas (creo, no los e probado todas).

23.11.10

Acuario Zen

La pagina LocalHealers.com nos trae un Widget un Acuario "Zen", unos pequeños peces virtuales que pueden relajarte.

Pruébalo:

Zen Aquarium Fish Tank - Free!great free widgetsWidgetboxMore info

Código:

Puedes agregar esta Mascota virtual a tu Web o Blog simplemente copiando este código en la parte que desees.

Test de Velocidad

Prueba toda la velocidad que tienes en Internet con este Test portátil de velocidad de Subida y Bajada, este widget de SpeedTest.net es un gran complemento para tu web o blog, el cual es muy fácil de usar solo debes dar Click en "Begin Test" y pasado un minuto tendrás la velocidad del Ancho de Banda de tu Internet.

Muy útil sobretodo si ofreces un servicio de mantenimiento por Internet o para muchos otros tipos de páginas de tecnología.

Prúebalo:

Speed Testgreat free widgetsWidgetboxMore info

Código:

Disfrútalo y prueba tu velocidad cuantas veces quieras, y agregalo a tu web para que tus usuarios también puedan hacerlo.

22.11.10

Acordes y Afinador de Guitarra

Este gadget de Música tiene los acordes principales de Guitarra y un modo afinador que te permite escuchar las notas de las cuerdas para que puedas afinar tu guitarra desde tu web o blog traído desde Guitar2ner

Pruébalo:

Código:

<object id="widget" name="widget" width="354" height="256" type="application/x-shockwave-flash" data="http://www.guitar2ner.com/flash/widget-tuner.swf"><param name="quality" value="high" /><param name="allowFullScreen" value="false" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /><param name="flashvars" value="playerMode=embedded" /></object>

Pégalo en tu web y listo tienes acordes y afinador en un solo Widget, perfecto para una página por ejemplo de música o de lecciones y partituras de guitarra.

20.11.10

Puntuación de 5 Estrellas

Aquí tienes un Widget que te permite agregar una puntuación a tu Web sin suscribirte, sin base de datos solo copiando el código y pegándolo en la parte de tu Web o Blog que tu prefieras, y puedes agregarlo más de una vez por que cada uno tendrá su propio contador por cada Url en el que se encuentre.

Pruébalo:

Five-Star Ratings Controlgreat free widgetsWidgetboxMore info

Código:

Y listo tus usuarios podrán calificar tus temas, imágenes, vídeos etc.. y sin programar ni una sola linea.

19.11.10

Widget de Futbol 3D en tu Web

Un juego de fútbol la verdad muy bueno para tu web o blog, es tridimensional y aunque no tiene gran definición te puede dar mucha diversión con su diversidad de copas, inclusive tiene repeticiones, y apesar de todo no se demora mucho en cargar, diseñado por RadicalPlay.

Para jugar usa las flechas, z y x.

Pruébalo:

Super Web Soccer Gamegreat 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('f3f0004b-c410-46f8-a553-6417464e28e0');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/supersoccer">Super Web Soccer Game</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>

Me parece un juego nostálgico por que me recuerda el Soccer de Family y algo a los primeros Fifa como el 95 o 96, Disfrútalo y has muchos goles.

Horóscopo del Día

iFate nos trae un widget para conocer nuestro destino, contiene todos los Signos Zodiacales y es muy fácil de usar y agregar.

Pruébalo:

tarot y horóscopos

horóscopos del díagreat free widgetsWidgetboxMore info

Código:

<DIV id="ifate_widget" style="max-width:160px;"> <DIV style="text-align:center;color:#333366;font-family:arial;font-size:7pt;"><a style="color:#0000AA" href="http://es.ifate.com"> tarot</a> y <a style="color:#0000AA" href="http://es.ifate.com"> horóscopos</a> </DIV><script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('28399034-0797-44ac-84e4-1d18378cd536');</script></DIV><noscript>Get the <a href="http://www.widgetbox.com/widget/horscopos-del-dia">horóscopos del día</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>

Con este código tendrás acceso a tu horóscopo diario en tu pagina web o blog, solo tienes que copiarlo y pegarlo en la parte que desees.