SimplePie: Demo by unijimpe

unijimpe
Desarrollo Web, SEO, Adsense

Insertar Videos de Youtube en WordPress con WP Youtube Player
Fecha: 1 September 2010, 10:21 pm

WP Youtube Player es un plugin de WordPress que te permitirá insertar videos de youtube de manera sencilla utilizando el quicktag [tube][/tube], además de ello tiene un panel de configuración para personalizar los parámetros para mostrar el reproductor.

Características

WP Youtube Player te facilita la publicación de vídeos en tu blog, para ello puedes:

Publicar vídeos utilizando una línea de código.
Configurar las dimensiones y el tipo de player a utilizar.
Configurar el método para embeber el player, incluyendo mediante iframe
Permite configurar los parámetros del player.
Genera el código necesario para compatibilidad con los Feeds.
Genera el código necesario para compatibilidad con iPhone.

Como utilizar WP Youtube Player

Para publicar los vídeos de Youtube debes utilizar los quicktags [tube][/tube] y puedes hacerlo mediante las siguientes opciones:

Utilizando el URL del vídeo:

[tube]http://www.youtube.com/watch?v=AFVlJAi3Cso[/tube]

Utilizando el URL para embeber el vídeo:

[tube]http://www.youtube.com/v/AFVlJAi3Cso[/tube]

Utilizando el Identificador del vídeo:

[tube]AFVlJAi3Cso[/tube]

Como pueden ver existen tres opciones para incluir los vídeos, elige la que mas prefieras. Cualquiera de estas opciones da el siguiente resultado.

Con este plugin publicar vídeos de Youtube es sencillo y además podemos controlar la apariencia del reproductor con el panel de configuración que tiene incluido.

© 2006 - 2010 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Cached Commons: Librerías Javascript Online para tus Proyectos
Fecha: 31 August 2010, 9:46 pm

Cached Commons es una colección de librerías Javascript que han sido cacheadas, optimizadas y alojadas en el CDN de Github las cuales podemos incluir directamente en nuestros proyectos. Están disponibles librerías como: jQuery, SWFObject, SWFAddress, SyntaxHighlighter, jqPlot entre otros.

Cada librería incluida ha sido minificada, luego se la envía al usuario utilizando compresión GZIP y además con los headers necesarios para ser guardados en el cache del usuario. Esto significa que han sido correctamente optimizados para cargarse rápidamente y por consiguiente acelerar la carga de nuestra web.

Como utilizar Cached Commons

Para utilizar cualquier librería alojada en Cached Commons solo debes copiar la ruta de la librería e incluirla directamente en tu proyecto.

Por ejemplo si deseamos utilizar la librería SWFObject podemos hacerlo mediante:

<script type="text/javascript" src="http://cachedcommons.org/javascripts/swf/swfobject-2.2.js"></script>

También podemos utilizar la versión minificada:

<script type="text/javascript" src="http://cachedcommons.org/javascripts/swf/swfobject-2.2-min.js"></script>

Este proyecto es semejante al Google Ajax Libraries API el cual también aloja a las principales librerías javascript, pero tiene la ventaja que aloja a muchas mas librerías y plugins más populares. Si aún así no encuentras la librería que necesitas puedes solicitar qu la agreguen al directorio.

Prevenir el clickjacking con Javascript
Fecha: 22 August 2010, 2:20 pm

Prevenir el clickjacking consiste en evitar que nuestra página sea cargada dentro de otra mediante un frame o iframe, esto para prevenir el robo de contenido así como evitar el uso de nuestra página para forzar a los visitantes a realizar clicks maliciosos. Entonces el objetivo es evitar que nuestra página pueda ser cargada dentro de otra utilizando frames o iframes.

Que es Clickjacking?

El clickjacking consiste en cargar una página dentro de otra utilizando un iframe y sobre ella mostrar otra página oculta con transparencia, de forma tal que si hacemos click en un botón para buscar estaremos indirectamente haciendo click sobre otra página para propósitos maliciosos.

Prevenir Clickjacking - Primer Método

La idea básica para prevenir que nuestra página sea cargada dentro de otra con frames o iframes es verificar la propiedad location del frame actual es igual al del frame superior. Si no son iguales estas propiedades es síntoma que nuestra página se esta cargando dentro de otra por lo tanto redireccionamos al url de nuestra web.

