Archivos para la categoria JavaScript

Boomerang es una pieza de código JavaScript, que puedes añadir a un sitio Web, que le permitirá medir el rendimiento del sitio desde el punto de vista del usuario final. Boomerang envía los datos de vuelta al servidor para un posterior análisis. Gracias a este script podrás conocer exactamente que tan rápido piensan tus visitantes que es tu sitio Web.

Boomerang nos permite medir la demora de carga de un contenido dinámicamente, el ancho de banda, latencia HTTP y DNS, entre otros parámetros.

Otra observación a tener en cuenta es que Boomerang es opensource.

Muchas veces nos centramos en la optimizacíon del lado del servidor, pero nos olvidamos de otros aspectos que son más directos en el lado del cliente, así que sin lugar a duda este script te ayudará en la optimización de ambas partes.

Enlace: Boomerang

Enlace: Measures Performance of Websites From End User’s View (Vía WebAppers)

Descarga: zip o Tarball, código fuente

El vídeo de arriba muestra un escena simple desarrollada en Blender y exportado a GLGE, para ser usado en un navegador con capacidades WebGL.

GLGE es una librería JavaScript que facilita el uso de WebGL, es básicamente una API creada en JavaScript, que permite acceso directo a  openGL ES2, permitiendo el uso de aplicaciones de hardware con aceleradoras gráficas 2D/3D, sin necesidad de instalar plugins adicionales.

El objetivo de GLGE es permitir a los desarrolladores Web usar WebGL de forma fácil y rápida.

Enlace: GLGE (Vía Ajaxian)

En este vídeo terminamos el bloque dedicado al trabajo con JavaScript y HTML amigable a buscadores. Veremos estructura de las etiquetas HTML, veremos el uso adecuado de frames, forms, flash y Ajax, para que el uso de estas tecnologías no afecten los resultados en las búsquedas de nuestro sitio Web.

Crearemos una aplicación que simula un editor WYSIWYG, pero que genera lenguaje de marco amigable a buscadores.

Todo se ve en poco más de 23 minutos.

En el siguiente vídeo comenzamos un nuevo bloque dedicado al trabajo con contenido Social.

Descargar ejemplo

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 »