HTML, CSS y JavaScript. Lenguajes para el desarrollo de páginas web

Son muchos los profesionales del sector de las geotecnologías que, en algún momento de su carrera profesional, deciden adentrarse en el ámbito del desarrollo web.

Internet, como la Red de redes, permite tener acceso a una cantidad ingente de información y recursos a escala mundial. Dentro de este volumen de datos, la información geolocalizada juega un papel destacado.

Poder hacer accesible en un visor web los datos geolocalizados de un proyecto, consumir servicios de mapas externos, añadir herramientas de consulta espacial, visualizar la información en su vertiente 2D o 3D son algunas de las opciones actualmente disponibles.

A pesar de contar con gran número de guías y recursos para poder crear nuestra propia aplicación de mapas en Internet, este aprendizaje no empieza siempre de forma correcta. Es frecuente que, si no tenemos una formación técnica sobre el desarrollo de aplicaciones web, el primer paso sea usar alguna de las magníficas librerías JavaScript existentes como Leaflet u OpenLayers.

Accediendo a la documentación, en pocos minutos podremos contar con un visor de mapas básico. Incluso, con algo de esfuerzo, mirando foros especializados, copiando y modificando código ya existente o añadiendo complementos a nuestra librería y con alguna que otra hora, nuestra aplicación de mapas puede llegar a disponer de un control de capas, una leyenda, algún que otro evento.

Pero una vez llegado a este punto, comienzan a surgir algunas preguntas que en ocasiones no son fáciles de responder. Por ejemplo:

• ¿Cómo puedo integrar mi aplicación de mapas dentro la estructura de una web ya existente?
• ¿Qué hacer si quiero hacer el diseño de la aplicación más personalizada o que se vea correctamente en un teléfono?
• ¿Puedo programar nuestras funcionalidades o integrar las que me ofrece la librería de mapas en menús, botones o paneles?
• ¿Qué debo hacer para integrar mis datos geográficos con otros recursos disponibles? ….

Es en este momento, cuando nos damos cuenta de que nos hace falta conocer los lenguajes de programación de base necesarios para poder avanzar en nuestro proyecto inicial

Estos lenguajes siempre han estado ahí, y no son otros que HTML, CSS y JavaScript. Pero es ahora cuando nos vemos en la necesidad de profundizar más en sus características.

Vamos a hacer un breve resumen a estas tecnologías con la intención de poder asentar algunos conceptos básicos y necesarios para poder desarrollar aplicaciones web de mapas.

HTML. La estructura.

Cuando escribimos la dirección de una página web en nuestro navegador web (ej. Chrome o Firefox), se realiza una petición de datos a un servidor donde se encuentra alojada la página usando un conjunto de protocolos (TCP/IP y HTTP).

Si la petición se realiza de forma correcta, el servidor nos responderá enviando paquetes de archivos entre los que se encuentra código y ficheros que nuestro navegador (cliente) organizará para mostrarnos el resultado en pantalla.

Dentro de estos archivos se encuentra principalmente código HTML que definirá la estructura de la página web. A continuación, se aplicará el estilo y la apariencia gracias a CSS. Y, para terminar, toda la funcionalidad y dinamismo de la página será posible gracias a JavaScript.

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. HTML nos provee etiquetas para describir los diferentes tipos de contenidos (elementos) de nuestra web. Gracias a ello, el navegador podrá comprender el contenido enviado por el servidor y representarlo en pantalla.

Dentro de estos elementos contamos se encuentran:

• Párrafos de texto <p>
• Textos jerárquicos de apartados <h1> <h2>
• Imágenes <img>
• Enlaces a recursos u otros apartados de la web <a>
• Formularios <form> con cajas de texto, desplegables, opciones, botones de envío…

Juntos con estos elementos, tendremos también la opción de añadir etiquetas semánticas que indican qué es el contenido que contienen, en lugar de cómo se debe formatear. Algunas de ellas son <header>, <section>, <nav> o <footer>.

CSS. Estilo y apariencia.

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML.

Con CSS asignamos fuentes y color a textos o cajas, modificamos tamaños, añadimos imágenes de fondo, definimos márgenes o incluso podemos cambiar completamente la apariencia de un elemento HTML como una lista para convertirla en una barra o menú de navegación.

Gracias a CSS también podemos hacer que nuestra página web se vea correctamente en otros dispositivos como móviles o tabletas. Es lo que se conoce como diseño web adaptativo o responsive.

JavaScript. Funcionalidad y dinamismo

JavaScript es un lenguaje de programación del lado del cliente que te permite implementar dinamismo y funcionalidad a nuestra página web.

Además del contenido estático, con JavaScript podremos

• Mostrar actualizaciones de contenido.
• Vincular eventos dinámicos a elementos HTML (clic en botones, accesos a menús, filtros en formularios…)
• Almacenar datos en variables.
• Usar funciones complementarias como gráficos o mapas mediante APIS de terceros.
• Acceder a conjuntos de datos públicos o privados.

Leaflet u OpenLayers son un par ejemplos de estas APIS de terceros escritas con JavaScript que van a permitir añadir estas funciones de visualización y consulta de datos geolocalizados.

Pero existen muchas otras librerías que permitirán, por ejemplo, ver datos en 3D o añadir cuadros con gráficos estáticos.

¿Cómo puedo aprender desarrollo web?

Hemos querido mostrar en esta entrada, que para convertiros en verdaderos desarrolladores web mapping es necesario “empezar la casa por los cimientos”. Tener una buena base sobre HTML, CSS y JavaScript, te permitirá llevar tus desarrollos a otro nivel.

Dentro de nuestro Máster de SIG de código abierto, hemos incluido un bloque específico donde se tratarán estos y otros aspectos vinculados con la programación web.

Etiquetas: css, html, javascript