2.4 Diseño de Páginas Web

2.4.1 Fundamentos de Diseño Web

Cierre de la Clase

Actividad práctica experimental: Se propondrá a los estudiantes diseñar una pequeña página web educativa aplicando lo aprendido. Por ejemplo, en parejas crearán una página sencilla sobre un tema histórico (a elegir: p.ej., “Culturas precolombinas” o “Revolución Industrial”) usando alguna herramienta visual gratuita. Podrán optar por:

Opción A: Usar un editor visual en un CMS instalado (por ejemplo, WordPress.com gratuito, o la plataforma de blogs de la escuela). Se les guiará para elegir un tema, crear menú, ingresar contenido y formatearlo.
Opción B: Usar Google Sites (o similar) para armar un mini-sitio de 2–3 páginas sobre el tema, incluyendo texto, imágenes y algún elemento multimedia incrustado (video de YouTube, línea de tiempo de KnightLab, etc.).
Durante la actividad, deberán poner en práctica principios de usabilidad (navegación clara, títulos descriptivos), accesibilidad (añadir texto alternativo a imágenes, verificar buen contraste de colores), organización lógica del contenido (jerarquía de títulos, secciones coherentes) y respetar licencias (solo usar imágenes CC0/CC, y al final de la página listar créditos de recursos utilizados).
Al final, realizarán una presentación/galería donde cada equipo muestra su página a los demás, comentando las decisiones de diseño que tomaron y cómo resolvieron aspectos técnicos. Esta experimentación les permitirá enfrentarse a las facilidades y desafíos reales del diseño web, consolidando las competencias vistas.

Actividad de aprendizaje autónomo: Se asignará un trabajo individual para reforzar y ampliar conceptos:

Cada estudiante completará un mini-proyecto autónomo consistente en evaluar un sitio web educativo existente (por ejemplo, la web de un museo, una biblioteca digital o un portal didáctico de Historia). Se les dará una rúbrica de evaluación con criterios de usabilidad (¿Encuentran fácilmente X información? ¿El menú es claro?), accesibilidad (¿Tiene opción de texto ampliado? ¿Alternativas textuales a multimedia?), calidad de la estructura (¿Cómo está organizada la información, es intuitiva?), uso ético (¿Cita fuentes? ¿Tiene aviso legal de cookies/licencias?). Deberán navegar el sitio en casa, responder la rúbrica y redactar un breve informe con hallazgos y sugerencias de mejora.
Adicionalmente, se les pedirá realizar el curso en línea autodirigido “Introducción a la Accesibilidad Web” (recursos abiertos del W3C o plataforma de su preferencia) para afianzar esos conocimientos. Deberán entregar captura de su certificado o un resumen de lo aprendido.
Como práctica de propiedad intelectual, cada estudiante elegirá un recurso de la web que usaría en clase (p.ej. un video, una imagen, un texto) y verificará si puede usarlo legalmente: identificar la licencia o condiciones de uso. Esto lo presentarán en un pequeño listado a modo de bitácora de búsquedas abiertas.
Estas actividades autónomas fomentan la investigación y reflexión personal más allá del aula, y aseguran que los estudiantes practiquen la aplicación de principios a distintos contextos.

Actividades de aprendizaje en contacto con el docente: Durante las horas de clase (sincrónicas) se desarrollarán dinámicas participativas:

Demostración guiada: El docente realizará en vivo la creación de una página web básica desde cero (por ejemplo, usando el bloc de notas para HTML/CSS mínimos para que vean la estructura, y luego mostrando el mismo diseño construido rápidamente con un editor visual). Los alumnos irán respondiendo preguntas del profesor (“¿Qué etiqueta usaría para…?¿Cómo centramos con CSS...?”) reforzando conocimientos de subtemas 1 y 4.
Discusión y lluvias de ideas: Sobre usabilidad y accesibilidad, se organizará un debate en clase. Se proyectarán dos sitios web (uno con muy mala usabilidad, otro bien diseñado) – sin revelar cuál es cuál – y se pedirá a los alumnos navegar 5 minutos cada uno (puede ser con un vídeo de recorrido o dándoles acceso). Luego, en plenario, comentarán cómo se sintieron en cada sitio y se listarán en pizarra problemas/usos destacados. El docente conectará esas observaciones con los principios teóricos (ej. “sí, vieron que en el sitio 1 se perdieron, eso es falta de consistencia – heurística de Nielsen – etc.”).
Ejercicio práctico en aula informática: Los alumnos, con acompañamiento del docente, iniciarán la actividad experimental (creación de la mini-web) en clase. El docente irá resolviendo dudas comunes: “profe, ¿cómo inserto un video en Google Sites?”, “¿dónde cambio el color de fondo en WordPress?”, etc. Esto enriquece a todos porque se comparten soluciones. Al final de esa sesión, cada grupo habrá adelantado su sitio y el docente revisará uno por uno dando retroalimentación inmediata (“Tu menú tiene demasiados elementos, ¿cómo podrías agrupar?… recuerda poner texto alt en esa imagen”).
Role-playing ético: Se simularán escenarios para discutir en contacto. Ej: el docente propone “Imagina que encuentras tu presentación de clases subida en otra web sin tu permiso ni atribución, ¿qué harías?”; o “Eres el encargado web de un instituto y recibes un reclamo DMCA por una imagen, ¿cómo respondes?”. Los alumnos en grupos discuten la mejor respuesta y luego se comparte. El docente complementa con lo que dicta la norma (por ejemplo, las vías legales, pero también la importancia de prevenir evitando usar contenido sin permiso).
Quiz interactivos y retroalimentación: Antes del cuestionario formal final, en clase se hará un repaso con alguna herramienta como Kahoot/Quizizz con preguntas de repaso de todos los subtemas para identificar áreas confusas. Cada pregunta se debate brevemente para asegurar comprensión. Esto también los prepara para el estilo del cuestionario.

Cuestionario de evaluación (20 preguntas, selección múltiple):

A continuación se presenta un cuestionario con 20 preguntas de opción múltiple que abarca los contenidos vistos. Cada pregunta incluye cuatro opciones (a, b, c, d), se indica la respuesta correcta en negrita y se proporciona una explicación o justificación de la respuesta correcta, para aclarar conceptos:

¿Cuál de las siguientes afirmaciones describe correctamente la relación entre HTML y CSS en el diseño de una página web?
a) HTML define el contenido y la estructura, mientras CSS define la presentación visual de ese contenido. (Respuesta correcta)
b) HTML es un lenguaje de programación y CSS un entorno de desarrollo.
c) HTML sirve solo para páginas estáticas y CSS solo para páginas dinámicas.
d) HTML y CSS son intercambiables; cualquiera puede usarse para estructura o estilo.
Explicación: HTML (HyperText Markup Language) proporciona la estructura y el contenido de la página (esqueleto, secciones, texto e imágenes) y CSS (Cascading Style Sheets) define la apariencia (colores, diseño, tipografías) de esos elementosceper.uniandes.edu.co. Por tanto, la opción a) es correcta. HTML no es un lenguaje de programación sino de marcado, y CSS es un lenguaje de estilos, no un entorno; tampoco es cierto que uno sea estático y otro dinámico, ambos se usan conjuntamente en todo tipo de páginas.
En una página web accesible, el atributo alt de la etiqueta <img> se utiliza para:
a) Mostrar un texto emergente con datos de copyright de la imagen.
b) Proporcionar una descripción textual de la imagen para usuarios que no pueden verla. (Respuesta correcta)
c) Alternar el tamaño de la imagen según la resolución de pantalla.
d) Aplicar un filtro alternativo de color a la imagen para daltónicos.
Explicación: El atributo alt (texto alternativo) en <img> contiene una descripción breve de la imagen, la cual es leída por lectores de pantalla para usuarios con discapacidad visual, o mostrada si la imagen no cargatuwebaccesible.es. Es una de las recomendaciones fundamentales de accesibilidad (principio “Perceptible” de WCAG). Las otras opciones no corresponden al propósito del alt: no es para copyright (eso va aparte, por ejemplo en leyendas), ni para tamaño/responsive (se usan CSS o srcset), ni para filtros de color (eso sería CSS o versiones especiales de la imagen).
Según Jakob Nielsen, uno de los principios heurísticos de usabilidad es la "consistencia y estándares". ¿Cuál de estos ejemplos refleja ese principio en un sitio web educativo?
a) Que todos los enlaces externos del sitio se abran forzosamente en la misma ventana.
b) Que todas las páginas del sitio compartan el mismo diseño de cabecera y menú, manteniendo la navegación en el mismo lugar. (Respuesta correcta)
c) Usar terminología técnica distinta para referirse a lo mismo en distintas secciones, para ampliar vocabulario.
d) Incluir tantas opciones de navegación diferentes como sea posible (menú, links en texto, botones flotantes) aunque dupliquen destinos.
Explicación: “Consistencia y estándares” significa que los usuarios no deben preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. En la web, ser consistente implica usar el mismo diseño de navegación en todas las páginas, mismos términos para funciones iguales, etc. La opción b) ejemplifica consistencia: cabecera/menú uniforme en todo el sitio evita confusióntuwebaccesible.es. Las otras opciones irían en contra: a) abrir enlaces externos en la misma ventana no es necesariamente un estándar (de hecho suele recomendarse nueva pestaña para externos, aunque hay debate), c) cambiar terminología confunde al usuario (inconsistencia de vocabulario), d) sobrecargar con múltiples sistemas paralelos de navegación puede frustrar (mejor una navegación clara y única).
¿Qué ventaja ofrece un sistema de gestión de contenidos (CMS) frente a crear páginas HTML estáticas manualmente?
a) Permite desarrollar las páginas web sin necesidad de servidor web ni base de datos.
b) Separa el contenido de la presentación, facilitando actualizar el diseño sin reescribir todo el contenido. (Respuesta correcta)
c) Genera automáticamente sitios web a partir de un documento de Word, sin configuración adicional.
d) Garantiza que el sitio sea accesible y usable sin intervención del diseñador.
Explicación: Un CMS almacena contenido (en base de datos) y lo muestra mediante plantillas de diseño, permitiendo cambiar la apariencia del sitio (el tema) sin modificar cada página una por unaibm.com ibm.com. Esa separación contenido-presentación agiliza las actualizaciones. Las otras opciones son incorrectas: a) un CMS típicamente requiere servidor y DB (ej. WordPress necesita PHP+MySQL), c) no “lee” Word automáticamente (aunque algunos importadores existen, no es una funcionalidad universal ni trivial), d) si bien muchos CMS tienen plugins o buenas prácticas, la accesibilidad/usabilidad dependen también del diseñador (un CMS no lo garantiza mágicamente, uno podría hacer un sitio poco usable con un CMS si no sigue principios).
En la estructura de un sitio web, la navegación tipo "migas de pan" (breadcrumbs) sirve para:
a) Mostrar un menú de opciones configurables por el usuario (favoritos).
b) Indicar al usuario su ruta de localización dentro del sitio, desde la página de inicio hasta la página actual. (Respuesta correcta)
c) Reemplazar el menú principal en sitios de una sola página (one-page).
d) Realizar una búsqueda interna paso a paso dentro del contenido textual.
Explicación: Las “migas de pan” son una secuencia de enlaces generalmente en la parte superior de la página que muestran la jerarquía de páginas padre hasta la actual (ej: Inicio > Historia > Siglo XX > Primera Guerra Mundial). Sirven para que el usuario sepa dónde está y pueda navegar niveles arriba fácilmentelucushost.com lucushost.com. No son un menú configurable (opción a es errónea), sino un rastro de navegación. No reemplazan al menú principal, son complementarias (opción c incorrecta). Y no son un mecanismo de búsqueda, sino de ubicación (opción d incorrecta).
¿Cuál de estas prácticas contribuye directamente a la accesibilidad web de un contenido educativo?
a) Usar encabezados HTML (<h1>, <h2>, etc.) para estructurar títulos y subtítulos en la página. (Respuesta correcta)
b) Incluir mucho texto en forma de imagen para garantizar que la fuente se vea igual en todos los dispositivos.
c) Deshabilitar la navegación mediante teclado para forzar al usuario a usar el mouse, que es más preciso.
d) Evitar la transcripción de videos, ya que distrae del contenido visual.
Explicación: Utilizar correctamente las etiquetas de encabezado (h1, h2, h3...) no solo mejora la estructura visual, sino que permite a los lectores de pantalla y a la navegación por teclado saltar secciones lógicamentedeveloper.mozilla.org developer.mozilla.org. Es una buena práctica de accesibilidad (principio de estructura semántica). Las otras prácticas son opuestas a la accesibilidad: texto en imagen no es legible por lectores de pantalla (a menos que se proporcione alt equivalente, pero en general se prefiere texto real con CSS para estilo), deshabilitar navegación por teclado es gravísimo para accesibilidad (usuarios con movilidad reducida dependen del teclado o dispositivos alternativos), y no transcribir videos perjudica a usuarios sordos o con problemas de audio (siempre se recomienda subtítulos o transcripción). Por tanto, la opción a) es la respuesta correcta.
Supongamos que quieres reutilizar en tu blog educativo una infografía encontrada bajo Licencia Creative Commons BY-NC-SA 4.0. ¿Qué no se te permite hacer con ese recurso?
a) Incluirla en un post de tu blog citando al autor original y la licencia.
b) Modificarla ligeramente (ej. traducirla al español) y publicarla en tu blog, con atribución y compartiendo tu versión bajo la misma licencia.
c) Usarla en materiales para una clase presencial sin publicar en internet, mencionando la fuente.
d) Venderla como parte de un libro digital que estás comercializando, sin ánimo de compartir las ganancias. (Respuesta correcta)
Explicación: BY-NC-SA significa Atribución + No Comercial + Compartir Iguales.wikipedia.org. Esto quiere decir que no se permite uso comercial (NC) y cualquier obra derivada debe licenciarse bajo los mismos términos (SA). Las opciones a), b) y c) son usos permitidos: a) es uso no comercial (un blog educativo gratuito) y se atribuye al autor – correcto; b) modificar/traducir es crear obra derivada, lo permite siempre que atribuyas y licencies tu versión también BY-NC-SA (SA cumplido) – correcto; c) uso en clase presencial se considera un uso no comercial educativo, generalmente amparado (y además no se está redistribuyendo ampliamente, aunque legalmente aún es uso público, pero es sin fines de lucro). En cambio, d) usarla en un producto a la venta es un uso comercial (aunque no tengas ánimo de lucro personal, si la vendes hay transacción comercial), lo cual infringe la cláusula NC. Por tanto, esa (d) es la acción no permitida.
En términos de diseño web, el concepto de "responsive design" se refiere a:
a) Páginas web que reaccionan con animaciones cuando el usuario pasa el ratón (hover).
b) Adaptación del diseño y la distribución de la página a diferentes tamaños de pantalla y dispositivos. (Respuesta correcta)
c) Sitios web que responden con un correo electrónico automático ante cada nueva visita.
d) Uso de asistentes virtuales para responder preguntas de los usuarios en el sitio.
Explicación: El diseño web adaptable o responsivo consiste en que la página cambie su layout (columnas, tamaños, etc.) en función del dispositivo o resolución del visitantees.wikipedia.org. Por ejemplo, en móvil suele apilar elementos que en escritorio van en columnas. Esa es la opción b). Las otras descripciones no se corresponden: a) habla de animaciones hover (eso es interactividad visual pero no es el concepto global de responsive), c) es otra cosa (respuestas por email no tienen que ver con diseño adaptativo), d) se refiere a chatbots o asistentes – tampoco es responsive design.
Dentro de un CMS como WordPress, ¿qué es un "plugin"?
a) Una extensión de software que añade funcionalidades específicas al CMS, como si fuera un módulo extra. (Respuesta correcta)
b) Un tema o plantilla de diseño prediseñada para cambiar la apariencia del sitio.
c) Una entrada de blog con formato especial.
d) Un usuario con permisos de administrador global.
Explicación: Un plugin es un paquete instalable que agrega o modifica funciones de WordPress (o cualquier CMS extensible)ibm.com ibm.com. Ejemplos: plugins de SEO, de galería, de formulario de contacto. Un tema (theme) es lo que cambia la apariencia (opción b confunde plugin con tema). Plugins no son entradas de contenido ni roles de usuario, así que c) y d) son incorrectas. La opción a) define correctamente plugin.
Si un estudiante con daltonismo visita tu sitio web, ¿cuál de las siguientes medidas ayudaría a su experiencia?
a) Evitar depender únicamente de colores para distinguir información (por ejemplo, usar también texto o formas). (Respuesta correcta)
b) Incluir la opción de cambiar el idioma del sitio a un idioma alternativo.
c) Reducir todo el sitio a escala de grises para eliminar colores conflictivos.
d) Desactivar las hojas de estilo (CSS) para que vea solo texto plano.
Explicación: Las personas con daltonismo tienen dificultades para distinguir ciertos colores. Una recomendación de accesibilidad es no usar solo el color como único medio para transmitir informacióntuwebaccesible.es tuwebaccesible.es. Ejemplo: si en un quiz las respuestas correctas se marcan solo en verde y las incorrectas en rojo, un daltónico rojo-verde podría no distinguirlas; es mejor añadir un ícono de visto o texto "Correcto/Incorrecto". Esa es la opción a). Cambiar idioma no afecta daltonismo (es más bien accesibilidad lingüística, no visual), c) poner todo en grises quita la información de color pero puede empeorar la experiencia general y no es la solución usual (mejor elegir paletas amigables y usar patrones o texturas), d) quitar CSS resultaría en una página poco usable para cualquiera; no es una técnica recomendada salvo extremos. Por tanto, la a) es la correcta.
Al estructurar el contenido de una página HTML, ¿por qué es importante usar correctamente las etiquetas <h1> a <h6> en lugar de simplemente agrandar texto con CSS?
a) Porque las etiquetas <h1> ... <h6> automáticamente convierten el texto a imágenes para mejor calidad.
b) Porque ayudan a la semántica y accesibilidad, permitiendo a navegadores y asistentes entender la jerarquía de información. (Respuesta correcta)
c) Porque es obligatorio según la ley de propiedad intelectual usar esas etiquetas para títulos originales.
d) Porque <h1> es el único texto que Google indexa para los motores de búsqueda.
Explicación: Usar las etiquetas de encabezado en el orden correcto (un <h1> único como título principal, <h2> para secciones, etc.) da estructura semántica al documento. Esto beneficia la accesibilidad (lectores de pantalla pueden listar secciones) y SEO (motores de búsqueda entienden la jerarquía de contenido)developer.mozilla.org developer.mozilla.org. La opción b) captura eso. a) es falsa (no convierte a imágenes), c) no tiene base (no es asunto de propiedad intelectual, sino técnica), d) es exageración: Google indexa todo el texto, aunque da peso especial a <h1> y <h2>, no es que solo indexe <h1>. La razón principal es semántica y accesible, por ello la b) es correcta.
Un ejemplo de hipermedia en un recurso educativo digital sería:
a) Un documento PDF con puro texto sin enlaces ni elementos multimedia.
b) Un artículo web que contiene texto, un video incrustado y múltiples enlaces a definiciones y ampliaciones de tema. (Respuesta correcta)
c) Una presentación de diapositivas en PowerPoint impresa en papel.
d) Una página web que carga muy rápido por estar hecha solo de código HTML plano, sin imágenes ni videos.
Explicación: La hipermedia combina hipertexto (enlaces) con multimedia (diferentes medios)e-lexia.com. La opción b) describe precisamente un recurso hipermedial: mezcla texto, video (medio visual/auditivo) y enlaces hipertextuales a otros contenidos. Las otras opciones no incorporan esa mezcla: a) PDF solo texto es lineal no hipertextual, c) diapositivas impresas pierden lo multimedia/hiper (y ni siquiera en digital), d) HTML plano sin multimedia ni enlaces no es hipermedia, solo es hipertexto simple (y sin enlaces tampoco, entonces no es ni hipertexto). Por tanto, b) es correcta.
¿Qué característica distingue a un editor visual WYSIWYG de un editor de texto plano al crear páginas web?
a) En el editor visual se escribe en lenguaje natural (español) y el programa lo traduce mágicamente a sitio web.
b) El editor visual muestra una representación casi real de cómo lucirá la página mientras la editas, sin tener que ver el código HTML/CSS directamente. (Respuesta correcta)
c) El editor de texto plano no permite escribir código CSS, solo HTML.
d) El editor visual guarda las páginas en formatos propietarios en lugar de HTML.
Explicación: WYSIWYG = What You See Is What You Get, o sea que el editor visual permite diseñar viendo la apariencia final (aproximada) sin escribir código directamentecursoswp.educacion.navarra.es cursoswp.educacion.navarra.es. En cambio en un editor de texto plano (p. ej. Notepad) ves solo el código y necesitas previsualizar en navegador aparte. La opción b) define eso. a) es falsa (no “traduce español a web”, igualmente uno inserta elementos pero no se describe en lenguaje natural la página), c) no es cierto: en un editor de texto plano puedes escribir cualquier código, HTML o CSS o JS, etc., no hay tal limitación, d) los editores visuales generalmente siguen generando HTML/CSS estándar (no formatos propietarios; salvo excepciones antiguas mal hechas, pero no es la idea). Así que la correcta es b).
Un sitio web del gobierno publica todos sus contenidos bajo licencia "Dominio Público". Esto significa que:
a) Nadie puede copiar esos contenidos porque pertenecen al gobierno.
b) Los contenidos pueden ser utilizados, reproducidos o modificados por cualquiera sin pedir permiso y sin necesidad de atribución (aunque atribuir es buena práctica). (Respuesta correcta)
c) Solo los ciudadanos del país pueden reutilizar los contenidos libremente.
d) Se pueden usar, pero cualquier obra derivada debe pagar derechos a la administración pública.
Explicación: Cuando algo está en dominio público, no está protegido por copyright (ya sea porque expiró o porque se liberó explícitamente). Por tanto, cualquiera puede usarlo sin restricciones, ni siquiera es legalmente obligatorio atribuir (aunque éticamente se recomienda)es.wikipedia.org es.wikipedia.org. La opción b) describe esto: libre uso, reproducción y modificación sin permiso. Las otras opciones contradicen el concepto de dominio público: a) es lo contrario (eso describiría copyright total), c) no hay restricción por ciudadanía – dominio público es global, d) no se pagan derechos, es libre de pagos.
¿Cuál de los siguientes es un ejemplo de usabilidad web deficiente?
a) Un sitio educativo cuyo menú de navegación cambia de orden y diseño en cada sección. (Respuesta correcta)
b) Un sitio que ofrece buscador, mapa del sitio, menú jerárquico y migas de pan para orientar al usuario.
c) Una página con formularios que proveen mensajes de error claros cuando el usuario olvida llenar un campo obligatorio.
d) Un portal que carga en 2 segundos y presenta el contenido más importante en la parte superior (sin necesidad de desplazarse mucho).
Explicación: Usabilidad deficiente se refleja en inconsistencias y confusión. La opción a) es claramente mala usabilidad: si el menú cambia continuamente, el usuario se desorienta (falta de consistencia)tuwebaccesible.es tuwebaccesible.es. Las otras opciones describen buenas prácticas: buscador+mapa del sitio+migas ayudan a navegabilidad; formularios con mensajes de error claros mejoran eficiencia y satisfacción (heurística de feedback y prevención de errores); portal rápido y con contenido principal visible rápidamente mejora la experiencia (tiempos de carga y jerarquía visual). Por ende, la única deficiente es a).
En contextos educativos, ¿por qué es recomendable utilizar recursos con licencias abiertas (ej. Creative Commons) en la elaboración de materiales web?
a) Porque así se evitan problemas legales de copyright y se promueve el intercambio y la mejora colaborativa de materiales. (Respuesta correcta)
b) Porque los recursos con licencias abiertas son siempre de mayor calidad académica.
c) Porque es obligatorio usar solo recursos CC en educación según la UNESCO.
d) Porque las licencias abiertas impiden que los estudiantes descarguen los archivos, protegiendo el trabajo del profesor.
Explicación: Usar recursos abiertos evita infracciones de copyright y además contribuye a la filosofía de compartir conocimiento, permitiendo que otros también reutilicen y mejoren los materialesunesco.org unesco.org. Esa es la razón principal (opción a). No es cierto que “siempre” sean de mayor calidad – hay recursos excelentes con copyright también, la diferencia es legal, no de calidad intrínseca (opción b incorrecta). Tampoco es obligatorio legalmente (UNESCO lo recomienda pero no fuerza, las instituciones pueden tener sus políticas, pero no es ley global – opción c incorrecta). Finalmente, licencias abiertas no impiden descargas; más bien lo contrario, permiten uso (opción d es opuesta a la realidad).
En una clase virtual, notas que el sitio web que usas tiene imágenes importantes sin texto alternativo y documentos PDF escaneados no reconocibles. ¿Qué principio se está violando principalmente?
a) La seguridad informática del sitio.
b) La accesibilidad de los contenidos para todos los estudiantes. (Respuesta correcta)
c) El diseño responsivo del sitio.
d) La optimización SEO para motores de búsqueda.
Explicación: Imágenes sin alt text y PDFs solo escaneados (no tienen texto real para lectores) son fallos de accesibilidad – estudiantes ciegos o con baja visión no pueden acceder a esa infotuwebaccesible.es protecciondatos-lopd.com. Esto apunta a violación de la accesibilidad (principio "Perceptible" y "Comprensible" de WCAG). No es directamente un fallo de seguridad (opción a), ni de responsive design (eso es sobre adaptarse a pantallas distintas – no mencionado aquí, opción c no es), ni SEO (aunque alt text también ayuda a SEO, la pregunta se enmarca en contexto clase y "para todos los estudiantes" sugiere accesibilidad, SEO sería para buscadores no para estudiantes). Por tanto, b) es la correcta.
Cuando un sitio web muestra un aviso de "Este sitio utiliza cookies, ¿acepta?" está relacionado con:
a) La usabilidad, porque mejora la experiencia al preguntar al usuario.
b) La propiedad intelectual, porque las cookies protegen el contenido del sitio.
c) La privacidad de datos y cumplimiento legal (ej. RGPD) al informar sobre recolección de datos del usuario. (Respuesta correcta)
d) La accesibilidad, ya que las cookies permiten modos de alto contraste para usuarios con discapacidad.
Explicación: El aviso de cookies es requerido por leyes de privacidad (RGPD en Europa) para informar al usuario y obtener consentimiento sobre el seguimiento o almacenamiento de datos personales mediante cookiesprotecciondatos-lopd.com. Eso cae en el ámbito ético-legal de privacidad de datos, no en usabilidad (incluso muchos argumentan que reduce usabilidad con banners, pero es legalmente necesario). No tiene que ver con propiedad intelectual ni con accesibilidad directamente. Por ello la c) es la correcta.
Una "miga de pan" en un sitio web educativo muestra: Inicio > Ciencias Sociales > Geografía > Clima. Si estás en la página de Clima, ¿qué sucede al pulsar "Ciencias Sociales" en la miga?
a) Nada, las migas de pan no son elementos interactivos, solo texto de referencia.
b) Navegas a la página principal del área de Ciencias Sociales, dentro del sitio. (Respuesta correcta)
c) Se despliega un menú con las sub-secciones de Ciencias Sociales.
d) El sitio recuerda tu ruta y te envía al inicio del sitio.
Explicación: En las migas de pan, cada segmento (excepto el último, la página actual) es un enlace a esa sección. Entonces "Ciencias Sociales" es un enlace a la página de la categoría/área Ciencias Sociales del sitiolucushost.com lucushost.com. Así que pulsarlo te lleva allí (opción b). Las migas normalmente sí son interactivas (opción a errónea), no despliegan menús (opción c confunde con menús de navegación, no es su función; a veces hay menús horizontales crumb, pero no en forma de miga textual), y no te lleva al inicio al pulsar "Ciencias Sociales" sino al inicio de esa sección, que es lo descrito en b). La miga ya muestra “Inicio > …”, si quisieras inicio pulsarías "Inicio". Por tanto, b) es correcta.
¿Qué ventaja clave ofrece la licencia Creative Commons BY (Atribución) frente al copyright tradicional "Todos los derechos reservados"?
a) Permite que otros usen y compartan la obra libremente siempre que den crédito al autor, ampliando su difusión. (Respuesta correcta)
b) Cede la autoría de la obra al dominio público inmediatamente sin condiciones.
c) Restringe el uso solo a entornos educativos formales.
d) Obliga a los usuarios que reutilicen la obra a pagar un pequeño royalty al autor.
Explicación: CC BY es la licencia más permisiva que solo pide atribución. Ofrece la ventaja de que terceros pueden reutilizar la obra – incluso comercialmente – sin necesidad de solicitar permiso, siempre y cuando mencionen al autorcompetenciasinformacionalydigital.catedu.es competenciasinformacionalydigital.catedu.es. Esto facilita la difusión y reutilización legal de la obra. No cede al dominio público (eso sería CC0, no BY), la autoría sigue reconocida (solo se ceden ciertos derechos con condiciones). No restringe solo a entornos educativos, es global y para cualquier uso (opción c incorrecta). Y no exige pagos, al contrario es gratuita (opción d incorrecta). Entonces la a) es la ventaja clave.

