Web Mapping. ¿donde empiezo?¿Que debo conocer?

Deseo publicar Mapas en la Web. ¿Por donde empiezo?¿Que debo conocer?

Continuando con el tema de la publicación de mapas en la web o Web Mapping, si no han visto el articulo introductorio en el que iniciamos el tema, colocamos algunas definiciones fundamentales como Web Mapping, Mash Up, teselas y características de un buen web map, entre otras cosas pueden consultar este link: Introducción al web mapping

Este es el segundo de varios artículos sobre este tema tan interesante que iremos abordando, pero he querido llevarlo poco a poco, desde lo básico

Es importante aclarar que este tema es muy amplio y en ocasiones complejo, sin embargo, compartiendo lo expuesto por el desarrollador de la librería Leaflet el Sr. Vladimir Agafonkin, en varias de sus conferencias, no debería serlo (en lo que pueda les coloco esos vídeos son didácticos y divertidos), tal como señala el eslogan de uno de sus vídeos "La simplicidad salvara a los GIS", y cito "si no estas haciendo algo que de resultados de forma sencilla no lo estas haciendo bien". Lo bueno del web mapping es que no tienes que ser un experto para colocar tus mapas en la web, hay muchas opciones, la verdad hay muchas cosas que desconozco, así que aprendamos juntos :)

---

Deseo publicar un mapa en la web. ¿Que opciones tengo para hacerlo y cual me conviene?

Este interrogante es el marco por el cual iremos desarrollando el tema en este articulo y en los posteriores, pues todo comienza aclarando mi objetivo y el contexto, donde estoy - adonde quiero llegar

Deseo publicar Mapas en la Web, compartir información Geoespacial, integrarlas en SIG desde la web ¿Como lo hago? primero debes tener claro el fin, la población objetivo, y si deseas aventurarte en un campo que lo más probable sea desconocido, como es el diseño web o la creación de mapas

Esto nos marca un punto coyuntural, ya que el enfoque es relativo a tu posición, donde te encuentras, cual es tu profesión, expliquemos los posibles escenarios que puedo ver:

Requieres colocar mapas en la web y:
1. No sabes absolutamente nada ni de la web, ni de mapas
2. Eres un profesional del campo, geógrafo, cartógrafo, geodesia,..... o disciplina afín, o simplemente te gusta y te has inmerso en ello
3. Eres un profesional del diseño web pero no sabes de mapas
4. Manejas ambas cosas, mapas y la web

Para cada caso hay una solución fácil, rápida y sencilla, claro si empiezas a exigir pues como todo, la cuestión se complica y tienes dos opciones: estudiar o pagar

---

Un aspecto elemental es:

Vas a publicar mapas en la web, bueno pues tienes que saber un poquito del tema

¿Que debo manejar para introducirme en el mundo web?

Este articulo no pretende profundizar en las complejidades del diseño web ni tampoco en el GeoEspacial, por el contrario, la intención es que sea un material digerible con pocos conocimientos en el tema. Conversemos un poquito y de forma sencilla sobre los conocimientos necesarios

Como verán este articulo esta dirigido a aquellos profesionales relacionados con la geomatica o interesados que desean publicar mapas en la web y no conocen sobre la tecnología de la Web, pudiendo sentirse un poco intimidados, deseo mostrarles que no deben estarlo, la idea es convencerlos que con un poquito de estudio verán que es muy simple.

Algo que puede ser evidente pero por si acaso alguien se lo pregunta, Html, CSS y Javascript son libres no ameritan para trabajar con ellos ningún registro, pago ni nada por el estilo

¿Es necesario conocer de tecnología web para publicar mapas en la Web?

Ciertamente no es imprescindible, como les mostré en los artículos sobre los servicios de publicación de mapas en la Web: CartoDb - QGis Cloud y Servicios Web Mapping, existen opciones libres (entiéndase de código abierto/nula inversión) o casi libres por las cuales puedo lograr mi objetivo, pero al final nos sentiremos frustrados por que las cosas no salen como queríamos y no tenemos idea de como resolverlo, en definitiva es recomendable y prudente estudiar un poco el tema, unas comparaciones para resaltar este punto:

• ¿Necesito saber de mecánica para manejar un vehículo?

  No, pero es prudente saber que nuestro auto necesita agua, liga de frenos, aceite en la caja y el motor, y que debo revisarlo periódicamentee. Diferenciar un ruido en el tren delantero de sonidos del motor

• Una comparación mucho más pertinente seria: ¿necesito conocer de la tecnología web para crear un Blog?

  Lógicamente No, pero ineludiblemente si quieres un producto con un mejor acabado, colocarle un menú descendente (si, si ya se que tengo que arreglar el mio :/ ), un indice, un poquito de dinamismo, tener un mayor control en el acabado final, tienes que aprender un poquito de la web

---

HTML: Las bases de nuestras paginas web están escritas con el lenguaje de hipertexto Html, esto no requiere programación en lo absoluto (no se asusten), Html es un lenguaje de etiquetas y los navegadores lo interpretan, incluso pueden mostrarlo aunque lo hayamos escrito con errores garrafales o sencillamente ignoran lo que no entienden

Incluso en la mayoría de los programas para escribir documentos como Microsoft Word, puedes guardar tu archivo como .Html y luego examinar su código

Html ha evolucionado, cambia continuamente junto con los otros lenguajes y aplicaciones que lo acompañan, relegando algunas e incorporando otras, actualmente la última versión de Html es Html5, no todos los navegadores y sus versiones soportan todo lo nuevo que trae, es decir puede que la última versión de Mozzila y Chrome desplieguen todas o la mayoría de las novedades de Html5, pero versiones anteriores, más antiguas, no lo harán. ¿Porque es importante esto? bueno digamos que publicas tu mapa y/o información y deseas que se difunda al mayor público posible o a los que pueda ser útil, puede que exista un segmento importante de la población objetivo que no tenga el navegador actualizado por lo que no lo verán o por lo menos no de la manera optimizada. Esto es valido para todas las demás tecnologías que acompañan a Html en el mundo Web. Pero no te preocupes esto tiene solución, existen formas de garantizar que tu contenido se visualice en todos los navegadores y dispositivos de forma similar, ya lo veremos más adelante

Html se fundamenta en etiquetas que apertura y cierre, lo podemos escribir en cualquier sencillo editor de texto como bloc de notas, en la imagen se muestra la apertura cierre de la etiqueta "P", dentro de la cual escribiremos párrafos dentro de nuestra pagina web

Una estructura sencilla, básica de una pagina Web sería como la siguiente imagen. Html5 ha introducido nuevas etiquetas y estructura a las paginas web, pero esto no es de preocupar debido a que se garantiza la compatibilidad con las antiguas versiones de Html, al final la mayoría escribe una mezcla de las versiones de Html sin mayores problemas

Como pueden ver la pagina comienza con una etiqueta html de apertura y finaliza con una de cierre, en cuanto a la estructura vemos tiene una cabecera o encabezado, en el que definimos propiedades, códigos, especificaciones, que serán cargados previamente antes que el contenido. Luego viene el espacio donde colocamos el contenido de nuestra pagina dentro de las etiqueta Body (cuerpo en ingles)

Como no le hemos colocado contenido si desplegamos el archivo Html en un navegador como Mozzila nos mostraría una pagina en blanco, veamos ahora con algo de contenido:

En este ejemplo ya introducimos algo de contenido a nuestra pagina web, texto y una imagen, aqui hay una variedad de las muchas etiquetas que nos da Html, las etiquetas H1, H2, H3 y H4 se utilizan para títulos, las etiquetas B, Strong y Em se utilizan para dar énfasis a un texto, la etiqueta Ul se utiliza para definir una lista y luego entre etiquetas Li los elementos de la lista, finalmente en la etiqueta Img se utiliza para introducir una imagen, aquí le definimos las propiedades de tamaño, como son ancho y alto, imagina que tu imagen es un mapa y puedes controlar al vuelo las siguientes propiedades: posición, ancho y alto, entonces tendríamos un mapa con un zoom interactivo :-)

El resultado seria algo como esto:

