DGPC Cátedra Díaz Cortez Clase 3
UX, etiquetas: imagen, video, iframe y formulario
🗺️ UX Mapa del Sitio – Arquitectura de la Información
Concepto clave:
El Mapa del Sitio No es solo un menú. Es la organización jerárquica y relacional del contenido que permite al usuario/a encontrar lo que busca con el menor esfuerzo cognitivo.
Herramientas útiles:
Mapa del sitio UX.
Flujo de usuario.
Matrices de contenido.
1. Mapa de Sitio UX: Es una representación visual jerárquica de la estructura de un sitio web o aplicación.
Qué es: Un diagrama que muestra cómo se organizan, etiquetan y enlazan las diferentes páginas o secciones.
Para qué sirve: Define la jerarquía del sitio, ayuda a planificar la navegación y asegura que el contenido sea fácil de encontrar.
Componentes: Incluye la página de inicio (home) y sus ramificaciones hacia secciones principales y subpáginas.
2. Flujos de Usuario: Son diagramas que muestran el camino paso a paso que sigue un usuario dentro de un producto digital para completar una tarea específica.
Qué es: Una representación secuencial de pantallas y acciones (clics, decisiones) desde el punto de entrada hasta la meta final.
Para qué sirve: Para optimizar la usabilidad, identificar posibles obstáculos o pasos innecesarios en un
proceso (ej: un proceso de compra).
Diferencia con Mapa del Sitio: El mapa del sitio es la "vista de pájaro" de toda la estructura, mientras que el user flow es el "viaje" específico de un usuario.
3. Matrices de Contenido: Es un inventario detallado de todo el contenido de un sitio web o aplicación, gestionado generalmente en una hoja de cálculo.
Qué es: Una tabla que enumera páginas,
archivos, estados del contenido (nuevo, actualizado, obsoleto), etiquetas y la jerarquía.
Para qué sirve: Para planificar la creación, migración o auditoría de contenido durante el rediseño de un sitio web. Ayuda a alinear el contenido con los objetivos del negocio y la experiencia de usuario.
Entregable:Boceto esquemático de Árbol de 3 niveles para un micrositio de rótulo (ej. “Portafolio personal + materias + blog”).
📐 Esquema de pantalla (Wireframe) → Prototipo → Validación
Esquema de pantalla (Wireframe): Baja/media fidelidad. Enfocado en estructura, jerarquía visual y flujo. Sin colores ni tipografías finales.
Prototipo: Añade interacción básica (clics, transiciones, estados).
Herramientas: Figma, Penpot, Balsamiq.
Validación: Solicitar a Usuarios/as o compañeros/as que realicen 2–3 tareas concretas de uso y validación (ej. simulación de: “Encuentra el formulario de contacto y envía un mensaje”)
Métricas simples: tasa de éxito, tiempo, errores, comentarios cualitativos.
Tip didáctico: Usa el método “pensar en voz alta (Think aloud)” durante la validación. Los estudiantes deben observar, no ayudar.
🖼️ Etiqueta HTML <img />
Para qué sirve: : La Etiqueta <img /> en HTML se utiliza para insertar imágenes en una página web. Es un elemento vacío o "de una sola parte", no es obligatorio que lleve barra de cierre pero es una buena práctica incluirla.
Lleva dos atributos obligatorios: src="" para indicar cual es la imagen que debe mostrarse, ejemplo:
src="logo-dgpc.svg. Y alt="" para indicar cuál es el texto que debe mostrarse para ser accesible,
ejemplo: alt="isologo de la cätedra Díaz Cortez" .
🎬 Etiqueta html <video></video>
Para qué sirve: Para mostrar un video en el contenido de una página web, se utiliza la etiqueta <video>
</video>.
Requiere etiqueta de cierre. El atributo src="" se utiliza para indcar cual es el archivo del video que debe mostrarse, ejemplo: src="video.mp4".
Se suele incluir el atributo controls para que el usuario pueda darle play.
<video src="video.mp4" controls> </video>
Mejor práctica, Múltiples formatos: Para asegurar compatibilidad entre navegadores, es común usar etiquetas <source> dentro de <video>:
<video controls class="estiloVideo">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no soporta video.
</video>
Nota sobre autoplay: Si querés que el video inicie solo, se recomienda usar
<video controls autoplay muted>
Los navegadores modernos bloquean la autoreproducción con sonido.
📸 Etiqueta html <figure></Figure>
Qué es: La etiqueta <figure> en HTML5 está diseñada para agrupar cualquier tipo de contenido autónomo y multimedia, incluyendo imágenes, videos, clips de audio, bloques de código, gráficos o diagramas, habitualmente acompañados por una leyenda contenida en la etiqueta <figcaption></figcaption>.
Para qué sirve: La etiqueta Figure tiene una finalidad Semántica: Su objetivo es separar el contenido (sea imagen, vídeo o código) del flujo principal del documento, indicando al navegador y a los lectores de pantalla que todo el conjunto (media + texto) está relacionado y forma una sola unidad, incluso si se mueve de lugar.
🌐 Etiqueta HTML <iframe></iframe>
Para qué sirve: La etiqueta <iframe> (Inline Frame) : Sirve para incrustar dentro de una página html, un contenido
externo como por ejemplo: un mapa de un sitio de mapas o un video de un sitio de videos.
Lo que permite iframe es insertar otro documento HTML dentro de la página actual. Es fundamental para integrar contenido de terceros.
<iframe src="https://ejemplo.com"> </iframe>
✅ Etiqueta html <form> </form > Formularios
<!-- Ejemplo básico -->
<form action="/enviar-datos" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="ecorreo">Correo Eletrónico:</label>
<input type="email" id="ecorreo" name="ecorreo">
<button type="submit">Enviar</button>
</form>