Gmap3, un framework jQuery para Google Maps

Gmap3, jQuery para Google Maps

Hace tiempo les contabamos sobre la Clase PHP para generar códigos de barra, una excelente opción para implementar en nuestros trabajos. Gracias a este artículo entramos en contacto con su autor, Jean-Baptiste DEMONTE, que poco a poco nos fue contando sobre sus proyectos.

Gmap3, jQuery para Google Maps

Hoy Jean-Baptiste se encuentra trabajando en Gmap3, un conjunto de herramientas para interactuar con la API de Google Maps, y dejenme decirles que los resultados son de primer nivel.

Basada en la API de Google Maps, Gmap3 nos facilitará la interacción y la creación de mapas con todas las características propuestas por Google: ver mapas, visualizar rutas, modificar las opciones disponibles, crear polígonos y ejecutar Street View, entre otras.

La implementación es sencilla, sólo debemos integrar el JS de Google Maps y el de Gmap3, además de jQuery, para comenzar a utilizar todos los métodos disponibles.

En la Web oficial de Gmap3 podemos ver demos e información detallada sobre la implementación y métodos disponibles.

Reconocimiento Facial en jQuery

Hace unos pocos días comentabamos sobre la clase php para reconocer rostros en imágenes.

Hoy, revisando nuestros sitios amigos habituales, nos encontramos con este plugin para jQuery que hace exactamente lo mismo pero, claro está, con jQuery.

Es ideal para agregar a nuestros proyectos que tengan un perfil social, en el cual podamos explotar esta excelente utilidad.

i lo comparamos con la versión publicada en PHP, creo que esta consumira menos recursos debido a que la actividad no se desarrolla en nuestro servidor, sino en la terminal del cliente.

En fin, ya tenemos las dos opciones disponibles. Queda a elección de cada uno si quiere reconocer caras con jquery o detectar rostros con php.

Demo | Descargar Plugin | Ejemplo de uso

Quovolver, una buena forma de mostrar citas

Quovolver es un Plugin para jQuery que, basicamente, lo que hace es tomar un tag html previamente indicado y mostrarlo en forma de presentación a nuestros usuarios.

Para instalarlo debemos seguir los siguientes pasos:

1- Descargar y descomprimir los archivos propios del plugin: http://sandbox.sebnitu.com/jquery/quovolver/quovolver_v1.0.zip
El directorio dentro del archivo .zip cuenta con 4 archivos:

* jquery.quovolver.js
* style.css
* readme.txt
* index.html

2- Inserta el archivo del Quovolver (jquery.quovolver.js) dentro de tu documento html:


<script type="text/javascript" src="jquery.quovolver.js"></script>

3- Instancia Quovolver dentro de tu función Document.Ready indicando cual es el tag html que deseas tomar:


<script type="text/javascript">
$(document).ready(function() {
$('blockquote').quovolver();
});
</script>

Y listo! El plugin tomará todos los contenidos de ese tag y los irá presentando como si fueran un slider de quotes. Muy interesante.

Fuente: http://sandbox.sebnitu.com/jquery/quovolver/

Controlar WebCam desde jQuery

jQuery Webcam es un plugin que crea un layer transparente para comunicarse con la webcam directamente desde javascript.

Aprovecha las caracteristicas de SWF (ya viene en el paquete) para mostrar las imagenes de la webcam asi como tambien capturarlas.

El plugin también cuenta con la posibilidad de ver un listado con las cámaras instaladas para seleccionar la de nuestra preferencia.

El streaming puede ser en cualquier tamaño, aunque debemos recompilar el SWF dependiendo del tamaño seleccionado, tal como se describe en la documentación.

Para descargar el Plugin: http://www.xarg.org/project/jquery-webcam-plugin/

Fuente: http://www.webresourcesdepot.com/control-webcams-with-javascript-jquery/

Reproductor de video en HTML5

MediaElement.js es un plugin para jQuery que nos permitirá reproductir videos en HTML5 en navegadores que no tengan soporte para este nuevo formato.

Utilizando esta librería podremos insertar videos en nuestros sitios utilizando el tag <video>, el plugin detectará si el navegador tiene soporte para este tag y en caso de que la respuesta sea negativa, insertará el video en un formato que sea aceptado, como podría ser en flash.

De esta forma tendremos la seguridad de que nuestros videos podrán ser vistos por todos los usuarios, sin importar si lo estan haciendo desde Internet Explorer 6 o desde un iPad, por ejemplo.

Ejemplo de uso:

<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />

<!-- Preferred: Use one H.264 file for everyone (with silverlight fallback) -->
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>

<!-- OR use multiple codecs, your choice -->
<video width="640" height="360">
<source src="myfile.mp4" type="video/mp4" >
<source src="myfile.ogg" type="video/ogg" >
<source src="myfile.webm" type="video/webm" >
</video>

<script>
jQuery(document).ready(function($) {
$('video').mediaelementplayer();
});
</script>

La utilización de este Plugin nos dará soporte para videos en H.264 (MPEG), como asi también archivos FLV y WMV, en los navegadores con HTML5 como iPhone, iPad, Android, Chrome, Safari e Internet Explorer 9, asi como también en navegadores sin soporte HTML5 pero con la posibilidad de reproducir Silverlight/Flash: Internet Explorer 6,7,8, Firefox y Opera.

Fuente: MediaElement via Web Resources Depot.

Crea tu propio Slider con jQuery

Sudo Slider es un plugin para jQuery que nos permitirá realizar nuestros propios slides en cualquier documento html.

Este plugin, basado en Easy Slider, nos permitirá crear slides de imagenes o artículos en pocos pasos sin dejar de lado la presentación ni el modo en el que queremos que este se muestre.

Podemos elegir si queremos un slide vertical u horizontal, si queremos que cada pantalla tenga su propio boton o si queremos que nuestro slide sea automatico o manual, entre otras tantas caracteristicas.

Este plugin es pequeño, lo cual no es poca cosa en muchos casos (~10kb) y no es intrusivo.

Algunos ejemplos de su funcionamiento en http://webbies.dk/Sudo%20Slider/demo.html.

Para descargarlo: http://webbies.dk/Sudo Slider/Sudo Slider 1.0.2.zip

Lo encontre en Web Resourses Depot

Crear gráficos de barra con JQuery

DDChart es un plugin para jQuery que nos permitirá crear nuestros propios gráficos de barra.

Este plugin nos dará la posibilidad de crear gráficos sencillos o avanzados. Si lo que deseamos es un gráfico de barra más complejo podremos utilizar las opciones que incluyen efectos y gráficos multiples, mientras que para necesidades más puntuales podremos utilizar la presentación normal.

Para su correcto funcionamiento, DDChart para jQuery necesitará que le entreguemos la información en formato JSON.

Sin duda una excelente opción para cuando busquemos realizar gráficos dinamicamente combinando con PHP u otro tipo de lenguajes.

La página oficial de este Plugin para jQuery: http://kiersimmons.com/DDChart/index.html

Alli podremos encontrar ejemplos y documentación sobre todas las posibilidades que ofrece.

Lo lei en: http://www.webresourcesdepot.com/drill-down-bar-charts-with-jquery-ddchart/