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

Obteniendo coordenadas XY con Touch Event

Obteniendo coordenadas XY con Touch Event

Los smartphone al no tener los típicos botones de los celulares, su pantalla es sensible al movimiento, esto se llama «t...

Pruebas instrumentadas con Espresso

Pruebas instrumentadas con Espresso

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Creación de mapas con shapes – Parte 3

Creación de mapas con shapes – Parte 3

En nuestro mapa interactivo, se hará uso de un mapa departamental dividido en provincias, todo a través  de shapes, si b...

PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

Crea un TextBox estilo Metro para java

Crea un TextBox estilo Metro para java

En este tutorial personalizaremos un JTextField java para darle la apariencia de un TextBox de Windows Metro. El TextBox...

Impresión de imágenes en PDF

Impresión de imágenes en PDF

Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF  (Portable Do...

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

Una clase JTree permite mostrar datos de una forma jerárquica y en realidad este objeto no contiene sus datos; es decir,...

Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...

En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario.  Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

Herramientas

Generador de Enlaces a Whatsapp