Nota: Cada respuesta correcta vale 1 punto. Se recomienda a los estudiantes leer las explicaciones para aclarar posibles dudas y afianzar la comprensión de los conceptos.

Anexos

Resumen final estilo tutoría:
En esta clase hemos aprendido los fundamentos para diseñar páginas web efectivas en el ámbito educativo de Historia y Ciencias Sociales. En primer lugar, vimos que una página web se construye con HTML como estructura (el esqueleto que organiza títulos, párrafos, imágenes, etc.) y CSS como estilo (la apariencia visual: colores, diseño responsivo)competenciasinformacionalydigital.catedu.es. Comprendimos que un buen diseño técnico por sí solo no basta: debe ser usable y accesible. Esto significa garantizar que cualquier estudiante pueda navegar fácilmente y sin barreras nuestros contenidos. Hablamos de usabilidad: por ejemplo, usar menús consistentes, lenguaje claro, retroalimentación en formularios, tiempos de carga rápidostuwebaccesible.es. Y de accesibilidad: añadir texto alternativo en imágenes para estudiantes ciegos, subtítulos en vídeos para estudiantes sordos, suficiente contraste de colores para quienes tienen baja visióntuwebaccesible.es. En segundo lugar, exploramos cómo organizar la información: aplicando principios de arquitectura de la información logramos que nuestros sitios tengan una navegación intuitiva, con estructura lógica (páginas jerarquizadas y migas de pan indicando la ubicaciónlucushost.com). La hipermedialidad nos permite enriquecer la experiencia educativa integrando distintos medios (texto, audio, video) e hiperlinks que conectan conceptos, haciendo el aprendizaje más interactivoe-lexia.com. En tercer lugar, conocimos las herramientas visuales que nos facilitan crear sitios sin programar todo desde cero: los editores WYSIWYG donde diseñamos viendo el resultado, y los CMS como WordPress que gestionan nuestros contenidos y plantilla de diseñoibm.com. Esto democratiza la creación web – con un CMS un profesor puede publicar un blog de clase o un repositorio en horas, usando plugins para funciones extras (ej. un plugin de galería de imágenes históricas). Finalmente, abordamos la ética y legalidad: enfatizamos la importancia de respetar la propiedad intelectual, tanto usando recursos con licencias abiertas (por ejemplo, imágenes con licencia CC BY que podemos reutilizar citando al autores.wikipedia.org) como licenciar nosotros mismos nuestros materiales de forma abierta para compartir con la comunidad educativa. También cubrimos aspectos de privacidad y comportamiento en línea: cumplir leyes de protección de datos (consentimiento para cookies, cuidado al publicar datos de alumnos)protecciondatos-lopd.com, fomentar la netiqueta y la honestidad académica (no plagiar, citar siempre las fuentes).

En resumen, diseñar una página web educativa de calidad implica conjugar aspectos técnicos (HTML/CSS, adaptabilidad), aspectos de experiencia de usuario (usabilidad, accesibilidad, buena organización) y aspectos ético-legales (uso responsable de contenidos). Al aplicar estos conocimientos, estaremos en capacidad de crear entornos web donde nuestros estudiantes puedan aprender de forma amena, inclusiva y segura. Si alguna vez se sienten perdidos, recuerden esta analogía: construir un sitio web es como armar una biblioteca digital. HTML son las estanterías y etiquetas que ordenan los libros, CSS es la decoración y disposición de la sala para que sea acogedora, usabilidad es poner un catálogo comprensible y señalética clara para encontrar cada sección, accesibilidad es tener rampas y audiolibros para que nadie encuentre barreras, hipertexto son las referencias cruzadas que conectan libros entre sí, CMS/editores son los bibliotecarios automatizados que nos ayudan a gestionar todo sin cargar cada libro manualmente, y la ética es la política de la biblioteca: prestar libros libremente, respetar a los autores y a los usuarios por igual. Con este paralelo en mente, ustedes – como futuros profesionales de la educación – podrán construir su propia “biblioteca web” de recursos históricos sabiendo cómo hacerlo técnicamente y por qué hacerlo de cierta manera. ¡Sigamos practicando, explorando y, sobre todo, compartiendo conocimiento en la web de forma abierta y responsable!

Actividad para fomentar una habilidad blanda (soft skill):
Habilidad: Trabajo en equipo y comunicación efectiva.
Actividad propuesta: “Diseña tu Museo Virtual en equipo”.
Se conformarán grupos de 4 estudiantes con el reto de planificar juntos el esquema de un pequeño “museo virtual” sobre un tema histórico-social (por ejemplo, “Culturas Andinas” o “Revolución tecnológica del siglo XX”). Esta no es una actividad técnica de codificación, sino de colaboración, creatividad y comunicación. Los pasos son:

