lunes, 30 de abril de 2012

Impresionante presentación de que ofrece HTML5

Impresionante presentación de que ofrece HTML5

Muy buenos días desarrolladores, el día de hoy les traigo el siguiente enlace desarrollado por Marcin Wichary y varios miembros del equipo de Google Chrome.

En esta se presenta gran cantidad de todo lo que html5 ofrece, con ejemplos interesantes, que nos facilita el reconocer que podemos hacer con HTML5 y con código fuente listo para ser implementado en alguno de nuestros desarrollos. El código fuente de la presentación como tal se encuentra también disponible.
http://slides.html5rocks.com/#landing-slide



En lo personal he aprendido varios trucos nuevos solo viendo esta presentación y la encuentro como un excelente material de consulta.

No olviden postear o compartirlo si les gusta !!!


jueves, 26 de abril de 2012

Reconocimiento de movimiento en Javascript

Reconocimiento de movimiento en Javascript

Hola desarrolladores!!, recuerdan que hace algún tiempo veíamos programas en la tele donde alguien se disfrazaba como super heroe de los años 70 con un traje lleno de puntitos para que un programa de computadora pudiere saber que estaba haciendo y copiando sus movimientos para alguna animación en 3D?? Pues este tipo de tecnología finalmente se encuentra a disposición para desarrollo web sin necesidad del uniforme sexy!!!

Ya se encuentra disponible esta tecnología para desarrolladores en Java como se puede ver en http://tech.joelbecker.net/programmingprojects/computer-vision
y Flash como en http://www.playdocam.com/play_eye.htm. como algunos de uds ya conocian.

Pero en Javascript parecía este tipo de avance se presentaba como la búsqueda de tiburones de seis metros o calamares gigantes vivos.

Los medios decían que existían pero entre las pruebas, códigos y demos que encontraba, ninguno pasaba de una dudosa presentación en vídeo sin acceso a fuentes. Hasta hace poco que me he topado con Romuald Quantin, un desarrollador en Abobbe que ha desarrollado algunas pruebas exitosas de reconocimiento de movimiento para Javascript y ademas presenta sus fuentes y documentación libremente!!!. les dejo este vídeo para que se puedan hacer una idea de lo verídico de este post, ya que realice esta prueba con un explorador Chrome Canary y Wamp como servidor local (ya que necesita un servidor local para manejar el buffer). No es un sistema en producción, pero nos posibilita idear proyectos e interfaces antes de que se liberen estas librerías.

Pueden encontrar su trabajo en http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html

Mucho animo!!! recuerden postear y compartir

miércoles, 25 de abril de 2012

Al fin!! Anuncio formal del Inicio de Google DRIVE!!!

Al fin!! Anuncio formal del inicio de Google DRIVE!!!


Muy buenos días developers!!!!, el día de hoy finalmente ha ocurrido, Google a iniciado su servicio gratuito de Google drive, con 5Gb de almacenamiento gratuito, aunque solo esta el anuncio y la oportunidad de ser informado en el momento que este servicio este habilitado a la cuenta, el enlace a este ya esta habilitado y pueden ingresar directamente a https://drive.google.com
para conocerlo y solicitar un mensaje en el momento que este operativo para su cuenta.


En la información que acabo de revisar de Google Drive, encuentro que esta permite ademas de tener una unidad de disco libre en la nuve y compartir estos como en dropbox, utilidades tales como envio de fax, edicion de videos y la creacion de sitios web mockups (pero solo libres por 7 dias, luego de esto tienen tarifa paga de $5 US por mes o $50 US anuales).

Ademas una interesante suite de aplicaciones dignas de un escritorio remoto como se puede encontrar en la imagen a continuacion entre muchas otras aplicaciones gratuitas listas para ser utilizadas con tan solo tener habilitada una cuenta en este servicio.

Se que sueno un poco fanático, pero el cumulo de aplicaciones que encuentro en este nuevo servicio, justifican los retardos en sus fechas de lanzamiento.

martes, 24 de abril de 2012

Libreria JS Kineticjs

Muy buenos días, aquí les dejo un nuevo post hacerca de una librería que encontré hace poco conocida como KineticJS la cual es una librería para JavaScript que nos facilita enormemente el manejo de eventos y movimientos de objetos sobre nuestro canvas de javascript para Html5.
Facilita enormemente este tipo de programación y es gratis!!!!!

El portal esta repleto de ejemplos y códigos para iniciar a desarrollar aplicaciones complejas en JS.
Les dejo el enlace para este portal: http://www.kineticjs.com/.

Proximo lanzamiento de Google Drive posiblemente en el transcurso de esta semana


Lanzamiento de Google Drive

Muy buenas tardes lectores, se que ya algunos de Uds. han escuchado del lanzamiento de Google drive (una unidad de disco en Internet que puedes compartir entre amigos y puedes acceder desde dispositivos móviles o computadoras conectadas a Internet gratuitamente con solo dos clic) para la primera semana de el mes de Abril, pero esto no se ha podido materializar, en teoría mis fuentes ubicaron el inicio de este servicio para el 23 del mes de abril y podríamos ingresar a este servicio en http://drive.google.com, pero hasta el 24 que publique este articulo, aun no se ha materializado.

