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

Construye la interfaz de facebook

Construye la interfaz de facebook

En este tutorial veremos un poco lo que es el diseño de interfaces en android, en lugar de colocar el ejemplo de uso de...

Compartir imagen desde android – Share Image

Compartir imagen desde android – Share Image

En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,...

Generador de códigos QR (Quick Response)

Generador de códigos QR (Quick Response)

En este tutorial aprenderemos a crear nuestra propia aplicación java para generar códigos QR. ¿Que es un Código QR?...

Uso de Arrays: Ejemplo práctico

Uso de Arrays: Ejemplo práctico

En este post iremos conociendo de un modo práctico que es y como se utiliza un Array en java, para esto partiremos de un...

Funny Sounds: Sonidos divertidos para celular

Funny Sounds: Sonidos divertidos para celular

En este tutorial “Android Bolivia” construiremos nuestra propia aplicación para molestar a los amigos con so...

Personaliza un JComboBox estilo Metro de Windows

Personaliza un JComboBox estilo Metro de Windows

Si bien se pueden encontrar en google estilos java (Look and Feel) listos para cambiar la apariencia de nuestras aplicac...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Las herramientas Online son cada vez más comunes y pueden encontrarse herramientas para casi todo tipo de tareas, en est...

Apache POI es la API de Java para el trabajo con archivos de Microsoft como son Word, Excel y Power Point. Apache POI se...

Gallery.io es una herramienta de colaboración gratuita desarrollada por Google para cargar trabajos de diseño, obtener c...

Android cuenta con una serie de herramientas en su API para el trabajo con gráficos, entre estos podemos mencionar: Bitm...

Android Bolivia

MAUS