• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página
Logo web Geoinnova

Territorio Geoinnova - SIG y Medio Ambiente

El Blog de SIG, Territorio y Medio Ambiente

  • Web Corporativa
  • Cursos SIG
  • Cursos Medio Ambiente
  • Consultoría
  • Blog
  • Contacto
  • Inicio Blog
  • SIG
  • Programación y Desarrollo SIG
  • Teledetección
  • Medio Ambiente
  • Corporativo
Programación y Desarrollo SIG

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

Nov 26, 2020 · Por Patricio Soriano Dejar un comentario

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.

Logos HTML, CSS y JS
Logos HTML, CSS y JS. Fuente: Wikipedia

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.

Esquema petición/respuesta HTTP. Fuente:  MDN Web docs
web
Esquema petición/respuesta HTTP. Fuente: MDN Web docs

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>.

Código HTML

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.

web
Media Query en CSS para diseño responsive de un mapa

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.

web
Ejemplo de gráfico creado con la librería Char JS

¿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

Artículos relacionados

Creación de variable
Personalización de QGIS con Python
Ene 21, 2021
Programación y Desarrollo SIG
pyqgis, python, qgis
R y su transformador RCaller
Ejecutando R en FME Desktop
Ene 6, 2021
Programación y Desarrollo SIG
Integración de Terre3 con OL6
Como integrar la API 3D TR3.js sobre OpenLayers 6
Ene 4, 2021
Programación y Desarrollo SIG
web mapping
Patricio Soriano

Patricio Soriano

Geógrafo “Full-stack” y desarrollador web especializado en Tecnologías de Información Geográfica. Vinculado con la labor de consultoría, ha realizado diversos proyectos sobre análisis urbanístico, planes de vivienda y gestión patrimonial, así como la puesta en marcha de Sistemas de Información Geográfica corporativos para la administración pública. Dentro de los trabajos como desarrollador se encuentran el diseño de varias aplicaciones webmapping y desarrollos para QGIS (Spanish Inspire Catastral Downloader, CDAU Downloader o qgis2mapea). Autor del blog www.sigdeletras.com y organizador de Geoinquietos Córdoba. Actualmente se encuentra incorporado al equipo de desarrollo de Geoinnova en aplicaciones Open Source. Como docente lleva impartiendo cursos profesionales de SIG desde 2007 para diferentes entidades y en diferentes modalidades (tanto presencial como online). Especializándose en los últimos años en cursos de QGIS a distintos niveles.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Barra lateral primaria

Suscríbete al boletin

    Si te apetece puedes dejarnos tu nombre para que los correos tengan un trato personalizado

    Mediante el envío de mis datos personales confirmo que he leído y acepto la política de privacidad

    RESPONSABLE: Asociación Geoinnova. FINALIDAD: envío de publicaciones, promociones e información sobre cursos y eventos. LEGITIMACIÓN: tu legítimo consentimiento. DESTINATARIOS: Active Campaign con titular Active Campaign LLC, alojada en EEUU y suscrita al EU PrivacyShield. DERECHOS: acceso, rectificación, limitación, supresión de los datos (en [email protected])y a presentar reclamación ante una autoridad de control. INFORMACIÓN ADICIONAL: Política de privacidad.

    La último

    Descarga de GML

    Generar GML desde el visor de la SEC

    Creación de variable

    Personalización de QGIS con Python

    Apps para identificar cimas y montañas con el teléfono móvil

    Estadísticas catastrales y tributarias

    Como trabajar con estadísticas Catastrales y Tributarias de España

    Agenda de cursos en Enero y Febrero

    R y su transformador RCaller

    Ejecutando R en FME Desktop

    La educación ambiental es fundamental para preservar el medioambiente.

    ¿Qué es la educación ambiental?

    Footer

    Sobre Nosotros

    Territorio Geoinnova pretende ofrecer noticias y formación sobre el medio ambiente y las tecnologías de la información geográfica con interés a dichos sectores profesionales.

    Legal

    • Nota Legal

    El blog y todo su contenido se encuentra bajo una licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.

    Todas las categorías

    • Actualidad Ambiental (85)
    • Alimentación Saludable (17)
    • Corporativo (121)
    • Formación (81)
    • Geolibrería (40)
    • Medio Ambiente (948)
    • Patrocinado (12)
    • Programación y Desarrollo SIG (12)
    • SIG (488)
    • Tecnología (72)
    • Teledetección (19)

    © 2021 · Desarrollada por Juan María Arenas - OikosMSP