.. Copyright (c) 2025 Allan Avendaño Sudario Licensed under Creative Commons Attribution-ShareAlike 4.0 International License SPDX-License-Identifier: CC-BY-SA-4.0 ============================================================= Guía 03: HTML - Etiquetas semáticas, multimedia y formularios ============================================================= .. topic:: Objetivo específico :class: objetivo Utilizar etiquetas HTML en contenido interactivo y multimedia mediante el desarrollo de un currículum vitae digital para la presentación de información profesional de manera organizada y accesible en línea. Actividades previas ===================== Diseño ------ 1. Decida el contexto de uso para un formulario, una imagen, un video y un mapa en su CV, considerando la guía de :download:`diseño del contenido de un CV <./pdfs/guia03-disenocontenido.pdf>`. 2. Escoja las secciones en su documento *index.html* en las que colocará el formulario, la imagen, el video y el mapa. Ambiente de desarrollo ---------------------- 1. Acceda a su proyecto *curriculum* en Codespaces o en su máquina local. 2. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación para `crear o cambiar de rama `_ en Codespaces. 3. Haga clic en el ícono de `Live Preview` en la barra de estado de VSCode para iniciar el servidor local. Actividades en clases ===================== Etiquetas de semántica contenedoras ----------------------------------- 1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para generar una recomendación del uso de etiquetas de :term:`semántica contenedoras` HTML. .. hint:: En el contexto de un sitio web con un curriculum vitae, genera las etiquetas HTML5 semánticas contenedoras adecuadas con tres testimonios de personas para la que usted ha trabajado. Cada testimonio debe contener una frase, un párrafo con el nombre de la persona, su cargo y una breve descripción de su experiencia laboral con usted. Incluya la referencia en el menu de navegación. 2. Compruebe la vista previa del resultado en el navegador. 3. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación sobre las etiquetas semánticas en `HTML5 Semantic Elements `_. Etiquetas de semántica de texto ------------------------------- 1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener las recomendaciones de etiquetas :term:`semántica de texto` HTML, para: a) Un párrafo, con un enlace a un sitio web. b) Una lista ordenada de elementos. c) Una lista no ordenada de elementos. d) Una tabla sin bordes, con al menos tres filas y tres columnas. La primera fila y la primera columna debe contener los encabezados de la tabla. 2. Compruebe la vista previa del resultado en el navegador. 3. :material-round:`note_alt;1.5em;sd-text-success` Revise la información sobre las etiquetas semánticas de texto en `Etiquetas semánticas de texto `_. Etiquetas multimedia -------------------- 1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener una recomendación de las etiquetas HTML, para los siguientes elementos :term:`multimedia`: a) Un mapa de Google Maps. b) Una imagen con el placeholder de `Picsum `_ o `Placehold `_. c) Un video de YouTube (incluya la URL). 2. Compruebe la vista previa del resultado en el navegador. 3. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación de `Cómo crear un mapa con Leaflet `_, `¿Qué es y para qué sirve un Placeholder de imagen? `_ y `¿Cómo insertar vídeos de YouTube en nuestra web (HTML)? `_ mediante etiquetas HTML. Etiquetas de formularios ------------------------ 1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener una recomendación de etiquetas HTML, para incluir un :term:`formulario` que contenga, al menos, un elemento para ingresar un texto en una línea, un elemento con una lista desplegable, un conjunto de opciones de selección única, un vector de valores de selección múltiple, un elemento para un área de texto y un botón para enviar el formulario. No utilice la etiqueta `
`. 2. Compruebe la vista previa del resultado en el navegador. 3. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación con los :term:`atributos` de la etiqueta `form `_. Versionamiento -------------- 1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio *curriculum*. 2. :material-round:`note_alt;1.5em;sd-text-success` Revise la documentación para `levantar una solicitud de cambios `_ en Codespaces. 3. Compruebe el resultado en el navegador. Conclusiones ============ .. topic:: Preguntas de cierre * ¿Qué ventajas y riesgos observas al utilizar inteligencia artificial generativa para incorporar etiquetas de formularios, multimedia y texto semántico en la estructura de tu currículum HTML, en comparación con hacerlo de forma manual? * Si tuvieras que explicar tu proceso de integración de esas etiquetas a otro estudiante, ¿cómo justificarías cada decisión técnica tomada con base en las sugerencias de la IA y tus propios criterios? * ¿Cómo puedes asegurar que el resultado final del currículum vitae refleje tu diseño como desarrollador web, a pesar de haber utilizado inteligencia artificial en parte del proceso de codificación? Actividades autónomas ===================== Recursos extras ------------------------------ En redes: .. raw:: html