unijimpe

Convertir monedas con PHP y Google Finance

unijimpe — Wed, 30 Jun 2010 06:38:05 +0000

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.

Currency Converter
From: <?php echo $obj->lhs; ?> />
To: <?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 "1 ".$from." = ".$obj->rhs."";
}

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.

© 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.

Utilizar Eventos en Javascript

unijimpe — Sun, 27 Jun 2010 23:07:28 +0000

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:

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

Segunda Forma

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

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

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

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

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.

href="link.html" id="bt">Entrar

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.

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

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:

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

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

Los mejores Clientes FTP gratuitos

unijimpe — Mon, 21 Jun 2010 04:09:12 +0000

Un cliente de FTP (File Transfer Protocol) es una de las herramientas básicas para cualquier desarrollador web, por que nos permite transferir archivos entre el servidor web y nuestro computador local.

Existen herramientas comerciales como CuteFTP que tiene versiones para Windows y Mac o también FlashFXP que cuenta con versión para Windows solamente. Veamos algunas alternativas gratuitas para gestionar nuestros archivos vía FTP.

FileZilla
FileZilla es un proyecto Open Source y es uno de los mejores clientes gratuitos, que además cuenta con versiones para Windows, Linux y Mac OSX. Cuenta con una amplia comunidad de desarrolladores por lo cual tiene amplio soporte y actualizaciones constantes. FileZilla cuenta con todas las opciones de cualquier cliente comercial y con buen rendimiento.

Clientes para Windows

Coffee Free FTP
Este es un cliente interesante que cuenta con una interfaz muy limpia lo cual facilita el proceso de transferencia de archivos. Coffee Free FTP permite utilizar varios perfiles de usuarios y soporte para subir múltiples archivos de manera sencilla con una vista de los archivos que se tiene en el servidor y en local.

GoFTP
GoFTP es otro cliente de FTP que ofrece mayor velocidad, en su web anuncian que es hasta 314% mas rápido que los otros clientes. Cuenta con un explorador de archivos para facilitar la transferencias de archivos, también permite continuar uploads o downloads de archivos que hayan sido detenidos.

Clientes para Mac

Cyberduck
Cyberduck es uno de los mejores clientes FTP para Mac, ademas de ello permite utilizarlo como cliente para WebDAV, Google Docs y Amazon S3. Ademas de ello se puede integrar con la mayoría de editores de código de Mac.

Classic FTP for Mac
Este cliente esta perfectamente integrado con Mac y permite subir y descargar archivos de manera sencilla con un explorador de archivos integrados. Cuenta con todas las funcionalidades necesarias de un cliente FTP.

Clientes Online

net2ftp
net2ftp es un cliente FTP el cual puedes utilizar desde cualquier navegador sin necesidad de instalar ningún programa. Puedes ver todos los archivos que tienes en tu servidor, también puedes subir y descargar los archivos de manera sencilla.

Como pueden ver hay muchas alternativas para poder administrar archivos de nuestro FTP y sobre todo gratuitos.

Herramientas Online para trabajar con CSS

unijimpe — Sun, 06 Jun 2010 02:36:05 +0000

Las hojas de estilos nos sirven para dar formato al contenido de nuestra web, el mejor software para editar estilos en Adobe Dreamweaver, pero si no quieres instalar programas adicionales, existen servicios online que permiten editar, optimizar y validar documentos CSS, veamos algunas de estas aplicaciones.

Editar CSS

CSSDesk - Online CSS Sandbox
Esta es ta de las interesantes herramientas que ademas de permitir editar los estilos, permite la previsualización inmediata del resultado, además de ello puede colorear automáticamente el código. Finalmente cuando hayas terminado la edición tiene la opción para descargar el archivo con el resultado de nuestro trabajo.

Online CSS Editor
Esta herramienta permite crear tus CSS en internet y automáticamente previsualizar el resultado, con ello puedes obtener la hoja de estilos que necesitas sin necesidad de ningún software adicional.