Otras etiquetas muy utilizadas y que veremos más adelante son CENTER y DIV, la primera como su nombre indica permite centrar dentro de la pantalla cualquier etiqueta Html sea imagen o texto. La etiqueta DIV nos define un marco, por ejemplo un conjunto de texto podemos incluirlo dentro de una etiqueta DIV y darle propiedades especificas, como tipo de texto, tamaño, color, posición, para eso utilizamos CSS, pero ¿Qué es CSS?

CSS: es el lenguaje de cascada que nos permite darle formato a nuestra pagina web, Tampoco es programación!!, por medio de CSS unos mismos componentes textos html, imágenes, pueden adquirir en nuestra pagina web resultante distintos aspectos, un mismo contenido puede generar diversos acabados. El lenguaje CSS es un estándar para el arreglo del contenido de una pagina web, de esta forma se optimiza el contenido de una pagina web y es mucho más fácil de entender. CSS evoluciona en cada una de sus nuevas versiones y cada vez más incorpora mayor dinamismo, aunque crece en complejidad. El código CSS se puede escribir dentro del Html o preferiblemente en un archivo aparte con extensión .css

Para explicar de forma sencilla lo que se puede hacer con CSS, con CSS "capturamos" las etiquetas Html que vimos anteriormente y darles un formato distinto, manipularlas e incluso darles cierta interactividad. Como dije anteriormente el código CSS lo podemos introducir de muchas formas, dentro de la pagina web o en archivos externos

El código CSS dentro de la pagina web se introduce entre las etiquetas STYLE y le añadimos TYPE="text/css", lógicamente esto le esta especificando al navegador que aquí viene el código CSS

Luego de esto sencillamente referenciamos la etiqueta por su letra y luego entre llaves escribimos el código, por ejemplo: P {font-family:Times New Roman, sans-serif; font-size: 28px; color: "red";} con esta linea estamos especificando que todo el texto dentro de las etiquetas P aparezca con el tipo de letra Times New Roman, tamaño 20 en pieles y de color Rojo.

Como les dije aquí tampoco hay programación solo debemos conocer como aplicar y cuales son las propiedades CSS. Pero que sucede si no quiero todo el texto en rojo, tenemos la opción de darle un identificador único a nuestras etiquetas y actúar específicamente sobre ellas, para ello dentro de la etiqueta Html por ejemplo DIV le añadimos id="marco1". Luego podremos llamar esta etiqueta y darle propiedades a la etiqueta DIV y otras especificas a DIV "marco1".

Al ejemplo anterior añadimos el código CSS del color de texto, tipo de letra e incrementamos el tamaño de las letras, también verán que introduje un poco de sombreado:

Introduzcamos mucho más código CSS, personalmente les recomiendo como método de aprendizaje sencillamente descargar un manual de CSS, luego en tu pagina web referencia las etiquetas Html y prueba con las propiedades y ve que cambios ocurren. Esto lo puedes hacer sencillamente en bloc de notas y guardas el archivo con extensión .html, para ver como va quedando sencillamente haces doble clic sobre el archivo html y listo

Si introducimos un poco de código CSS en el ejemplo anterior podemos fácilmente lograr algo como esto

Las versiones más recientes de CSS permiten cierta interactividad, a esto me refiero interactuar con el usuario o en términos de programación responder ante eventos, claro aún es limitado ya que para un manejo de eventos más versátil cuento con Javascript. Aquí un ejemplo sencillo de respuesta ante el evento de colocar el puntero del mouse sobre una entidad

Coloca el ratón sobre este texto!!

Esto es un evento sencillo con CSS

Javascript: esto si es programación, Javascript es casi tan antiguo como la web, es el lenguaje encargado de darle dinamismo a nuestras paginas web, con este lenguaje podemos manipular el contenido, introducir nuevo o incluso crear "cosas". Sin embargo, este lenguaje en un principio era limitado y el problema de la estandarización, diferentes navegadores y sus empresas tenían otras versiones, que evolucionaron como el caso de ActionScript o como se le conoce a sus aplicaciones Flash

