Archivos para la categoria JavaScript

En este vídeo comenzamos un nuevo bloque dedicado al trabajo con HTML y JavaScript, es decir la parte de interfase del usuario y el código que se ejecuta en el lado del cliente.

Veremos el trabajo de links con JavaScript, ventanas pop up y DHTML, como el mal uso de estos puede causar problemas para el SEO de nuestros sitios Web, y soluciones adecuadas para usar estas herramientas atractivas a los clientes.

Todo lo vemos en poco más de 14 minutos.

A lo largo de este bloque veremos como enfrentar y resolver de la mejor forma, problemas relacionados con el SEO que puede causar el uso de tecnologias como AJAX, Javascript, DHTML, Flash entre otros.

FireQuery extiende la funcionalidad de Firebug y lo enfoca al desarrollo con jQuery, permitiendo ver información adicional de los eventos que se insertan con jQuery.

Gracias, a que jQueryify bookmarklet está integrado a FireQuery permite inyectar código de jQuery en cualquier sitio web.

Para usar Firequery se debe contar con Firebug 1.3 o superior.

Enlace: FireQuery

La versión 3.5 del navegador Firefox finalmente esta disponible para descarga, dentro de sus novedades se une nuevas localizaciones como Chile y México, soporte para HTML 5, implementación de JSON nativo, mejor privacidad en sus datos, mejor desempeño JavaScript, entre muchas más cosas.

Veamos el vídeo para conocer más.

Enlace: Descargar Firefox 3.5

jQuery Tools es una librería UI, que reune una colección de las más comunes interfases para usuario usadas en los desarrollos de los sitios Web actuales.

jQuery Tools como su nombre lo indica utiliza la librería jQuery como núcleo central de su funcionamiento, jQuery Tools se centra fundamentalmente en cuatro aspectos que son:

• Las partes esenciales que debe llevar una aplicación Web 2.0, haciendo énfasis principalmente en su diferenciación de las aplicaciones de escritorio.
• El tamaño y desempeño, ya que la librería pesa tan solo 5.8 KB hace énfasis en la Red de Entrega de Contenidos “Content Delivery Network (CDN)”.
• Facilidad de uso ya que no requieres de ser un programador para usar esta librería, y sacarle gran provecho.
• La posibilidad de ampliación, ya que se puede modificar el funcionamiento de la librería para lograr otros comportamientos más a medida. Separa el CSS del código lo que lo hace bastante fácil de aplicar sin conocimientos avanzados.

La librería es constantemente soportada por lo que se actualiza con frecuencia, además cuenta con gran número de Demos de su uso lo que muestra su potencial, así como tiene una muy buena documentación.

Desde el área de descarga puedes bajar herramientas por separado o todo el conjunto similar a jQueryUI, cuenta con herramientas para el trabajo con Tabs, Tooltips, Expose, Overlay, Scroll, FlashEmbed y jQuery toosl y Flowplayer.

Leer el resto de la entrada »

Placemaker es un Webservice creado por Yahoo, que lo que hace es analizar un texto definido en HTML o en una URL y regresa toda la localización geográfica, suena bastante bien, pero la API solo acepta valores POST y cuenta con datos como XML y RSS. Tendrás que usar un servicio proxy que no es tan difícil de lograr mediante cURL y PHP como se explica aquí pero igual puede causar dificultades.

JS-Placemaker es un corto código creado en JavaScript que facilita enormemente el trabajo con la API de Placemarker, solo debes pedir ID para Placemaker y así crea su aplicación que puede ser hospedada por usted mismo.

Aquí puedes ver el demo y su uso.

Como usar:

Pedir ID para Placemaker

Incluir JSPlacemaker.js en el documento y sobreescribir con sus datos de la appID

Placemaker.config.appID = YOUR_APP_ID;
Placemaker.getPlaces(text,callback,locale);

text: Texto para analizar.

callback: Función que se llama cuando la localización ha sido encontrada.

