El navegador interpreta archivos y presenta una página con la que podemos interactuar. HTML expresa estructura y contenido, CSS describe presentación y JavaScript puede responder a eventos. El editor permite modificar esos archivos; el navegador muestra su interpretación. Guardar y recargar son pasos diferentes: si no guardas el cambio, recargar puede mostrar la versión anterior. Un buscador ayuda a localizar recursos, pero no es el programa que ejecuta el cuestionario de nuestra página local.

En una web servida, un cliente solicita recursos a un servidor. En nuestra práctica también podemos abrir archivos de una carpeta, conservando sus relaciones. No todas las funciones de servicios funcionan igual desde un archivo local, por lo que se usa el entorno de previsualización preparado en el aula. Publicar significa poner recursos al alcance de una audiencia y configurar su acceso; no sucede simplemente al guardar. La misión utiliza distribución restringida. Distinguir archivo, navegador, servidor y buscador ayuda a explicar fallos de acceso sin atribuirlos todos al código o a la conexión a Internet.

HTML organiza el contenido con elementos que expresan su significado. Un encabezado indica jerarquía: permite reconocer qué tema comienza y cómo se relaciona con los demás, además de su apariencia. Nuestra web presenta un título principal y tres secciones coherentes de propósito, funcionamiento y pruebas. La navegación ofrece enlaces descriptivos para llegar a ellas. El texto visible orienta a quien lee, mientras href indica el destino: #pruebas necesita un elemento con id pruebas. Cambiar las palabras del enlace no modifica automáticamente esa referencia. Esta organización también ayuda a navegar con tecnologías de apoyo.

Los recursos de otros archivos necesitan relaciones de ubicación igualmente claras. La ruta imagenes/esquema.png busca esquema.png dentro de la subcarpeta imagenes desde el documento actual. Una ruta personal absoluta puede depender de la ubicación en un ordenador concreto. Al copiar el proyecto, conservar estructura, nombres y mayúsculas permite mantener las relaciones entre documentos y recursos. Por eso abrir la carpeta copiada aporta una comprobación distinta de mirar la versión que ya funcionaba en el lugar original.

La estructura también debe permitir comprender lo que aportan las imágenes. Una imagen informativa necesita una alternativa que transmita su significado en ese contexto; una decoración puede tener alternativa vacía. Un esquema complejo requiere además texto que explique sus relaciones. Decir solo «imagen» o repetir el nombre del archivo no proporciona esa información. Comprobar navegación y comprensión desde la carpeta copiada permite revisar tanto los destinos técnicos como las explicaciones que encuentra la persona.

CSS aplica reglas de presentación a elementos seleccionados. Una regla contiene selector y declaraciones de propiedad y valor. Un selector de tipo puede afectar a todos los párrafos; una clase permite agrupar elementos con una función visual compartida. Separar estilos en un archivo facilita reutilizarlos y revisar cambios sin alterar el contenido. Para que surtan efecto, HTML debe enlazar correctamente ese archivo. Un estilo ausente puede deberse a una ruta errónea y no a una propiedad mal elegida.

La legibilidad depende de contraste, longitud de línea, espacios y posibilidad de ampliar el texto. Un ancho máximo limita líneas excesivas; una imagen con ancho máximo relativo y altura automática puede adaptarse sin deformarse. En una ventana estrecha, varias columnas pueden necesitar reorganización. Las medidas relativas responden al contexto; fijar todas las dimensiones en píxeles puede dificultar la adaptación. Comprueba lectura, teclado y ampliación en tareas concretas, sin declarar que unas pocas reglas garantizan toda la accesibilidad. Si algo se corta, revisa el contenedor y su distribución antes de reducir la letra para hacerlo encajar.

Una interacción conecta lo que hace una persona con una respuesta de la página. En el cuestionario local, HTML define un selector, un botón y una zona de resultado. JavaScript relaciona esos elementos mediante un evento: al pulsar el botón se ejecuta un manejador que lee la selección actual. El momento de lectura importa. Si la opción se guardara únicamente al cargar la página, cambiar el selector después no actualizaría aquel dato y la respuesta podría corresponder a una elección antigua.

La decisión puede organizarse en una función que recibe la opción y devuelve un mensaje. Ese retorno proporciona un valor; otro paso lo presenta en pantalla mediante textContent, que escribe el resultado como texto. Separar ambos pasos permite comprender qué parte decide y cuál muestra. La lógica contempla Sensor, Actuador, Controlador y opción vacía, con una rama general que orienta ante una elección no válida. En las comparaciones, === expresa igualdad estricta; = asigna un valor y las llaves delimitan los bloques de instrucciones.