Con Javascript podemos manejar eventos sobre todos los elementos de nuestra pagina web, es por ello que las librerías para generar mapas más recientes, famosas y versátiles están escritas en Javascript, esto incluye a Leaflet, OpenLayers, D3 y el API de Google para mapas (esta última ya fue liberada también)

También se han generado librerías Javascript que paulatinamente se han ido convirtiendo en imprescindibles para ciertas actividades en la web y facilitan mucho el trabajo tales como JQuery, Ajax por nombrar algunas

Existe una infinidad de otros programas que nos permiten trabajar en la web tales como Java, Php, Phyton, el ya nombrado Flash y Flex, pero separo y describo estos tres porque son la base fundamental y últimamente el desarrollo web con Html5 esta presionando para el uso preferente de estos lenguajes y herramientas compatibles, especialmente en lo que se refiere al dinamismo e interactividad, para cubrir este aspecto Javascript y Html5 incorporan la etiqueta Canvas

Javascript puede escribirse de muchas formas, la razón de esta variedad es por la antigüedad y evolución de este lenguaje, algunas no las consideraríamos programación, sino más bien algo similar a lo que hasta ahora hemos hecho con CSS y Html.Javascript toma vida y le da vida a nuestras paginas web, así que es un lenguaje diseñado para capturar los elementos de la pagina web (Html) de forma dinámica.

Podemos escribir Javascript:

• Como una serie de comandos que realizaran una tarea
• Definiendo funciones, reciben elementos, realizan una tarea y dan un resultado. Por ejemplo podria tener una imagen y aplicarle un factor de escala, el dato requerido seria el valor del factor de escala, la tarea serie reducir o agrandar la imagen
• Programación orientada a objetos, en este articulo programación en los SIG II, hablamos un poco sobre este estilo de programación, su importancia todos los programas SIG están desarrollados de esta forma

Algunos ejemplos muy sencillos de Javascript los podríamos hacer dentro de las mismas etiquetas Html, aunque esto va en contra de la estandarización ya que se recomienda que todo el código Javascript este en un archivo separado, ademas cosas sencillas como esta ya la realiza CSS con eficiencia

Por ejemplo dentro de una etiqueta DIV o P puedo definir que sucederá cuando el usuario pase el mouse sobre ellas, solo tengo que escribir onmouseover= lo que queremos que suceda cuando el usuario coloque el mouse encima, onmouseout= lo que deseamos cuando el usuario quite el mouse de la etiqueta, un ejemplo de esto:

Posa el mouse sobre este espacio y sobre el texto:

Esta es una prueba Javascript

Con Javascript podemos recibir información del usuario y utilizarla par nuestras aplicaciones, botones, formularios para la entrada de datos y mucho más

TOCAME POR FAVOR

Quizás sea mejor con un ejemplo con un mapa, abajo verán una imagen de una cuenca sobre un modelo de pendiente, si posan el mouse sobre la imagen verán el modelo de elevación del cual se genero, si pasan sobre la esquina superior izquierda verán el nombre de la cuenca y finalmente si hacen clic tendrán un acercamiento

Cuenca Rio

Camoruco

---

¿En que pagina web puedo colocar mis mapas?

Aquí nuevamente tenemos varias alternativas:

1. Blogs como por ejemplo los más conocidos Blogger y Wordpress
2. Adquirir un Hosting gratuito
3. Colocar nuestros mapas y sus códigos en servicios de almacenamiento en la nube
4. Adquirir un Hosting pago

Cada una de estas opciones tiene sus ventajas y desventajas

---

Los Blogs: bueno son una alternativa interesante, gratuita, pero por ello con ciertas limitaciones, en el caso de Wordpress.com estamos limitados al código que podemos colocar, a poner publicidad, a menos claro que paguemos. Wordpress ya esta implementando opciones para colgar mapas

Wordpress también tiene una opción tipo Hosting más completa, Wordpress.org pero sinceramente no la he manejado, abría que evaluarla

La opción de Blogger aquí presente tienes el gran respaldo de una de las corporaciones más grandes como es Google, tu Blog se indexa fácilmente en las búsquedas puesto que Blogger le da preferencia a sus afiliados, es gratis y te permite manejar código Html, CSS y Javascript.