Optimizar CSS
Optimizar CSS consiste en utilizar de forma eficiente los selectores así como versiones abreviadas de códigos de colores y de bordes, de esta forma el documento CSS se reducirá en tamaño logrando acelerar la carga de nuestro web.

CSS Formatter and Optimiser
Esta herramienta permite pegar tu código CSS o colocar la ruta a tu archivo CSS, con múltiples opciones de compresión puede optimizar adecuadamente tu archivo CSS. Ofrece un reporte del resultado del proceso indicando que líneas se han modificado y el resultado del mismo.

CSS Compressor
Esta herramienta semejante a la anterior permite optimizar nuestro código, permite subir nuestro archivo directamente, colocar la ruta a nuestro archivo o pegar el código de nuestro CSS. Finalmente obtendremos el resultado del proceso nuestro archivo optimizado.

Formatear CSS
Cuando se optimiza las hojas de estilos se eliminan los saltos de línea y espacios en blanco lo cual lo hacen dificiles de entender y editar, para ello tenemos herramientas que formatearán el código agregando saltos de línea y tabulando el contenido.

Styleneat - CSS Organizer
Esta aplicación permite formatear hojas de estilos que han sido minificadas, puedes pegar el código, subir un archivo o colocar la ruta al archivo. Devuelve el código CSS formateado y resaltado en colores para entender rápidamente la hojas de estilos.

Online CSS beautifier and Indenter
Esta web permite formatear e identar el código CSS rápidamente, aunque no colorea el código es muy eficiente y rápido en el resultado de formatear las hojas de estilos.

Validar Formularios con Mootools

unijimpe — Mon, 31 May 2010 04:34:07 +0000

En las ultimas versiones de Mootools se ha comenzado a incluir la clase Form.Validator la cual permite validar formularios de forma sencilla con muchas opciones predefinidas y con la posibilidad de extender con nuevas reglas de validación.

Preparando para Validar con Mootools

Lo primero es descargar e incluir el archivo mootools.js en nuestro documento, también se necesita descargar e incluir el archivo mootools-more.js que debe contener las clases: Form.Validator y Form.Validator.Inline.

type="text/javascript" src="js/mootools.js">
type="text/javascript" src="js/mootools-more.js">

También es necesario agregar tres estilos para indicar al usuario el resultado de la validación, estos estilos los creamos en la hoja de estilos de nuestro sitio web donde obviamente los colores y estilos los haremos para que se integren con nuestra web.