Brainstorming cooperativo: El equipo se reúne (en persona o videoconferencia) y cada miembro propone 1-2 “salas” o secciones que el museo virtual podría tener. Deben escucharse activamente, anotar todas las ideas (ejercitando la comunicación abierta y respetuosa). Después juntos priorizan y eligen, por consenso, 3 secciones principales para su museo.
Delegación de roles y responsabilidad compartida: Tendrán roles rotativos: un coordinador moderará la discusión, un relator tomará nota de acuerdos, un investigador buscará referencias visuales o de contenido que puedan incluir, y un creativo esbozará cómo podría ser la página de inicio. Estos roles no son rígidos: la idea es que todos participen en todo, pero asignarlos al inicio les ayuda a organizarse (habilidad de gestión colaborativa). Deberán practicar la empatía: entender las ideas de cada compañero e integrarlas, y la resolución de conflictos si hay desacuerdos (por ejemplo, si dos ideas compiten, negociar una solución intermedia).
Presentación conjunta: Prepararán una breve presentación (5 minutos) donde cada integrante hablará ~1 minuto explicando una parte: uno introduce el concepto del museo, otro explica la estructura (navegación) que planificaron, otro muestra un boceto visual (puede ser un dibujo en papel o en PowerPoint) de una sala, y el último destaca cómo hicieron que sea accesible y ético (ej. “usaremos imágenes dominio público, etc.”). Deberán ensayar juntos para coordinar quién habla cuándo, fomentando la comunicación clara y el apoyo mutuo (si alguien olvida algo, otro puede complementar).
Reflexión sobre el proceso: Tras la presentación, cada equipo dedica 5 minutos a reflexionar: ¿cómo se sintieron trabajando en equipo? ¿qué dificultades de coordinación surgieron y cómo las resolvieron? ¿qué hicieron bien como equipo? Esto se comparte brevemente con el resto de la clase. El docente guía destacando la importancia de la escucha, reparto de tareas, respeto de opiniones y cumplimiento de roles, vinculándolo a situaciones reales de trabajo docente (que muchas veces implica planificar proyectos colaborativos).

Esta actividad, más allá de reforzar conceptos de diseño (ya que aplican nociones de estructura y contenido en la maqueta de museo), promueve habilidades blandas cruciales: trabajo en equipo, comunicación efectiva, liderazgo compartido, creatividad grupal y responsabilidad. Los estudiantes experimentarán la dinámica de colaborar en un proyecto web simulado, preparándolos para entornos profesionales donde tendrán que trabajar con colegas en proyectos educativos o tecnológicos. La experiencia les permitirá identificar fortalezas y áreas a mejorar en su manera de interactuar en grupo, convirtiéndolos en profesionales más integrales capaces de liderar e integrarse en equipos multidisciplinares en el futuro. ¡Y quién sabe, tal vez algún día esos bocetos de museos virtuales puedan convertirse en realidad!

2.4.2 Creación de páginas web con contenido histórico

Objetivo general del tema

Desarrollar en los estudiantes la capacidad de crear páginas web con contenido histórico educativo, empleando desde lenguajes base (HTML y CSS) hasta herramientas visuales, plugins y CMS, aprovechando repositorios de contenido libre de derechos. Al finalizar, podrán estructurar información histórica en la web de forma atractiva, accesible y legalmente segura, integrando las TIC en la enseñanza de la Historia.

Cierre

Actividad práctica experimental

Creación de un micro-sitio histórico en equipo: Se propone a los estudiantes una práctica integradora de todo lo visto: formar equipos de 4-5 integrantes y asignar a cada equipo la creación de un micro-sitio web sobre un tema histórico específico (por ejemplo, “Revolución industrial”, “Culturas andinas prehispánicas” o “Historia del barrio/localidad”). La actividad se desarrolla idealmente en la sala de informática o con laptops:

Planificación (diseño del sitio): Cada equipo define la estructura de su sitio (secciones que tendrá, cómo organizarán la información). Elaboran en papel un storyboard o esquema del sitio – por ejemplo, página de inicio con introducción, subpáginas para distintos subtemas, una línea de tiempo de eventos clave, una galería de imágenes, etc. Deben decidir qué contenido histórico incluirán y en qué formato (texto, imágenes, video, audio).
Construcción (manos a la obra): Se les permite elegir la herramienta según sus capacidades: equipos más aventureros pueden optar por crear el sitio con HTML/CSS básico (usando un editor de código), otros pueden preferir un editor visual o CMS simple. El docente brinda un repositorio de imágenes históricas libres de derechos para que integren (también pueden buscar en Wikimedia Commons u otros sitios vistos en subtema 5). Durante esta fase, los alumnos aplican conocimientos: si usan HTML/CSS, estructuran correctamente el contenido en código; si usan un editor visual (ej. Google Sites, Wix), diseñan con criterio histórico-estético (colores, fuentes apropiadas) y si es posible insertan alguna herramienta narrativa (por ejemplo, incrustar un vídeo o usar la función de timeline si la plataforma la tiene). Importante: Deben incorporar al menos un elemento de narrativa digital – puede ser una pequeña línea de tiempo de 5 eventos hecha con TimelineJS o una mapa simple con ubicaciones, o incluso un audio con relato – algo interactivo que enriquezca la presentación.
Revisión y prueba: Cada equipo presenta su micro-sitio al docente (o a otro equipo, en peer review) para probar todos los enlaces, verificar que el contenido es correcto históricamente y que la página es navegable. Aquí se enfatiza la importancia de la usabilidad y corrección: por ejemplo, verificar que las imágenes tengan pies de foto explicativos, que las fechas en la línea de tiempo sean precisas, que si usaron materiales externos estén citados o sean de dominio público.
Publicación local o en la web: Si es posible, los proyectos se publican. Puede ser subiéndose a un servidor escolar o usando la opción de compartir (en Google Sites se puede compartir enlace público, en Wix igual). Si ninguna de esas es viable, al menos se muestra localmente en clase. Cada equipo expone su trabajo al resto, explicando qué herramientas utilizaron y justificando sus decisiones (¿por qué eligieron tal plantilla de diseño?, ¿cómo decidieron qué información poner en la página principal? etc.).
Retroalimentación y discusión: Tras las exposiciones, se realiza una discusión general donde se reflexiona sobre las dificultades encontradas (ej. “tuvimos problemas al alinear imágenes en HTML, ¿cómo lo resolvieron otros?” o “el editor visual a veces no nos dejaba poner dos videos en una misma sección, ¿por qué podría ser eso?”) y los aprendizajes logrados.

Esta actividad práctica tiene un carácter experimental porque los estudiantes aprenden haciendo y probando las diferentes herramientas en un contexto real. Se busca que consoliden conocimientos técnicos (estructura HTML, uso de editores, integración de plugins) al mismo tiempo que refuerzan contenidos históricos al tener que organizarlos y explicarlos digitalmente. Al final, cada micro-sitio creado por los equipos puede vincularse desde un portal principal (por ejemplo, el docente podría montar una página índice que enlace a todos los sitios de los equipos), conformando una pequeña red de sitios históricos hechos por la clase.

Actividad de aprendizaje autónomo

Investigación y reseña de una herramienta digital aplicada a la Historia: Como tarea individual fuera de clase, se encargará a cada estudiante investigar con mayor profundidad una herramienta o plataforma de las estudiadas (o relacionada) y elaborar una breve reseña escrita o en video explicativo. Pueden elegir entre opciones como: TimelineJS, Omeka, WordPress, Google Sites, ArcGIS StoryMaps, Canva, H5P, etc., idealmente aquella que más les llamó la atención o quisieran dominar mejor.

En la reseña deben cubrir: ¿Qué es la herramienta y para qué sirve?, ¿Cómo se usa a nivel básico?, Ejemplos de proyectos históricos que la hayan utilizado (deben buscar al menos un caso real o hipotético de aplicación en Historia) y su opinión crítica sobre la herramienta (fortalezas, limitaciones, curva de aprendizaje, etc.).
Se les proporciona algunas referencias iniciales (por ejemplo, tutoriales oficiales o páginas de proyectos destacados) pero se espera que busquen autonomamente más información, preferiblemente en fuentes fiables (foros especializados, artículos académicos, blogs de educadores).
El producto puede ser un informe escrito de ~2 páginas con capturas de pantalla ilustrativas o un breve video (5-7 min) donde muestren la herramienta en acción (por ejemplo, en pantalla grabada, navegando un ejemplo).
Esta actividad desarrolla la autonomía porque cada estudiante profundiza en un recurso digital por su cuenta, aprendiendo a usarlo más allá de lo visto superficialmente en clase. También mejora su habilidad para aprender nuevas tecnologías, algo crucial dada la rápida evolución de estas herramientas.
Entrega y compartición: Las reseñas se comparten en la plataforma del curso (por ejemplo, en Moodle o en un repositorio en la nube). Cada estudiante debe también leer/al menos una reseña de un compañero y comentar algo que haya aprendido de ella, fomentando así el aprendizaje entre pares. Por ejemplo: "No conocía la herramienta H5P hasta leer la reseña de Juan; me pareció interesante que permite hacer quizzes sobre vídeos, eso podría usarlo en otras materias también".
Esta tarea autónoma complementa la práctica experimental: allí hicieron; aquí investigan reflexivamente. Con ambas perspectivas, su comprensión del ecosistema de herramientas se vuelve más sólida y crítica.

Actividades de aprendizaje en contacto con el docente

Estas actividades están pensadas para desarrollarse con la guía directa del docente, aprovechando la interacción en clase o en sesiones sincrónicas:

