Diferencia entre revisiones de «Plantilla:Actividad WCAG»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 38 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
<noinclude>
<includeonly>
Este formulario permite al alumnado documentar y analizar un criterio WCAG 2.2 con ejemplos prácticos.
''' Edición de la página como formulario'''
</noinclude>
 
<div style="margin-top:1em;">
[{{FULLURL:{{FULLPAGENAME}}|action=formedit}} <span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">Editar con formulario</span>]
</div>


<!-- ========================================================= -->
<!-- BLOQUE PRINCIPAL DE LA PLANTILLA Actividad_WCAG -->
<!-- ========================================================= -->
{{{for template|Actividad_WCAG}}}


== 1. Información básica ==
<div style="margin-top:1em;">
[{{FULLURL:{{FULLPAGENAME}}|action=formedit&form=ActividadWCAG}}
<span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">
Editar con formulario
</span>]
</div>


'''Id del criterio:'''
<div style="margin-top:1em;">
{{{field|id|mandatory|input type=dropdown|values=
[{{FULLURL:{{FULLPAGENAME}}|action=formedit&form=ActividadWCAG}}
1.1.1 - Contenido no textual (Nivel: A),
<span style="background:#007acc; color:#fff; padding:0.4em 0.8em; border-radius:4px;">Editar con formulario</span>]
1.2.1 - Solo audio o vídeo grabado (Nivel: A),
</div>
1.2.2 - Subtítulos (grabado) (Nivel: A),
1.2.3 - Audiodescripción o alternativa multimedia (Nivel: A),
1.2.4 - Subtítulos (en directo) (Nivel: AA),
1.2.5 - Audiodescripción (grabada) (Nivel: AA),
1.3.1 - Información y relaciones (Nivel: A),
1.3.2 - Secuencia significativa (Nivel: A),
1.3.3 - Características sensoriales (Nivel: A),
1.3.4 - Orientación (Nivel: AA),
1.3.5 - Identificación del propósito del campo (Nivel: AA),
1.4.1 - Uso del color (Nivel: A),
1.4.2 - Control del audio (Nivel: A),
1.4.3 - Contraste (mínimo) (Nivel: AA),
1.4.4 - Redimensionar texto (Nivel: AA),
1.4.5 - Imágenes de texto (Nivel: AA),
1.4.10 - Reflujo (Nivel: AA),
1.4.11 - Contraste no textual (Nivel: AA),
1.4.12 - Espaciado del texto (Nivel: AA),
1.4.13 - Contenido en hover o focus (Nivel: AA),
2.1.1 - Teclado (Nivel: A),
2.1.2 - Sin trampa de teclado (Nivel: A),
2.1.4 - Atajos del teclado (Nivel: A),
2.2.1 - Tiempo ajustable (Nivel: A),
2.2.2 - Pausar, detener, ocultar (Nivel: A),
2.3.1 - Tres destellos o menos (Nivel: A),
2.4.1 - Saltar bloques (Nivel: A),
2.4.2 - Titulado de página (Nivel: A),
2.4.3 - Orden de enfoque (Nivel: A),
2.4.4 - Propósito de los enlaces (en contexto) (Nivel: A),
2.4.5 - Múltiples vías (Nivel: AA),
2.4.6 - Encabezados y etiquetas (Nivel: AA),
2.4.7 - Foco visible (Nivel: AA),
2.4.11 - Foco no oculto (mínimo) (Nivel: AA),
2.5.1 - Gestos con puntero (Nivel: A),
2.5.2 - Cancelación del puntero (Nivel: A),
2.5.3 - Etiqueta en el nombre (Nivel: A),
2.5.4 - Activación por movimiento (Nivel: A),
2.5.7 - Arrastre accesible (Nivel: AA),
2.5.8 - Tamaño mínimo de interacción (Nivel: AA),
3.1.1 - Idioma de la página (Nivel: A),
3.1.2 - Idioma de las partes (Nivel: AA),
3.2.1 - Al recibir el foco (Nivel: A),
3.2.2 - Al recibir una entrada (Nivel: A),
3.2.3 - Navegación consistente (Nivel: AA),
3.2.4 - Identificación consistente (Nivel: AA),
3.3.1 - Identificación de errores (Nivel: A),
3.3.2 - Etiquetas o instrucciones (Nivel: A),
3.3.3 - Sugerencia ante errores (Nivel: AA),
3.3.4 - Prevención de errores (Nivel: AA),
4.1.1 - Procesamiento (Nivel: A),
4.1.2 - Nombre - función - valor (Nivel: A),
4.1.3 - Mensajes de estado (Nivel: AA)
}}}


'''Título del subcriterio:'''
<div class="wcag-actividad" style="border:1px solid #ccc; padding:1em; background:#fafafa; margin:1.5em 0;">
{{{field|titulo|input type=text|mandatory|placeholder=Ejemplo: 1.1.1-A. Alternativa textual breve obligatoria}}}


'''Enlace directo al subcriterio en la wiki:'''
<!-- ===================================================== -->
{{{field|enlace|input type=text|placeholder=Ejemplo: [[Principio_1/1.1_Texto_Alternativo/1.1.1-A]]}}}
<!-- 1. INFORMACIÓN BÁSICA -->
<!-- ===================================================== -->
== 1. Información básica ==
<div><b>Id del criterio:</b> {{{id_criterio|}}}</div>
<div><b>Título del subcriterio:</b> {{{id_subcriterio|}}}</div>
<div><b>Enlace directo a la página del subcriterio en la wiki</b> {{{id_url|}}}


[[Página_principal|Consultar el índice completo de criterios WCAG]]
[[Categoría: {{{id_subcriterio|}}}]]


----
----
<!-- ===================================================== -->
<!-- 2. EJEMPLOS PRÁCTICOS -->
<!-- ===================================================== -->


== 2. Ejemplos prácticos ==
== 2. Ejemplos prácticos ==


<!-- ========================================================= -->
=== 2.1. Ejemplo NO accesible ===
<!-- 2.1. EJEMPLO NO ACCESIBLE -->
<div style="margin-left:1em;">
<!-- ========================================================= -->


=== 2.1. Ejemplo NO Accesible ===
<b>1. Evidencia en imagen:</b><br>
<div class="accessibility-collapsible-group">
{{#if: {{{noa_barrera_evidencia_img|}}} |
  [[File:{{{noa_barrera_evidencia_img}}}|600px]]
| <i>No se ha subido ninguna imagen.</i> }}


<div class="mw-collapsible mw-collapsed">
<br><br>
<h4>1. Imagen</h4>
<div class="mw-collapsible-content">
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]] 
{{{field|noa_barrera_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
</div></div>


<div class="mw-collapsible mw-collapsed">
<b>2. Código HTML:</b>
<h4>2. Código HTML</h4>
{{#if: {{{noa_barrera_evidencia_html|}}} |<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
<div class="mw-collapsible-content">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
{{{field|noa_barrera_evidencia_html|input type=textarea|rows=10|placeholder=Pega aquí el código no accesible}}}
{{{noa_barrera_evidencia_html}}}
</div></div>
</code>
 
</div>
<div class="mw-collapsible mw-collapsed">
| <div><i>No se ha proporcionado código.</i></div> }}
<h4>3. URL</h4>
<div class="mw-collapsible-content">
{{{field|noa_barrera_evidencia_url|input type=text|size=100|placeholder=https://www.unawebconlabarrera.com}}}
</div></div>
 
'''Explicación del problema detectado:'''
{{{field|noa_barrera_explicacion|input type=textarea|rows=5|style=width:100%|placeholder=Explica qué problema tiene el código, imagen o URL que has incluido.}}}
 
'''Usuarios afectados:'''


</div> <!-- cierre del bloque NOA -->


----
<br>
TEXTO HTML
<pre><nowiki>{{{noa_barrera_evidencia_html}}}</nowiki></pre>


<!-- ========================================================= -->
<br>
<!-- 2.2. EJEMPLO ACCESIBLE -->
<!-- ========================================================= -->


=== 2.2. Ejemplo Accesible ===
<b>3. URL:</b>
<div class="accessibility-collapsible-group">
{{#if: {{{noa_barrera_evidencia_url|}}} |
[{{{noa_barrera_evidencia_url}}} {{{noa_barrera_evidencia_url}}}]
|<i>No se ha indicado ninguna URL.</i> }}


<div class="mw-collapsible mw-collapsed">
<br><br>
<h4>1. Imagen</h4>
<div class="mw-collapsible-content">
📤 [[Especial:SubirArchivo|Haz clic aquí para subir tu imagen o PDF de evidencia]] 
{{{field|acc_barrera_evidencia_img|input type=upload|allowed file types=png,jpg,jpeg,gif,svg,pdf|size=60}}}
</div></div>


<div class="mw-collapsible mw-collapsed">
<b> Explicación del problema detectado:</b><br>
<h4>2. Código HTML</h4>
{{{noa_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}
<div class="mw-collapsible-content">
{{{field|acc_barrera_evidencia_html|input type=textarea|rows=10|placeholder=Pega aquí el código accesible}}}
</div></div>


<div class="mw-collapsible mw-collapsed">
<b> Indica a que personas con discapacidad afecta y explicación de las barreras que causa</b><br>
<h4>3. URL</h4>
{{{noa_barrera_usuarios|<i>No se ha incluido explicación.</i>}}}
<div class="mw-collapsible-content">
{{{field|acc_barrera_evidencia_url|input type=text|size=100|placeholder=https://www.unawebaccesible.com}}}
</div></div>


'''Explicación de la solución aplicada:'''
{{{field|acc_barrera_explicacion|input type=textarea|rows=8|style=width:100%|placeholder=Explica cómo se solucionó la barrera.}}}
</div>
</div>


----
----


== 3. Aporte personal ==
=== 2.2. Ejemplo Accesible ===
''' Proceso de creación:'''
<div style="margin-left:1em;">
{{{field|proceso|input type=textarea}}}
'' Explica como generado los ejemplos
(Analiza brevemente tu metodología: investigación, creación propia, IA, etc.)''


<b>1. Evidencia de imagen:</b><br>
{{#if: {{{acc_barrera_evidencia_img|}}} |
[[File:{{{acc_barrera_evidencia_img}}}|600px]]
| <i>No se ha subido ninguna imagen.</i> }}


<br><br>


''' Herramientas usadas:'''
<b>2. Código HTML:</b>
{{{field|herramientas|input type=textarea}}}
{{#if: {{{acc_barrera_evidencia_html|}}} |
'' (Indica herramientas de evaluación, editores, IA o validadores que usaste.)''
<div class="wcag-codigo-html" padding:0.7em; border:1px solid #ddd;">
<code style="white-space: pre-wrap; font-family: monospace; background:none; border:none; color:white">
{{{acc_barrera_evidencia_html}}}
</code>
</div>
| <div><i>No se ha proporcionado código.</i></div> }}
<br>
TEXTO HTML
<pre><nowiki>{{{acc_barrera_evidencia_html}}}</nowiki></pre>


<br>


''' Referencias complementarias:'''
{{{field|referencias|input type=textarea}}}
''(Incluye solo las que te hayan ayudado realmente a entender el criterio o crear el ejemplo.)''


<b>3. URL:</b>
{{#if: {{{acc_barrera_evidencia_url|}}} |
[{{{acc_barrera_evidencia_url}}} {{{acc_barrera_evidencia_url}}}]
|<i>No se ha indicado ninguna URL.</i> }}


<br><br>


<b>Explicación de la solución aplicada:</b><br>
{{{acc_barrera_explicacion|<i>No se ha incluido explicación.</i>}}}


----
== 4. Autoevaluación del aprendizaje ==
<div class="pf-instruccion">
Selecciona una puntuación del 1 al 5 en cada caso.<br><small>1 = nivel más bajo · 5 = nivel más alto</small>
</div>
</div>


<div class="eval-row">
----
4.1. ¿Qué tan fácil te resultó entender el criterio? 
{{{field|eval_entendimiento|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = No lo entendí casi nada | 5 = Lo comprendí con claridad</div>
</div>


<div class="eval-row">
<!-- ===================================================== -->
4.2. ¿Qué tan difícil fue crear el ejemplo no accesible (NOA)? 
<!-- 3. APORTE PERSONAL -->
{{{field|eval_noa_dificultad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<!-- ===================================================== -->
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
== 3. Aporte personal ==
<div style="margin-left:1em;">
<b>Proceso de creación:</b><br>{{{proceso|}}}<br><br>
<b>Herramientas usadas:</b><br>{{{herramientas|}}}<br><br>
<b>Referencias complementarias:</b><br>{{{referencias|}}}
</div>
</div>


<div class="eval-row">
----
4.3. ¿Qué tan difícil fue crear el ejemplo accesible (ACC)? 
{{{field|eval_acc_dificultad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<div class="pf-nota">1 = Muy fácil | 5 = Muy difícil</div>
</div>


<div class="eval-row">
<!-- ===================================================== -->
4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos?
<!-- 4. AUTOEVALUACIÓN -->
{{{field|eval_seguridad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<!-- ===================================================== -->
<div class="pf-nota">1 = No estoy seguro | 5 = Totalmente seguro</div>
== 4. Autoevaluación ==
</div>
<table class="wikitable" style="width:100%; background:#fff; margin-top:1em;">
<tr><th>Pregunta</th><th>Valor</th></tr>
<tr><td>
4.1. ¿Fue fácil o difícil entender el criterio? <br> (1 = No entendí casi nada | 5 = Lo comprendí con claridad)
</td><td>{{{eval_entendimiento|}}}</td></tr>
<tr><td>4.2. ¿Fue fácil o difícil crear el ejemplo no accesible (NOA)? <br> (1 = Muy fácil | 5 = Muy difícil)</td><td>{{{eval_noa_dificultad|}}}</td></tr>
<tr><td>4.3. ¿Fue fácil o difícil crear el ejemplo accesible (ACC)?  <br> (1 = Muy fácil | 5 = Muy difícil) </td><td>{{{eval_acc_dificultad|}}}</td></tr>
<tr><td>4.4. ¿Qué seguridad tienes de que tus ejemplos son correctos? <br> (1 = No estoy seguro | 5 = Totalmente seguro)</td><td>{{{eval_seguridad|}}}</td></tr>
<tr><td>4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica? <br> (1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil)</td><td>{{{eval_utilidad|}}}</td></tr>
<tr><td>4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta? <br> (1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda)</td><td>{{{eval_aplicacion|}}}</td></tr>
</table>


<div class="eval-row">
<div style="margin-left:1em;">
4.5. ¿En qué medida comprendes para qué sirve este criterio en la práctica? 
<b>4.7. Explica este criterio a un compañero:</b><br>{{{eval_explicacion|}}}
{{{field|eval_utilidad|input type=dropdown|values=1,2,3,4,5|mandatory}}}
<br><br>
<div class="pf-nota">1 = No entiendo su utilidad | 5 = Puedo explicar claramente por qué es útil</div>
<b>4.8. Observaciones personales:</b><br>
{{{eval_observaciones|}}}
</div>
</div>
</includeonly>


<div class="eval-row">
<noinclude>
4.6. ¿Podrías aplicar este criterio en otro proyecto o web distinta?  
Plantilla para mostrar los datos del formulario [[Formulario:Actividad_WCAG]].   
{{{field|eval_aplicacion|input type=dropdown|values=1,2,3,4,5|mandatory}}}
Muestra directamente toda la información en pantalla (sin secciones colapsables).   
<div class="pf-nota">1 = No sabría hacerlo | 5 = Podría hacerlo sin ayuda</div>
Incluye evidencias, explicaciones, aporte personal y tabla de autoevaluación.
</div>
</noinclude>
 
<div class="eval-row">
4.7. Explica este criterio a un compañero:  
{{{field|eval_explicacion|input type=textarea|rows=3|style=width:100%|placeholder=Resume el criterio con tus propias palabras.}}}
</div>
 
<div class="eval-row">
4.8. Observaciones personales: 
{{{field|eval_observaciones|input type=textarea|rows=5|style=width:100%|placeholder=Qué aprendiste, qué te costó más, qué te resultó útil.}}}
</div>
 
<!-- ========================================================= -->
<!-- CIERRE DEL BLOQUE PRINCIPAL -->
<!-- ========================================================= -->
{{{end template}}}

Revisión actual - 07:29 26 oct 2025


Plantilla para mostrar los datos del formulario Formulario:Actividad_WCAG. Muestra directamente toda la información en pantalla (sin secciones colapsables). Incluye evidencias, explicaciones, aporte personal y tabla de autoevaluación.

Obtenido de «https://wikiwcag.udl.cat/index.php?title=Plantilla:Actividad_WCAG&oldid=2214»