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

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Crea App multilenguaje con Android Studio

Crea App multilenguaje con Android Studio

En este post aprenderemos los pasos básicos para construir una aplicación android con soporte multilenguaje, utilizaremo...

Sumar 2 numeros

Sumar 2 numeros

Una vez que terminamos el obligatorio 🙂 “Hola mundo“, podemos crear aplicaciones un tanto más elaboradas, pe...

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

Conexión MySQL y C#

Conexión MySQL y C#

En este post vamos a crear una aplicación sencilla para conectar C# con MySQL. Manos a la obra 🙂 Necesitamos – Con...

Hola Mundo con Firebase

Hola Mundo con Firebase

Firebase es la plataforma para el desarrollo de aplicaciones web y aplicaciones móviles de Google el cual se centra en e...

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 un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

ImageMagick es un software de código abierto multiplataforma que contiene una serie de herramientas para leer, mostrar,...

OCR (Optical Character Recognition) en español, Reconociminto Optico de Caracteres, es el proceso por el cual  se extrae...

La misión espacial de la NASA, el Mars  2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s...

Android Bolivia

MAUS