Debate guiado sobre la tecnología en la enseñanza de la Historia: Tras haber explorado todas estas herramientas, se realiza una discusión en clase enfocada en cuestiones como ¿En qué casos la tecnología digital mejora realmente la enseñanza de la Historia y en cuáles podría ser un distractor? o ¿Cómo equilibrar las habilidades tradicionales (por ejemplo, leer textos históricos largos, analizar documentos) con estas nuevas presentaciones multimedia?. El docente modera, plantea escenarios hipotéticos (ej: "Si tuvieran que enseñar la Segunda Guerra Mundial solo con una pizarra vs con un sitio web interactivo, ¿qué ventajas y desventajas ven?") y ayuda a los estudiantes a articular sus pensamientos. Esto refuerza el pensamiento crítico sobre la integración tecnológica, no adoptarla acríticamente.
Demostración en vivo de un CMS: El docente en una sesión de laboratorio puede proyectar cómo se instala y configura rápidamente un CMS (por ejemplo, WordPress) en un entorno local (usando XAMPP o similar). Los estudiantes observan los pasos: crear base de datos, copiar archivos, correr instalación, etc. Luego el docente muestra el panel admin, crea una entrada de ejemplo, instala un plugin de calendario de historia, etc. Al ser en contacto directo, los alumnos pueden hacer preguntas inmediatas ("¿qué ocurre si...?", "¿dónde cambio tal cosa?") y el docente las responde demostrando. Aunque no todos los alumnos luego vayan a instalar un CMS por su cuenta, ver el proceso real reduce la "caja negra" que podría ser para ellos y les da confianza de que es abordable.
Taller de curación de contenido histórico digital: En esta actividad en clase, el docente reparte a grupos de alumnos un lote de recursos (imágenes, textos, vídeos) desordenados, por ejemplo sobre la Revolución Mexicana. La tarea: discutir y decidir cuáles recursos integrarían y cómo en una narrativa digital (por ejemplo, elegir 5 fotos más significativas para una galería, ordenarlas cronológicamente, descartar las menos relevantes; resumir en 3 frases un video largo para convertirlo en texto acompañante, etc.). El docente circula orientando las discusiones: hace preguntas sobre por qué descartan X recurso o cómo justifican la inclusión de Y. Esto simula el trabajo de curar contenido para un sitio web o exposición digital. En conjunto con el docente, se reflexiona sobre la importancia de la selección y síntesis en entornos digitales donde no todo cabe si queremos una narrativa coherente.
Corrección colaborativa de código/errores: Si durante la práctica experimental (o en general) algún equipo o estudiante enfrentó un error técnico (por ejemplo, el HTML no mostraba bien una tabla, o el plugin de timeline no cargaba), el docente puede traer ese caso a la pizarra y, con toda la clase, revisar el código o configuración para encontrar el problema. Es un ejercicio en vivo de debugging educativo. Por ejemplo: un estudiante dice "mi página HTML se veía mal, los acentos salían raros". El docente guía: "Veamos la cabecera del HTML – ¡faltaba declarar la codificación UTF-8! Así se soluciona". Esta actividad con el docente presente enseña metodología para resolver problemas y quita el miedo a los errores, viéndolos como oportunidades de aprendizaje.
Simulación de publicación y licenciamiento: Tomando contenido creado por alumnos, el docente simula que lo van a publicar en la web real. Entonces repasan juntos aspectos legales y éticos: verificar que las imágenes usadas estén bajo licencia libre o permiso (si no, buscar alternativas en Commons), añadir atribuciones correctas a las imágenes (el docente muestra cómo se hace una atribución CC), redactar un pequeño aviso de derechos en el pie del sitio ("Contenido creado por estudiantes de 3er semestre, liberado bajo CC BY-SA", por ejemplo). Esto refuerza lo aprendido en subtema 5 de manera práctica. El docente puede contar anécdotas de la vida real (ej: un blog de historia que recibió un reclamo por usar una foto sin permiso) para concientizar. En equipo, corrigen cualquier uso inapropiado que detecten en sus proyectos antes de "publicarlos".

Estas actividades en contacto con el docente aseguran acompañamiento en puntos críticos de aprendizaje: conceptualización, demostración técnica, resolución de dudas y consolidación de buenas prácticas.

Cuestionario de 20 preguntas de selección múltiple

A continuación se presenta un cuestionario para evaluar los aprendizajes clave del tema. Cada pregunta incluye cuatro opciones (A, B, C, D), con una respuesta correcta indicada y una explicación fundamentada:

1) ¿Cuál de las siguientes tecnologías web constituye la base para la estructura y el contenido de una página con información histórica?

A) JavaScript, para dotar de interactividad al sitio.
B) HTML, que organiza el contenido y define elementos como títulos, párrafos o imágenes.
C) CSS, encargado de los estilos visuales de la página.
D) PHP, para gestionar la lógica del servidor y bases de datos.

Respuesta correcta: B. Explicación: HTML (HyperText Markup Language) es el lenguaje fundamental de marcado usado para estructurar contenido en la webhostinger.com. En el contexto de un sitio con contenido histórico, HTML se usa para marcar títulos de eventos, párrafos descriptivos, listas de fuentes, tablas de cronologías, etc. Sin HTML, no habría un esqueleto de información en la página. Las otras tecnologías mencionadas tienen roles diferentes: CSS define la apariencia (colores, diseño) pero no la estructura, JavaScript añade interactividad dinámica pero tampoco organiza el contenido base, y PHP es un lenguaje del lado servidor no visible en la estructura del front-end. Por tanto, la base para presentar contenido histórico en una página es HTML.

2) En una página web histórica, el lenguaje CSS se utiliza principalmente para:

A) Estructurar los capítulos y secciones del contenido cronológicamente.
B) Conectar la página con una base de datos de documentos históricos.
C) Aplicar estilos visuales (colores, tipografía, diseño) al contenido HTML de la página.
D) Añadir animaciones y efectos interactivos mediante código ejecutado en el navegador.

Respuesta correcta: C. Explicación: CSS (Cascading Style Sheets) es el lenguaje de estilos en cascada que define la presentación visual de los elementos HTMLhostinger.com. En un sitio histórico, CSS permite, por ejemplo, poner títulos con una fuente antigua, dar color sepia de fondo para ambientar como pergamino, o ubicar imágenes flotando junto al texto. No estructura contenido (eso es tarea de HTML) ni se conecta a bases de datos (eso lo haría un lenguaje de servidor o consultas desde JavaScript). Si bien CSS puede crear algunas animaciones sencillas (ej. cambio de color al hover), la mayor parte de interactividad compleja recae en JavaScript. La función principal de CSS es estilizar y maquetar visualmente el contenido ya estructurado.

3) Un estudiante quiere crear un sitio web sencillo sobre la historia local sin tener conocimientos de programación. ¿Qué herramienta sería más apropiada recomendarle?

A) Usar solamente un editor de texto plano y escribir HTML desde cero.
B) Utilizar un constructor web visual (WYSIWYG) como Wix o Google Sites.
C) Programar una aplicación web completa usando Python/Flask.
D) Configurar un servidor propio con una base de datos SQL y diseñar el sitio manualmente.

Respuesta correcta: B. Explicación: Para alguien sin experiencia en código, un editor visual WYSIWYG es la opción más accesiblehostinger.es. Plataformas como Wix o Google Sites permiten crear páginas arrastrando elementos y llenando plantillas, obteniendo resultados atractivos rápidamente. Es innecesariamente complejo y propenso a errores sugerirle que escriba HTML a mano (opción A) si no sabe programar; tampoco se justifica que programe en un framework backend como Flask (opción C) o que monte su propio servidor (opción D) para un sitio sencillo informativo. Las herramientas no-code están pensadas justo para usuarios que quieren enfocarse en el contenido histórico sin lidiar con detalles técnicos.

4) El acrónimo WYSIWYG, en el contexto de editores web, significa:

A) “Where You Save Is What You Get” – Referente a cómo se guardan los cambios en la nube.
B) “What You See Is What You Get” – Lo que ves en el editor es lo que obtendrás como resultado final.
C) “Web Youth Students Improve Web Graphics” – Un proyecto de jóvenes para mejorar gráficos web.
D) No corresponde a ninguna frase, es simplemente un nombre de marca comercial.

Respuesta correcta: B. Explicación: WYSIWYG es un acrónimo inglés que significa "lo que ves es lo que obtienes"hostinger.es. Se aplica a editores visuales donde el contenido se muestra durante la edición casi igual a como aparecerá publicado. Por ejemplo, en un editor WYSIWYG, si un estudiante pone un título en azul y cursiva, así mismo lo está viendo mientras edita y así saldrá al publicarlo, sin tener que previsualizar por separado escribiendo código. Las otras opciones son falsas: A es incorrecto (la frase real es “lo que ves es lo que obtienes”), C es inventada y D también es incorrecta porque WYSIWYG no es marca, es un concepto usado ampliamente en software.

5) Según la definición de la UNESCO, los Recursos Educativos Abiertos (REA) se caracterizan por:

A) Ser materiales solo en formato digital (no incluye libros físicos) y siempre gratuitos pero con derechos de autor tradicionales.
B) Ser únicamente contenidos creados por organismos internacionales, disponibles libremente.
C) Materiales de enseñanza, aprendizaje o investigación en dominio público o bajo licencia abierta que permiten su uso, reutilización y adaptación sin costounesco.org.
D) Cualquier recurso educativo en Internet, independientemente de su licencia o costo.

Respuesta correcta: C. Explicación: La UNESCO define los REA como materiales de cualquier tipo (digitales o no) que o bien están en el dominio público o se publican con una licencia abierta, de modo que pueden ser usados, adaptados y redistribuidos librementeunesco.org. La clave es el permiso abierto (por ejemplo, licencias Creative Commons) que permite su reutilización educativa sin violar copyright. No se limita a formato digital (un libro físico con licencia CC es un REA también) y no tiene que venir de organismos internacionales solamente, puede ser creado por docentes, ONGs, etc. Por tanto, la opción C encapsula correctamente la idea de recurso abierto. Las otras opciones confunden términos: A excluye materiales físicos indebidamente y menciona "derechos de autor tradicionales" (lo cual va contra la idea de abierto), B limita innecesariamente a organismos internacionales, y D es errónea porque no todo recurso en Internet es abierto (muchos tienen copyright restrictivo).

6) ¿Cuál de estos ejemplos corresponde a una narrativa digital según la entendida en educación?

A) Un libro de texto impreso con capítulos cronológicos y algunas ilustraciones.
B) Una línea de tiempo en la web con eventos históricos donde cada evento incluye fotos, audios de la época y enlaces a documentosactivismos.cl.
C) Un documento PDF descargable con la biografía de un personaje histórico.
D) Una tabla de datos en Excel con fechas y acontecimientos, compartida por email.

Respuesta correcta: B. Explicación: Una narrativa digital integra múltiples formatos (texto, imagen, audio, video) y ofrece a menudo interactividad o navegación hipertextualstudocu.com para contar una historia. La línea de tiempo multimedia descrita en B es un claro ejemplo: combina cronología con elementos visuales y sonoros, permitiendo al usuario explorar eventos en un formato dinámico. Es una experiencia narrativa construida digitalmente. Las opciones A y C son narrativas tradicionales (lineales y estáticas, aunque estén en digital en el caso del PDF, no aprovechan multimedia interactiva). La D (tabla Excel) no es realmente una narrativa, es solo datos sin relato, y carece de elementos multimedia o hipertextuales propios de narrativas digitales.

7) ¿Qué afirmación refleja mejor el impacto educativo de incorporar narrativas digitales en clases de Historia?

A) Disminuye la necesidad de libros de texto, pero dificulta que los estudiantes adquieran cronología.
B) No aporta valor real, es solo una moda tecnológica que distrae de los contenidos.
C) Permite presentar hechos históricos de forma interactiva y multisensorial, favoreciendo el aprendizaje activo y la comprensión profundastudocu.comscielo.br.
D) Garantiza automáticamente que los estudiantes se interesen por la Historia, independientemente del guión o contenido.

Respuesta correcta: C. Explicación: Las narrativas digitales bien diseñadas (líneas de tiempo interactivas, mapas narrativos, relatos multimedia) involucran varios sentidos y dan al estudiante un rol más activo en la exploración de la historia, lo cual puede aumentar la motivación y la comprensión significativascielo.br studocu.com. Por ejemplo, un storymap donde el alumno recorre el avance de un ejército y ve imágenes del terreno y escucha testimonios, hará más vívida la experiencia que solo leerlo. Esto fomenta aprendizaje activo y empático. La opción A es incorrecta: bien usadas, las narrativas digitales no "dificultan" la adquisición de cronología, al contrario, pueden reforzarla visualmente; además, no se trata de eliminar libros sino complementarlos. B es una postura muy reduccionista: la evidencia pedagógica sugiere que sí aportan valor cuando se alinean con objetivos (no son mera moda). D es exagerada: ninguna tecnología garantiza interés automáticamente; el diseño del guión histórico y pertinencia sigue siendo crucial. Por tanto, la opción C es la más equilibrada y respaldada por la literatura (que habla de flexibilidad, interactividad y aprendizaje significativo).