locale (optiona): Localización ej. es_ES

Ejemplo una llamada a JS-Placemarker responde un objeto.

Placemaker.getPlaces('Hi I am Chris, I live in London.
Originally I am from Germany',
function(o){
  console.log(o);
},
'en-uk');

Si la respuesta cuenta con varias opciones se vería así:

Si usted define la localización, puede usar otros idiomas

Placemaker.getPlaces('Hallo ich bin der Christian und komme aus
Schweinfurt in Deutschland. Leben tu ich allerdings in England',
function(o){
  console.log(o);
},
'de-de');

Enlace: JS-Placemarker

Enlace: JSPlacemaker.js (Descargar script)

Enlace: JSPlacemarker – Geo data extraction in pure JavaScript (Vía ajaxian)

jquery Fancy Gestures es un plugin jQuery, que permite habilitar el uso de gestos complejos del ratón como letras, alfabetos y sus gestos personalizados en cualquier sitio Web.

Por medio de este plugin se puede recibir entradas en sus sitios Web como si de un smartphone se tratase, y de esta forma podemos dar muchos usos a nuestras aplicaciones como captchas, firmas, dibujos, etc. todo dependerá de nuestra imaginación.

Características:

1. Crear sus gestos personalizados.
2. Crear múltiples entradas donde aceptar gestos.
3. Previsualización.
4. Trabaja con la mayoría de navegadores.

Aquí puedes ver un Demo.

Requerimientos:

1. jQuery
2. Walter Zorn’s VectorGraphics Library

El plugin esta bajo una licencia MIT, lo que nos permite darle un uso libre.

Enlace: Descargar plugin

Enlace: jQuery fancy gestures (Documentación)

jPlayer es un plugin para jQuery que permite reproducir archivos MP3 dentro de una página Web. El reproductor utiliza un archivo swf para reproducir los archivos, pero este no es mostrado en la página por lo que el reproductor puede ser totalmente personalizado con XHTML y CSS.

El reproductor ofrece funciones que permiten reproducir un archivo MP3, pausar, detener y ver el progreso de la pista en una barra, así como controlar el volumen.

Ver demos después del salto.

Leer el resto de la entrada »

Tooltips Flash con jQuery

Navegando la Web me encuentro que Peter Goodman, creo un Plugin para jQuery que permite poner contenido Flash dentro de los tooltips.

Desde aquí puedes bajar el plugin y el ejemplo completo para usarlo, incluye el ActionScript.

jQuery Flash Plugin

Otro plugin bastante bueno, que permite de una forma sencilla pero poderosa, agregar contenido Flash mediante jQuery, permitiendo agregar vídeos de Youtube, reproductores mp3, etc de forma sencilla.

Basta con agregar unas lineas como estas:

$('#hello').flash({
    src: 'hello.swf',
    width: 320,
    height: 240
});

Enlace: jQuery Flash Plugin

Enlace: Flash tooltips using jQuery

Sin lugar a duda se le esta sacando todo el potencial a JavaScript, ahora james Hall esta creando jsPDF es un script en javaScript que genera PDFs, se puede usar como URI, del lado del servidor o como extensión para un navegador. De momento solo soporta simple texto pero su autor dice que esta trabajando para dar soporte a mágenes y embebido de fuentes.

El demo funciona perfectamente con Safari u Opera.

Enlace: Ver Demo (De preferencia usar Safari)

Enlace: jsPDF

Ethan Marcotte ha publicado un script en JavaScript que permite redimensionar las imágenes de un sitio Web automáticamente, a lo que se refiere en su post de imágenes fluidas (Fluid images).

El script analiza la página Web reemplazando las imágenes por un GIF transparente, aplicándoles la propiedad AlphaImageLoader, así cuando la ventana es redimensionada el script calcula automáticamente el alto y ancho de las imágenes.

Enlace: Ver Demo

Encalce: Fluid images