ÍNDICE.
INTRODUCCIÓN ............................................................................................... 1
NORMAS W3C ................................................................................................. 2
METAETIQUETAS ............................................................................................. 6
REFERENCIAS ................................................................................................... 8
INTRODUCCIÓN. Existen leyes y normativas que regulan la publicación de contenidos en Internet, fundamentalmente fundamentalmente relacionadas con la accesibilidad para personas con discapacidades. Para que este sistema funcione, es necesario que el computador que contiene la información (servidor) ofrezca dichos contenidos mediante tecnologías conocidas y que cumplan con ciertas reglas o estándares, para que quienes acceden a ellas (clientes o usuarios) mediante diferentes tipos de software, puedan entender los elementos de información que se les entregan. En este sentido, los estándares juegan un papel clave ya que es la forma en que ambas partes logren intercambiar información y más importante aún, permite que otros actores lleguen a ofrecer nuevas funcionalidades que puedan agregarse a las anteriores sin mayores dificultades. Adicionalmente, los estándares facilitan que la oferta de contenidos y funcionalidades pueda ser utilizada desde diferentes plataformas computacionales (sistemas operativos y software), sin que se requiera obligatoriamente que el usuario tenga una en particular, para acceder a dicha información.
1
NORMAS W3C. Las pautas que emanan de las Web Content Accessibility Guidelines datan de mayo de 1999 y de su aplicación más o menos estricta dependerá el nivel de accesibilidad de los documentos del sitio web. El propio W3C habla de ellas en estos términos:“Aquellos que
no estén familiarizados con los problemas de accesibilidad relacionados con el diseño de páginas Web, deben tener en cuenta que muchos usuarios pueden estar operando en contextos muy diferentes al suyo propio: 1. Pueden no ser capaces de ver, escuchar, moverse o pueden no ser capaces de procesar algunos tipos de información fácilmente o en absoluto. 2. Pueden tener dificultad en la lectura l ectura o comprensión de un texto. 3. No tienen por qué tener o ser capaces de usar un teclado o un ratón. 4. Pueden tener una pantalla que sólo presenta texto, una pantalla pequeña o una conexión lenta a Internet. 5. Pueden no hablar o comprender con fluidez el idioma en que esté redactado el documento. 6. Pueden encontrarse en una situación en la que sus ojos, oídos o manos estén ocupados u obstaculizados (Por ejemplo, conduciendo un automóvil, trabajando en un entorno ruidoso,...) 7. Pueden tener una versión anterior del navegador, un navegador completamente diferente, un navegador de voz o un sistema operativo distinto”.
Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad. Las pautas están pensadas para todos los desarrolladores de contenidos de la Web (creadores de páginas y diseñadores de sitios) y para los desarrolladores de herramientas de creación. El fin principal de estas pautas es promover la accesibilidad. De cualquier modo, siguiéndolas, se hará la Web más asequible también para todos los usuarios, cualquiera que sea la aplicación de usuario que esté utilizando (Por ejemplo, navegador de sobremesa, navegador de voz, teléfono móvil, PC de automóvil, etc.), o las limitaciones bajo las que opere (Por ejemplo, entornos ruidosos, habitaciones infra o supra iluminadas, entorno de manos libres, etc.). Seguir estas pautas ayudará también a que cualquier persona encuentre información en la Web más rápidamente. Estas pautas no desalientan a los desarrolladores en la utilización de imágenes, vídeo, etc., por el contrario explican cómo hacer los contenidos multimedia más accesibles a una amplia audiencia. Por todo ello, de la norma que se infiere de las WCAG, extraemos un listado de puntos de verificación recomendado por el W3C para validar el nivel de accesibilidad.
2
1. Proporcione alternativas equivalentes para el contenido visual y auditivo A. Proporcione un texto equivalente para todo elemento no textual B. Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor C. Proporcione una descripción auditiva de la información importante de la pista visual de una presentación multimedia D. Para toda presentación multimedia tempo-dependiente (Por ejemplo, una película o animación) sincronice alternativas equivalentes (Por ejemplo, subtítulos o descripciones de la banda visual) con la presentación 2. No se base sólo en el color A. Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente A. Cuando exista un marcador apropiado, use marcadores en vez de imágenes para transmitir la información B. Cree documentos que estén validados por las gramáticas formales publicadas C. Utilice hojas de estilo para controlar la maquetación y la presentación D. Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo E. Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación F. Marque correctamente las listas y los ítems de las listas G. Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías 4. Identifique el idioma usado A. Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente 5. Cree tablas que se transformen correctamente A. En las tablas de datos, identifique los encabezamientos de fila y columna B. Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos C. No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente D. Si se utiliza una tabla para maquetar, maquetar, no utilice marcadores estructurales para realizar un efecto visual de formato 3
6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente A. Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo B. Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico C. Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible. D. Para los scripts y applets, asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada E. Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes A. Evite provocar destellos en la pantalla B. Evite el parpadeo del contenido C. Evite los movimientos en las páginas D. No cree páginas que se actualicen automáticamente de forma periódica E. No utilice marcadores para redirigir las páginas automáticamente. En su lugar, configure el servidor para que ejecute esta posibilidad 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas A. Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas 9. Diseñe para la independencia del dispositivo A. Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor B. Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo C. Para los scripts, especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos 10. Utilice soluciones provisionales A. No provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario B. En formularios asegúrese de que la etiqueta está colocada adecuadamente (La etiqueta debe preceder inmediatamente a su control en la misma línea) lí nea)
4
11. Utilice las tecnologías tec nologías y pautas W3C A. Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas B. Evite características desaconsejadas por las tecnologías W3C C. Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible. 12. Proporcione información de contexto y orientación A. Titule cada marco para facilitar su identificación i dentificación y navegación B. Describa el propósito de los marcos y como éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco C. Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado D. Asocie explícitamente las etiquetas con sus controles (Por ejemplo, en HTML, utilice LABEL y su atributo "for") 13. Proporcione mecanismos claros de navegación A. Identifique claramente el objetivo de cada vínculo B. Proporcione meta-datos para añadir información semántica a las páginas y sitios C. Proporcione información sobre la maquetación general de un sitio (por ejemplo, mapa del sitio o tabla de contenidos) D. Utilice los mecanismos de navegación de forma coherente 14. Asegúrese de que los documentos sean claros y simples A. Utilice el lenguaje le nguaje apropiado más claro y simple para el contenido de un sitio
5
METAETIQUETAS. Las metaetiquetas (META TAG's) son instrucciones HTML y son utilizadas para la indexación de nuestros sitios Webs en los buscadores y robots de búsqueda (boots) en internet. No influyen en el diseño de una web, pero su uso se hace imprescindible, si queremos que nuestro sitio sea visitado con la ayuda de buscadores. Estas nos revelan información tales como, su ubicación, título, lugar de origen, idioma . Por tanto, debemos tener claro que las Meta Tags, son palabras clave que no varía el diseño de nuestra web, pero que son importantísimas en la estructura de la misma. La misión de estas, es dar información sobre la descripción y las palabras clave de un sitio Web, estos datos serán requeridos por la mayoría de los motores de búsqueda. Por ello es importante que estén bien estructuradas y contengan información de interés, para atraer más visitantes a nuestro sitio y mejorar la posición de nuestro sitio web en los motores de Búsqueda. Las etiquetas META TAGs se deben colocar en la cabecera (entre y ) de la pagina web índice de nuestro sitio web (index o default). Si nuestro sitio hace uso de FRAMES, éstas meta tags, deben ir en la página donde se configuran éstos. Para otros exploradores que no soportan FRAMES, existe la instrucción
<![CDATA[ cuyo formato es: <noframes><body><p>Esta <noframes><body><p>Esta página usa marcos, m arcos, pero su explorador no los admite.</p></body> admite.</p></body><br />
<br />
Esta instrucción no permite ver la página a los navegantes con exploradores que no cumplan esta característica, sin embargo podemos suprimir la línea de mensaje y sustituirla por una descripción de nuestra página así como links a las diferentes páginas a las que debería hacer referencia los marcos. Con esto conseguiremos, que usuarios que accedan a nuestra página sin la compatibilidad de marcos (frames) en su explorador puedan navegar por nuestra web sin problemas, por otro lado, la descripción también puede ser indexada por algunos robots de búsqueda. Puedes generar de forma automática y on-line las meta tags de tu web de una forma sencilla, accediendo a las direcciones; Ahora veremos los distintos tipos de Meta Tags existentes:<br />
<br />
6<br />
<br />
Meta Name "Title"<br />
<br />
El principal Tag para un buscador es el " Title" que proporciona el título de nuestro sitio Web. Mediante ésta simple instrucción, indicamos a los buscadores el nombre de nuestro sitio, es decir, en lugar de llamarlo, por ejemplo, http://www.servidor.com/paginaweb/socio32 http://www.servidor.com/paginaw eb/socio32 podemos llamarla "Iniciativas Web", donde donde el título será más indicativo del contenido de nuestro sitio, haciendo incluso de palabras clave para búsquedas en los robots. La sintaxis de la instrucción es: <meta name="title" content="título del sitio"> Una vez dado el nombre a nuestra web, realizaremos la descripción del sitio mediante las Tags: Meta Name "Keywords"<br />
<br />
En esta Tag pondremos las palabras por las cuales, queremos que nuestro sitio sea encontrado por los robots de búsqueda, separada por comas. No será conveniente utilizar palabras repetidas en este apartado, ya que muchos robots de indexación de páginas las rechazan. Tampoco es conveniente hacer una lista de términos demasiado larga, normalmente con 20 o 30 palabras es más que suficiente. La sintaxis de esta instrucción será: <Meta Name="Keywords" Content="palabra1, palabra2, palabra3...., palabra3...., palabra N"> Meta name "Description"<br />
<br />
En esta Tag deberemos poner la descripción de nuestra página, y será por la cual será indexado nuestro sitio por los robots de los buscadores, confeccionaremos, por tanto, una frase de extensión no muy larga y que describa a la perfección nuestro sitio. Los robots, suelen coger una cadena de 256 caracteres (en algunos casos más) aunque no es conveniente sobrepasarlos. Si no incluimos esta etiqueta, los buscadores pueden presentar nuestra página simplemente por el título del sitio, o tomando esa cadena de 256 caracteres como los que aparecen en nuestra página índice, mostrándose al usuario, lo que en ciertos casos no es nada recomendable (podemos encontrar multitud de estos casos en el buscador Yahoo).. Al igual que en la etiqueta Keywords, no es conveniente repetir palabras, ya que muchos robots, penalizan como spam. Por otro lado, sí que es conveniente, que en esta cadena de descripción de nuestro sitio, aparezcan palabras que anteriormente colocamos en la etiqueta Keywords. La sintaxis de la instrucción es: <META NAME="description" CONTENT="descripción de nuestra página"><br />
<br />
7<br />
<br />
REFERENCIAS. [1] http://www.deseoaprender.com/RecursosWebmas/PagTodoMetatags.htm [2] http://www.majadahonda.org/index.php?id=320 [3] http://www.elguille.info/HTMLscripts/HTML_meta.htm<br />
<br />
8<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://idoc.tips/report/normas-w3c-pdf-free" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "NORMAS W3C"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2025 IDOC.TIPS. All rights reserved.
<div class="pull-right">
<span><a href="https://idoc.tips/about">About Us</a></span> |
<span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> |
<span><a href="https://idoc.tips/term">Terms of Service</a></span> |
<span><a href="https://idoc.tips/copyright">Copyright</a></span> |
<span><a href="https://idoc.tips/contact">Contact Us</a></span> |
<span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://idoc.tips/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177830117-1');
</script>
<script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://idoc.tips/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_IDOCTIPS_cookie_box() {
document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/";
hide_IDOCTIPS_cookie_box();
}
function hide_IDOCTIPS_cookie_box() {
var cb = document.getElementById('IDOCTIPS_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var IDOCTIPS_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('IDOCTIPS_cookie_box_viewed');
if (IDOCTIPS_cookie_box_viewed) {
hide_IDOCTIPS_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
]]>