Desventajas: el problema es que presenta en limitaciones para implementar Javascript complejo, si intentas importar una librería de mapas y colocar tus mapas tienes que adentrarte de lleno y estudiar, estudiar. Otro problemita es que (y cito a muchos usuarios) Blogger habla Blogger, es decir, implementa tantas variables propias que es prácticamente un nuevo lenguaje que hay que manejar, pero esto se compensa por una extensa red de usuarios que ya han descubierto casi todo

Blogger cambia continuamente, recuerden que Google trabaja bajo la filosofía de la versión Beta perpetua, es decir siempre esta tratando de mejorar, el problema es que esos cambios pueden alterar nuestro trabajo

---

Adquirir un Hosting gratuito: contar con un Hosting implica instalar una serie de programas (servidores) para administrar nuestra pagina web, lo bueno de esta opción es que saltamos los problemitas anteriores, de esta forma es mucho más fácil implementar cualquier tipo de código Html, CSS y Javascript, es más dependiendo de la opción podemos tener soporte a lenguajes importantes como PHP

Desventajas: bueno aquí tendrás que instalar más programas para gestionar tu pagina, mientras que en un Blog todo es Online, pero la libertad y potencialidades que tendrás compensa esto. Debes tener cuidado al escoger algunos Hostings que se ofrecen "gratis" y después del primer año, cuando ya has invertido tiempo y esfuerzo, tienes cierto trafico, te piden que pagos o pierdes tu trabajo!!, claro seguro te lo advirtieron en letras muy pequeñitas algo como tamaño fuente 4. Otro problemita es que los Hostings gratuitos generalmente colocan publicidad indeseable, me explico, tienes tu espacio en la web pero ellos ponen publicidad en tu pagina que capitalizan los dueños, claro esto no quiere decir que tu no coloques tu propia publicidad

Una desventaja común en todo lo "gratuito" es que si generas muchooo trafico, es decir, te va super bien, puede que tu pagina colapse ya que tiene un ancho de banda limitado, claro si esto ocurre el administrador te enviara un mensaje en el que te recomendara que para evitar estos penosos problemas te suscribas y pagues

---

Colocar nuestros mapas y sus códigos en los servicios de almacenamiento en la nube este artificio no me parece una alternativa a una pagina Web (aunque he leído que es posible), yo lo veo como una solución a los problemas de compatibilidad al momento de introducir código, insertar librerías, sencillamente colocas todo tu código requerido para tu mapa en un servicio de almacenamiento en la nube como DropBox o Google Drive, y luego lo insertas en tu pagina sea un Blog o pagina web, debe desplegarse sin problemas

Desventaja: por ser un servicio de almacenamiento Dropbox o Google Drive no esperan un trafico exagerado de lo que almacenan, es más como un banco para guardar información, así que si detectan un trafico excesivo sencillamente lo bloquean, esto no quiere decir que pierdas tus datos, sino que tu mapa dejara de funcionar hasta que encuentres otra opción

---

Adquirir un Hosting pago bueno que te puedo decir, si estas pagando deben darte soporte y resolver tus problemas. En este punto debes evaluar costos porque si vas a pagar un hosting y tu interés son los mapas puede que sea mejor utilizar un servicio de mapas y pagarlo como CartoDB, MapBox, MangoMap, ec, etc, etc

Claro puede ser también que estas super claro en lo que quieres y deseas crear una especie de Geoportal, con estándares, o algo como una IDE (Infraestructura de Datos Espaciales), para ello requieres un buen hosting. ¿Que diferencia hay entre un web map con javascript y un Geoportal? ¿Que opciones (organizadas) tengo para crear mis mapas web? Esto lo iremos abordando en próximos artículos

Hasta aquí tienes una visión de bastante aspectos sobre el mundo de internet relacionado con los mapas, tocamos también algunos tips avanzados que nacen de la experiencia, esta información y el resto de artículos puedes tomarlo como punto de partida si deseas adentrarte en este campo, claro hay otros aspectos que tocar porque esto es extenso. Una opción que podría implementar seria un curso Online pero ya veremos mientras iré colocando algunos ejemplos y artículos sobre el tema