8) ¿Cuál de las siguientes herramientas digitales permitiría a un profesor crear una línea de tiempo interactiva con facilidad, usando solo una hoja de cálculo para cargar los datos?

A) Prezi.
B) TimelineJS (Knight Lab).
C) PowerPoint.
D) Audacity.

Respuesta correcta: B. Explicación: TimelineJS de Knight Lab es una herramienta específica para crear líneas de tiempo interactivas, y se alimenta típicamente de una Google Spreadsheet donde se ingresan fechas, textos, imágenes, etc.timeline.knightlab.com. Es conocida por su sencillez (el profesor llena la plantilla de hoja de cálculo con los eventos y TimelineJS genera la visualización). Prezi (A) es para presentaciones tipo mapa conceptual, no está orientada a cronologías estrictas. PowerPoint (C) puede hacer una diapositiva con línea de tiempo pero no es interactiva en el mismo sentido web (y no usa hojas de cálculo para cargar datos). Audacity (D) es un editor de audio, no relevante para líneas de tiempo. Por tanto la opción B es la correcta.

9) Un sistema CMS (Content Management System) como WordPress o Joomla es especialmente útil cuando un docente o institución educativa desea:

A) Crear una única página web estática con información que no cambiará.
B) Gestionar un sitio con muchos contenidos y secciones, permitir a varios autores publicar, y mantener un diseño uniforme fácilmentees.wikipedia.org es.wikipedia.org.
C) Diseñar animaciones web avanzadas o aplicaciones web interactivas complejas.
D) Programar una base de datos de historia desde cero.

Respuesta correcta: B. Explicación: Los CMS están pensados para manejar sitios web con gran cantidad de contenidos dinámicos, posibilitando la colaboración multiusuario y separando la administración del contenido de la presentaciónes.wikipedia.org. Por ejemplo, un portal del departamento de Historia con noticias, artículos de profesores, calendario de eventos, etc., se beneficia de un CMS: cada profesor puede subir sus artículos sin romper el diseño, todo se categoriza, y es sencillo actualizar el aspecto general sin reescribir cada página. La opción A describiría un escenario donde un CMS es innecesario, una página estática se puede hacer con HTML simple. C es más terreno de librerías JS o herramientas de creación multimedia, no el fuerte de un CMS (estos manejan contenido estructurado, no animaciones avanzadas). D no es correcto: si bien un CMS internamente usa bases de datos, no se "programa una base de datos de historia" con un CMS, más bien se configura y se alimenta con contenido. Por lo tanto B es la respuesta que refleja mejor las ventajas de usar un CMS en educación.

10) ¿Qué afirmación sobre WordPress es correcta en el contexto de su uso educativo?

A) WordPress es un lenguaje de programación que hay que aprender para crear sitios web.
B) WordPress solo sirve para blogs personales, no para proyectos educativos serios.
C) WordPress es un CMS popular que permite crear desde blogs de aula hasta portales complejos; cuenta con numerosos plugins educativos y una gran comunidad de soporte40defiebre.com.
D) Para usar WordPress es imprescindible saber codificar en PHP y CSS.

Respuesta correcta: C. Explicación: WordPress es un sistema de gestión de contenidos (CMS) muy versátil y ampliamente utilizado (más del 60% de sitios con CMS lo usan)40defiebre.com. No es un lenguaje de programación en sí (A es incorrecta); está escrito en PHP pero el usuario normal no necesita programar en PHP para usarlo en la mayoría de los casos, ya que se maneja vía interfaz gráfica (por eso D es incorrecta: no es imprescindible saber codificar para usar WP, aunque conocimientos de CSS/PHP pueden servir para personalizaciones avanzadas). Respecto a B, es falso: si bien WordPress inició enfocado en blogs, hoy es robusto para muchos propósitos, de hecho es usado por sitios de noticias, revistas académicas, portales institucionales… En educación hay multitud de proyectos serios con WordPress (sitios de universidades, repositorios, etc.). La respuesta C encapsula la realidad: WordPress es popular, flexible, con plugins (por ejemplo de quiz, de gestión de cursos -como LearnPress-, etc.) y una gran comunidad, lo que lo hace apto y confiable para proyectos educativos.

11) Omeka es una plataforma particularmente útil para:

A) Crear foros de discusión entre estudiantes.
B) Gestionar clases virtuales (calificaciones, tareas en línea).
C) Publicar colecciones de archivos históricos (imágenes, documentos) con metadatos y crear exposiciones digitalesbid.ub.edu bid.ub.edu.
D) Hacer videoconferencias interactivas.

Respuesta correcta: C. Explicación: Omeka fue diseñada por historiadores para instituciones de memoria y proyectos de humanidades digitales, permitiendo cargar ítems (fotos, documentos, audiovisuales) con metadatos detallados y luego armar exhibiciones virtuales con esos ítemsbid.ub.edu. Es ideal, por ejemplo, para un museo escolar en línea o un archivo histórico digital comunitario. No es una plataforma de foros (eso sería más bien phpBB, Discourse, etc.), ni un LMS para gestionar cursos (eso sería Moodle u otros; Omeka carece de funciones de calificaciones o entrega de tareas), ni una herramienta de videoconferencia (esa sería Zoom, Google Meet, etc.). Por ello la opción C define el uso principal de Omeka: gestión de colecciones y exposiciones digitales de patrimonio.

12) En el contexto del derecho de autor y recursos abiertos, ¿cuál de las siguientes prácticas es CORRECTA para un docente que crea un sitio web con imágenes históricas?

A) Usar cualquier imagen histórica encontrada en Google, ya que por ser histórica se considera de dominio público automáticamente.
B) Incluir imágenes bajo copyright sin permiso, pero añadir un aviso de "sin fines de lucro" en el sitio.
C) Utilizar imágenes de dominio público o con licencias Creative Commons (ej. de Wikimedia Commons) y atribuir adecuadamente la fuente y licenciacommons.wikimedia.org.
D) Digitalizar páginas de un libro de historia reciente y publicarlas integras en el sitio para que los alumnos las lean, sin pedir autorización.

Respuesta correcta: C. Explicación: La opción C describe la práctica correcta y legal: buscar imágenes en repositorios abiertos (Wikimedia Commons, por ejemplo, donde muchas imágenes históricas son dominio público o CC BY)commons.wikimedia.org, y dar la atribución apropiada indicando autor/fuente y licencia. De este modo se respetan los derechos de autor y se aprovechan REA. La A es incorrecta; no todas las imágenes históricas son dominio público – depende de la fecha de fallecimiento del autor o políticas del archivo –, y Google no filtra por licencia a menos que se configure. La B también es errónea; decir "sin fines de lucro" no exime de infracción de copyright, sigue siendo ilegal si no hay permiso o excepción aplicable. La D es incorrecta y riesgosa: digitalizar un libro reciente es reproducirlo (obra entera) – si está bajo copyright, eso viola los derechos del editor/autor, aunque sea para estudiantes (no es uso personal, es público en un sitio). La opción C es la única que se alinea con las recomendaciones de uso de contenidos abiertosunesco.org y las excepciones legales (contenido con permiso explícito).

13) ¿Qué ventaja ofrece un editor de bloques como el de WordPress (Gutenberg) frente al editor clásico, especialmente desde la perspectiva de un docente?

A) Ninguna, es más complicado y solo para programadores avanzados.
B) Permite agregar y configurar elementos de contenido (párrafos, imágenes, galerías, incrustaciones) de forma visual modular, facilitando dar formato atractivo a las entradas sin tocar código.
C) Garantiza que el sitio será automáticamente traducido a varios idiomas.
D) Reemplaza la necesidad de usar CSS, ya que todos los estilos se definen solos.

Respuesta correcta: B. Explicación: El editor de bloques (Gutenberg) introduce una interfaz visual donde cada parte del contenido es un bloque editable por separado (encabezados, listas, imágenes, citas, videos embebidos, etc.), lo cual facilita a usuarios sin conocimientos técnicos estructurar su entrada/página de manera atractiva y consistente. Un docente puede, por ejemplo, insertar un bloque de imagen con pie de foto, luego un bloque de texto, luego un bloque de quiz (si tiene plugin) – todo mediante botones e interfaces amigables en lugar de shortcodes o HTML manual. Esto hace más sencilla la creación de contenido enriquecido. La opción A es incorrecta; de hecho Gutenberg fue pensado para usuarios no técnicos. C es falso; el editor de bloques no traduce contenido automáticamente (eso requeriría plugins multilingües). D es exagerada; aunque Gutenberg aporta estilos predefinidos a bloques, no elimina la necesidad de CSS para personalizaciones avanzadas – simplemente oculta muchas complejidades al usuario final. Por tanto, la ventaja principal es la facilidad y visualidad en la composición de contenidos, como bien describe B.

14) Un profesor desea que sus alumnos creen colaborativamente un wiki de personajes históricos durante el semestre, donde cada uno edita y agrega información. ¿Qué plataforma sería la más adecuada?

A) Un blog en Blogger, compartiendo la misma cuenta entre todos.
B) MediaWiki, similar a la que usa Wikipedia, para que todos puedan crear y editar páginas de personajes con histórico de cambios.
C) Un grupo de WhatsApp donde envían textos y luego el profesor los compila.
D) PowerPoint en línea en modo compartido, con una diapositiva por personaje.

Respuesta correcta: B. Explicación: Para un proyecto colaborativo de estilo enciclopédico/wiki, la herramienta idónea es MediaWiki (el software de Wikipedia) u otra plataforma wiki, ya que permite creación y edición abierta de páginas por múltiples usuarios, mantiene historial de cambios, páginas de discusión, etc., que es justo lo que se necesita en un wiki de personajes históricos. La opción A (un blog único) no es ideal porque los alumnos tendrían que turnarse o compartir credenciales (poco seguro), y no ofrece la estructura hipertextual fácil de un wiki (enlaces entre páginas de personajes, etc.). C (WhatsApp) es absolutamente desestructurado para esto y difícil de sistematizar la información. D (PowerPoint compartido) es una solución forzada: podría servir para una presentación, pero no para un sitio de consulta continuo con decenas de páginas vinculadas; además, la edición simultánea de muchos en PowerPoint es poco práctica, y no ofrece función de búsqueda ni historial robusto. MediaWiki está hecha para este fin colaborativo y de construcción continua de conocimiento, de ahí que B sea la correcta.

15) ¿Cuál de las siguientes no es una característica de los Recursos Educativos Abiertos (REA)?

A) Pueden ser adaptados y modificados por otros educadores según sus necesidades, dentro de los términos de su licencia.
B) Suelen estar disponibles en formatos digitales accesibles en línea gratuitamente.
C) Están protegidos por derechos de autor cerrados que prohíben su redistribución.
D) Contribuyen a compartir conocimientos y prácticas educativas de forma equitativa.

