Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Mapas interactivos – El proyecto – Parte 2

Mapas interactivos – El proyecto – Parte 2

Autor jc mouse domingo, noviembre 18, 2012

Comenzando este tutorial, primero necesitamos definir la «estructura» de nuestro proyecto. Haremos uso del IDE de Dreamweaver en cualquiera de sus versiones.

1. Crea un nuevo sitio, yo lo llame «html5», tu llámalo como quieras, después crea una carpeta «images« , un archivo «index.html», un archivo javascript «elecciones.js» y un archivo php «data.php».

Se hace uso de tres imágenes,  «foto1.jpg» y «foto2.jpg» corresponden a las fotografías de los corruptos, digo, honorables candidatos políticos  de un tamaño 100×100 pixeles.

El primer candidato se llama Jessica Jordan

jessica

EL segundo candidato se llama Carmelo Lenz

carmelo

La tercera imagen corresponde a un reloj de tamaño 64×64 pixeles de formato *.PNG

reloj no marques las horas

Hasta el momento debes tener algo como esto:

dreamweaver project

2. Nuestro archivo index.html, es el archivo principal donde pintaremos el canvas y hará uso de los archivo elecciones.jsjquery-1.7.1.min.js o superior. También se añade en el head un poco de código CSS.

El código es el siguiente

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Elecciones Departamentales - Beni 2013</title>
        <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
        <script type="text/javascript" src="elecciones.min.js"></script>
        <style type="text/css">
  <!--
  body {
    background: #D3D3D3; 
    background: -moz-linear-gradient( #c4c4c4 , #f5f5f5 ); /* FF 3.6+ */  
    background: -ms-linear-gradient( #c4c4c4 , #f5f5f5 ); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient( #c4c4c4 , #f5f5f5 ); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient( #c4c4c4 , #f5f5f5 ); /* Opera 11.10 */  
    background: linear-gradient( #c4c4c4 , #f5f5f5 ); /* the standard */      
  }
  -->
        </style>  
</head>
    <body>
        <div>
         <canvas id="canvas" width="1200" height="650" ></canvas>
       </div>
     <footer>
            <h3>Create by jc-Mouse</h3>
  </footer>   
    </body>
</html>

Ejecutando este archivo en el navegador no veremos nada impresionante, solo un degradado por toda la página, nuestro canvas por el momento se encuentra vacío.

En el siguiente capítulo: «Creación del mapa departamental»

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

Que es y como se crea una Imagen Forense

Que es y como se crea una Imagen Forense

¿Que es y para que sirve una imagen forense? Una imagen forense es un «clon» (copia bit a bit) de algún dispositivo como...

Mapas con HTML5 – Funciones de pintado – Parte 5

Mapas con HTML5 – Funciones de pintado – Parte 5

En esta penúltima parte, declaramos las funciones que nos permitirán pintar los shapes en el canvas, vamos al grano que...

Store Procedure: Result Set

Store Procedure: Result Set

Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R...

¿Qué es AngularJS?

¿Qué es AngularJS?

Bienvenido a este artículo soy Jose Pedraza Desarrollador Web por más de 7 años, escribiré una serie de artículos para i...

Procesamiento de imágenes en java con ImageMagick

Procesamiento de imágenes en java con ImageMagick

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

«Hola Mundo» con Android Studio y Kotlin

«Hola Mundo» con Android Studio y Kotlin

Kotlin es un lenguaje de programación relativamente nuevo que ha ido ganando terreno en el desarrollo de aplicaciones pa...

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