<script type="text/javascript">
if (top.location != location) top.location = self.location;
</script>

El método anterior por lo general es suficiente en la mayoría de los casos, pero existen técnicas para saltarse esta verificación, por ejemplo utilizar iframes anidados o generar errores de Javascript con lo cual se detiene cualquier verificación con javascript adicional. En el artículo Busting frame busting: a study of clickjacking vulnerabilities at popular sites se explica las múltiples formas de evitar el Frame Busting.

Prevenir Clickjacking - Segundo Método

Una forma sencilla de prevenir el uso de nuestras páginas en otros sitios es primero ocultar todo el contenido de nuestra web utilizando estilos. Luego de ello verificamos si la propiedad location del frame actual y el superior son iguales en cuyo caso volvemos visible todo el contenido de nuestro web en caso contrario redireccionamos a nuestra url.

Primero colocamos el siguiente código en el header para ocultar el contenido.

<style type="text/css"> body { display:none; } </style>

Al final del contenido colocamos el siguiente código, el cual verifica si el frame actual es igual al frame superior para volver visible el contenido.

<script type="text/javascript">
if (self == top) {
document.getElementsByTagName("body")[0].style.display = 'block';
} else {
top.location = self.location;
}
</script>

De esta forma si el atacante de alguna forma genera un error de javascript o utiliza frames anidados solo se mostrará una página en blanco, una validación sencilla pero muy eficiente para evitar que nuestra web sea utilizada por terceros.

Mas Información

Obtener Descuentos para Comprar por Internet
Fecha: 16 August 2010, 9:46 pm

Si tienes la necesidad de hacer compras por internet, te presento un tip sencillo para obtener descuentos y ahorrar dinero. Se trata de RetailMeNot, una comunidad donde encontrarás múltiples cupones de descuento compartidos por los usuarios. Encontrarás cupones de todo tipo y para muchos sitios web.

Obtener Descuentos en GoDaddy

GoDaddy es uno de los mas grandes proveedores de Dominios, entonces si vas a comprar dominios puedes realizar la búsqueda de cupones y luego ver el listado de todos los cupones disponibles para GoDaddy. En mi caso yo escojo el descuento de dominios a $US 7.49 cuando normalmente el precio del dominio es de $11.44.

Luego cuando compramos el dominio, en el carrito de compras podemos ingresar el cupón de descuento con en la siguiente imagen con lo cual nos ahorramos unos dolares de manera sencilla.

Como pueden ver es sencillo ahorrar dinero al momento de comprar en internet, todo es cuestión de conocer los lugares donde encontrar los cupones de descuento adecuados.

Compartir Cupones

Los cupones listados en RetailMeNot son enviados por los usuarios, así que si te llega algún cupón y no lo vas a utilizar es bueno que lo compartas en esta página para de esta forma beneficiarnos todos con los descuentos.

Insertar Tweet Button en WordPress con WP-TweetButton
Fecha: 15 August 2010, 10:54 pm

WP-TweetButton es un plugin para WordPress que te permitirá incluir el recientemente lanzado Tweet Button en todos los posts y paginas de nuestro blog. Cuenta con múltiples parámetros de configuración para personalizar adecuadamente sin necesidad de editar tu template.

Instalación Automática

WP-TweetButton esta disponible en el directorio oficial de plugins de WordPress. Puedes instalarlo desde el panel de Plugins de tu blog puedes buscar: wp-tweetbutton-plus y lo instalas automáticamente.

Instalación Manual

La instalación es muy sencilla, primero descarga la ultima versión del plugin y descomprime el archivo, encontrarás una carpeta llamada wp-tweetbutton-plus la cual debes colocarla en la carpeta de plugins de WordPress (Típicamente /wp-content/plugins/). En el panel de administración de WordPress desde el menú Plugins puedes activar WP-TweetButtin.

Configuración

En el panel Settings encontrarás una nueva opción llamada WP-TweetButton donde puedes configurar el plugin. Las opciones disponibles son:

Button Style es el estilo del botón a utilizar.
Language define el lenguaje del botón.
Your Twitter Account es tu nombre de usuario de twitter.
Related Twitter Account nombre de usuario de Twitter que deseas recomendar.
Tweet text el texto aparecerá en el tweet.
Display define en que lugares de tu blog se mostrará en botón.
Position permite incluir automáticamente la ubicación del botón en el contenido.

