|
|
Línea 8: |
Línea 8: |
| <div class="slide"> | | <div class="slide"> |
| == Accesibilidad, usabilidad y estándar W3C == | | == Accesibilidad, usabilidad y estándar W3C == |
− | *Son conceptos muy relacionados pero con distintos propósitos.
| |
| ===Usabilidad=== | | ===Usabilidad=== |
| *Facilidad de navegación por la web para el usuario final. | | *Facilidad de navegación por la web para el usuario final. |
Línea 21: |
Línea 20: |
| | | |
| ===Accesibilidad=== | | ===Accesibilidad=== |
− | Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.. | + | *Se intenta garantizar una experiencia de usuario similar para personas con discapacidades. |
| + | *WAI |
| ===Uso de estándares=== | | ===Uso de estándares=== |
| *Iniciativa de la W3C | | *Iniciativa de la W3C |
Línea 77: |
Línea 77: |
| | | |
| <div class="slide"> | | <div class="slide"> |
− | ==== Comienzan los problemas... ==== | + | === Eye tracking=== |
− | *El W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2. | + | *Herramientas específicas: |
− | *XHTML 2 era un lenguaje basado en un XML más puro...
| + | [http://silverbackapp.com/ | Silverback para MacO] |
− | *...pero no era compatible con anteriores versiones de HTML, ni con las páginas ya existentes. | + | [http://www.trymyui.com/ | Multiplataforma] |
− | *Y así, en 2004, nació el WHATWG.
| + | *Otro tipo de herramientas: |
| + | :Conexión remota al equipo cliente. Observación/grabación de su sesión |
| + | [http://www.teamviewer.com/ | Team Viewer] |
| </div> | | </div> |
| <div class="slide"> | | <div class="slide"> |
Revisión de 22:49 14 nov 2012
UX
Usabilidad y accesibilidad.
UX: Experiencia de usuario o usabilidad
Accesibilidad, usabilidad y estándar W3C
Usabilidad
- Facilidad de navegación por la web para el usuario final.
- Usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
- Objetivos:
- Presentación de la información de forma clara y concisa
- Menus, opciones y botones con funcionalidad clara y sin ambigüedad
- Colocación de la información importante en un área apropiada de la web
- Esencial para páginas de comercio electrónico
- Paradigma KISS (keep it simple, stupid)
Accesibilidad
- Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
- WAI
Uso de estándares
- Iniciativa de la W3C
- Las metas son compatibilidad entre plataformas (uso de esándares web abiertos) y tamaño de ficheros compacto.
- Ejemplo: separación de contenido (html) y presentación (css).
- Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.
Problemática
|
Buena usabilidad / estándar W3C
|
Mala accesibilidad
|
Solución
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
Color
|
Herramienta visual básica para el diseño Web
|
El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
|
Uso de iconos y distintos tipos de texto en la codificación de la Web.
|
¿Qué es el WHATWG?
- Un grupo de gente de Opera, con Ian Hickson a la cabeza, y más tarde de Apple y Mozilla no están conformes con el rumbo del W3C, y quieren potenciar las aplicaciones web. Crean un grupo de trabajo: el Web Hypertext Application Technology Working Group.
- Crean dos especificaciones, Web Forms 2.0 y Web Apps 1.0. Más tarde, ambas se unirán para formar HTML5.
- En 2006, el W3C reconoce que su XHTML 2 no funciona, y comienzan a trabajar en un nuevo HTML, tomando como base el trabajo del WHATWG.
Estado actual
- En 2009, el W3C renuncia definitivamente a seguir desarrollando XHTML 2.
- El WHATWG y el W3C siguen trabajando en el HTML5 en paralelo, pero con métodos distintos.
- Recientemente, el WHATWG ha decidido dejar de numerar las versiones de HTML y sigue trabajando en el "HTML Living Standard"
- En 2012, la especificación tendrá el status de "Candidate Recommendation".
- Probablemente, no será "Proposed Recommendation" hasta 2022.
Codificar HTML: Herramientas necesarias
- Un editor de texto: Netbeans o Eclipse con el plugin de Aptana por ejemplo.
- Una selección de navegadores para hacer las pruebas (instalaremos Safari y Explorer mediante playonlinux
No todos los navegadores despliegan la información del código html de la misma forma. Se debe testear en varios de ellos.
- Usaremos emuladores para ver la web en distintos terminales.
Publicar html: herramientas necesarias
- Un servicio de hosting o un servidor web
Puede ser tu propio ordenador. Si la IP no es fija (habitual), necesitaremos usar un DNS dinámico.
Servicio de hosting gratuito: pocos MB de espacio, publicidad, limitaciones de ancho de banda, sin soporte.
Servicio de pago: Elegir bien el hosting en función de nuestros requerimientos. Se deben evitar los resellers.
Que obtendremos por medio de un “registrador”. El dominio debe ir a nuestro nombre. En www.dot.tk obtendremos dominios .tk de forma gratuita.
- Comando whois: para averiguar datos sobre el dominio.
URL (uniform resource locator)
Es la forma de “llamar” a un documento desde la World Wide Web.
El fichero puede acabar en .html o en .htm, es indiferente
http://www.soplaelcierzo.com:8080/descargas/videos/index.html
http:// nombre del servicio o protocolo
www.soplaelcierzo.com equipo
:8080 puerto (por defecto el 80)
/descargas/videos/index.html ruta a la página en la máquina y nombre del fichero
Qué es XML
- Significa eXtensible Markup Language
- Es un lenguaje mediante el uso de etiquetas, muy similar a HTML
- Fue diseñado para TRANSPORTAR datos (o almacenar), NO para MOSTRAR
- Las etiquetas no están predefinidas. Debes definir tus propias etiquetas.
- Es autodescriptivo
- Es una recomendación de la W3C
- Lenguajes desarrollados en base a XML (cientos de ellos):
- RSS (real simple syndication), SOAP, XHTML...
Qué es XHTML
- Significa: eXtensible HyperText Markup Language
- Extensible porque se pueden añadir módulos para hacer por ejemplo cálculos matemáticos o dibujar gráficos.
- Es prácticamente idéntico a HTML 4.0.1
- Es más “limpio y estricto” que HTML al ser un HTML reconstruido mediante el uso de XML (v1.0).
- Es el estándar más reciente de HTML publicado por la W3C
Código en HTML
Compuesto de etiquetas (que van en parejas, etiqueta de apertura y de cierre). XML, HTML5 y XHTML fuerzan esa etiqueta de cierre. En HTML4 hay algunas que pueden ir sin cierre, pero no se recomienda. Por ej. <br>
<html>
<head>
<title> Este es el titulo de la página</title>
</head>
<body>
<p> Salto de línea según w3c: </p>
<br> </br>
<p> El siguiente salto de línea funciona en todos los navegadores:
</p>
<br />
</body>
</html>