La tecnología de HTML5 y javascript nos permite crear gráficos interactivos livianos sin tener que recurrir a flash, el elemento canvas de html5 es un lienzo virtual que nos permite pintar shapes y agregarles movimiento.
Existen ya varios plugins que nos facilitan el trabajo a la hora de programar con shapes, objetos 3d, animaciones y eventos, tenemos por ejemplo Three.js, KineticJS, raphael.js, etc. Sin embargo en este tutorial no se hará uso de ninguno de ellos, no pretendemos reinventar la rueda :), al contrario, nuestra intención es primero profundizar en el uso de HTML5 y canvas en si, después el aprendizaje y uso de otros plugins resultara muchísimo más fácil.
El objetivo final de este tutorial es la creación de un mapa interactivo estadístico informativo que responda a eventos del usuario (clic) y se conecte mediante llamadas asincrónicas Ajax a un servidor para obtener datos y actualizar la información en pantalla. o.O , osea :
Que necesitamos.
1.- Conocimientos de JavaScript y JQuery.
2.- Conocimiento de php, html, css y gráficos vectoriales SVG.
3.- Editor de imágenes, photoshop, gimp, corel, etc.
4. Un servidor de prueba appserv, Wamp, etc.
5. Un IDE, Dreamweaver, phpeditor, notepad++, etc.
5.- Un mapa de un país, departamento o provincia con sus respectivas divisiones territoriales. Si no puedes encontrar uno, no te preocupes que poco a poco te iremos dejando los recursos que necesites para completar este tutorial 🙂
Tutorial 2: Creación del mapa 🙂
Quinta parte de la serie de tutoriales «Creación de un blog siguiendo el patrón MVC (Modelo, Vista y Controlador)«. En e[...]
En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley[...]
Segunda parte del tutorial «Crea un servicio web REST con PHP y MYSQL«, en esta segunda y ultima parte se completara la[...]
Existe una gran cantidad de contenido sobre productividad, trucos, consejos y trabajo y más. Pero, ¿Qué pasa con esos mo[...]
Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au[...]
1. En la ventana de comandos de matlab escribe «mbuild -setup«, sin comillas y presiona enter. >> mbuild -setup We[...]