Utilización Automática

Por defecto el plugin inserta automáticamente el botón en el contenido de nuestro blog, para determinar cuando y como se mostrará el plugin podemos utilizar los parámetros de configuración:

Display podemos definir en que contenido mostrar los botones (Todos los posts, todas las páginas, en la página principal).
Position permite definir si vamos a mostrar el botón al inicio del contenido, al final del contenido o no mostrarlo.

Utilización Manual

Si deseamos mostrar el Tweet Button en un lugar arbitrario tenemos dos opciones. Para mostrarlo en el contenido del post podemos hacerlo con el siguiente código:

Ahora si quieres personalizar aun mas la ubicación de los botones puedes utilizar la función wp_tweetbutton para incluirlo en tu template.

<?php wp_tweetbutton(); ?>

Como puedes ver es sencillo de utilizar y fácil de configurar. Si tienen preguntas y sugerencias para mejorar este plugin puedes dejarnos sus comentarios, trataremos de atender a la mayor parte de sugerencias con la intención de mejorar el plugin.

Utilizar el botón oficial de Twitter
Fecha: 14 August 2010, 9:34 pm

En esto días Twitter ha lanzado su botón oficial para compartir páginas de forma sencilla y con opciones interesantes en clara competencia a servicios como retweet.com y tweetmeme.com. El nuevo botón se llama Tweet Button y con dos líneas de código puedes tener el botón para compartir tu contenido en Twitter y con la opción de mostrar la cantidad de tweets hechas a tu contenido.

Utilizar Tweet Button (Básico)

Utilizar Tweet Button, es muy sencillo, solo tienes que agregar dos líneas de código a tu pagina y esto se encargará de tomar el titulo y url de tu página para mostrarlo en la campo para compartir en Twitter.

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Con el cual obtenemos el siguiente resultado:

Tweet

Utilizar Tweet Button (Avanzado)

Adicionalmente se pueden personalizar varios parámetros para controlar el contenido del tweet que se enviará, para ello podemos agregar variables al enlace del código anterior. Los parámetros disponibles son:

count indica como se mostrará la cantida de tweets (horizontal, vertical, none).
lang idioma en el cual se mostrará el botón (en, fr, de, es, ja).
url el ruta de la página que deseas compartir.
text texto que se mostrará en el tweet.
via nombre del usuario de Twitter que se usará como autor.
related cuenta de twitter que se recomendará luego de hacer el tweet.

Entonces si elegimos mostrar el botón con la cantidad de tweets en la parte superior del botón y que en el texto se mencione nuestra cuenta de Twitter, tendríamos:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share?count=vertical&via=unijimpe" class="twitter-share-button">Tweet</a>

Con lo que obtendríamos el siguiente resultado:

Tweet

Para mayor información acerca de estos parámetros pueden leer la documentación oficial para desarrolladores en Tweet Button | Developer documentation for the Sharing API.

Utilizar Generador de Tweet Button

Twitter ha creado un generados de botones, el cual te guía para configurar los diferentes parámetros del botón, al final de este proceso te mostrará el código para copiarlo y pegarlo en tu web.

Mas Información

Técnicas para Ofuscar Email
Fecha: 9 August 2010, 12:13 am

El SPAM es uno de los problemas por la que todo usuario a perdido mucho tiempo, siempre nos envían correos no solicitados con publicidad. Una de las técnicas utilizadas por los Spammers para obtener dirección email es crear robots que van por todas las páginas leyendo y guardando las direcciones email publicadas. Basado en este método para obtener nuestras direcciones tenemos una regla para evitar el spam.

Nunca publicar directamente direcciones email en una página web.

Veamos algunas técnicas para mostrar direcciones de correo en nuestras páginas sin exponernos a un ataque de spam a estas cuentas de email.

Utilizando CSS: Método #1

Una técnica sencilla pero que da buenos resultados es escribir la dirección email al revés y luego con estilos mostrarlo en la dirección correcta utilizando la propiedad direction, por ejemplo:

<span style="direction:rtl; unicode-bidi:bidi-override;">moc.oinimod@otcatnoc</span>

Entonces creamos una función que se encargue de utilizar este método para mostrar los emails en nuestra web:

function hideEmail($mail) {
$mail = strrev($mail);
return "<span style=\"direction:rtl; unicode-bidi:bidi-override;\">".$mail."</span>";
}

