Archivo de la categoría: Web

AudioSense: HTML5 y la Web Audio API

pavarotti

AudioSense mostrando en tiempo real la frecuencia de Nessun Dorma

Bueno, hace tiempo que he tenido oportunidad de llevar varios cursos en línea, del tipo MOOC (Massive Open Online Course). En un principio excéptico, he encontrado en este tipo de plataformas una nueva y muy poderosa herramienta de auto-aprendizaje.

Hay una plataforma llamada edX (www.edx.org), la cual es una plataforma abierta que ofrece cursos en línea de forma gratuita. EdX fue fundada por Harvard y el MIT por lo que pienso que tienen un respaldo bastante sólido.

De los varios cursos disponibles, hace tiempo probé los cursos de HTML5,

HTML5 Part 1: HTML5 Coding Essentials and Best Practices: https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-0

HTML5 Part 2: Advanced Techniques for Designing HTML5 Apps: https://www.edx.org/course/html5-part-2-advanced-techniques-w3cx-html5-2x-0

Bueno, haré una pausa de la publicidad en este punto, por que ciertamente no busco que esta entrada en el blog sea solo hablar de los cursos, si no más bien quisiera presentarles una pequeña aplicación web que pude realizar gracias a los conocimientos que pude obtener de los mismos (gracias al gran profesor Michel Buffa).

AudioSense y Web Audio Api

Bueno, los que hayan jugado un poco con HTML5 habrán visto que hay una gran cantidad de elementos poderosísimos, como la capacidad de manejar video sin necesidad de flash, manipular audio, geolocalización e incluso la posibilidad de crear juegos gracias al Canvas.

Se me ocurrió entonces, unir algunas de estas propiedades en una sola aplicacion:

AUDIOSENSE DEMO: https://s3-us-west-2.amazonaws.com/richiemx.com/index.html

Al entrar a la aplicación, nos solicitará permiso para acceder a la webcam y al micrófono:

audios1

Si nos damos cuenta en la dirección del navegador, estamos en https, esto es requisito si subimos nuestra aplicación a Internet y queremos que pueda solicitar acceso a la Webcam del usuario (o al micrófono) … creo recordar que sin https, en Chrome o Firefox no se puede hacer esta solicitud.

Pero… ¿Qué hace mi aplicación?…

Bueno, si le damos permiso de utilizar el micrófono… la aplicación estará a la escucha de los sonidos que capture el micrófono y mostrará la frecuencia de la señal de audio en dos paneles canvas de la pantalla. También obtiene la imágen de la webcam pero esto es solo con fin decorativo.

En la parte central, se muestra el valor de la frecuencia en Hz … todo esto para qué?

Bueno, he visto en varias páginas de Internet donde hablan que los sonidos representan colores (Ej. http://www.flutopedia.com/sound_color.htm).

Entonces si tenemos la frecuencia del sonido en tiempo real, podemos mostrar en un canvas que varie el color en base a esta frecuencia … el resultado? … podría ser: el color de los sonidos.

Realmente es una aplicación sencilla, aunque creo que un logro si fue poder calcular la frecuencia en Hz … y el resultado es agradable, por decir, he probado el programa escuchando música de Pavarotti y obtengo unos bello tonos en morado.

Tenía la aplicación arrumbada, lo cual no pienso que tenga caso, asi que por eso la quise compartir, si alguien gusta de tener el código puede obtenerlo directamente, pues no es mas que HTML, CSS y Javascript.

Como nota extra quiero decir que fue mi proyecto final en un MOOC que rennovó totalmente mi gusto por la programación, me refiero al curso CS50 de la Universidad de Harvard y que es dirigido por el grandioso Profesor David Malan: https://www.edx.org/course/introduction-computer-science-harvardx-cs50x

En Audiosense, hay otros dos menús … uno que te lleva a un fractal y otro a una gráfica de una parábola … eran mis experimentos con el Canvas y la graficación … no hablaré en este post al respecto, pero si logro perfeccionar mi fractal, haré un post para platicar un poco.

Dejo todo esto solo como curiosidad, a lo mejor a alguien le resulta interesante …

EOF

Anuncios

MySQL: Tablas de Entidades y Municipios de México (CSV a SQL con PHP)

Requisitos: Tener Apache o algún servidor web donde correr PHP

Complejidad: Sencillo

Objetivos:

1) Como obtener tablas de Entidades y Municipios para México, tal vez a alguien le ha pasado que para algún proyecto necesite crear algún formulario para registrar usuarios y le gustaría guardar el lugar de origen. También platicaremos donde se puede obtener una tabla de todos los países del mundo y de códigos postales para México.

