Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Mapas interactivos con HTML5 – Parte 1

Mapas interactivos con HTML5 – Parte 1

Autor jc mouse domingo, noviembre 18, 2012

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.

muevete muevete

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.jsKineticJSraphael.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 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Generar reportes con origen de datos JSON

Generar reportes con origen de datos JSON

JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti...

Gráficos Vectoriales SVG

Gráficos Vectoriales SVG

Las imagenes SVG (Scalable Vector Graphics) (Ver Wikipedia) son un tipo de imagen ya bastante antiguo pero poco conocido...

Crea un plugin WP con panel de administracion

Crea un plugin WP con panel de administracion

En este post crearemos un plugin para el CMS WordPress el cual comprende el plugin en si, un panel de administración y e...

Crea una ventana de dialogo «Acerca de…» personalizado

Crea una ventana de dialogo «Acerca de…» personalizado

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr...

Abrir enlace web desde JLabel con Java

Abrir enlace web desde JLabel con Java

El siguiente código te permite abrir enlaces web desde un JLabel, ademas aprovechando el soporte a etiquetas HTML del co...

Camara de Seguridad por Internet (LiveCam)

Camara de Seguridad por Internet (LiveCam)

Existen muchas camaras de seguridad por internet algunas protegidas por contraseña pero la mayoria no, utilizando el hac...

2 comentarios en “Mapas interactivos con HTML5 – Parte 1”

  1. Guido Caro dice:

    Justo lo que estaba buscando para pasar mi código de Net a la web con HTML5, espero que no sea complicado.

  2. Jose dice:

    Hola muchas gracias! alguien sabe donde encontrar uno de españa ya terminado?

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En muchas ocasiones es necesaria la personalización de componentes java para que estos se adecuen a nuestros requerimien...

En este post mostramos como personalizar el Header (encabezado) de un componente JTable en Java colocando iconos, centra...

El JTable de Java es un gran componente para mostrar datos en una tabla de una forma rápida y sencilla, sin embargo en v...

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

Herramientas

Generador de Enlaces a Whatsapp