Volver a tu curso / CR2-S04
Computación y Robótica · 2.º ESO · Lectura fácil
Publicamos soluciones en la web
Una web debe explicar el proyecto y permitir usarlo.
Aprenderás estructura, presentación, interacción y permisos de distribución.
Tu misión
Crea una web del proyecto con tres secciones, HTML, CSS, enlaces y créditos.
Añade una interacción guiada sin enviar datos.
Comparte la carpeta solo en el entorno restringido del centro.
Lee una explicación cada vez. Mira el esquema. Después haz la actividad. Puedes cambiar de versión cuando quieras.
Qué herramientas vas a usar
Escribe los textos en Documentos de Google. Haz los diagramas en diagrams.net. Guarda el archivo que puedas editar. Mira qué debes entregar en cada tarea.
4.2. Organiza contenido y enlaces
Aprende y practica
HTML organiza contenido con elementos que expresan significado.
Un encabezado indica una jerarquía y no solo una apariencia.
Ayuda a reconocer qué tema empieza y cómo se relaciona con los demás.
La web tiene un título principal y tres secciones.
Son propósito, funcionamiento y pruebas.
La navegación ofrece enlaces descriptivos para llegar a ellas.
El texto visible orienta a quien lee.
href indica el destino.
#pruebas necesita un elemento con id pruebas.
Cambiar las palabras visibles no modifica automáticamente el destino.
La organización también ayuda a navegar con tecnologías de apoyo.
Otros archivos se localizan mediante relaciones de ubicación.
imagenes/esquema.png busca esquema.png en la subcarpeta imagenes desde el documento actual.
Una ruta personal absoluta puede depender de un ordenador concreto.
Conservar estructura, nombres y mayúsculas mantiene las relaciones al copiar el proyecto.
Abrir la carpeta copiada comprueba algo distinto de mirar la versión original que ya funcionaba.
Las imágenes también necesitan una explicación adecuada a su función.
Una imagen informativa requiere una alternativa que transmita su significado en ese contexto.
Una decoración puede tener alternativa vacía.
Un esquema complejo necesita además texto que explique sus relaciones.
Decir solo «imagen» o repetir el archivo no explica su aportación.
La prueba desde la carpeta copiada revisa destinos y comprensión.
Importa tanto llegar al recurso como comprender la explicación que contiene.
- Enlace
- Referencia
- Destino
- Contenido
El enlace visible puede decir «Ver los ensayos».
Su destino es #pruebas y el apartado tiene id pruebas.
Esos nombres técnicos coinciden.
Cambiar solo el id rompe la relación aunque el texto visible parezca correcto.
CURSO de HTML CSS y JavaScript: PRINCIPIANTES desde CERO
Puedes ver el vídeo poco a poco. Puedes pararlo. Busca una idea que hayas leído en este apartado. Después prueba el ejemplo.
El vídeo tiene el idioma de su autor. Puedes usar los subtítulos disponibles. También puedes seguir la explicación escrita.
- Organiza tres secciones y enlaces en diagrams.net.
- Crea encabezados, id y enlaces coincidentes en el editor HTML.
- Añade una imagen propia con alternativa y prueba la carpeta copiada en el navegador.
¿El texto del enlace y href cumplen la misma función?
4.3. Presenta el contenido con CSS
Aprende y practica
CSS aplica presentación a elementos elegidos.
Cada regla tiene selector, propiedad y valor.
Un selector puede afectar a párrafos y una clase puede agrupar elementos.
Un archivo de estilos permite reutilizar reglas.
HTML debe enlazar bien ese archivo.
Cuida contraste, espacios, longitud de línea y ampliación del texto.
Un ancho máximo ayuda a leer y una altura automática conserva proporción en imágenes.
Las columnas pueden reorganizarse en una ventana estrecha.
Las medidas relativas dependen del contexto y no todo debe tener tamaño fijo.
Prueba lectura, teclado y ampliación sin afirmar accesibilidad completa por unas pocas reglas.
- Selector
- Propiedad
- Aspecto
- Prueba
Una tarjeta fija corta texto en una ventana estrecha.
Reducir la letra dificulta leer.
Prueba un ancho adaptable y conserva espacio interior.
Amplía después el texto.
Comprueba más condiciones que la pantalla inicial.
Curso HTML y CSS 2026 🔥 | #4 Primeros Pasos con CSS: Colores, Fuentes y Estilos
Puedes ver el vídeo poco a poco. Puedes pararlo. Busca una idea que hayas leído en este apartado. Después prueba el ejemplo.
El vídeo tiene el idioma de su autor. Puedes usar los subtítulos disponibles. También puedes seguir la explicación escrita.
- Enlaza CSS y crea una regla de tipo y otra de clase en el editor.
- Prueba ventana estrecha, texto grande e imágenes proporcionadas en el navegador.
- Anota el cambio y su efecto antes y después en Google Docs.
¿Leer más pequeño arregla un diseño que corta contenido?
4.4. Lee una elección y responde
Aprende y practica
Una interacción conecta una acción de la persona con una respuesta de la página.
El cuestionario local tiene un selector, un botón y una zona de resultado.
HTML define esos elementos.
JavaScript los relaciona mediante un evento.
Pulsar el botón activa un manejador que lee la selección actual.
El momento de lectura importa.
Leer solo al cargar guardaría una elección antigua.
Cambiar después el selector no actualizaría aquel dato.
Una función puede recibir la opción y devolver un mensaje.
Ese retorno es un valor.
Otro paso lo presenta mediante textContent como texto.
Separar los pasos ayuda a distinguir decisión y presentación.
La lógica contempla Sensor, Actuador, Controlador y opción vacía.
Una rama general orienta ante una elección no válida.
=== compara igualdad estricta.
= asigna un valor.
Las llaves delimitan bloques de instrucciones.
La respuesta de esta práctica es local y no necesita enviar datos.
Un botón de tipo button activa el manejador sin enviar el formulario.
Si la plantilla usa submit, preventDefault impide el envío por defecto.
Ese comportamiento se comprueba.
Una etiqueta visible asociada al selector explica qué se elige.
Los mensajes explican la relación conceptual y no dicen solo «correcto».
Así, la respuesta de la página también ayuda a aprender.
- Pulsación
- Opción actual
- Decisión
- Mensaje
Una práctica permite elegir sonido o señal luminosa.
La función decide la explicación.
El botón lee la elección actual y muestra el resultado.
Sin elección, pide seleccionar.
Comprueba el recorrido del evento.
- Crea selector con etiqueta, botón sin envío y resultado en el editor.
- Une evento, lectura actual, función y textContent con la guía del aula.
- Prueba tres opciones y la vacía en el navegador y regístralas en Google Docs.
¿Qué dato usarías si solo lees la opción al abrir la página?
4.5. Comprueba fuentes y derechos de uso
Aprende y practica
Una fuente aporta información y una licencia permite ciertos usos.
Anota autoría, título, enlace, fecha y uso de la información.
Busca la obra original antes de incorporar imagen o código.
El buscador y el crédito no conceden permiso por sí solos.
BY exige atribución.
SA puede exigir la misma licencia o una compatible para la adaptación.
NC solo permite usos no comerciales y ND no permite compartir adaptaciones con ese permiso.
Comprueba condiciones y distingue aportaciones propias y ajenas.
Una captura propia puede revelar datos personales y necesita revisión.
Los permisos de lector controlan audiencia y edición, no derechos sobre las obras.
- Recurso
- Permiso
- Uso
- Crédito
Un dibujo permite compartir sin cambios.
Cambiar sus etiquetas necesita otro permiso compatible.
Dar crédito no lo resuelve.
Puedes elegir otra obra o dibujar la tuya.
Revisa también que no aparezcan datos personales.
Video tutorial 1: Las licencias Creative Commons – parte 1 – Facultad de Humanidades, USAC
Puedes ver el vídeo poco a poco. Puedes pararlo. Busca una idea que hayas leído en este apartado. Después prueba el ejemplo.
El vídeo tiene el idioma de su autor. Puedes usar los subtítulos disponibles. También puedes seguir la explicación escrita.
- Crea fichas de autoría, origen, licencia, uso y cambios en Google Docs.
- Consulta las condiciones oficiales de cada recurso.
- Revisa capturas y aviso de formulario simulado en el navegador antes de compartir.
¿Compartir con pocas personas sustituye revisar derechos y datos?
4.6. Investiga enlaces y respuestas que fallan
Aprende y practica
Depurar es reproducir un fallo, buscar causa, corregir y repetir.
Una imagen ausente puede tener ruta o archivo incorrecto.
Un enlace interno puede fallar por href e id distintos.
Un botón puede fallar por carga o evento.
La consola ayuda, pero no detecta toda respuesta equivocada.
Prueba cada enlace, opción y entrada vacía.
Copia la carpeta y ábrela desde otra ubicación.
Prueba teclado, ventana estrecha y texto ampliado.
Comprueba permisos de ver y editar para el grupo autorizado.
Guarda fuentes y compara antes y después con lo que sigue pendiente.
- Síntoma
- Causa posible
- Cambio
- Nueva prueba
El cuestionario responde siempre igual sin errores en consola.
Compara una palabra fija en lugar de la opción actual.
El código funciona técnicamente, pero no cumple el diseño.
Prueba todas las ramas después de reparar la lectura.
- Introduce un fallo de ruta en una copia o revisa uno real y obsérvalo en el navegador.
- Anota causa, cambio y prueba repetida en Google Docs.
- Prueba la carpeta copiada y el acceso de lector autorizado en el servicio del centro.
¿La ausencia de errores en consola demuestra una respuesta correcta?
4.7. Une estructura, estilo e interacción
Aprende y practica
La web reúne contenido y archivos relacionados.
La estructura explica, el estilo ayuda a recorrer y la interacción responde.
Las tres partes colaboran y no se sustituyen.
La sección de pruebas necesita condiciones, resultados y límites.
Una fotografía sola no explica lo comprobado.
Conserva recursos y rutas en una carpeta organizada.
A01 incluye mapa, fuentes, microweb, fallo reparado y acceso lector del borrador.
A02 incluye tres secciones, interacción, pruebas, créditos y mejora.
Cada integrante explica una capa, un error y una decisión propia.
Otra pareja prueba el recorrido sin ayuda y sus dudas orientan una revisión.
- Contenido
- Capas
- Recorrido
- Duda
- Mejora
Un enlace llega a una foto sin explicación.
La navegación funciona, pero falta contenido.
Añade condiciones, resultado y límite del ensayo.
Pide a otra pareja explicar lo demostrado.
Puedes mejorar sin añadir otra sección.
- Revisa las relaciones de propósito, funcionamiento y pruebas en Google Docs.
- Integra HTML, CSS e interacción en una carpeta con el editor.
- Pide un recorrido en el navegador y mejora una duda de contenido o navegación.
¿Llegar al destino garantiza encontrar la explicación necesaria?
4.8. Usa referencias para adaptar la web
Aprende y practica
MDN explica enlaces, estilos y eventos con ejemplos.
W3C orienta sobre encabezados, etiquetas y alternativas.
Empieza con una pregunta concreta antes de consultar.
Otro ejemplo puede usar carpetas y nombres diferentes.
Relaciona sus referencias con las de tu proyecto.
Añadir una opción exige revisar HTML, decisión, mensaje y pruebas.
Mover la carpeta exige revisar rutas desde cada documento.
Una mejora visual exige repetir condiciones de lectura.
Los recursos y vídeos son opcionales y puedes usar apoyo escrito.
Anota fuente y prueba sin afirmar certificación o publicación pública.
- Duda
- Referencia
- Adaptación
- Prueba
Añades una opción en HTML y aparece.
La función no la contempla y devuelve el mensaje general.
Revisa decisión y pruebas además del selector.
Copiar una parte no demuestra una adaptación completa.
- Consulta MDN y W3C para una duda de tu web.
- Anota pregunta, fuente y prueba en Google Docs.
- Dibuja las partes afectadas por una opción nueva o un traslado en diagrams.net.
¿Añadir una opción visible basta para que la interacción la comprenda?
Tu proyecto y tus entregas
A01 · Diseña la solución
- Crea CR2-S04_web_A01_Apellidos con público, propósito y requisitos en Google Docs.
- Dibuja tres secciones e interacción en diagrams.net.
- Selecciona recursos permitidos y anota autoría, origen, licencia y cambios.
- Ejecuta una microweb con HTML, CSS y botón o selector y demuestra un fallo reparado.
- Comparte el borrador como lector autorizado y revisa acceso, datos, pruebas y aportaciones con el docente.
Qué debes entregar
- Dossier con mapa, contenido y fichas de recursos.
- Microweb ejecutada con fallo, causa, reparación y repetición.
- Acceso lector comprobado, datos mínimos y explicación individual de capas.
Haz tu copia en Documentos de Google · Ver la plantilla vacía
A02 · Web interactiva de nuestro proyecto
- Construye tres secciones con HTML, CSS, enlaces e interacción sin envío.
- Prueba tres opciones y la vacía, etiquetas, teclado, ventana estrecha y texto grande.
- Copia la carpeta y comprueba imágenes, estilos, programa y enlaces.
- Documenta reparación, mejora y créditos de los recursos usados.
- Entrega CR2-S04_web editable con instrucciones, acceso restringido y explicación individual.
Qué debes entregar
- Web editable con capas y simulación identificada.
- Pruebas de rutas, opciones, accesibilidad y mejora desde la carpeta copiada.
- Créditos, permisos, lector comprobado y explicación individual.
Haz tu copia en Documentos de Google · Ver la plantilla vacía
Revisa antes de entregar
- Distingo las tres capas de mi web.
- Explico rutas y relación entre href e id.
- Leo la opción actual y contemplo la vacía.
- Pruebo teclado y otros tamaños.
- Separo derechos, privacidad y acceso.
- Demuestro la reparación desde la carpeta final.
Plantillas y archivos
Abre la plantilla vacía de A01 o A02. Haz tu copia en Documentos de Google. Guarda también tu programa o proyecto editable.
La plantilla sirve para organizar tu trabajo. Mira qué pide esta unidad. Puedes quitar un campo si no lo necesitas. Haz una copia. No escribas sobre el modelo. No publiques tus respuestas. Compártelas como indique tu docente.
A01 · Diseña la solución
Haz tu copia en Documentos de Google · Ver la plantilla vacía
- Dossier con mapa, contenido y fichas de recursos.
- Microweb ejecutada con fallo, causa, reparación y repetición.
- Acceso lector comprobado, datos mínimos y explicación individual de capas.
A02 · Web interactiva de nuestro proyecto
Haz tu copia en Documentos de Google · Ver la plantilla vacía
- Web editable con capas y simulación identificada.
- Pruebas de rutas, opciones, accesibilidad y mejora desde la carpeta copiada.
- Créditos, permisos, lector comprobado y explicación individual.
Rúbricas de clase
Aquí están las rúbricas de clase. Cada rúbrica explica cómo se valora una entrega. Puedes pedir ayuda para entender una palabra.
Consultar la rúbrica de A01
Diseño y microprueba
CYR.2.5.1 HTML, CSS y evento de interacción
Conocer la construcción de aplicaciones informáticas y web, entendiendo su funcionamiento interno, de forma segura, responsable y respetuosa.
Evidencia. Mapa, microweb con HTML CSS y selector o botón ejecutados.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | No distingue estructura, presentación y comportamiento ni explica el efecto del botón. |
| 3–4,9 | La página abre, pero falta relación entre selección, evento y mensaje o no explica CSS. |
| 5–6,9 | Construye una microweb y explica cómo HTML, CSS y JavaScript aportan estructura, presentación e interacción segura con datos ficticios. |
| 7–8,9 | Comprueba la lectura de la selección dentro del evento y explica un resultado distinto al cambiarla. |
| 9–10,0 | Justifica otra estructura o interacción para la audiencia y anticipa su efecto funcional y accesible. |
CYR.2.5.2 Diagnóstico de eventos y rutas web
Conocer y resolver la variedad de problemas potencialmente presentes en el desarrollo de una aplicación web, tratando de generalizar posibles soluciones.
Evidencia. Fallo controlado en el microprototipo con causa reparación y repetición.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | No reproduce el fallo ni relaciona el síntoma con ningún archivo o instrucción. |
| 3–4,9 | Prueba cambios de formato ante un fallo de ruta o evento sin comprobar su causa. |
| 5–6,9 | Localiza un fallo de ruta, identificador o evento, lo corrige y repite la tarea que fallaba. |
| 7–8,9 | Distingue fallo de carga de script de lectura incorrecta y comprueba una segunda ruta. |
| 9–10,0 | Diseña una prueba de traslado de carpeta y aplica una pauta general para evitar rutas dependientes del equipo. |
CYR.2.6.2 Compartir la web en el entorno autorizado
Acceder a servicios de intercambio y publicación de información digital aplicando criterios de seguridad y uso responsable.
Evidencia. Borrador compartido con rol lector y revisión de datos y permisos.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | Usa una publicación abierta sin justificar audiencia ni revisar datos. |
| 3–4,9 | Entrega un enlace, pero no verifica lectura o permite edición innecesaria. |
| 5–6,9 | Accede al servicio del centro, comparte el borrador con audiencia prevista y verifica permiso de lector y minimización de datos. |
| 7–8,9 | Detecta y corrige un permiso o ruta que impedía el acceso previsto. |
| 9–10,0 | Explica cómo adaptaría permisos a otra audiencia y comprueba el cambio desde ese rol. |
CYR.2.6.3 Permisos de reutilización y atribuciones
Reconocer y comprender los derechos de los materiales alojados en la Internet.
Evidencia. Inventario de recursos del borrador con autor origen licencia y uso.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | Da por reutilizable cualquier contenido encontrado y no distingue recurso propio y ajeno. |
| 3–4,9 | Cita enlaces, pero no comprueba permiso o confunde atribuir con autorizar. |
| 5–6,9 | Identifica autor, origen y condiciones de los recursos iniciales y decide si su uso y modificación son compatibles con la web. |
| 7–8,9 | Sustituye un recurso incompatible y corrige la atribución conforme a las condiciones. |
| 9–10,0 | Compara dos permisos de uso y justifica cuál permite la modificación y distribución previstas. |
Consultar la rúbrica de A02
Producto pruebas y mejora
CYR.2.5.1 HTML, CSS y evento de interacción
Conocer la construcción de aplicaciones informáticas y web, entendiendo su funcionamiento interno, de forma segura, responsable y respetuosa.
Evidencia. Carpeta web editable, interacción funcional y explicación de las tres capas.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | La web no permite la tarea o el evento no corresponde a la explicación aportada. |
| 3–4,9 | Se ve el contenido, pero siempre responde igual o no explica cómo se actualiza el mensaje. |
| 5–6,9 | Construye HTML y CSS coherentes y una interacción funcional, explica su recorrido interno y revisa privacidad y recursos. |
| 7–8,9 | Corrige una incoherencia entre selección y mensaje y verifica todas las opciones y el caso vacío. |
| 9–10,0 | Añade una opción justificada y demuestra que conserva funcionamiento, comprensión y acceso de teclado. |
CYR.2.5.2 Diagnóstico de eventos y rutas web
Conocer y resolver la variedad de problemas potencialmente presentes en el desarrollo de una aplicación web, tratando de generalizar posibles soluciones.
Evidencia. Registro de incidencia y pruebas desde carpeta exportada.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | Persisten fallos que impiden la tarea y no se identifica causa verificable. |
| 3–4,9 | Se corrige un síntoma, pero no repite la prueba ni revisa destinos relacionados. |
| 5–6,9 | Reproduce y repara un fallo de navegación o lógica y verifica interacción y rutas en la carpeta de entrega. |
| 7–8,9 | Comprueba casos vacío, opción nueva y destino interno y explica la regla de reparación aplicada. |
| 9–10,0 | Resuelve un fallo nuevo al cambiar contexto de ejecución y generaliza la solución con una prueba reproducible. |
CYR.2.6.2 Compartir la web en el entorno autorizado
Acceder a servicios de intercambio y publicación de información digital aplicando criterios de seguridad y uso responsable.
Evidencia. Entrega interna, prueba de lector y registro de revisión de privacidad.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | La web difunde datos innecesarios o su acceso no corresponde a la audiencia acordada. |
| 3–4,9 | Entrega por el canal previsto, pero mantiene permisos excesivos o no verifica el acceso real. |
| 5–6,9 | Comparte con el grupo autorizado, distingue ver y editar y comprueba acceso y ausencia de datos no necesarios. |
| 7–8,9 | Resuelve una incidencia de acceso preservando la restricción y documenta la comprobación desde el lector. |
| 9–10,0 | Adapta la distribución a otro destinatario y justifica los límites del enlace y de las copias compartidas. |
CYR.2.6.3 Permisos de reutilización y atribuciones
Reconocer y comprender los derechos de los materiales alojados en la Internet.
Evidencia. Créditos completos de los recursos usados y revisión de una modificación.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | Presenta recursos ajenos como propios o mantiene un uso incompatible sin reconocerlo. |
| 3–4,9 | Hay créditos, pero falta permiso verificable o atribución de un recurso modificado. |
| 5–6,9 | Atribuye los recursos utilizados y respeta sus condiciones de uso y modificación en la web entregada. |
| 7–8,9 | Revisa un recurso modificado y explica qué obligación conserva y cómo se ha cumplido. |
| 9–10,0 | Justifica una selección alternativa que permite reutilizar el proyecto y explica las condiciones al destinatario. |
Vídeos y fuentes
Curso HTML & CSS ( 3 / 5 ): Unidades y Estilos CSS – jonmircha
Puedes ver el vídeo poco a poco. Puedes pararlo. Busca una idea que hayas leído en este apartado. Después prueba el ejemplo.
El vídeo tiene el idioma de su autor. Puedes usar los subtítulos disponibles. También puedes seguir la explicación escrita.
Puedes aprender más
- MDN: Creating links
- MDN: Getting started with CSS
- MDN: Introduction to events
- W3C WAI: Headings
- W3C WAI: Labeling Controls
- W3C WAI: An alt Decision Tree
- Creative Commons: The CC Licenses
Contenido revisado en octubre de 2026.