Comunicación digital inclusiva para una ciudadanía activa

Como futura profesional de la Comunicación Social, propongo el desarrollo de un micro-sitio accesible titulado “Voces Digitales: Por una Comunicación Inclusiva en Cuba”, pensado para sensibilizar a la población cubana y latinoamericana sobre derechos digitales, accesibilidad web, brecha digital y participación ciudadana en el entorno online.

Conocer la propuesta
Personas conectadas a través de dispositivos digitales
La comunicación digital como espacio para la inclusión y la participación.

Importancia de la comunicación digital inclusiva

Este micro-sitio se concibe como un espacio reducido pero completo y funcional, diseñado para explicar, de forma clara y accesible, por qué la comunicación digital debe ser inclusiva. La propuesta busca visibilizar cómo las barreras tecnológicas pueden excluir a personas y comunidades, y cómo un diseño responsable puede abrir puertas a la participación ciudadana.

La estructura del sitio se organiza de manera jerárquica para garantizar una navegación intuitiva: una página de inicio atractiva, secciones que explican conceptos fundamentales, una galería de testimonios, recursos descargables y un espacio interactivo para compartir experiencias.

Ilustración de comunicación digital inclusiva
La inclusión digital como eje de la comunicación contemporánea.

Técnicamente, el proyecto se plantea con HTML semántico y atributos ARIA para maximizar la accesibilidad, acompañado de CSS responsivo, alto contraste de colores, opción de modo oscuro y animaciones sutiles. En un entorno real, el sitio podría implementarse sobre WordPress, utilizando plugins de accesibilidad (como WP Accessibility) y SEO (Yoast SEO o Rank Math), lo que permitiría a comunicadores sin conocimientos avanzados de código actualizar contenidos de forma rápida y segura.

Aspectos básicos para empezar a desarrollar una página web

A continuación se presentan los conceptos esenciales para comenzar a crear tu propio sitio web: qué es HTML, qué es CSS, cómo se vinculan y por qué la estructura y el diseño deben pensarse desde la accesibilidad y la comunicación clara.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje que define la estructura de una página web. Permite organizar títulos, párrafos, listas, imágenes, enlaces y otros elementos que componen el contenido. Un buen uso de HTML semántico facilita la comprensión del sitio tanto para las personas como para los lectores de pantalla.

Ejemplo de código HTML
Estructura básica de este propio documento HTML.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Hola mundo</h1>
</body>
</html>

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que controla la apariencia visual del sitio: colores, tipografías, tamaños, márgenes, disposición de elementos y comportamiento responsivo. Gracias a CSS, una misma estructura HTML puede adoptar múltiples diseños sin modificar el contenido.

Ejemplo de estilos CSS aplicados a una página
El diseño visual se define con CSS.
body {
    font-family: "Inter", sans-serif;
    background-color: #f4f4f4;
    color: #222222;
}
h1 {
    color: #005bbb;
}

Cómo se vinculan HTML y CSS

Para conectar un archivo HTML con un archivo CSS, se utiliza la etiqueta <link> dentro del elemento <head>. De esta forma, el navegador sabe qué hoja de estilos debe aplicar al documento.

Diagrama que muestra la relación entre HTML y CSS
HTML define la estructura; CSS define la presentación.
<head>
    <meta charset="UTF-8">
    <title>Mi sitio</title>
    <link rel="stylesheet" href="style.css">
</head>

Recursos descargables sobre programación y desarrollo web

Estos materiales en PDF pueden servir como apoyo para profundizar en los temas de HTML, CSS, accesibilidad y desarrollo web en general.

Guía básica de HTML

Introducción a las etiquetas más utilizadas y a la estructura de un documento.

Descargar PDF

Introducción a CSS

Conceptos clave para comenzar a dar estilo a tus páginas web.

Descargar PDF

Manual de desarrollo web

Recorrido general por HTML, CSS, buenas prácticas y accesibilidad.

Descargar PDF

Descargar Código de Esta Página

Con el objetivo de que los usuarios y estudiantes entiendan el funcionamiento de una web Sencilla

Descargar HTML Descargar CSS

Pasos para confeccionar tu propio sitio web

A continuación se presenta una guía práctica, pensada para que cualquier persona con interés en la comunicación digital pueda iniciar la creación de su propio sitio web, paso a paso.

  1. Definir el objetivo comunicativo. Clarifica qué quieres lograr con tu sitio: informar, sensibilizar, vender, educar, documentar. Un objetivo claro orienta todas las decisiones posteriores.
  2. Organizar la información. Esboza un mapa del sitio: página de inicio, secciones, subpáginas, recursos y formularios. Piensa en la ruta que seguirá la persona usuaria.

    3. Título de la Infografía

    Infografía: La brecha digital en Cuba. Muestra estadísticas de acceso a internet

    PASOS PARA CREAR TU 1ER SITIO WEB

  3. Diseñar la estructura en HTML. Crea un archivo index.html con secciones semánticas: <header>, <main>, <section>, <article>, <footer>. Asegúrate de que los títulos sigan un orden lógico.
  4. Aplicar estilos con CSS. Define colores, tipografías, tamaños y espaciados en un archivo style.css. Apuesta por un diseño limpio, con buen contraste y legible en pantallas pequeñas.

    5. Los 4 Pilares de un Sitio Web Accesible

    Infografía: Los 4 Pilares de un Sitio Web Accesible - HTML, CSS, Arquitectura de la Información y CMS

    LOS PILARES DE UN SITIO WEB

  5. Incorporar accesibilidad. Añade texto alternativo a las imágenes, usa etiquetas de formulario correctamente, cuida el orden de los encabezados y, cuando sea necesario, utiliza atributos ARIA.
  6. Optimizar recursos. Comprime imágenes, revisa que los textos sean claros y que los enlaces funcionen. Un sitio ligero carga más rápido y mejora la experiencia de uso.
  7. Probar en distintos dispositivos. Revisa cómo se ve el sitio en móviles, tablets y computadoras. Ajusta el diseño responsivo para que la navegación sea cómoda en todos los casos.
  8. Publicar y evaluar. Sube tu sitio a un servicio de hosting o a una plataforma como WordPress. Utiliza herramientas analíticas para medir visitas, tiempo de lectura, descargas y participación.
Ilustración del proceso de creación de un sitio web
Del objetivo comunicativo al sitio publicado y evaluado.

Testimonios

“Un proyecto claro y educativo sobre inclusión digital y sobre como empezar con una web. Me encanto.”

— Elianet

“Explica la tecnología de forma sencilla muchas gracias.”

— Lais

“Por fin una Web con un proposito Real”

— Valerie

“Me motivastes a hacer mi 1era Página Web”

— Alfredo

Comparte tu experiencia

Este espacio está pensado para que cuentes cómo ha sido tu acercamiento al desarrollo web, a la comunicación digital y a la accesibilidad. Tu testimonio puede inspirar a otras personas.

Completa los campos y, al enviar, se abrirá WhatsApp con tu mensaje listo para enviarse.