.validation-passed { border-color: blue; } /* campo valido */
.validation-failed { border-color: red; } /* campo invalido */
.validation-advice { color: #C00; font-size: 10px; } /* mensaje de error */

Validaciones Disponibles

Lo primero es conocer todas las formas de validación disponibles

IsEmpty: devuelve verdadero si el campo esta vacío.
required: el campo debe ser obligatorio o no debe estar vacío.
minLength: verdadero si campo tiene mas de cierta cantidad de caracteres.
maxLength: devuelve verdadero si el campo tiene menos de cierta cantidad de caracteres.
validate.numeric: verdadero si el campo es un número
validate.integer: verdadero para números enteros, decimales no esta permitidos.
validate.digits: verifica si el campo contiene números, espacios y caracteres de puntuación.
validate.alpha: verdadero si el campo solo contiene letras.
validate.alphanum: el campo es verdadero si contiene unicamente letras y números.
validate.date: es verdadero si el campo contiene una fecha (mm/dd/yyyy).
validate.email: verifica que el campo contenga un dirección de email.
validate.url: verifica que el campo contenga una dirección URL.

Utilizando Form.Validator

Para utilizar las formas de validación antes mencionadas estas se deben agregar como si fueran estilos. Si deseamos aplicar mas de una regla podemos hacerlo dejando un espacio en blanco. Veamos un ejemplo de un formulario de registro.

id="frRegister" method="post" action="">
Name:
name="name" type="text" id="name" class="required" />
Username:
name="user" type="text" id="user" class="required validate-alphanum minLength:5" />
Password:
name="pass" type="text" id="pass" class="required validate-alphanum" />
Email:
name="email" type="text" id="email" class="required validate-email" />
Phone:
name="phone" type="text" id="phone" class="validate-digits" />
type="button" name="btsend" id="btsend" value="Registro" />

En el código mostrado hemos creado un formulario con 5 campos, a los cuales hemos aplicado las siguientes reglas:

- name: debe ser obligatorio y se acepta todos los caracteres.
- user: es obligatorio, solo se aceptan letras y números y deber de 5 caracteres como mínimo.
- pass: es obligatorio y solo se aceptan letras y números.
- email: el texto ingresado debe ser una dirección de email válida y no puede ser vacía.
- phone: campo opcional, pero si se llena solo acepta números, espacios y caracteres de puntuación.

Luego creamos una instancia del objeto Form.Validator que recibe como parámetro el identificador del formulario que deseamos validar, en seguida agregamos un evento al botón 'btsend' el cual procederá a la validación cuando se haga click para enviar el formulario.

window.addEvent('domready', function() {
var validate = new Form.Validator("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Uniendo estos bloques de código tenemos nuestro primer ejemplo de validación con Mootools, podemos ver el resultado en Mootools: Form.Validator - Basic.

Utilizando Form.Validator.Inline

Si deseamos que al validar el formulario este muestre los mensajes de error junto a cada campo, de esta forma el usuario sabra exactamente cual es el error que tiene en el formulario. Para ello utilizaremos la clase Forma.Validator.Inline la cual tiene la misma sintaxis que el ejemplo anterior:

window.addEvent('domready', function() {
var validate = new Form.Validator.Inline("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Pueden ver el ejemplo funcionando en Mootools: Form.Validator.Inline y como se puede apreciar esta validación es mucho mas intuitiva para el usuario.

Mostrando la validación en nuestro Idioma

Por defecto los mensajes de la validación se muestran en Ingles, si deseamos cambiar de idioma por ejemplo a Español a estos mensajes entonces debemos incluir la clase Form.Validator.Spanish y luego inicializar en Mootools de la siguiente forma:

window.addEvent('domready', function() {
MooTools.lang.setLanguage("es-ES");
validate = new Form.Validator.Inline("frRegister");
$('btsend').addEvent('click', function() {
validate.validate();
});
});

Pueden ver el resultado del ultimo ejemplo en Mootools: Form.Validator.Spanish en donde las validaciones se muestran en Español.

Si estas opciones de validación no son suficientes puedes utilizar una clase adicionar con mas opciones de validación las cuales están documentadas en Additional InputValidators.

Resumiendo: para validar formularios con Mootools se deben descargar las clases adicionales Form.Validator y Form.Validator.Inline, crear los tres estilos para mostrar las validaciones, aplicar las reglas de validación como si se trataran de estilos. Finalmente se agrega una instancia de la clase Form.Validator para realizar las validaciones.

Mas Información

HTTP Redirect Viewer

unijimpe — Sun, 23 May 2010 20:50:29 +0000

HTTP Redirect Viewer es un herramienta que te permitirá visualizar todas las redirecciones que se hacen en una determinada URL dependiendo del User Agent que se puede seleccionar. Esto es útil para verificar el tipo de redirección que estamos aplicando a nuestros proyectos y probar el funcionamiento dependiendo del navegador con que se accede.

Características

Entre las principales características de esta herramienta podemos mencionar:

Visualizar la cantidad y tipos de redirecciones (301 y 302).
Verificar el tipo de canonicalización de un dominio.
Verificar si el cambio de dominio se hace correctamente (Redirección 301).
Verificar el tipo de respuesta por navegador (Se puede seleccionar el User Agent).
Revisar que contenido se envía a los usuarios que acceden desde iPhone/iPad.
Se puede determinar que URL pueden ver el robot de Google.
Permite visualizar los headers de respuesta de un URL.
Permite visualizar el contenido de respuesta de un URL.

Ejemplos de Uso

Analizamos la dirección http://gmail.com tendremos un total de 4 redirecciones (Tres del tipo 301 y una del tipo 302). Obviamente esto no es optimo por la cantidad de redirecciones lo cual incrementa el tiempo de carga para el usuario.

Analizando la dirección http://www.bajar-youtube.com se tiene una sola redirección y del tipo 301 a la ruta final http://bajar-youtube.com lo cual indica que hay canonicalización (En este caso para no utilizar WWW en el dominio).

Esta herramienta fue escrita como complemento al artículo Como hacer redireccionamiento 301 y 302, si tienen sugerencias u observaciones pueden dejarnos un comentario para tomarlo en cuenta para futuras versiones.

Google Font Library – Fuentes para tu Web

unijimpe — Fri, 21 May 2010 04:56:29 +0000

Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.

Para ello Google aloja en sus servidores fuentes gratuitas las cuales podemos integrar en nuestro web gracias a un API que han creado. Esto hará que podamos incluir tipografías diferentes a las tradicionales (Arial, Verdana, Times, etc.) que nos ayudará a dar un mejor acabado a nuestro web que de otra forma lo haríamos utilizando imágenes o flash.

Utilizar Google Font Library

Lo primero es elegir la fuente para ello pueden ver el listado de fuentes disponibles con todas sus variantes (normal, italic, bold, etc.) en Google Font Directory. Primero cargamos la tipografía utilizando el tag link y luego podemos utilizar la tipografía como si fuera una fuente estandar. Por ejemplo escogemos la fuente 'Lobster' y deseamos aplicarlo a los elementos h1 de nuestra página.

href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
type="text/css">
body {
font-family: 'Lobster', serif;
font-style: italic;
font-size: 24px;
}

Si deseas incluir mas de una fuente debes separar los nombres de las fuentes por el carácter "|" en la ruta, por ejemplo si deseamos utilizar las fuentes Lobster y Cantarell, tendríamos.

http://fonts.googleapis.com/css?family=Lobster|Cantarell

Como pueden ver es sencillo de utilizar y como las fuentes están alojadas en los servidores de Google nos garantizan una excelente velocidad de carga. Para demostrar el funcionamiento de este servicio pueden ver un ejemplo funcionando en google-font donde hemos utilizado dos fuentes diferentes, pueden ver el código fuente para ver como hemos utilizado este servicio.

Font previewer

Para facilitar el uso de esta librería, pueden visitar Font Previewer en donde pueden seleccionar la tipografía, variante, tamaño y demás opciones y tendrán automáticamente generado el código que deben utilizar en su web.

Compatibilidad

Esta librería tiene sus limitaciones y es que solo funciona en las navegadores mas modernos. Los navegadores compatibles con esta librería son:

Google Chrome: versión 4.249.4+
Mozilla Firefox: versión: 3.5+
Apple Safari: versión 3.1+
Microsoft Internet Explorer: versión 6+

Google Font API no es compatible con: iPhone, iPad, iPod, o Android. En el caso de estos dispositivos el browser mostrará la siguiente tipografía en la lista de tipografías de la hoja de estilos.

Como hacer redireccionamiento 301 y 302

unijimpe — Wed, 19 May 2010 06:05:01 +0000

Redireccionar una página consiste en enviar al usuario de una dirección a otra. Existen dos tipos de redireccionamiento: 301 y 302, cada uno para diferentes situaciones. Veamos como y cuando utilizar estos tipos para redireccionar de manera apropiada.

Tipos de Redirección

Existen dos tipos de redireccionamiento que podemos utilizar, los dos le cambian de dirección a los visitantes pero se comportan de manera diferente para los buscadores, esto nos puede ayudar a mejorar nuestro posicionamiento si sabes cual emplear.

Redirección 301: Indica una redirección permanente.
Esto le indica a los buscadores que ignoren la dirección original e indexen la nueva dirección. Este tipo de redirección se utiliza cuando estamos cambiando de dominio a una web, esto haría que los buscadores indexen la nueva dirección sin perder los enlaces entrantes que tenía el dominio y sin perder el pagerank.
Redirección 302: Indica una redirección temporal.
Esto indica que la dirección original no ha cambiado y se seguirá utilizando pero temporalmente cambiaremos de dirección.

Redireccionamiento con PHP

Para redireccionar en PHP se utiliza la función header, por defecto esto crea una redirección del tipo 302, indicando un cambio de dirección temporal, mientras que para hacer una redirección del tipo 301 es necesario agregar un header adicional.

Para hacer una redirección 302.

header("Location: /users/home.php");

Para hacer una redirección 301.

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://newdomain.com");

Redireccionamiento con .htaccess

Las redirecciones también se pueden hacer con el servidor web Apache utilizando el archivo .htaccess el cual esta ubicado en la carpeta principal del servidor.

Para hacer una redirección 302.

redirect 302 /download/ /files/tubeplayer-1.2.zip

Para hacer una redirección 301.

redirect 301 / http://newdomain.com

Cambiar de dominio

Si hemos decidido cambiar nuestra web a un nuevo dominio, haremos una redirección 301 con .htaccess de forma que nuestros visitantes vean todas las páginas en el nuevo dominio y los buscadores lo indexen sin perder pagerank.

Redirect 301 (.*) http://newdomain.com/$1

Redireccionar a WWW

Si tenemos un dominio y deseamos que cuando se acceda a http://mydomain.com esta cambie a http://www.mydomain.com (Esto es llamado canonicalización y evita el contenido duplicado en los buscadores) podemos utilizar el siguiente código en .htaccess.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^mydomain\.com$
RewriteRule (.*) http://www.mydomain.com/$1 [R=301,L]

Redireccionar a no-WWW

Ahora podemos elegir que nuestra dirección no contenga el término www. Para ello utilizamos la segunda forma de canonicalización al redirigir desde http://www.mydomain.com hasta http://mydomain.com.

RewriteEngine On
RewriteCond %{HTTP_HOST} !^mydomain\.com$
RewriteRule (.*) http://mydomain.com/$1 [R=301,L]

Mas Información

Publicar Tweets desde tu Website o Blog

unijimpe — Tue, 18 May 2010 04:23:21 +0000

Like it? Tweet it! es un widget Javascript en jQuery que permitirá a los visitantes a tu sitio web o blog para publicar Tweets directamente sin necesidad de ir al web oficial de Twitter con lo cual los visitantes ahorrarán tiempo al compartir contenido de su web, facilitando asi la distribución del contenido de nuestro web.

Este widget esta basado en el nuevo API lanzado por Twitter, el cual facilita el login de los usuarios mediante el protocolo OAuth para luego poder publicar tweets desde webs externos.

Instalación

Lo primero es incluir jQuery en nuestro web, luego de ello es necesario incluir el archivo tweet-is.js o podemos hacerlo directamente desde el URL que ellos proveen, esto sería de la forma:

type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js">

El siguiente paso es crear un elemento HTML que al hacer click mostrará la ventana para publicar el tweet, por ejemplo podemos crear un enlace que tenga un estilo llamado tweet-it.

href="javascript://" class="tweet-it">Publicar en Twitter

Finalmente agregamos el método necesario para llamar a la ventana de Tweet It!, el cual mostrará una pantalla para escribir el tweet el cual incluye en enlace de la página que estamos visualizando.

type="text/javascript">
$(document).ready(function(){
$(".tweet-it").tweetIt();
})

Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/tweet-it.html, como pueden ver el resultado es de excelente calidad y los colores se integran muy bien con cualquier web.

Para facilitar el uso de este widget existen un plugin para WordPress, también hay guías para integrarlo con Tumblr y con Blogger. También pueden configurar parámetros adicionales, para ello pueden encontrar mas información en el web oficial de Like it? Tweet it!.

Publicar Archivos Flash con Mootools

unijimpe — Mon, 17 May 2010 04:37:25 +0000

Mootools la popular librería javascript a partir de su versión 1.2 incluye una nueva clase llamada Swiff la cual permite incluir archivos Flash en documentos HTML, además permite agregar eventos y facilita la comunicación Flash-Javascript.

Por que usar Mootools en lugar de SWFObject?

SWFObject es el método mas popular para embeber archivo SWF, pero si por alguna necesitad ya estas utilizando Mootools, entonces es preferible utilizarlo para incluir archivos Flash y evitarse llamar a diferentes archivos Javascript externos.

Utilizar Swiff

La primera forma es descargar Mootools o también puedes utilizarlo directamente desde Google Ajax Libraries, de esta forma ni siquiera necesitar tener el archivo en tu hosting. Luego de incluir Mootools podremos utilizar la clase Swiff, el cual tiene la siguiente sintaxis.

var myswf = new Swiff('path-swf', { width: ancho, height: alto, container: 'id'});

Donde se tienen los siguientes parámetros:

path-swf: es la ruta al archivo SWF a incluir
ancho: es el ancho del SWF expresado en pixels.
alto: es el alto del SWF expresado en pixels.
id: el identificador del elemento html donde se mostrará el SWF.

Entonces por ejemplo si deseamos incluir un vídeo player de 500x320 pixels, entonces el código a utilizar para mostrar el SWF sería de la forma:

id="player">

type="text/javascript">

var myswf = new Swiff('tubeplayer.swf', { width: 500, height: 320, container: 'player'});

Utilizando Parámetros con Swiff

Para pasar parámetros al archivo SWF que estamos incluyendo, podemos utilizar la propiedad params el cual contiene una lista de los parámetros a incluir. Entonces si por ejemplo deseamos permitir que el archivo flash pueda ejecutarse en pantalla completa y que el color de fondo sea negro tendríamos el siguiente código.

id="player">

type="text/javascript">

var myswf = new Swiff('tubeplayer.swf', {

width: 500,

height: 320,

container: 'player',

params: {allowFullScreen: 'true', bgcolor: '#00000'}

});

Pasando Variables con Swiff

Para pasarle variables al archivo SWF, es necesario hacerlo utilizando flashvars, ello lo podemos hacer con la propiedad vars, entonces si deseamos pasar dos variables a nuestro player tendríamos el siguiente código.

id="player">

type="text/javascript">

var myswf = new Swiff('tubeplayer.swf', {

width: 500,

height: 320,

container: 'player',

params: {allowFullScreen: 'true', bgcolor: '#00000'},

vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}

});

Uniendo estos elementos tendremos el código completo para incluir archivo SWF en páginas HTML.

xmlns="http://www.w3.org/1999/xhtml">
http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</span></a></span>Swiff Demo - unijimpe<span style="color: #009900;"><span style="color: #000000;">

id="player">

type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js">

type="text/javascript">

var myswf = new Swiff('tubeplayer.swf', {

width: 500,

height: 320,

container: 'player',

params: {allowFullScreen: 'true', bgcolor: '#00000'},

vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}

});

Como pueden ver el código para mostrar archivos Flash, sencillo y sin utilizar librerías adicionales con lo cual ahorramos en velocidad de carga para nuestra web. Pueden ver el resultado del ejemplo funcionando en http://samples.unijimpe.net/swiff-swf/.

Mas Información

unijimpe

Convertir monedas con PHP y Google Finance

Currency Converter

Utilizar Eventos en Javascript

Cuales son los Detectores de Eventos Disponibles?

Como se utilizan los Detectores de Eventos?

Los mejores Clientes FTP gratuitos

Clientes para Windows

Clientes para Mac

Clientes Online

Herramientas Online para trabajar con CSS

Validar Formularios con Mootools

HTTP Redirect Viewer

Google Font Library – Fuentes para tu Web

Como hacer redireccionamiento 301 y 302

Publicar Tweets desde tu Website o Blog

Publicar Archivos Flash con Mootools