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

Crear web multi-lenguaje con php

Crear web multi-lenguaje con php

En este tutorial realizaremos un proyecto web de un “sitio multi lenguaje” o “web multi idiomas”...

Reconocimiento facial con php

Reconocimiento facial con php

Inspeccionando los cientos de marcadores que tenia en mi firefox, me encontre un enlace web con una interesante clase pa...

Programación Shell: Estructuras de control

Programación Shell: Estructuras de control

Las estructuras de control de Shell son muy parecidos a otras lenguajes de programación. Las estructuras disponibles en...

Lectura y edición de metadatos con ExifTool

Lectura y edición de metadatos con ExifTool

En este post te hablaremos sobre una interesante herramienta para le lectura y edición de metadatos que no te debe de fa...

SharedPreferences: Preferencias de Usuario

SharedPreferences: Preferencias de Usuario

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

GraphADT: Clases para trabajar con grafos en java

GraphADT: Clases para trabajar con grafos en java

GraphADT es una proyecto alojado en github escrito en java que te permite trabajar con grafos, a la fecha de escribir es...

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 este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

Android Bolivia

MAUS