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 🙂
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
La policia, el FBI u otros organismos similares utilizaban a dibujantes para realizar el «retrato hablado» de algún male...
En esta oportunidad aprovechando el interés que tienen ahora los superheroes de Marvel, crearemos un formulario de logue...
En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...
En diciembre de 1990 se desarrolló una aplicación llamada WorldWideWeb en una máquina NeXT (programado con el lenguaje O...
Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme...
¿Que es una infografia? «Una infografía es una representación visual informativa o diagrama de textos escritos que en ci...
Los comentarios estan cerrados
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Justo lo que estaba buscando para pasar mi código de Net a la web con HTML5, espero que no sea complicado.
Hola muchas gracias! alguien sabe donde encontrar uno de españa ya terminado?