• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Asociación
    • Equipo
    • Visor de proyectos Geoinnova
    • Geolibrería
    • Alianzas Estratégicas
  • Consultoría
    • Consultoría y Desarrollo en Sistemas de Información Geográfica
    • Consultora Ambiental
    • Turismo sostenible
    • Planificación urbana y ordenación del territorio
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Servicios
    • Planero Web
    • QElectricGIS
    • Plugins
  • Formación
    • Todos los cursos
    • Webinars
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Medio Ambiente
    • Consultora Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
    • Cursos de Medioambiente
  • Coworking
  • Blog
    • SIG
    • Medio Ambiente
    • Teledetección
    • Programación y Desarrollo SIG
    • Corporativo
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG

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

26/11/2020 1 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

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

MapLibre GL JS: Crear mapa y añadir datos desde un GeoJSON
22/11/2022
Cómo trabajar con nuestra base de datos PostgreSQL usando psql
08/11/2022
DBeaver: software para la gestión de bases de datos
20/10/2022

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

Comentarios

  1. Jazmin dice

    09/06/2021 a las 06:01

    Muy buena información, seria genial que hagas un top, de las mejores empresas en desarrollo, seria bueno para tenerlo en cuenta y ayudaria muchisimo, una de ellas seria MiTSoftware, que me han dado buenas referencisa de ella, pero quisiera saber que otras opciones hay en el mercado. Saludos

    Responder

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

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

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.
Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}