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
EL segundo candidato se llama Carmelo Lenz
La tercera imagen corresponde a un reloj de tamaño 64×64 pixeles de formato *.PNG
Hasta el momento debes tener algo como esto:
2. Nuestro archivo index.html, es el archivo principal donde pintaremos el canvas y hará uso de los archivo elecciones.js y jquery-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»
Editar un documento PDF no es tan sencillo como editar un archivo de texto por ejemplo, para editar archivos PDFs necesi[...]
Última parte del tutorial «Mapas interactivos HTML5», vamos uniendo todo todo el código. En la parte 5 de este tutorial,[...]
Este post esta dedicado a la creación de reportes con imágenes usando el programa iReport Designer. Cuando se desarrolla[...]
En este post crearemos un swing Label personalizado que tendrá la forma circular en su borde, con esto obtendremos un bo[...]
La comunidad 3D Buzz era una de los lugares donde la gente curiosa de aprender a realizar videojuegos buscaba recursos[...]
En este tutorial crearemos un sencillo rompecabezas de un tamaño de 4×6 con 24 piezas que se podrán mover haciendo[...]