Utilizando CSS: Método #2

Otró método consiste en agregarle un texto oculto dentro de la dirección email, de esta forma la dirección se visualizará correctamente pero si un spammer copia el email esta contendrá un dirección inválida. Este texto se oculta con estilos utilizando la propiedad display.

contacto@<span style="display:none">null</span>dominio.com

Luego creamos la función en PHP para ofuscar los emails:

function hideEmail($mail) {
$temp = explode("@", $mail);
return $temp[0]."@<span style=\"display:none;\">null</span>".$temp[1];
}

Utilizando codificación ROT13

Este método consiste en codificar la dirección email con el algoritmo ROT13 que consiste en trasladar 13 posiciones las letras del alfabeto, dejando los caracteres no-alfabéticos sin modificar. Para ello escribimos el email codificado y lo mostramos correctamente con una función Javascript str_rot13.

<script type="text/javascript">
document.write(("pbagnpgb@qbzvavb.pbz").replace(/[a-z]/gi, function(s){
return String.fromCharCode(s.charCodeAt(0)+(s.toLowerCase()<'n'?13:-13));
}));
</script>

Luego escribimos una función en PHP que se encargue de codificar la dirección email y que imprima el código javascript para decodificarlo:

function hideEmail($mail) {
$temp = "<script type=\"text/javascript\">\n";
$temp.= "document.write((\"".str_rot13($mail)."\").replace(/[a-z]/gi, function(s){ \n";
$temp.= " return String.fromCharCode(s.charCodeAt(0)+(s.toLowerCase()<'n'?13:-13));\n";
$temp.= "}));\n";
$temp.= "</script>";
return $temp;
}

Puedes escoger cualquiera de estar técnicas y utilizarlo rápidamente para mostrar tu dirección de email sin temor a ataques de SPAM. Puedes descargar el código fuente con estas funciones asi como el ejemplo de uso para que puedan hacer sus pruebas.

Mas Información

Prevenir ataques XSS con PHP
Fecha: 4 August 2010, 11:35 pm

Una ataque XSS (Cross Site Scripting) consiste en que el atacante ingresa código HTML o javascript en los formularios y si estos no esta filtrados correctamente mostrarán este código en nuestra página alterando el contenido original. Por ejemplo en un formulario de contacto un usuario podría colocar el siguiente código:

<script>window.location = "http://www.google.com";</script>

Si nuestro formulario no valida correctamente estos datos ingresados, entonces al momento de mostrar este comentario en nuestra web automáticamente se hará un redirección a la ruta que defina el atacante. Basado en esto podríamos proponer un regla básica para cualquier desarrollo:

Toda información ingresada por el usuario siempre debe ser verificada y limpiada antes de utilizarla

Prevenir XSS con PHP (Básico)

Lo primero para prevenir estos ataques es limpiar cualquier etiqueta html ingresada por el usuario, para ello podemos utilizar la función strip_tags, la cual elimina etiquetas html. Si aplicamos esta función al texto ingresado en el ejemplo anterior tendríamos:

echo strip_tags('<script>window.location = "http://www.google.com";</script>');
// resultado: window.location = "http://www.google.com";

Esto es una forma básica de prevenir un ataque XSS, pero existen versiones mas elaboradas de códigos de ataque que pueden no ser limpiadas por esta función. Otro problema de esta solución es que limpia todas las etiquetas html, pero en algunas ocasiones existe la necesidad de permitir algunas etiquetas (Por ejemplo: p, strong, em) para lo cual necesitamos una solución mas elaborada.

Prevenir XSS con PHP Input Filter

PHP Input Filter, es una clase escrita en PHP que permite filtrar código malicioso ingresado en los formularios para prevenir ataques XSS de manera sencilla, tiene la cualidad de no limpiar determinadas etiquetas o atributos.

Para utilizar esta clase, descargamos los archivos desde el web oficial e incluimos el archivo class.inputfilter.php al inicio de nuestro PHP. Luego se debe crear una instancia de la clase InputFilter, entonces podemos filtrar los datos con el método process de la siguiente forma:

require_once("class.inputfilter.php");
$ifilter = new InputFilter();
$nombre = $ifilter->process($_POST['nombre']);