Toda esa respuesta ocurre en la práctica local y no necesita enviar datos. Un botón de tipo button permite activar el manejador sin enviar el formulario. Si la plantilla utiliza submit, hay que impedir su envío por defecto mediante preventDefault y comprobarlo. Una etiqueta visible asociada al selector explica qué se elige. Los mensajes desarrollan la relación conceptual correspondiente en lugar de limitarse a «correcto», de modo que la respuesta también ayuda a aprender.

Una fuente informa; una licencia o permiso determina qué usos de una obra se autorizan. Son preguntas relacionadas, pero distintas. Para justificar el funcionamiento del proyecto, consulta documentación técnica y registra autoría, título, enlace, fecha y uso en tu explicación. Para incorporar imagen o código ajeno, localiza la obra original y comprueba sus condiciones. Un resultado de buscador no concede permiso ni sustituye el enlace exacto. Dar crédito tampoco convierte un uso prohibido en autorizado.

Las licencias tienen condiciones diferentes. BY exige atribución; SA puede exigir que una adaptación se comparta con la misma licencia o una compatible; NC limita a usos no comerciales; ND no permite compartir adaptaciones bajo ese permiso. Comprueba la licencia concreta antes de modificar o distribuir un recurso y distingue tus aportaciones de las ajenas. Además, un material propio puede revelar datos de otras personas: una captura necesita revisión de privacidad aunque no tenga problema de autoría. El permiso de lector del espacio compartido decide audiencia y edición, no derechos sobre imágenes. Conserva una ficha que permita revisar esas tres cuestiones por separado.

Depurar consiste en reproducir un fallo, proponer una causa, cambiar la parte pertinente y repetir la prueba. Una imagen ausente orienta hacia ruta o archivo; un enlace interno que no llega, hacia href e id; un botón sin respuesta, hacia carga del programa o manejador. La consola del navegador ayuda a encontrar errores técnicos, pero una respuesta incorrecta puede ejecutarse sin avisos. Siempre compara el resultado con el comportamiento que definiste, no solo con la ausencia de mensajes de error.

Prepara pruebas de cada enlace, cada opción y la entrada vacía. Copia toda la carpeta a otra ubicación y ábrela desde allí para detectar dependencias personales. Comprueba también teclado, ventana estrecha y ampliación de texto. En la distribución restringida del centro, revisa quién puede ver y quién puede editar con ayuda de una cuenta de prácticas o del docente. «Cualquiera con el enlace» puede ampliar la audiencia y no equivale al grupo autorizado. Conserva archivos fuente para poder corregir y registra un antes y después que permita reconocer qué mejora se comprobó y qué queda pendiente.

Un proyecto web reúne contenido y archivos relacionados. La estructura expresa qué se explica; el estilo facilita recorrerlo; la interacción comprueba una elección y ofrece información. Esas capas colaboran, pero no se sustituyen. Una sección de pruebas necesita describir condiciones, resultados y límites del proyecto original, no solo mostrar fotografías de éxito. La imagen aporta apoyo visual y el texto permite interpretar qué se ha comprobado. La carpeta final debe conservar recursos y rutas con una organización reconocible.

A01 incluye audiencia, mapa, fuentes, interacción prevista y una microweb ejecutada. También documenta un fallo reparado y el borrador compartido con rol lector en el entorno autorizado. A02 añade las tres secciones completas, interacción funcional, pruebas desde carpeta exportada, créditos y una mejora. Cada integrante explica una capa y un error resuelto, con una decisión propia. Las prácticas breves reutilizan esa misma web y no abren entregas adicionales. Antes de distribuirla, una pareja distinta realiza el recorrido sin ayuda inicial: esa observación permite revisar un mensaje o destino que sus autores daban por evidente.

Las referencias de MDN explican enlaces, estilos y eventos con ejemplos que puedes investigar por partes. Los tutoriales de W3C ayudan a elegir encabezados, etiquetas y alternativas según su función. No necesitas completar un curso extenso para resolver una duda pequeña: formula primero qué comportamiento observas y qué quieres comprender. Un ejemplo externo puede utilizar otra estructura de carpetas o nombres de elementos. Adaptarlo exige relacionar esas referencias con las de tu proyecto, no copiar únicamente el bloque visible.

La transferencia consiste en prever qué cambia al ampliar una interacción o mover la web. Añadir una opción requiere revisar contenido HTML, decisión, mensaje y pruebas; colocar la carpeta dentro de otra ubicación exige revisar las rutas desde cada documento. Una mejora visual requiere repetir condiciones de lectura. Los recursos opcionales y vídeos pueden consultarse con pausas y apoyo escrito. Anota en Google Docs la pregunta, el enlace consultado y cómo verificaste la adaptación. La comprobación interna no implica certificación de accesibilidad ni publicación pública: comunica exactamente qué recorridos, tamaños y permisos se han revisado en el entorno del centro.