MÓDULO 1.

PRINCIPIOS, ACCESIBILIDAD Y USABILIDAD DE

PÁGINAS WEB.

Accesibilidad y usabilidad en páginas web

Accesibilidad y usabilidad son dos conceptos que, en ocasiones se confunden o
se mezclan entre sí. A pesar de que pueden parecer que ambas cosas van
dirigidas en el mismo sentido (métodos y técnicas para diseñar correctamente
nuestra página web), en muchos casos entran en conflicto.

Pautas para promover la accesibilidad en páginas web

Existen pautas que permiten hacer accesibles los contenidos de la web a personas
con discapacidad.
El fin principal de estas pautas en promover la accesibilidad.
Las pautas aplicables son las siguientes:

 Acceso de todos los usuarios en condiciones de igualdad a los contenidos.

 Textos alternativos en imágenes.
 Vídeos con subtítulos para usuarios con dificultades auditivas.
 Selección de colores para personas con daltonismo.
 Tamaño del texto suficientemente grande para que usuarios con problemas
visuales puedan leerlo sin dificultad.
 Tamaño de los botones o las áreas activas adecuado puede facilitar su uso a
los usuarios que no pueden controlar el ratón con precisión.
 Permitir uso de teclado y ratón: para evitar acciones que dependan de un
dispositivo concreto y el usuario pueda escoger el dispositivo que más le
convenga.
Usabilidad de páginas web
Son técnicas que ayudan a los seres humanos a realizar tareas en entornos
gráficos de ordenador.

Deben tenerse en cuenta una serie de principios importantes para la usabilidad.

Son los siguientes:
En el documento descargable de esta página puedes ampliar información
sobre la accesibilidad y usabilidad en el diseño de páginas web

MÓDULO 2. INTRODUCCIÓN A HTML Y CSS

Para trabajar con HTML5 vamos a usar el entorno Eclipse. Se trata de un entorno
de desarrollo multiplataforma y permite desarrollar en múltiples lenguajes tanto
de programación como de marcado, uso de UML, etc.

MÓDULO 2. INTRODUCCIÓN A HTML Y CSS

Herramientas para trabajar con HTML5

Eclipse es un entorno de desarrollo multiplataforma y permite desarrollar en
múltiples lenguajes tanto de programación como de marcado, uso de UML, etc.
Eclipse es, en el fondo, únicamente un armazón (workbench) sobre el que se
pueden montar herramientas de desarrollo para cualquier lenguaje, mediante la
implementación de los plugins adecuados.
La arquitectura de plugins de Eclipse permite:
 Integrar diversos lenguajes sobre un mismo IDE.
 Introducir otras aplicaciones accesorias que pueden resultar útiles durante el
proceso de desarrollo como: herramientas UML, editores visuales de
interfaces, ayuda en línea para librerías, etc.

El IDE Eclipse es, únicamente, una de las herramientas que se engloban bajo el
denominado Proyecto Eclipse. El Proyecto Eclipse aúna tanto el desarrollo del
IDE Eclipse como de algunos de los plugins más importantes (como el JDT,
plugin para el lenguaje Java, o el CDT, plugin para el lenguaje C/C++).

En concreto, permite:

 Crear páginas HTML 5 con una nueva plantilla.

 Proporciona autocompletado de código para los elementos de HTML5.
 Ofrece un editor de propiedades para los atributos de HTML5.
 Ofrece un editor WYSIWYG para el desarrollo visual de páginas HTML5.

En el documento descargable disponible al final del módulo, puedes conocer

con detalle el proceso de creación de una página en HTML con Eclipse y las
herramientas de edición de las que dispone.

MÓDULO 2. INTRODUCCIÓN A HTML Y CSS

Marcado HTML
El marcado HTML se realiza mediante etiquetas de apertura y cierre. Todo lo que
se encuentra dentro de una etiqueta de apertura y cierre se encuentra afectado por
ella, incluyendo texto plano y cualquier otra etiqueta que pueda contener.

 Una etiqueta de apertura se define con un nombre de etiqueta encerrado

entre los corchetes angulares < y > (signo “menor que” y signo “mayor
que”)
  Una etiqueta de cierre se define con el corchete angular de apertura “<”
seguido del carácter barra /, el nombre de etiqueta y finalmente el corchete
angular de cierre.

 Entre la etiqueta de apertura y la de cierre, se encuentra el contenido. El

contenido puede ser texto u otras etiquetas. Una etiqueta con contenido
tiene el siguiente formato:

 Si entre la etiqueta de apertura y la de cierre no se añade ningún contenido,

se puede declarar con un corchete angular de apertura “<” seguido del
nombre de la etiqueta, una barra / y finalmente el corchete angular de
cierre.

 Los atributos añaden información adicional a una etiqueta. Cada etiqueta

admite una serie de atributos. Se añaden únicamente a las etiquetas de
apertura, justo después del nombre. Se admite más de un atributo por
etiqueta. Siguen el esquema clave / valor de la siguiente forma: clave:
“valor”.

En el material descargable, puedes conocer algunos ejemplos de aplicación

de los conocimientos sobre marcado que hemos visto hasta ahora