La verdad es que aunque de momento no podemos usar este servicio de Google Drive, podemos hacer uso  del  ya conocido servicio de Dropbox www.dropbox.com/, que permite realizar la misma función, aunque este ofrece 2 GB en comparación de los 5 o 100 gb que ofreceria Google segun fuentes en la web, puedes hacer crecer tu espacio de almacenamiento en la nube de manera gratuita con solo otros usuarios que invites y accedan al servicio. 

viernes, 20 de abril de 2012

Reconocimiento de Voz en HTML5

Reconocimiento de Voz en HTML5


Si cargan este post en google chrome la siguiente caja de texto tendrá a su derecha un pequeño micrófono.
si le dan clic sobre este micrófono, el sistema les reconocerá lo que digan en el micrófono y lo escribirá en la caja de texto.

Les dejo un código fuente de ejemplo.

<html lang="es-ES">
<head>
</head>
<body>
<input type='text' id='mivoz' name='mivoz' input x-webkit-speech speech error onwebkitspeechchange="kinduff();">
</body>
</html>

Tengan presente que la clave es ingresar en la etiqueta <html> el idioma en que la pagina funcione, en el caso de español tendríamos <html lang="es-ES"> y la caja de texto a reconocer texto agregamos el siguiente atributo:
input x-webkit-speech speech error onwebkitspeechchange="kinduff();"

Espero que les sea util!!

Liberia de Grids de KoolPHP


Esplendida libreria de Grids (listados), en ajax y php (carga asincronicamente lo que hay en la base de datos, obviamente tienen que programar pero la salida de datos en grid es muy cómoda tanto para el programador como para el usuario que ha de interpretar la información).
http://demo.koolphp.net/Examples/KoolGrid/index.php

Como esta recién salida esta como descarga ble pero este tipo de librerías tienden a ser pagas, por lo que les recomiendo que la descarguen mientras puedan ya que este tipos de scripts de jquery no son muy cómodos de trabajar.


Libreria para efecto de blur en nuestra web


Libreria Blur.js


La librería Blur para Jquery nos permite generar ventanas, divs o elementos flotantes sobre nuestra web con un efecto de transparencia, algo similar a lo que podemos observar en los bordes de las ventanas de win7 que transluce el escritorio. facilitandonos el diseño y generando entornos mas armoniosos usando poco código.

http://www.blurjs.com/

Liberia para eventos táctiles en nuestra web


Liberia para eventos táctiles en nuestra web



http://eightmedia.github.com/hammer.js/
Para los dispositivos y pc´s con pantalla táctil que se estan popularizando, podemos gracias a esta libreria, generar eventos tactiles.

De esta manera podemos generar webs mas modernas o solicitud de mejoras de paginas para que sean mas dinámicas a nuestros usuarios.

Otra opcion para programar en Ajax y PHP

Biblioteca para desarrollar en Ajax y PHP, es código abierto y es una opción entre las muy conocidas Jquery, Doco, YUI, etc..

http://www.xajaxproject.org/
Su portal tiene un entorno de pruebas, lo que facilita el aprendizaje y uso de esta libreria

Autocompletar un formulario con HTML5


Autocompletar un formulario con HTML5



Cuando desarrollamos un formulario de login y deseamos que cuando el usuario se equiboca en el registro, el sistema recuerde lo que este habia escrito, era algo molesto ya que debiamos reenviar informacion haciendo uso de php o alguna libreria que nos ayudara, pero en html5 podemos usar el atributo autocomplete para que el explorador se encarge de esto.

les dejo un pequeño ejemplo de como realizar esto.


Ejemplo:
<form action="XXXXX" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form> 


Espero que les sea util este tip.

miércoles, 18 de abril de 2012

Consultar años en un campo date en MySQL



Consultar años en un campo date en MySQL


Mysql: Year se utiliza para recuperar el año en una tabla de la base de datos.
Ejemplo:
SELECT YEAR(nombre del campo date) FROM tabla en consulta;
Espero que les sea util este tip.


Como colocar los resultados del jquery-autocomplete sobre una caja de dialogo (dialog box) de JQuery-UI.



Primero se debe ubicar el evento de click que habilita la caja de dialogo
jQuery( "#XXXX" )
.button()
.click(function() {
jQuery( "#XXXX" ).dialog( "open" );
});
Y agregan este código para que se permitan ventanas a mayor nivel
jQuery(".ui-dialog").css("overflow", "visible");
quedando algo así:
jQuery( "#XXXX" )
.button()
.click(function() {
                         jQuery( "#XXXX" ).dialog( "open" );
                         jQuery(".ui-dialog").css("overflow", "visible");
});
Finalmente solo deben editar el css del  jquery-autocomplete (jquery.autocomplete.css) y agregar la siguiente linea de código, para aumentar en nivel en pantalla del resultado al auto completar.
z-index: 1003; (o superior según el nivel que vean que tenga la caja de dialogo).
Quedando un fragmento de código así
.acResults {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow: hidden;
z-index: 1003;
}
Espero que les sea de utilidad