Diferencia entre revisiones de «Usuario:Juanda/html/usabilidad»

De WikiEducator
Saltar a: navegación, buscar
(→‎Uso de estándares)
Línea 20: Línea 20:
 
{|Class="wikitable"
 
{|Class="wikitable"
 
|-
 
|-
−
!Heading 1
+
!Problemática
−
!Heading 2
+
!Buena usabilidad / estándar W3C
−
!Heading 3
+
!Mala accesibilidad
 +
!Solución
 
|-
 
|-
−
|This is the text for Cell 1
+
|Color
−
|This is the text for Cell 2. You can use:
+
|Herramienta visual básica para el diseño Web
−
* Bullets
+
|El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
−
* Bullets
+
|Uso de iconos y distintos tipos de texto en la codificación de la Web.
−
* Bullets
+
−
|This is the text for cell three. You can use '''bold''' and ''italics''
+
 
|-
 
|-
−
|[[image:feedback.png|left]]This is the text for Cell 4. If you like you can insert images as well.
+
|Color
−
| The text for Cell 5
+
|Herramienta visual básica para el diseño Web
−
| The text for Cell 6 goes here.
+
|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.
 +
|-
 +
 
 +
 
 
|}
 
|}
 
</div>
 
</div>
Línea 60: Línea 88:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
===Codificar HTML: Herramientas necesarias===
 
===Codificar HTML: Herramientas necesarias===
 
* Un editor de texto: Netbeans o Eclipse con el plugin de Aptana por ejemplo.
 
* Un editor de texto: Netbeans o Eclipse con el plugin de Aptana por ejemplo.

Revisión de 20:13 14 nov 2012



UX: Experiencia de usuario o usabilidad

Accesibilidad, usabilidad y estándar W3C

  • Son conceptos muy relacionados pero con distintos propósitos.

Usabilidad

  • Posibilidad de navegación para un usuario medio y con un equipo medio por un sitio web.

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.

Comienzan los problemas...

  • El W3C da por muerto el lenguaje HTML, y comienza a trabajar en el nuevo XHTML 2.
  • XHTML 2 era un lenguaje basado en un XML más puro...
  • ...pero no era compatible con anteriores versiones de HTML, ni con las páginas ya existentes.
  • Y así, en 2004, nació el WHATWG.

¿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.

  • Un nombre de dominio

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>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/usabilidad&oldid=10499»