Respuesta correcta: C. Explicación: Los REA justamente se definen por tener licencias abiertas o estar en dominio público, lo que significa que no están protegidos de forma cerrada, sino que permiten redistribución y modificaciónunesco.org. La opción C describe lo opuesto a un recurso abierto (eso sería un recurso tradicional con copyright "todos los derechos reservados"). Las otras opciones sí son ciertas: A – la adaptabilidad es clave de los REA (ej: un profesor toma una unidad didáctica abierta y la ajusta a su contexto), B – muchos REA son digitales en línea (aunque también puede haber REA físicos, la mayoría se difunde online gratuitamente), D – los REA fomentan el acceso equitativo al conocimiento (por eso UNESCO y otros los promueven). Por lo tanto, C es la que no corresponde a REA, ya que sería una contradicción.

16) En un editor WYSIWYG para diseño web, al arrastrar una imagen y colocarla en cierto lugar de la página, ¿qué sucede detrás de escena?

A) El editor no genera código hasta el final, solo muestra una simulación visual.
B) Se genera automáticamente el código HTML <img> con la referencia a esa imagen y reglas CSS correspondientes a su posición/formatohostinger.es.
C) El navegador del usuario final necesitará tener el mismo editor para ver la página con la imagen.
D) La imagen queda embedida en el HTML como código binario dentro de la etiqueta.

Respuesta correcta: B. Explicación: En un editor WYSIWYG, las acciones visuales del usuario se traducen en código real en tiempo real. Por ejemplo, al insertar/arrastrar una imagen, el software crea el elemento HTML <img src="..."> con la ruta de la imagen, y aplicará estilos CSS (inline o en un archivo aparte) para posicionarla y darle el formato que el usuario ha configuradohostinger.es. De este modo, lo que el usuario ve es efectivamente lo que se codifica. La opción A es incorrecta: el editor genera código conforme se diseña, no es una simple simulación vacía. C es falsa: el usuario final solo necesita un navegador normal para ver el resultado; no necesita el editor, porque lo que se entrega es HTML/CSS/JS estándar. D es generalmente incorrecta: las imágenes en web no se incrustan como texto binario en HTML (excepto casos especiales data URI pero no es lo que hacen la mayoría de editores WYSIWYG por defecto por motivos de tamaño); normalmente quedan como archivos externos referenciados por la etiqueta <img>. Por tanto B es la respuesta acertada.

17) Si un alumno quisiera integrar un audio con el discurso de un personaje histórico dentro de un texto narrativo en su página web (de forma que se pueda escuchar sin abrir otra ventana), ¿qué herramienta vista le sugerirías?

A) Twine, porque permite integrar audio en historias ramificadas fácilmente.
B) Un plugin de foro, donde podría adjuntar el audio para descarga.
C) Soundcite (Knight Lab), que permite incrustar pequeños reproductores de audio dentro de párrafos de textoactivismos.cl.
D) H5P Timeline, ya que la línea de tiempo reproduce audios automáticamente.

Respuesta correcta: C. Explicación: Soundcite es una herramienta indicada para ese propósito: insertar audio dentro del texto como un pequeño player en líneaactivismos.cl. Por ejemplo, en medio de un párrafo narrando un suceso, al mencionar "discurso", podría haber un botón play para oír el fragmento. Twine (A) es más para ficción interactiva; aunque puede incluir audio, no es lo ideal para un texto lineal con audio incrustado. Un plugin de foro (B) no viene al caso, eso es para discusiones, no para incrustar audio en un texto narrativo. H5P Timeline (D) es para cronologías, no para insertar audio en un texto corrido; H5P tiene otros content types (como audio player) pero la descripción dada es la de Soundcite. Así que la opción C es la correcta.

18) Durante la creación de un proyecto web, un estudiante pregunta: "¿Cómo sé si una imagen histórica que encontré está en dominio público?" ¿Qué recomiendas hacer primero?

A) Asumir que cualquier imagen de más de 50 años es dominio público y usarla.
B) Consultar repositorios confiables (ej. Wikimedia Commons) donde la imagen esté marcada con su licencia/dominio público, o buscar información del autor y fecha para determinar su estatus legal.
C) Enviarle un correo al Ministerio de Cultura por cada imagen para que responda.
D) Insertarla en la web de todas formas, pues el uso educativo exime de problemas legales.

Respuesta correcta: B. Explicación: Lo adecuado es buscar la imagen en fuentes que especifiquen su licencia o dominio público, como Wikimedia Commons, donde cada archivo tiene indicación si es PD (dominio público) o CC y bajo qué términoscommons.wikimedia.org. También informarse sobre el autor y fecha: generalmente en muchos países una obra entra en dominio público cierto número de años tras la muerte del autor (p.ej. 70 años). Así se puede deducir. Las opciones A y D son peligrosas: no todas imágenes "antiguas" son libres, la legislación varía (50 años no es un criterio universal, son ~70 después de muerte del autor usualmente), y el uso educativo no es una carta blanca, sobre todo si es publicación en web abierta (la excepción de "uso justo" o "cita" es limitada). C (consultar al Ministerio) no es práctico ni normalmente de su competencia directa dar tal soporte imagen por imagen. Por ende, B es lo correcto: usar repositorios con info de licencia y hacer un poco de investigación sobre cada imagen.

19) En la herramienta TimelineJS, para agregar contenido multimedia (fotos, videos, tweets) a cada hito de la línea de tiempo, el usuario debe:

A) Programar scripts en JavaScript dentro de la hoja de cálculo.
B) Poner la URL del recurso multimedia (imagen de Commons, video de YouTube, etc.) en el campo correspondiente de la hoja de cálculo de TimelineJSactivismos.cl.
C) Subir todos los archivos multimedia a la plataforma Knight Lab manualmente.
D) No es posible incluir medios, TimelineJS solo admite texto.

Respuesta correcta: B. Explicación: TimelineJS permite al usuario incluir diversos medios proporcionando sus URLs en la hoja de Google Sheets plantillaactivismos.cl. Por ejemplo, hay una columna "Media" donde pones el enlace a una imagen (JPG) o a un video de YouTube, un tuit, un audio de SoundCloud, etc., y TimelineJS automáticamente lo incrusta en ese hito. No requiere programar JavaScript (A es falsa, el usuario no toca código). Tampoco se suben archivos a Knight Lab (B es el método correcto; Knight Lab jala de la URL pública dada). D es errónea, sí admite medios de muchas fuentes. Entonces B describe el procedimiento real.

20) Respecto a la formación docente en TIC, particularmente con herramientas web, ¿cuál de estas afirmaciones está respaldada por lo discutido?

A) Muchos futuros profesores se sienten plenamente competentes en crear páginas web, por eso estas herramientas se enseñan poco en la formación docente.
B) Existen estudios que indican que la mayoría de estudiantes de magisterio no se sienten preparados en creación de contenidos digitales (como páginas web) y desconocen conceptos como licencias abiertas, por lo que formarlos en estas herramientas es importanterevistaseug.ugr.es.
C) La competencia digital docente se limita a saber usar PowerPoint y buscar información en Google.
D) Solo los docentes de informática requieren aprender sobre creación web; los de Historia no lo necesitan en su práctica.

Respuesta correcta: B. Explicación: La investigación citada mostró que más de 300 estudiantes de pedagogía se consideraban poco competentes en creación de páginas web y 90% desconocía las licencias Creative Commonsrevistaseug.ugr.es. Esto evidencia la necesidad de incluir formación en creación de contenido digital y cultura abierta en la formación docente de Historia y CCSS. La opción A es contraria a esa evidencia: en realidad muchos no se sienten competentes. C es una visión muy reduccionista de la competencia digital (hoy implica mucho más, como crear contenidos, comunicar en línea, usar plataformas educativas, etc.). D es incorrecta: en las Ciencias Sociales la tecnología aporta mucho en investigación y enseñanza (como vimos con narrativas, archivos digitales, etc.), por tanto los docentes de Historia sí deberían adquirir esas habilidades; las políticas educativas actuales enfatizan la competencia digital en todas las áreas. Así, B es la afirmación correcta respaldada tanto por datos como por las tendencias formativas (UNESCO ICT-CFT, etc., que señalan la importancia de que docentes sepan crear y compartir recursos digitales abiertosprofuturo.education).

Anexos

Resumen final estilo tutoría

Tutor: Hemos cubierto bastante contenido sobre cómo los docentes de Historia pueden usar la tecnología para crear páginas web y recursos digitales. Vamos a repasar los puntos clave para asegurarnos de que todo quedó claro.

En primer lugar, vimos los fundamentos: HTML y CSS. Piensa en HTML como la estructura, el esqueleto de la página – así organizamos títulos, párrafos, listas, imágenes. CSS es como la decoración y el formato – gracias a él definimos colores, tipos de letra, diseño de columnas, etc. Sin HTML no hay contenido en la web; sin CSS ese contenido se vería plano y poco atractivo. Aprender aunque sea lo básico de HTML/CSS te da mucho control sobre cómo presentas la información histórica en línea. Por ejemplo, tú mismo puedes crear una página sencilla con la biografía de un personaje histórico y decidir qué va en encabezados, qué en lista de fechas, etc., sin depender de plantillas cerradas. ¿Recuerdas el ejemplo? HTML fue la base para marcar "Napoleón" como título y cada batalla en su propia sección, y CSS nos permitió poner ese título en un estilo resaltado. Esto te da independencia para empezar a crear.

Luego, pasamos a las herramientas visuales para diseño web sin código. Hablamos de los editores WYSIWYG – "What You See Is What You Get". Imagina que estás usando una especie de Word pero para páginas web: arrastras una imagen, escribes un texto, le das negrita, y todo se ve tal cual lo verá cualquiera en Internet. Plataformas como Wix, Weebly o Google Sites te ofrecen justamente eso. ¿Ventaja? No necesitas saber HTML para armar algo bastante resultón; en poco tiempo puedes tener un sitio del proyecto de aula en línea. Es ideal cuando el enfoque es más pedagógico que técnico, por ejemplo, un grupo de alumnos de secundaria puede documentar la historia de su escuela en un Google Site colaborativo en unas semanas. La advertencia: estas herramientas a veces tienen límites – plantillas que no puedes modificar al 100%, o en su versión gratuita muestran alguna publicidad o logo. Pero en un contexto educativo, suelen ser más que suficientes y, lo más importante, bajan la barrera de entrada. No queremos que por temor a "no sé programar" los docentes se queden sin publicar contenido valioso. Por eso existen estas opciones.

Después exploramos algo muy emocionante: las narrativas digitales. Aquí es donde la Historia se encuentra con la creatividad multimedia. Tradicionalmente contamos la historia de forma lineal en texto, quizá con alguna imagen en un libro. Pero usando herramientas digitales podemos crear experiencias: líneas de tiempo donde haces clic y aparecen fotos auténticas de cada evento, mapas donde recorres rutas históricas, incluso relatos interactivos donde tú, como usuario, decides qué hacer en una encrucijada histórica y ves las consecuencias. Esto va más allá de la curiosidad: está demostrado que presentaciones así pueden hacer el aprendizaje más significativoscielo.br, porque activan la imaginación, las emociones, permiten explorar a tu propio ritmo. En clase vimos TimelineJS en acción (¡con qué facilidad podíamos incorporar un video de la caída del Muro de Berlín en la cronología de 1989, ¿cierto?!). O el ejemplo de StoryMapJS para relatar los viajes de Simón Bolívar por América del Sur marcando cada lugar en un mapa interactivo. ¿Y qué tal las comparativas Juxtapose, moviendo la barra para ver "antes y después"? Todo esto hace que la Historia cobre vida. Como tutor te digo: no se trata de usar tecnología por moda, sino de aprovecharla donde mejora la comprensión. Una narrativa digital bien pensada invita al estudiante a ser explorador y no simple espectador.

