Hoy hemos empezado y acabado la teoría de usabilidad y hemos estado buscando páginas que no cumplirían los criterios necesarios, las había bastante nefastas no sólo en lo tocante a estética sino también comprensión, navegación etc, de hecho, como curiosidad, voy a añadir un enlace que encontré de distintas páginas bastante malas en estos aspectos, aún con todo, hubo compañeros que las encontraron peores.
http://www.cssblog.es/50-sitios-web-incorrectamente-disenados/
El examen de diseño gráfico al final no fue tan difícil como esperaba, tuvimos veinte preguntas de tipo test y luego tuvimos que hacer un comentario de una imagen de una página de revista o libro que nos puso en la pantalla,hablar acerca de todo lo que se nos ocurriese. Ahora de hecho nos quedó hasta tiempo después de ello así que voy a aprovechar para subir apuntes
jueves, 3 de julio de 2014
DIA VEINTIUNO 02/07/2014
Hoy hemos hecho las validaciones de diferentes páginas para,finalmente redactar un informe a los propietarios o los que gestionen una de ellas en concepto de informar acerca de los errores encontrados. También acabé de subir la teoría respecto accesibilidad, mañana ya daremos usabilidad y ya la subiré.
Por fin acabé el logo definitivo de la pastelería cafetería, lo llamé cookie bunny, lo hice en un folio en horizontal, con trazos claros y pintada adecuadamente. Mañana ya tenemos examen de diseño gráfico.
Antes de irnos vimos un pedazo de una entrevista a Steve Jobs, bastante interesante
Por fin acabé el logo definitivo de la pastelería cafetería, lo llamé cookie bunny, lo hice en un folio en horizontal, con trazos claros y pintada adecuadamente. Mañana ya tenemos examen de diseño gráfico.
Antes de irnos vimos un pedazo de una entrevista a Steve Jobs, bastante interesante
miércoles, 2 de julio de 2014
INFORME DE VALIDACIÖN
Muy
buenos días:
Me
dirijo a usted para informarle que soy una alumna del curso de diseño
y confección de páginas web, que ahora mismo estamos con la unidad
formativa 1302 y estamos tratando el tema de accesibilidad, por lo
tanto he procedido a analizar con el programa Total Validator su
página http://www.empleacantabria.com/es/portal.do?TR=C&IDR=246
para comprobar si reúne los requisitos necesarios según la norma
UNE 139803:2004 y de obligado cumplimiento debido a su póstumo real
decreto 1494/2007.
Le
adjunto aquí una página web en la que puede informarse más al
respecto http://es.m.wikipedia.org/wiki/Accesibilidad_web
Le
informo pues que he encontrado en su página distintas
irregularidades en lo tocante a su accesibilidad, las cuales son de
verdadera relevancia para algunos usuarios ya que no podrán acceder
satisfactoriamente a los contenidos. Procedo entonces a explicarle
dichos errores:
Existe
un error de análisis en esta línea
583 <a href = "http://www.empleacantabria.com/es/portal.do?IDM=41 y NM = 1 "rel =" external ">
dado que no se debe utilizar el carácter & n valores de atributos, ya que puede ser confundido con el inicio de las referencias de caracteres. Este error también puede aparecer si se utiliza una referencia de carácter, y no lo termina con un punto y coma.
Podemos apreciar además errores como <label for="textobusqueda">, en este caso, la etiqueta label no tiene nombre, quizás se auto rellene de forma dinámica, no obstante para un usuario ciego es un inconveniente dado que no puede saber qué hay escrito ahí.La
etiqueta <label> se
utiliza para adjuntar información a los controles.
El valor
del atributo for debe
ser igual al valor id del
elemento input para que los reconozca como asociados. Un ejemplo
sería éste: <label
for="html">HTML</label>
Saludos
cordialesVALIDACIÓN DE ACCESIBILIDAD
Procedo ahora a analizar varias páginas de distinto tipo y temática (administración pública, contenidos, comercio al por menor, agencia de viajes y una de temática libre, yo personalmente escogí la página de alsa) con el programa Total Validator y he encontrado distintas irregularidades, símplemente basándome en las de tipo A.
En esta página encontramos diversos
elementos que no reúnen los requisitos necesarios:
Existe un error de análisis en esta
línea
583 <a href = "http://www.empleacantabria.com/es/portal.do?IDM=41 y NM = 1 "rel =" external ">
dado que no se debe utilizar el carácter & n valores de atributos, ya que puede ser confundido con el inicio de las referencias de caracteres. Este error también puede aparecer si se utiliza una referencia de carácter, y no lo termina con un punto y coma.Encontramos además errores como <label for="textobusqueda">, en este caso, la etiqueta label no tiene nombre, quizás se auto rellene de forma dinámica, no obstante para un usuario ciego es un inconveniente dado que no puede saber qué hay escrito ahí.El valor
del atributo for debe
ser igual al valor id del
elemento input para que los reconozca como asociados. Un ejemplo
sería éste: <label
for="html">HTML</label>La
etiqueta <label> se
utiliza para adjuntar información a los controles.-Página: http://www.barceloviajes.com/ofertas/vuelos/agencias-de-viajes-online.jsp
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E885 - 15 pieza (s): Asociar etiquetas correctamente con sus controles. Ver http://www.w3.org/TR/WCAG20-TECHS/F68.html (que aparece en una nueva ventana)
E894 - 33 pieza (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
P871 - 8 pieza (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
W860 - 1 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
W863 - 1 instancia (s): Dado que los grupos de botones de opción y casillas de verificación son múltiples controles, es particularmente importante que se pueden agrupar semánticamente para que puedan ser más fáciles de tratar como un único control. Ver http://www.w3.org/TR/WCAG20-TECHS/H71.html (que aparece en una nueva ventana)
W864 - 1 instancia (s): Siempre se debe identificar el idioma principal de un documento. Ver http://www.w3.org/TR/WCAG20-TECHS/H57.html (que aparece en una nueva ventana)
W868 - 2 instancia (s): Si usted tiene diferentes enlaces con el mismo texto de enlace que puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un atributo 'title' única para cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
E899 - 4 de instancia (s): Si usted tiene diferentes enlaces con el mismo texto del enlace y 'title' puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un "título" único a cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
P892 - 2 instancia (s): Etiquetas que se utilizan puramente para crear un efecto de presentación visual no deben ser utilizados. Usted debe usar CSS para controlar la maquetación y la presentación para que los usuarios y sus accesorios pueden controlarlo. Ver http://www.w3.org/TR/WCAG20-TECHS/G140.html (que aparece en una nueva ventana)
W860 - 1 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
W865 - 5 instancia (s): El primer elemento dentro de la <fieldset> debe ser un <legend>, que proporciona una etiqueta o instrucciones para el grupo. Ver http://www.w3.org/TR/WCAG20-TECHS/H71.html (que aparece en una nueva ventana)
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E894 - 2 instancia (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
P871 - 26 de instancia (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
P883 - 23 pieza (s): elementos de encabezado se debe pedir correctamente. Por ejemplo, los elementos H2 deberían seguir a los elementos H1, los H3 deberían seguir a los elementos H2, etc Los desarrolladores no debe saltarse niveles o usar títulos para efectos de presentación. Ver http://www.w3.org/TR/WCAG20-TECHS/F43.html (que aparece en una nueva ventana)
W860 - 2 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E885 - 1 instancia (s): Asociar etiquetas correctamente con sus controles. Ver http://www.w3.org/TR/WCAG20-TECHS/F68.html (que aparece en una nueva ventana)
E894 - 15 pieza (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
E899 - 27 de instancia (s): Si usted tiene diferentes enlaces con el mismo texto del enlace y 'title' puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un "título" único a cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
P871 - 2 instancia (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
P883 - 16 de instancia (s): elementos de encabezado se debe pedir correctamente. Por ejemplo, los elementos H2 deberían seguir a los elementos H1, los H3 deberían seguir a los elementos H2, etc Los desarrolladores no debe saltarse niveles o usar títulos para efectos de presentación. Ver http://www.w3.org/TR/WCAG20-TECHS/F43.html (que aparece en una nueva ventana)
martes, 1 de julio de 2014
ACCESIBILIDAD WEB
¿Qué es?
Hablar de Accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.
Con esta idea de accesibilidad nace la Iniciativa de Accesibilidad Web, conocida como WAI (Web Accessibility Initiative). Se trata de una actividad desarrollada por el W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad, desarrollando pautas de accesibilidad, mejorando las herramientas para la evaluación y reparación de accesibilidad Web, llevando a cabo una labor educativa y de concienciación en relación a la importancia del diseño accesible de páginas Web, y abriendo nuevos campos en accesibilidad a través de la investigación en este área.
¿Cómo funciona?
Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG) Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.
Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.
Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.
Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.
En función a estos puntos de verificación se establecen los niveles de conformidad:
Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen.
Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen.
Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1,2 y 3 se satisfacen.
Características de web accesible
Transformable: La información y los servicios deben ser accesibles para todos y deben poder ser utilizados con todos los dispositivos de navegación.Comprensible: Contenidos claros y simples.Navegable: Mecanismos sencillos de navegación.
Diez cosas consejos rápidos
- Imágenes y animaciones: Use el alt atributo para describir la función de cada visual.
- Los mapas de imagen. Utilice el lado del cliente mapa y el texto para las zonas activas.
- Multimedia. Proporcione subtítulos y transcripción de audio, así como descripciones de video.
- Los enlaces de hipertexto. Usar texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, evite "pincha aquí".
- Organización de las páginas. Use encabezados, listas y estructura consistente. Usar CSS para el diseño y estilo, donde sea posible.
- Gráficos y tablas. Resumir o usar el longdesc atributo.
- Scripts, applets y plug-ins. Proporcionar contenido alternativo si las funciones nuevas no son accesibles.
- Frames. Utilice la noframes elemento y títulos con sentido.
- Tablas. Haga línea por línea de la lectura sensata. Resumir.
- Revise su trabajo. Validar . Utilice herramientas, lista de comprobación y pautas en http://www.w3.org/TR/WCAG
Herramientas útiles:
Validador W3c http://validator.w3.org/
Total validator http://www.
Proceso de validacion en dreameaver http://librosweb.
Validador TAW http://www.tawdis.net/
DIA VEINTE 01/07/2014
Hoy ha sido un día algo durillo en lo tocante a que hemos tenido teoría nueva, bastante teoría de hecho, se ha amenizado un tanto cuando hemos tenido diseño gráfico dado que hemos seguido con el logo, el mío está terminado el diseño, probé colores y lo he hecho finalmente en un folio, ya con bordes definidos etc, pero me quedó acabar de pintarlo. Mañana seguiremos con usabilidad, hoy estuvimos con accesibilidad y hemos comenzado a redactar un informe para páginas oficiales de entidades públicas dado que hemos comprobado que tienen errores de accesibilidad, lo que impide que ciertos usuarios puedan acceder.
lunes, 30 de junio de 2014
DIA DIECINUEVE 30/06/2014
Hoy hemos seguido trabajando en distintos ámbitos que quedaban pendientes, algunos incluso terminando la prueba de validación, mañana ya daremos nueva teoría ya que cambiamos de unidad formativa.
El monográfico ya lo hemos finalizado por fin, ya está listo incluso con tiempo de sobra.
Esta vez en diseño gráfico hemos empezado ya a realizar algo más práctico, esta vez nos hemos inventado una empresa, a qué se dedica, su nombre etc (comprobando que no exista de por sí) para, finalmente, diseñar su logo. Personalmente me queda trabajo pendiente para mañana dado que nos va a llevar tiempo hasta conseguir un logo único y más trabajado. Se me ocurrió para una pyme, una pastelería cafetería y ya tengo un nombre pensado y más o menos lo que quiero transmitir (por lo tanto,los colores) y ya tengo planeada una imagen aproximada, estoy barajando entre distintos bocetos. Ha estado muy bien por fín ponernos con algo así, ya tenía ganas.
El monográfico ya lo hemos finalizado por fin, ya está listo incluso con tiempo de sobra.
Esta vez en diseño gráfico hemos empezado ya a realizar algo más práctico, esta vez nos hemos inventado una empresa, a qué se dedica, su nombre etc (comprobando que no exista de por sí) para, finalmente, diseñar su logo. Personalmente me queda trabajo pendiente para mañana dado que nos va a llevar tiempo hasta conseguir un logo único y más trabajado. Se me ocurrió para una pyme, una pastelería cafetería y ya tengo un nombre pensado y más o menos lo que quiero transmitir (por lo tanto,los colores) y ya tengo planeada una imagen aproximada, estoy barajando entre distintos bocetos. Ha estado muy bien por fín ponernos con algo así, ya tenía ganas.
Suscribirse a:
Entradas (Atom)