|
|
| Línea 114: |
Línea 114: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | ====¿Qué es el WHATWG?====
| + | Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente. |
| − | *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.
| + | 2 casos: |
| − | *Crean dos especificaciones, Web Forms 2.0 y Web Apps 1.0. Más tarde, ambas se unirán para formar HTML5. | + | *Aplicación funcional |
| − | *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.
| + | : El boceto debe representar bien los requerimientos del cliente. Un boceto en papel puede ser suficiente. Utilizaremos alguna herramienta informática para buscar resultados más vistosos de cara al cliente. |
| − | </div> | + | : Por ej. [http://www.balsamiq.com/products/mockups Balsamiq Mockup] |
| − | <div class="slide"> | + | *Página Web centrada en el diseño |
| − | ====Estado actual====
| + | Uso de programas tipo Inkscape, Photoshop o Gimp. Elaboración de un portfolio para el cliente. Uso de algún programa como en el caso anterior para la colocación de los objetos de la web, sobre todo por temas de usabilidad. |
| − | *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.
| + | [http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise Fuente instalación Adobe Air] |
| − | * Recientemente, el WHATWG ha decidido dejar de numerar las versiones de HTML y sigue trabajando en el [http://blog.whatwg.org/ "HTML Living Standard"]
| + | * Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. |
| − | *En 2012, la especificación tendrá el status de "Candidate Recommendation".
| + | |
| − | *Probablemente, no será "Proposed Recommendation" hasta 2022.
| + | Comandos instalación: |
| | + | Lo primero será instalar algunas dependencias: |
| | + | <source lang="bash"> |
| | + | $ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns |
| | + | </source> |
| | + | Descargar e instalar getlibs, para poder utilizar las librerías 32 bits: |
| | + | <source lang="bash"> |
| | + | $ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb |
| | + | $ sudo dpkg -i getlibs-all.deb |
| | + | </source> |
| | + | Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage: |
| | + | <source lang="bash"> |
| | + | $ sudo getlibs -l libhal-storage.so.1 |
| | + | $ sudo getlibs -l libgnome-keyring.so.0.1.1 |
| | + | </source> |
| | + | Ahora enlazamos esta última librería para que entre en funcionamiento: |
| | + | <source lang="bash"> |
| | + | $ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0 |
| | + | </source> |
| | + | Ya pasamos a descargar e instalar Adobe Air, la versión 2.6: |
| | + | <source lang="bash"> |
| | + | $ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin |
| | + | $ sudo chmod +x AdobeAIRInstaller.bin |
| | + | $ sudo ./AdobeAIRInstaller.bin |
| | + | </source> |
| | + | Ahora podemos eliminar archivos descargados que ya son innecesarios: |
| | + | <source lang="bash"> |
| | + | $ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb |
| | + | </source> |
| | + | |
| | | | |
| | </div> | | </div> |
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.
|
Eye tracking
- Tecnologías que permiten registrar la forma en la que una persona mira una escena o imagen, en qué áreas fija su atención, durante cuánto tiempo y qué orden sigue en su exploración visual.
- Conocer los puntos calientes en los que el usuario fija inicialmente la mirada, ayudan a estructurar los contenidos en una web.
- Cuanto mas arriba y a la izquierda, más se verá. Cuanto más abajo a la derecha, menos relevancia visual tendrá.
- Herramientas específicas:
- Silverback para MacO
- Multiplataforma
- Otro tipo de herramientas:
- Conexión remota al equipo cliente. Observación/grabación de su sesión
- Team Viewer
Diseños preliminares: del boceto al prototipo
Sketch o borrador de un sitio web
- El prototipo es la mejor forma de aproximarse a la comprensión y concepción del producto final (en este caso un sitio y/o páginas web).
- Es útil ver y porque no copiar de la competencia, que algo harán bien.
- Listado de herramientas
- Papel y lápiz.
- Se recogen ideas
- Se prueban composiciones
- Funcionalidad y especificaciones
- Layout, menús de navegación...
- Sin tipografía, colores ni otros aspectos visuales
- Anotaciones sobre la funcionalidad que se espera
- Incorporamos el look&feel
- Se prueba el diseño final
- Tiene funcionalidad (normalmente reducida)
Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente.
2 casos:
- El boceto debe representar bien los requerimientos del cliente. Un boceto en papel puede ser suficiente. Utilizaremos alguna herramienta informática para buscar resultados más vistosos de cara al cliente.
- Por ej. Balsamiq Mockup
- Página Web centrada en el diseño
Uso de programas tipo Inkscape, Photoshop o Gimp. Elaboración de un portfolio para el cliente. Uso de algún programa como en el caso anterior para la colocación de los objetos de la web, sobre todo por temas de usabilidad.
Fuente instalación Adobe Air
- Han dejado de dar soporte para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior.
Comandos instalación:
Lo primero será instalar algunas dependencias:
$ sudo apt-get install libhal-storage1 libgnome-keyring0 lib32nss-mdns
Descargar e instalar getlibs, para poder utilizar las librerías 32 bits:
$ wget http://ubuntuguide.net/wp-content/uploads/2012/06/getlibs-all.deb
$ sudo dpkg -i getlibs-all.deb
Una vez instalado, vamos a proceder a instalar las librerías necesarias, que son dos, libhal-storage:
$ sudo getlibs -l libhal-storage.so.1
$ sudo getlibs -l libgnome-keyring.so.0.1.1
Ahora enlazamos esta última librería para que entre en funcionamiento:
$ sudo ln -s /usr/lib/i386-linux-gnu/libgnome-keyring.so.0 /usr/lib/libgnome-keyring.so.0
Ya pasamos a descargar e instalar Adobe Air, la versión 2.6:
$ wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin
$ sudo chmod +x AdobeAIRInstaller.bin
$ sudo ./AdobeAIRInstaller.bin
Ahora podemos eliminar archivos descargados que ya son innecesarios:
$ sudo rm AdobeAIRInstaller.bin && sudo rm getlibs-all.deb
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>