2) Como convertir archivos CSV (http://es.wikipedia.org/wiki/CSV) a .SQL a través de PHP y la función fgetcsv (http://php.net/manual/es/function.fgetcsv.php).

Desarrollo:

Bueno, tal vez alguna vez nos habrá tocado desarrollar un proyecto donde necesitemos registrar perfiles de usuario. Si eres de México tal vez alguna vez necesitabas las tablas de estados y municipios o incluso tal vez una tabla de todos los países del mundo!.

Bueno, si necesitabas la tabla para todos los países del mundo, alguien ya hizo el trabajo por nosotros, lo tiene en varios formatos e idiomas, la puedes obtener en el siguiente enlace: http://dev.umpirsky.com/list-of-all-countries-in-all-languages-and-all-data-formats/

También la puedes descargar de aquí (un poco modificada para tener todos los campos en español): http://www.mediafire.com/view/mw765evyag7ktm0/country.mysql.sql

Ok, pero para obtener estados y municipios de México tendremos la misma suerte?. Buscando en Google sobre donde encontrar estas tablas, vi en algún foro que mencionaban como recurso la página del INEGI: http://www.inegi.org.mx/geo/contenidos/geoestadistica/catalogoclaves.aspx

Si entramos podemos toparnos con un mapa interactivo como el de la imágen:

inegi1

El procedimiento que seguí no fue tan complicado, solo seleccioné del menú>  “Seleccione el nivel de desagregación”, la opción > “Área Geoestadística Estatal (AGEE)” para obtener las entidades.

inegi2Finalmente solo damos click en el botón “Consultar” ubicado en la parte inferior:

inegi3Al hacerlo nos lleva a una nueva pantalla con la consulta solicitada, en este caso las entidades. Si hubieramos seleccionado “Área Geoestadística Municipal (AGEM)”, nos regresa un listado de todos los municipios del país.

Bueno, en esta nueva pantalla hay un botón de descargar en la parte superior:

inegi4Al dar click en “Descargar”, nos lleva a una nueva ventana, en Tipo de archivo seleccionamos la opción “Texto separado por comas(CSV)”, desactivamos la opción “Comprimir archivo en formato ZIP” y damos click en el botón Procesar y posteriormente en Descargar.

Ok, asi podemos obtener en CSV las tablas de Entidades y Municipios de México gracias al INEGI (recomiendo dar una visita a su página por que me fijé que cuentan con Webservices y recursos muy interesantes).

Los archivos CSV los subí a mediafire, los puedes descargar de los siguientes enlaces:

– Estado CSVs: http://www.mediafire.com/view/87397fu5xkvlw4x/ESTADOS.CSV

– Municipios CSV: http://www.mediafire.com/view/7momdmm7h9fagur/EMUNICIPIOS.CSV

Sin embargo, podemos convertir el CSV a SQL si lo parseamos con PHP (o de hecho, con el lenguaje de preferencia) para no tener que pasar los datos a mano y tener un script siempre disponible.

Para esto comparto el siguiente código en PHP, a mi me resultó útil, traté de comentarlo lo suficiente para si a alguien le interesa como convertir un CSV a SQL a lo mejor le podría ayudar: http://www.mediafire.com/view/zct20zcx4t0x33b/csvparse.php

Finalmente, mis tablas quedaron de la siguiente manera:

CREATE TABLE IF NOT EXISTS pais(
id VARCHAR(2) NOT NULL PRIMARY KEY,
nombre VARCHAR(64) NOT NULL,
fechaModificacion TIMESTAMP NOT NULL
) ENGINE = InnoDB;

CREATE TABLE IF NOT EXISTS entidad(
cve_ent VARCHAR(2) NOT NULL UNIQUE PRIMARY KEY,
nom_ent VARCHAR(50) NOT NULL,
nom_abr VARCHAR(10) NOT NULL,
fechaModificacion TIMESTAMP NOT NULL,
id_pais VARCHAR(2) NOT NULL,
FOREIGN KEY(id_pais) REFERENCES pais(id)
) ENGINE=InnoDB;

CREATE TABLE IF NOT EXISTS municipio(
cve_mun VARCHAR(3) NOT NULL,
nom_mun VARCHAR(50) NOT NULL,
cve_cab VARCHAR(4) NOT NULL,
nom_cab VARCHAR(50) NOT NULL,
fechaModificacion TIMESTAMP NOT NULL,
cve_ent VARCHAR(2) NOT NULL,
FOREIGN KEY(cve_ent) REFERENCES entidad(cve_ent),
UNIQUE(cve_mun, cve_ent),
PRIMARY KEY(cve_mun, cve_ent)
) ENGINE=InnoDB;

Y para la codificación, la Base de Datos la podemos crear:


CREATE DATABASE IF NOT EXISTS geobase DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;

Puedes descargar el script también del siguiente enlace: http://www.mediafire.com/view/or3e3kfh8lzw82e/bd_estructura.sql

Finalmente, si no deseas seguir los pasos anteriores y solo necesitas los archivos para MySQL con los datos de las Entidades y Municipios de México los puedes descargar de:

– Entidades SQL: http://www.mediafire.com/view/b45c0far09ubbop/entidad.sql

– Municipios SQL: http://www.mediafire.com/view/t92rx57vl8xkzin/municipio.sql

Pienso que es útil saber que contamos con estos recursos para nuestros proyectos. Por decir, un recurso que podríamos necesitar es la base de datos de Códigos Postales de México, la cual podemos descargar de la página de SEPOMEX: http://www.sepomex.gob.mx/lservicios/servicios/CodigoPostal_Exportar.aspx en formatos XML, EXCEL o TXT.

Si estamos trabajando con XML podemos utilizar la función de PHP simplexml_load_file (http://php.net/manual/es/function.simplexml-load-file.php).

En la página del INEGI como mencioné, hay muchos recursos que valen la pena revisarse, especialmente si alguno de nuestros proyectos requiere datos geográficos específicos.

A lo mejor puede parecer un post sencillo pero me pareció útil tener referencias para estas tablas, es probable que en algún otro momento las vuelva a necesitar y creo que si Mediafire no las borra las podré bajar de este post en alguna situación de emergencia 🙂