Está en la página 1de 5

SERVICIO NACIONAL DE APRENDIZAJE SENA

PLATAFORMA DE APRENDIZAJE VIRTUAL

ACTIVIDAD “Aplicando pautas de accesibilidad para el contenido WEB”

Acciones realizadas para cumplir con los criterios de conformidad:


Pauta 1.1. Criterio 1.1.1 Contenido No textual.
Pauta 1.3. Criterio 1.3.1 Información y relaciones.
Pauta 2.4. Criterio 2.4.2 Titulado de páginas.
Pauta 2.4. Criterio 2.4.10 Encabezados de sección.
Pauta 3.1. Criterio 3.1.1 Idioma de la página.
Pauta 3.3. Criterio 3.3.3 Sugerencias ante errores.

GAVIN ALEXANDER ROJAS CUCAITA

Diseño y Desarrollo de sitios web accesibles. (22810777)

BOGOTÁ D.C. JULIO 3 DE 2020


A continuación, se encuentra detallada la forma en que se dio solución a las
pautas solicitadas en la actividad.
Principio 1. Perceptible
Pauta 1.1. Criterio 1.1.1 Contenido No textual.
Se incluyo el atributo alt=”” en las imágenes que se muestran en la página, así:
<img alt="Ventanas de ELASTIX" src="images/proelastix1.jpg" width="290">

Se incluyo el atributo title=”” en las referencias para describir textualmente los


enlaces, así:
<a title="Ver el Titulo de mi presentación" href="#inicio">Inicio</a>

Se incluyo el atributo title=”” en los controles de formulario para identificar


textualmente los controles, así:
<input type="text" title="Nombres y apellidos Completos" required
style="margin:10px;">

Pauta 1.3. Criterio 1.3.1 Información y relaciones.


Uso de estructuras de listas ordenadas y no ordenadas para dar a entender mejor
la información, así:
<ol>
<li><strong>Universidad Nacional de Colombia</strong><br>Operador de
equipos de sistemas<br>Actual</li>
<li><strong>Notaría 37 de Bogotá D.C.</strong><br>Director de
Sistemas<br>2015-2020</li>
<li><strong>Legis S.A.</strong><br>Analista de Sistemas<br>2013-
2015</li>
<li><Strong>OVJ S.A.S.</Strong><br>Analista de Compras<br>2012-
2013</li>
</ol>

El marcado semántico cuando se utilizan claves de colores, así:


<p>…Soy un profesional formado integralmente, con sólidos principios éticos y un
serio compromiso de solidaridad social. En consecuencia, <strong>poseo una
adecuada comprensión de la realidad social, económica y política de mi país
y del mundo</strong>, así como un profundo sentido de la ética y de la
responsabilidad para asumir el <strong>compromiso con la profesión y con el
país</strong>…</p>

Asociar etiquetas de texto con controles de formulario, así:


<label for="iNombre">Nombre:</label><br>
<input id="iNombre" type="text" title="Nombres y apellidos Completos" required
style="margin:10px;">
Maquetar la página con CSS, en lugar de hacerlo con tablas, así:
<div class=”tres”>
<img alt=”Logo de ELASTIX” style=”border-radius: 145px;”
src=”images/ atín .jpg” width=”290” height=”290”>
<h2>Administración PBX</h2>
<p>Administración de servidor Elastix para PBX, creación de Extenciones,
Configuración de IVR, Grupos de timbrado.</p>
</div>
<div class=”tres”>
<img alt=”Logo de CYBEROAM” style=”border-radius: 145px;”
src=”images/Cyberoam.jpg” width=”290” height=”290”>
<h2>Administración Cyberoam</h2>
<p>Administración de Firewall Fisico marca CYBEROAM, Creación de
Reglas, Configuración inicial de Firewall, atín n de VPN, accesos y
usuarios.</p>
</div>
<div class=”tres”>
<img alt=”Logo de UNTANGLE” style=”border-radius: 145px;”
src=”images/untangle.jpg” width=”290” height=”290”>
<h2>Administración Untangle</h2>
<p>Administración de Firewall Software Untangle, Creación de Reglas,
Configuración inicial de Firewall, atín n de VPN, accesos y usuarios.</p>
</div>

.tres{
display: block;
float:left;
margin: 5px;
width: 32%;
padding: 10px;
border-style: atín ;
}

Principio 2: Operables
Pauta 2.4. Criterio 2.4.2 Titulado de páginas.
Incluir el título de las paginas para ofrecer un título único y descriptivo para cada
página web, así:
<head>
<meta charset=”UTF-8”>
<title>H.V. Gavin Alexander Rojas C.</title>
<link href=’http://fonts.googleapis.com/css?family=Lato&subset= atín, atín-
ext’ rel=’stylesheet’ type=’text/css’>
<link href=”css/style.css” rel=”stylesheet” type=”text/css”>
<script src=”js/programa.js”></script>
</head>

Pauta 2.4. Criterio 2.4.10 Encabezados de sección


Se usó la jerarquía de títulos organizar las secciones del contenido con los
encabezados “h1-h6”, así:
<section class="azul">
<h1>Servicios</h1>
<div class="tres">
<img alt="Logo de ELASTIX" style="border-radius: 145px;"
src="images/elastix.jpg" width="290" height="290">
<h2>Administración PBX</h2>
<p>Administración de servidor Elastix para PBX, creación de
Extenciones, Configuración de IVR, Grupos de timbrado.</p>
</div>
…</section>

Principio 3: Comprensible
Pauta 3.1. Criterio 3.1.1 Idioma de la página
Identificar el idioma de la página, con el atributo Lang=”es”, así:
<html lang="es">

Pauta 3.3. Criterio 3.3.3 Sugerencias ante errores


Si el usuario no ha rellenado los campos obligatorios de un formulario, validar el
formulario en el lado del cliente, lo cual soluciones validando con JavaScript, y
advertir que campos no se han rellenado, así:
function mensaje() {
if(document.fContacto.iNombre.value.length==0){
alert("Por favor completa el campo Nombre");
document.fContacto.iNombre.focus();
return 0;
}else{
if(document.fContacto.iCorreo.value.length==0){
alert("Por favor completa el campo Correo");
document.fContacto.iCorreo.focus();
return 0;
}else{
if(document.fContacto.iMensaje.value.length==0){
alert("Por favor escribe un mensaje");
document.fContacto.iMensaje.focus();
return 0;
}else{
alert("muchas gracias por enviar su mensaje")
}
}
}
}

Llamando desde HTML asi:


<input id="iEnviar" title="Enviar mensaje" onclick="mensaje();" type="submit"
style="width: 100px; margin:10px;" >

También podría gustarte