También hablamos de los CMS, los sistemas de gestión de contenido. Imagínalos como la columna vertebral de sitios más grandes. Si mañana tu escuela o facultad te pide encargarte de la página web del departamento de Estudios Sociales, probablemente usarán un CMS como WordPress, Joomla o Drupal. ¿Por qué? Porque facilitan muchísimo la tarea de tener decenas o cientos de páginas, con varios colegas publicando, manteniendo un estilo coherente. Tú no quieres tener que editar 100 archivos HTML a mano cada vez que cambie el encabezado del sitio; en un CMS cambias la plantilla una vez y listo, todo el sitio se actualiza. Además suelen traer muchas funcionalidades listas: que si buscador interno, que si gestión de usuarios con contraseña, que si secciones para noticias, para eventos próximos... En particular profundizamos en WordPress (por ser el más difundido y amigable) y en Omeka (una joya para los historiadores). Con Omeka, hacer un museo virtual con tus estudiantes se vuelve alcanzable, porque está pensado justo para subir objetos, catalogarlos, y armar exhibiciones con narrativa. Tuvimos el ejemplo del museo escolar digital, ¿recuerdas la emoción de encontrar fotos de ex-alumnos de hace 50 años? Ese valor emocional e histórico es incalculable, y fue posible porque unos profesores y alumnos dominaron un CMS como Omeka y digitalizaron su archivo.

Ahora, un punto crucial que recalqué: los recursos abiertos y el respeto a la legalidad. Esto no suele ser el tema favorito, pero es fundamental. Muchos de ustedes se sorprendieron al saber que 90% de futuros docentes encuestados no conocían las licencias Creative Commonsrevistaseug.ugr.es. ¡90%! Eso es casi todos. Imaginen los riesgos: un profesor sin esa formación podría, con buena intención, montar una web educativa plagada de imágenes o textos con copyright sin permiso, exponiéndose a problemas legales y éticos. Pero ustedes ya no son de esos: han aprendido que existe un vasto caudal de conocimiento abierto. Wikimedia Commons fue nuestro gran aliado en esta travesía. Visitar Commons es como entrar a una gran biblioteca de imágenes, sonidos, videos que uno puede llevarse legalmente siempre y cuando siga unas reglas sencillas de atribución. Los llamé a ser como detectives: "¿Esta foto de 1930... habrá pasado a dominio público?" y les di pistas: autor fallecido hace más de 70 años, o foto anónima antigua. Y hablamos de "por si acaso, mejor buscarla en Commons u otro repositorio que ya lo indique". Este hábito de verificar la licencia es parte de la competencia digital responsable de ustedes como docentes.

No olvidemos lo que resaltó la UNESCO: quieren docentes empoderados para crear, reutilizar y compartir REA (Recursos Educativos Abiertos)profuturo.education. Al final, ¿qué buscamos? Democratizar el acceso al conocimiento. Que el material estupendo que tú prepares no se quede guardado en tu cajón, sino que pueda ayudar quizá a un colega en otra ciudad, o que tus alumnos puedan seguir usándolo cuando ya no estén en tu clase. Por eso vimos cómo liberar nuestros propios contenidos con Creative Commons. Ustedes mismos, al crear su mini-sitio histórico, le pusieron una licencia CC-BY (¿recuerdan? para que cualquiera lo use citando la autoría). ¡Eso es maravilloso! Están contribuyendo a la comunidad educativa más grande.

Para terminar este resumen: espero que ahora se sientan más confiados en navegar entre estas herramientas. Puede que alguno se haya enamorado de TimelineJS y piense incluirlo en su práctica docente, o que otro diga "voy a proponer en mi escuela montar un Omeka para nuestro archivo". Otros tal vez se queden con "al menos ahora sí podré guiar a mis alumnos cuando hagan un blog de historia". Cualquier avance, por pequeño que sea, es valioso. Lo importante es la visión global que ganaron: saben que la tecnología, bien usada, potencia la enseñanza de la Historia, no la suplanta. Ustedes siguen siendo los guionistas, los curadores del contenido. La tecnología es su herramienta y aliada para llegar más lejos – tanto a más audiencia, como más profundo en la comprensión.

Mantengan esa curiosidad activa. La tecnología evoluciona; hoy es StoryMapJS, mañana habrá otra cosa más. Lo esencial es que tienen los fundamentos para aprender a aprender esas novedades. Y sobre todo, tienen la actitud crítica para elegir la herramienta adecuada para cada objetivo pedagógico, y no al revés. Como tutor, los felicito: han dado un paso enorme en convertirse en docentes del siglo XXI, integrando Humanidades y tecnología. ¡Sigan experimentando y creando!

Actividad para fomentar una habilidad blanda (Trabajo en equipo y creatividad)

"Hackatón histórica": Construcción colaborativa de un recurso digital en tiempo limitado – Habilidad blanda: trabajo en equipo bajo presión creativa, comunicación y resolución de problemas.

Descripción: Se formarán equipos interdisciplinarios (si es posible, mezclar estudiantes con distintas fortalezas: uno más creativo en diseño, otro más organizado, otro hábil en tecnología, etc.) y se les propondrá un reto tipo hackatón: en 3 horas deben planear y prototipar un recurso digital para enseñar un tema histórico específico de manera innovadora. Por ejemplo, podría ser "La vida en una fábrica durante la Revolución Industrial" o "El viaje de Magallanes-Elcano".

Dinámica: Todos los equipos reciben el mismo tema (o diferentes temas si se quiere variedad). Deben, en un tiempo acotado (3 horas dentro de clase o quizás una tarde extra-clase), concebir y montar un prototipo funcional de recurso. Puede ser una página web con narrativa, una mini-exposición virtual, un mapa interactivo, un pequeño video con infografía animada – se deja libre a su creatividad qué formato elegir, siempre que aplique algo de lo aprendido (podrían usar Google Sites, Genially, StoryMapJS, Canva, incluso redes sociales simuladas, lo que gusten).
Trabajo en equipo: Tendrán que distribuirse tareas rápidamente: quién busca imágenes, quién redacta textos, quién arma el diseño o manipula la herramienta elegida. Deberán comunicarse efectivamente para no pisarse ni duplicar trabajo, y para integrar todas las piezas de forma coherente. La presión de tiempo los obligará a practicar una comunicación clara y toma de decisiones rápidas – valiosas habilidades en trabajo colaborativo.
Creatividad y resolución de problemas: Al ser un tiempo corto, surgirán problemas inesperados (tal vez la herramienta no les permite hacer exactamente lo que querían, o falta una información clave). Tendrán que improvisar soluciones, tal vez simplificar la idea original sin perder la esencia, o buscar vías alternativas para presentar algo. Ejemplo: si planearon un timeline con audio pero no logran incrustar audio, ¿cómo lo resuelven? Quizá deciden convertir ese audio en un pequeño video de ondas sonoras y subirlo a YouTube para luego incrustarlo – ¡problema resuelto creativamente!
Mentoría y evaluación: El docente (o tutor) circulará entre los equipos, observando la dinámica de trabajo en equipo: ¿se reparten bien? ¿alguien acapara decisiones? ¿todos participan? Hará de mentor ágil, dando pistas suaves si ve estancamiento ("¿Qué tal si usan tal recurso de Commons para eso?") pero dejando que ellos mismos solucionen. Al final, cada equipo presenta en 5 minutos su prototipo. Más que la perfección técnica, se evaluará la capacidad de haber colaborado eficientemente y logrado un producto creativo y funcional en poco tiempo.
Reflexión grupal: Tras las presentaciones, se abre un espacio para que compartan cómo se sintieron trabajando así. ¿Quién asumió rol de líder? ¿Cómo manejaron los desacuerdos? ¿Qué harían diferente la próxima vez? Esta reflexión final consolida la conciencia de trabajo en equipo: reconocer fortalezas de compañeros, la importancia de escuchar ideas bajo presión, etc.

Objetivo de la actividad: Más allá de reforzar contenidos históricos, se busca que experimenten una situación de proyecto realista donde cooperar es indispensable. En la docencia, muchas veces tendrán que colaborar con colegas (piensen en proyectos interdisciplinarios o en organización de eventos escolares) bajo limitaciones de tiempo y recursos. Esta mini-hackatón es un simulacro lúdico de esas situaciones. Al terminar, habrán practicado organización grupal, delegación de tareas según habilidades, apoyo mutuo, gestión del tiempo y creatividad para superar obstáculos – todas esas son habilidades blandas cruciales: trabajo en equipo, comunicación eficaz, tolerancia a la presión y adaptabilidad creativa.

Y por si fuera poco, probablemente salgan prototipos muy interesantes de recursos didácticos, que incluso podrían desarrollarse más a futuro. Lo importante es el proceso vivido. ¡Aprender haciendo, y haciendo juntos!

Con esto concluimos nuestro extenso recorrido. Han adquirido no solo conocimiento técnico-pedagógico, sino también fortalecido competencias generales de colaboración y creatividad. ¡Felicitaciones por su esfuerzo y a seguir innovando en la enseñanza de la Historia con ayuda de las herramientas digitales!

Última modificación: viernes, 16 de mayo de 2025, 07:41

(P2025 - 1S) HERRAMIENTAS INFORMÁTICAS APLICADAS A LA HISTORIA Y LAS CIENCIAS SOCIALES ASemana 8. Diseño de Páginas Web

Diseño de Páginas Web: Fundamentos y Aplicación en Educación

Estructura Básica de un Sitio Web: HTML y CSS

HTML: El Esqueleto

CSS: La Piel

Trabajando Juntos

Evolución de HTML y CSS

Inicios (1990s)

Separación (Mediados 90s)

Revolución (2010s)

Era Móvil (Actualidad)

Aplicación Práctica en Historia

Estructura con HTML

Estilo con CSS

Semántica Avanzada

Principios de Usabilidad y Accesibilidad

Experiencia del Usuario

Accesibilidad Web

Usabilidad Web

Aplicación de Usabilidad y Accesibilidad en Educación

Diseño Intuitivo

Accesibilidad Universal

Pruebas con Usuarios

Organización de Contenidos Digitales

Navegación Web

Hipertextualidad

Multimedia

Hipermedialidad

Modelos de Organización de Contenidos

Jerárquico

Secuencial

En Red

Biblioteca Digital de Historia: Ejemplo Práctico

Navegación Global

Hipermedialidad

Navegación Asociativa

Herramientas Visuales para el Diseño Web

Editores Visuales (WYSIWYG)

Sistemas de Gestión de Contenidos (CMS)

Constructores de Páginas

Evolución de las Herramientas de Diseño Web

Código Manual

Editores Visuales

CMS

Plataformas No-Code

Caso Práctico: Sitio Web Educativo con CMS

Ética, Propiedad Intelectual y Licencias en la Web

Ética Digital

Propiedad Intelectual

Licencias Abiertas

Privacidad

Licencias Creative Commons

BY (Reconocimiento)

NC (No Comercial)

ND (No Derivadas)

SA (Compartir Igual)

Caso Práctico: Ética y Licencias en un Blog Educativo

Fundación CC

Recomendación REA

RGPD