domingo, 1 de mayo de 2011

Hacer que la descripción del Google Earth sea más vistosa

En este momento hablaremos como hacer que nuestra descripción del Google Earth de cada entidad sea más vistosa y ordenada, ósea que sea vista de esta forma…

a esta más ordenada

Entonces tenemos que poner en la parte de la descripción (click derecho en la entidad en el menú donde están los archivos KML / KMZ al lado izquierdo del Google Earth) y seleccionar Propiedades e ir a la pestaña de Descripción) este código que se muestra en la imagen (abajo de esta imagen esta el codigo que esta en la misma):


<table border='1' cellpadding='0' cellspacing='0' bordercolor="magenta">
<tr> <td colspan='2'><font color="red"; font size= 4><b><u>Ubicación Política:</b></u></font></td> </tr>
<tr> <td><b>País:</td></b> <td><i>Perú </i></td> </tr>
<tr> <td><b>Departamento:</td></b> <td><i> Junín </i> <td> </tr>
<tr> <td><b>Provincia:</td></b> <td><i>Huancayo </i> </td> </tr>
<tr> <td><b>Distrito:</td></b> <td><i>Huancayo </i> </td> </tr>
<tr><td colspan='2'> </td> </tr>
<tr> <td colspan='2'><font color="blue"; font size= 4><b><u>Datos Importantes:</b></u></font></td> </tr>
<tr> <td><b>Altura:</td></b> <td><i>3.259 msnm </i></td> </tr>
<tr> <td><b>Fundación:</td></b> <td><i> 1 de junio de 1572 </i> <td> </tr>
<tr> <td><b>Población:</td></b> <td><i>336.293 habitantes </i> </td> </tr>
<tr> <td><b>Superficie:</td></b> <td><i>4 711,15 km² </i> </td> </tr>
<tr> <td><b>Fuente:</td></b> <td><a href ='http://es.wikipedia.org/wiki/Huancayo' target='_blank'>http://es.wikipedia.org/wiki/Huancayo</a></td> </tr>
<tr><td colspan='2'> </td> </tr>
<tr>
<td colspan='2'><div align='center'>
<img src='http://upload.wikimedia.org/wikipedia/commons/c/c0/EscudoHYO.jpg' width='115' height='98' alt='Escudo' />
<DIV><font color="green"> <font size= 3><font face="Comic Sans MS">Escudo de la Ciudad de Huancayo </font></DIV>

</tr>
</table>

Ahora viene la explicación del mismo, ya que es un código HTML y si sabemos manejarlo, nos será más fácil poder hacer esto. No quiero explicar muy a fondo los códigos HTML ya que este es un blog de GIS y si quieren profundizar más de este tema, en el internet hay mucha información la misma que yo obtuve y solo me limitare a explicar los códigos que se muestran.

Según la imagen es una tabla que tiene 2 columnas de las cuales los que tienen un titulo están en una celda, ósea que las 2 celdas se han juntado y lo mismo ocurre la que contiene el escudo de la ciudad de Huancayo.

Para crear la tabla. Debemos escribir:


<table border='1' cellpadding='0' cellspacing='0' bordercolor="magenta">

El cellpadding configura el espacio entre el borde y el texto dentro de la celda.

El cellspacing configura el espacio entre las líneas del borde la tabla (ya que el borde de la tabla tiene doble línea).

El bordercolor nos configura el color de los bordes

Para poner los atributos de nuestra descripción, ponemos el resto del código en cada descripción de información:

Tenemos la categoría Ubicación Política que ocupa 2 celdas horizontales y esta categoría tiene 4 descripciones que ocupan 1 celda, luego para la parte de la categoría tenemos este código


<tr> <td colspan='2'><font color="red"; font size= 4><b><u>Ubicación Política:</b></u></font></td> </tr>



<tr>… </tr>

indica el inicio y fin de una fila de una tabla. Los elementos que están entre ellos están contenidos en la fila.


<td>… </td>

indica una celda que está contenida en una fila. Los elementos que están entre ellos están contenidos en una celda.

colspan indica el numero de columnas que ocupara la celda (en este caso es 2).

font color indica el color del texto.

font size indica el tamaño del texto.


<b>…</b>

pone en negrita (bold) al texto que está entre ellos
.


<u>…</u>

le pone un subrayado (under line) al texto que esta entre ellos
.


</font>

indica hasta donde será la configuración del font color y font size.

En la siguiente línea vemos:

<tr> <td><b>País:</td></b> <td><i>Perú </i></td> </tr>

Donde lo único nuevo es:


<i>…</i>


pone en cursiva o itálica al texto que ésta entre ellos.

Después tenemos la fuente de donde obtuvimos esta información:


<tr> <td><b>Fuente:</td></b> <td><a href ='http://es.wikipedia.org/wiki/Huancayo' target='_blank'>http://es.wikipedia.org/wiki/Huancayo</a></td> </tr>

En la cual se pone la página web de donde obtuvimos esta información y el enlace para que cuando hagamos click nos lleve a esta página web, para lo cual hacemos:
<a href="http://www.pagina_web_a_que_queremos_enlazar.com/">texto que sirve de enlace a la página web"</a>

Donde:

en azul esta la pagina web a que se quiere enlazar.

en rojo esta el texto que nos sirve de enlace.

Como cierre de esta parte de la tabla, tenemos este código:



<tr><td colspan='2'> </td> </tr>

Donde:

&nbsp se usa para ingresar espacios en el texto ya que es una celda vacía, se pone como “relleno”.

En la última celda tenemos el escudo de la ciudad de Huancayo y un texto que dice “Escudo de la Ciudad de Huancayo”, ambos elementos están centrados en la celda:



<tr>

<td colspan='2'><div align='center'>

<img src='http://upload.wikimedia.org/wikipedia/commons/c/c0/EscudoHYO.jpg' width='115' height='98' alt ='Escudo' />

<DIV><font color="green"> <font size= 3><font face="Comic Sans MS">Escudo de la Ciudad de Huancayo </font></DIV>

</tr>


<tr>…</tr>

como se explico sirve para abrir y cerrar la fila entera.


<div align='center'>

nos sirve para alinear el contenido de la celda al centro del mismo.

Si queremos poner una imagen, ponemos:


<img src='http://upload.wikimedia.org/wikipedia/commons/c/c0/EscudoHYO.jpg' width='115' height='98' alt ='Escudo' />


En donde:

En rojo se pone la fuente de la imagen que queremos incluir.

En azul se pone el ancho en pixeles de la imagen.

En verde se pone la altura en pixeles de la imagen.

En magenta se pone un comentario para la imagen.

Para cerrar la tabla ponemos:


</table>


Y tenemos listo nuestra descripción más ordenada.

Deseando que sea útil esta información, si tuvieran alguna consulta o comentario, lo pueden hacer al correo recursos.web.gis@gmail.com ó a info@ingeografos.com.pe. Gracias y saludos.



ª