Este documento proporciona información sobre varios aspectos relacionados con el diseño y desarrollo de páginas web accesibles. Explica cómo medir el peso de una página web, los principios básicos de diagramación para facilitar la navegación, el uso adecuado de presentaciones Flash, marcos y meta tags para mejorar el posicionamiento en buscadores. También cubre temas como el uso de imágenes de fondo y la separación de contenido y diseño para facilitar la indexación.
2. Peso de las páginas:
Saber cuanto pesa una web Para saber el
peso de una web, solo tendremos que ir a
http://tools.pingdom.com/fpt/ y poner la URL
de la web que queremos saber el peso.
3.
4. Una vez pulsemos en Test Now, nos dará
información del peso completo de nuestra
web, de forma desglosada, para asi saber
cuanto pesa cada elemento de forma
individual y podamos modificar en el caso de
que sea necesario, los tamaños de las
imagenes, css, o lo que necesitemos.
6. El objetivo fundamental de la diagramación web es
lograr la facilidad de navegación en el sitio, lo que
permite al usuario conseguir la información que le
interesa de una manera rápida y eficiente.
El proceso de diagramar una página web, consiste en
decidir: ¿Donde colocar sus elementos y por qué?, al
ejecutar este paso con los objetivos básicos de crear
vínculos para que la navegación sea intuitiva y crear
una estructura adecuada de código de programación, se
ha empezado por el buen camino.
Diagramar y programar un sitio web partiendo de los
objetivos ya mencionados garantiza la funcionalidad del
mismo.
Una página web visualmente atractiva que además sea
altamente funcional son los ingredientes básicos de un
proyecto de calidad y con un alcance tan grande como
la misma red.
7. Uso de presentaciones en
flash:
Accesibilidad
Aunque cada vez más usuarios tienen Flash
instalado en su navegador, sigue habiendo
personas que no no lo tienen. Los motivos
pueden ser variados: por falta de
conocimiento (no saben como instalar un
conector o 'plugin'), porque usan un
navegador antiguo o un equipo móvil que no
lo soportaría o simplemente porque no desean
o incluso no pueden usarlo.
8. Uso de presentaciones en
flash:
Dar la opción al usuario
Incluso aunque se detecte mediante
Javascript que el usuario tiene instalado el
conector Flash no es adecuado iniciar
automáticamente una animación o película
Flash de bienvenida al sitio web.
9. Uso de presentaciones en
flash:
Desventajas del contenido Flash
Hay que tener en cuenta que el contenido de
una presentación Flash no se indexará
correctamente en los motores de búsqueda y
esto hará más difícil que algunos usuarios
encuentren la página. Es por esto que se
recomienda no utilizar Flash para la simple
presentación de contenidos, pues esto puede
lograrse perfectamente en HTML sin
necesidad de imponer ninguna de las
restricciones de Flash.
10. Uso de presentaciones en
flash:
Causar impacto
En cualquier caso, si el usuario ha decidido
esperar a que se descargara la animación
Flash conviene convencerle después de que
su espera no ha sido en vano. Además de
mostrar algún elemento intermedio mientras
se acaba de descargar la presentación, hay
hacerle ver que ha valido la pena mediante
una presentación atractiva e incluso
impactante o con un innovador interfaz de
navegación.
11.
12. Uso de marcos o frames:
Como norma general los robots de los
buscadores tienen muchas dificultades en leer
los marcos e indexarlos.
En los primeros sitios web los marcos o
frames se utilizaban con mucha frecuencia.
Tenía más sentido utilizarlos para reducir los
tiempos de carga con conexiones lentas.
13. Uso de marcos o frames:
Todavía siguen naciendo webs nuevas que
utilizan esta tecnología. Es muy típico un
marco izquierdo con el menú de las demás
páginas, o una cabecera con el logotipo y una
presentación en un marco superior.
14. Uso de marcos o frames:
Los buscadores más importantes han empezado a indexar los
contenidos de framesets. De todas maneras todavía quedan
muchos robots que no tienen capacidad de seguir los enlaces
incorporados en este tipo de tecnología.
La programación típica de una página con frames aparece de la
siguiente manera:
<frameset rows="*">
<frame name="principal" src="http://www.delosprimeros.com">
<noframes>
<body>
<p>Esta página utiliza frames, pero su navegador no los
soporta</p>
</body>
</noframes>
15.
16. Uso de imágenes de fondo:
Cada vez viene siendo más habitual situar las
imágenes que aparecen en una web en el archivo
css. La importancia de separar el contenido del
diseño adquiere más importancia si estamos
trabajando en un diseño accesible y posicionable.
En el posicionamiento en google u otros
buscadores esta separación es obligatoria.
Google no entiende de diseños sólo interpreta el
texto que lee.
Habitualmente se utiliza para diseño de marcos
de la página fondo degradados, esquinas
redondeadas, muy de moda actualmente, pero
también se pueden usar en creación de menús
con formas de pestañas.
17. Uso de imágenes de fondo:
La utilización de esta técnica es bien sencilla. La sección que
va a contener la imagen de fondo deberá estar identificada
mediante un id. Esta identificación sirve para crear la
referencia en el archivo css del siguiente modo:
En el fichero html:
< div id="nombre" >Texto que deberá aparecer por encima de
la imágen de fondo< / div >
En el fichero css:
#nombre {
background: color url(”dirección de la imagen”) repeat | no
repat …
}
De esta forma conseguimos efectos interesantes sin apenas
ensuciar el código html
18. Uso de meta tags adecuados:
Las meta tags son etiquetas de html que
funcionan como identificadores ocultos de
nuestras páginas web. Las Metatags no se
muestran directamente en el navegador al usuario
que visita nuestra página web, excepto
la metatags title, sino que es información de
nuestras páginas web para los buscadores
como Google. Estas etiquetas Html, bien
editadas, pueden mejorar
nuestro posicionamiento en buscadores y lo que
es más importante, ofrecer una referencia de
nuestras páginas web a los usuarios de los
buscadores.
19. Uso de meta tags adecuados:
Existen 2 tipos de Meta Tags:
META NAMES :Informan a los buscadores del
continido de la página web. Son utilizadas
para laoptimización para buscadores.
HTTP-EQUIV : Controlan actividades de los
exploradores y detallan la información de
la página web.