También se pueden filtrar todos los campos enviados por el formulario, por ejemplo si el formulario es enviado por el método POST, podríamos utilizar el siguiente código para filtrar todos los campos para luego utilizarlos sin problemas.

require_once("class.inputfilter.php");
$ifilter = new InputFilter();
$_POST = $ifilter->process($_POST);

Permitir etiquetas con PHP Input Filter

Para evitar que algunas etiquetas sean filtradas podemos pasarlas como un array como parámetro al momento de crear la instancia de la clase. Por ejemplo para permitir las etiquetas strong yem y tendríamos:

require_once("class.inputfilter.php");
$ifilter = new InputFilter(array('em', 'strong'));
$_POST = $ifilter->process($_POST);

Permitir atributos con PHP Input Filter

También existe la posibilidad de desear que algunos atributos sean permitidos en el ingreso de los datos por parte del usuario. Por ejemplo podríamos permitir que los visitantes puedan ingresar enlaces para lo cual tendríamos que permitir el atributo href que contiene la ruta de destino.

require_once("class.inputfilter.php");
$ifilter = new InputFilter(array('a'), array('href'));
$comentario = $ifilter->process($_POST['comentario']);

Mas Información

Convertir monedas con PHP y Google Finance
Fecha: 29 June 2010, 11:38 pm

Google Finance es un servicio para temas relacionados a finanzas (Cotizaciones financieras, datos económicos de empresas y noticias financieras), entre las muchas herramientas que ofrece dispone de un conversor de monedas para la mayoría de monedas del mundo. Aprovecharemos este servicio para crear un conversor de monedas personalizado.

Obteniendo la Información

Lo primero es obtener los datos, para ello utilizaremos un URL que Google Finance utiliza para mostrar el tipo de cambio.

http://www.google.com/ig/calculator?hl=en&q=100USD%3D%3FPEN

Donde se tienen los siguiente parámetros:

100 es el monto que deseamos convertir.
USD es la moneda que deseamos convertir (En este caso USD).
PEN es la moneda a la que deseamos convertir.

El cual devuelve como resultado los datos en formato JSON:

{lhs: "1 U.S. dollar",rhs: "2.8239972 Peruvian nuevos soles",error: "",icc: true}

Para una lista completa de los códigos de monedas disponibles pueden visitar Currency Codes.

Implementando Conversor de Monedas Básico

Como los datos son devueltos en formato JSON, utilizaremos la librería JSON.php de la cual hemos comentado en JSON con PHP. Entonces crearemos un script para mostrar la equivalencia entre el Dolares Americanos (USD) y Nuevos Soles (PEN).

Primero incluimos la librería JSON.php luego utilizamos la función file_get_contents para obtener los datos desde el URL donde hemos puesto los códigos de las monedas a convertir. Después decodificamos el contenido.

require_once("JSON.php");
$path = "http://www.google.com/ig/calculator?hl=en&q=1USD%3D%3FPEN";
$data = file_get_contents($path);
$json = new Services_JSON();
$obj = $json->decode($data);

Una vez obtenido los valores solo queda imprimir los resultados en nuestra página.

<h2>Currency Converter</h2>
<strong>From:</strong> <?php echo $obj->lhs; ?><br />
<strong>To:</strong> <?php echo $obj->rhs; ?>

Pueden ver el resultado de este ejemplo en http://samples.unijimpe.net/currency/.

Conversor de Monedas Personalizado

Ahora si deseamos que el usuario seleccione que moneda desea convertir, se puede agregar dos selectores: uno para seleccionar la moneda de origen al cual llamaremos from y otro para definir la moneda de destino llamado to. Luego solo nos queda procesar los datos del formulario y mostrar los resultados.

if ($_POST['from'] != "" && $_POST['to'] != "") {
$from = $_POST['from'];
$to = $_POST['to'];
$path = "http://www.google.com/ig/calculator?hl=en&q=1".$from."=?".$to;
$data = file_get_contents($path);
$json = new Services_JSON();
$obj = $json->decode($data);
echo "<strong>1 ".$from." = ".$obj->rhs."</strong>";
}

A nuestro segundo ejemplo le agregamos una hoja de estilos y ordenamos nuestro formulario para obtener un buen resultado. Pueden ver el resultado del ejemplo en http://samples.unijimpe.net/currency/custom.php.

Como pueden ver basado en nuestro conocimiento de JSON con PHP podemos utilizar un servicio para integrarlo a nuestra de manera rápida. Les dejo los archivos fuente del ejemplo para que lo puedan estudiar y hacer sus pruebas.

Utilizar Eventos en Javascript
Fecha: 27 June 2010, 4:07 pm

Un evento es un proceso que se realiza en respuesta a determinada acción realizada por el usuario, por ejemplo si el usuario presiona un botón, entonces en respuesta al evento 'onclick' que representa el presionar el botón realizamos una acción. Para poder interactuar con los eventos se utilizan los Detectores de Eventos lo cuales detectan los eventos y permiten llamar a funciones en respuesta al evento.

Cuales son los Detectores de Eventos Disponibles?

Existen eventos para los diferentes elementos de la página, los mas importantes son los siguientes:

Eventos de Formularios

onblur - el campo pierde el foco.
onchange - el elemento que tiene el foco ha cambiado su valor.
onfocus - cuando el campo recibe el foco.
onreset - sucede cuando el usuario ha reseteado el formulario.
onselect - cuando un texto ha sido seleccionado.
onsubmit - el usuario ha seleccionado enviar el formulario.

Eventos de Enlaces

onclick - Cuando se hace click en el elemento seleccionado.
onmouseout - Cuando el mouse se mueve encima del enlace o botón.
onmouseover - Cuando el mouse se mueve fuera del enlace o botón.

Eventos del Teclado

onkeydown El usuario presiona una tecla.
onkeypress El usuario mantiene presionada una tecla.
onkeyup El usuario suelta la tecla.

Eventos en Ventanas

onblur - Sucede cuando la ventana o frame pierde el foco.
onerror - Cuando ocurre un error.
onfocus - La ventana o frame recibe el foco.
onload - Si el objeto se ha cargado completamente.
onunload - Cuando la venta se cierra.
onresize - Cuando se redimensiona la ventana o frame.

Nota
Si bien es cierto HTML es case-insensitive es decir no distingue entre altas y bajas, para lograr que los documentos html validen es necesario redactar los detectores de eventos en minúsculas.

Como se utilizan los Detectores de Eventos?

Los detectores de eventos se puedes asociar directamente a cada elemento como si fuera una propiedad adicional, además debemos colocar que acción realizar cuando se detecte el evento.

Primera Forma

Se puede hacer que ejecute una serie de acciones en Javacript:

<a href="link.html" onclick="alert('Bienvenido!!');">Entrar</a>

Segunda Forma

También podemos hacer que llame a una función definida por el usuario:

<a href="link.html" onclick="welcome();">Entrar</a>

En este caso estamos llamando a una función llamada welcome la cual debemos definir:

<script type="text/javascript">
function welcome() {
alert('Welcome!!!');
}
</script>

En el ejemplo solo hemos mostrado un mensaje de alerta dando la bienvenida al usuario. Obviamente podríamos realizar múltiples acciones como validación de formulario, formateo de datos o llamar a datos AJAX.

Tercera Forma

Otra forma es asignar los eventos como métodos de los elementos Javascript. Para ello necesitamos asignar identificadores a los elementos que deseamos.

<a href="link.html" id="bt">Entrar</a>

Luego podemos agregar los eventos como propiedades del elemento Javascript (Hay que tener en cuenta que en esta forma los nombres de los detectores de eventos deben estar todos en minúsculas.

<script type="text/javascript">
document.getElementById("bt").onclick = function () {
alert("Welcome!!!");
}
</script>

Cuarta Forma

Otra forma de crear los detectores de eventos es haciendo uso de listeners, para ello se utiliza la función addEventListener de Javascript, el cual recibe como parámetros el nombre del evento (Sin en prefijo on) y la función a ejecutar. Para nuestro ejemplo se tendría:

<script type="text/javascript">
document.getElementById("bt").addEventListener('click', welcome, false);
function welcome() {
alert("Welcome!!!");
}
</script>

Como se puede ver utilizamos el evento onclick pero sin el prefijo lo que significa utilizar la palabra 'click'.

Con estas dos ultimas formas de asignar los detectores de eventos podemos separar el código HTML del Javascript con lo cual es mas sencillo dar el mantenimiento a nuestro código. Incluso la asignación de los eventos lo podríamos hacer en un archivo externo.

Pueden ver los ejemplos de este post en http://samples.unijimpe.net/eventos-javascript.html.

Mas Información