|
|
| (15 revisiones intermedias por el mismo usuario no mostrado) |
| Línea 1: |
Línea 1: |
| | {{Usuario:juanda/html/nav }} | | {{Usuario:juanda/html/nav }} |
| | | | |
| − | {{#widget:Slides}} {{MiTitulo| Curso de html}} | + | {{#widget:Slides}} {{MiTitulo| Curso de UX}} |
| | <div class="slides layout-regular template-default"> | | <div class="slides layout-regular template-default"> |
| | <div class="slide"> | | <div class="slide"> |
| − | =UX: Experiencia de usuario o usabilidad= | + | =Herramientas de UX= |
| | </div> | | </div> |
| − | <div class="slide">
| |
| − | == Accesibilidad, usabilidad y estándar W3C ==
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − | ===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
| |
| − | *Sigue el [http://en.wikipedia.org/wiki/KISS_principle#cite_note-kiss-jargon-1 principio KISS del diseño] (keep it simple, stupid)
| |
| − | </div>
| |
| | <div class="slide"> | | <div class="slide"> |
| − | ===Accesibilidad=== | + | == Eye tracking == |
| − | *Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
| + | |
| − | *[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative)
| + | |
| − | *Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza]
| + | |
| − | ====Niveles de conformidad====
| + | |
| − | *Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
| + | |
| − | *[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad]
| + | |
| − | *Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web.
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Nivel A
| + | |
| − | **Imágenes con texto alternativo (alt)
| + | |
| − | :[http://blog.woorank.com/2013/01/image-alt-text-relevant-for-seo-and-usability/ El atributo alt es bueno para el SEO]
| + | |
| − | :Uso inapropiado:
| + | |
| − | :<source lang="html4strict">
| + | |
| − | <img src=“menswatches.jpg” alt=“”>
| + | |
| − | </source>
| + | |
| − | :Uso habitual:
| + | |
| − | :<source lang="html4strict">
| + | |
| − | <img src=“menswatches.jpg” alt=“menswatches”>
| + | |
| − | </source>
| + | |
| − | :Uso adecuado:
| + | |
| − | :<source lang="html4strict">
| + | |
| − | <img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | **Contenido multimedia: Se proporciona contenido descriptivo alternativo
| + | |
| − | | + | |
| − | **El contenido debe tener un orden de lectura no dependiente del diseño o estilos
| + | |
| − | | + | |
| − | | + | |
| − | **El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
| + | |
| − | | + | |
| − | **Las funcionalidades de la pagina deben ser accesibles desde el teclado.
| + | |
| − | :[http://www.martin-gonzalez.es/en-accessibility.html Ejemplo de página con acceso desde el teclado]
| + | |
| − | :[http://www.sitepoint.com/accesskeys/ Utilizar AccessKeys es fácil]
| + | |
| − | <source lang="html4strict">
| + | |
| − | <div id="navigation">
| + | |
| − | <a href="index.html" accesskey="q">Home</a> |
| + | |
| − | <a href="about.html">About Foos</a> |
| + | |
| − | <a href="buy.html">Buy Foos</a> |
| + | |
| − | <a href="sitemap.html">Site Map</a> |
| + | |
| − | <a href="feedback.html">Feedback</a> |
| + | |
| − | <a href="access.html">Accesskey Details</a>
| + | |
| − | </div>
| + | |
| − | </source>
| + | |
| − | <source lang="html4strict">
| + | |
| − | <div id="navigation">
| + | |
| − | <a href="index.html" accesskey="h">Home</a> |
| + | |
| − | <a href="about.html" accesskey="1">About Foos</a> |
| + | |
| − | <a href="buy.html" accesskey="2">Buy Foos</a> |
| + | |
| − | <a href="sitemap.html" accesskey="3">Site Map</a> |
| + | |
| − | <a href="feedback.html" accesskey="4">Feedback</a> |
| + | |
| − | <a href="access.html" accesskey="k">Accesskey Details</a>
| + | |
| − | </div>
| + | |
| − | </source>
| + | |
| − | **Sin más de 3 destellos o cambios de imagen por segundo
| + | |
| − | | + | |
| − | **Títulos descriptivos en cada pagina
| + | |
| − | | + | |
| − | **Sistema para saltar de bloques de contenido y navegación secuencial
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Nivel AA
| + | |
| − | **Debe cumplir las pautas del nivel A
| + | |
| − | **Subtítulos para el contenido multimedia con audio
| + | |
| − | **Contenido alternativo descriptivo para contenido multimedia con vídeo
| + | |
| − | **Contraste alto entre fondo y texto (al menos 4,5:1)
| + | |
| − | **Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
| + | |
| − | **Encabezados descriptivos
| + | |
| − | **Al menos dos formas distintas para navegar por el site
| + | |
| − | **En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Nivel AAA
| + | |
| − | **Debe cumplir con las pautas del nivel A y AA
| + | |
| − | **Lenguaje de signos para el contenido multimedia con audio
| + | |
| − | **Descripción completa para el contenido multimedia con vídeo
| + | |
| − | **Contraste muy alto entre fondo y texto (al menos 7,1:1)
| + | |
| − | **Contenidos multimedia sin audio de fondo (sólo locución principal)
| + | |
| − | **La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
| + | |
| − | **Las imágenes con texto sólo pueden utilizarse para decorar.
| + | |
| − | **Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
| + | |
| − | **Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
| + | |
| − | **Se proporciona al usuario información sobre su situación en la pagina
| + | |
| − | **Texto descriptivo sobre el destino de cada enlace
| + | |
| − | **Encabezados en cada sección
| + | |
| − | **Definir el idioma de la pagina
| + | |
| − | **En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===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.
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ==Compromisos entre uso de estándares, usabilidad y accesibilidad==
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Aunque están muy relacionados, no siempre van de la mano. Veamos algunos casos y sus posibles soluciones:
| + | |
| − | ===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).
| + | |
| − | *Se puede sustituir parcialmente el uso de distintos colores con el uso de iconos y distintos tipos de texto en la codificación de la Web.
| + | |
| − | *[http://leaverou.github.com/contrast-ratio/ Herramienta para ver lo legible que es tu combinación de colores]
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Siglas, acrónimos y abreviaturas===
| + | |
| − | *Cuando las siglas se utilizan como si fuera una palabra, estamos hablando de acrónimos.
| + | |
| − | :*Ejemplo: RENFE REd Nacional de Ferrocarriles Españoles
| + | |
| − | *Cuando las siglas se leen como la palabra que representan, hablamos de abreviaturas.
| + | |
| − | :Ej: Sr
| + | |
| − | *Los lectores de pantalla no siempre las reconocen: HTML, PDF, NaCl, SiteMap...
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Debemos usar la [http://html5doctor.com/the-abbr-element/ etiqueta <abbr>] para identificarlos: <pre><p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p></pre>
| + | |
| − | *[http://html5doctor.com/the-abbr-element/ <acronym> ya no se usa en html5].
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Imágenes y sonidos===
| + | |
| − | *A menudo suelen ser más útiles que largos bloques de texto.
| + | |
| − | *Un screen reader no puede interpretarlos
| + | |
| − | *[http://accessibility.psu.edu/video Uso de subtítulos en los vídeos y transcripciones en los ficheros de sonido.]
| + | |
| − | *Uso del atributo alt
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Navegación repetitiva o excesiva===
| + | |
| − | *Muchos enlaces que se hacen pesados desde un screen reader
| + | |
| − | *Los menús de navegación se repiten para facilitar la navegación.
| + | |
| − | *Se deben usar sitemaps y [http://webaim.org/techniques/skipnav/ usar estrategias para evitar los menús de navegación.]
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Diseño con varias columnas===
| + | |
| − | *Reducir la anchura de las líneas ayuda a la legibilidad del texto y nos permite tener más información en la pantalla.
| + | |
| − | *Puede resultar también un inconveniente para un screen reader
| + | |
| − | *Se pueden usar layouts de css con una sola columna y fijando su max-width para que no sea muy ancha.
| + | |
| − | *En caso de que usemos tablas de datos, debemos indicar cabecera, títulos, etc, para que su lectura sea comprensible desde un screen reader [http://accessibility.psu.edu/tables ver ejemplo].
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | == Herramientas de usabilidad ==
| + | |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | === 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. | | *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. | | *Conocer los puntos calientes en los que el usuario fija inicialmente la mirada, ayudan a estructurar los contenidos en una web. |
| Línea 184: |
Línea 25: |
| | *Observar sesión del cliente: | | *Observar sesión del cliente: |
| | :[http://silverbackapp.com/ Silverback] (Solo MacOS) | | :[http://silverbackapp.com/ Silverback] (Solo MacOS) |
| − | :[http://www.trymyui.com/ Multiplataforma] | + | :[http://www.trymyui.com/ TryMyUi] (Multiplataforma) |
| − | :[http://www.teamviewer.com/ Team Viewer] | + | :[http://www.teamviewer.com/ Team Viewer] (Multiplataforma, Linux mediante Wine) |
| | | | |
| | *[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ Ejemplos de eye tracking] | | *[http://designbeep.com/2011/06/06/great-examples-of-eye-tracking-studies-for-blogs-and-websites/ Ejemplos de eye tracking] |
| | *[http://www.usefulusability.com/24-usability-testing-tools/ Más información de herramientas] | | *[http://www.usefulusability.com/24-usability-testing-tools/ Más información de herramientas] |
| | | | |
| | + | </div> |
| | + | <div class="slide"> |
| | + | |
| | + | == Boceto y prototipado == |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| Línea 220: |
Línea 65: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | | + | ==Diseños preliminares: presupuesto Web== |
| − | ===Diseños preliminares:presupuesto Web===
| + | </div> |
| | + | <div class="slide"> |
| | Es fundamental la elaboración de algún boceto a la hora de dar un presupuesto final de un proyecto web a un cliente. | | 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: | | 2 casos: |
| Línea 229: |
Línea 75: |
| | :[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) | | :[http://www.balsamiq.com/products/mockups Balsamiq Mockup] (de pago) |
| | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) | | :[http://pencil.evolus.vn/ Pencil] (gratuito, multiplataforma) |
| | + | </div> |
| | + | <div class="slide"> |
| | *Página Web centrada en el diseño | | *Página Web centrada en el diseño |
| | :Uso de programas tipo Inkscape, Photoshop o Gimp. | | :Uso de programas tipo Inkscape, Photoshop o Gimp. |
| − | :Cada diseño es único y lleva su tiempo. Enseñar portfolio al cliente. | + | :Cada diseño es único y lleva su tiempo, no podemos realizar un boceto. |
| | + | :Necesitamos tener una buena tarjeta de visita: nuestra Web |
| | + | :Necesitamos un portfolio que mostrar al cliente. |
| | + | </div> |
| | + | <div class="slide"> |
| | *Calculo del presupuesto Web | | *Calculo del presupuesto Web |
| | :¿Algún tipo de clasificación por tipo de trabajo? | | :¿Algún tipo de clasificación por tipo de trabajo? |
| − | :¿Cálculo por horas? ¿Y cómo se calculan las horas que cuesta?
| |
| | :[http://www.websitehomework.com/website-design-cost-calculator.html Ejemplo de cálculo] | | :[http://www.websitehomework.com/website-design-cost-calculator.html Ejemplo de cálculo] |
| | + | :¿Cálculo por horas? |
| | + | :¿Cuánto vale cada hora de trabajo? En función de la demanda y de la experiencia. |
| | + | :¿Y cómo se calculan las horas que cuesta? |
| | + | :Ojo con los presupuestos cerrados, pero es habitual, el cliente quiere un precio final. |
| | + | </div> |
| | + | <div class="slide"> |
| | + | *¿Utilizamos algún gestor de contenidos? |
| | + | :Puede ser útil el uso de Google Trends para comparar tendencias |
| | + | :Plantillas de diseño ya elaboradas, ¿imágenes? |
| | + | :Basta buscar en el [http://envatomarketplaces.com/ marketplace adecuado.] |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| − | ===Instalación de Balsamiq Mockup en Ubuntu 12.04===
| + | ==Instalación de Balsamiq Mockup en Ubuntu 12.04== |
| | + | </div> |
| | + | <div class="slide"> |
| | * Han dejado de dar soporte Adobe-air para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. | | * Han dejado de dar soporte Adobe-air para Linux: Versión actual 2.6. Versiones Windows y Mac 3.1 o posterior. |
| | * Proceso de instalación de Adobe-air ([http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise documentación original]): | | * Proceso de instalación de Adobe-air ([http://ubuntuguide.net/install-adobe-air64-bit-ubuntu-12-04-precise documentación original]): |
| Línea 276: |
Línea 139: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | | + | *Tenemos una versión de prueba de Balsamiq para 7 días. |
| − | ==Buenas prácticas para acelerar la carga de una web==
| + | *Hay [http://support.balsamiq.com/customer/portal/articles/105924 varias opciones de licencia gratuita] |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *El tiempo de carga y la performance de una página web es muy importante para la experiencia de usuario (UX). | + | |
| − | *Si tu web es lenta, no solo pierdes visitas, sino potenciales clientes.
| + | |
| − | *Buscadores como Google tienen en cuanta la velocidad de carga de las webs para sus ranking de búsqueda.
| + | |
| − | *¡Cada milisegundo es importante! | + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | ===Minimizar los HTTP Request===
| + | |
| − | *Se cumple la [http://es.wikipedia.org/wiki/Principio_de_Pareto regla del 80/20]
| + | |
| − | *Según los estudios realizados por Yahoo! el tiempo de carga de una página media depende en un 80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuarios dedican la mayor parte del tiempo a descargar imágenes, archivos JavaScript, hojas de estilos CSS y otros recursos externos.
| + | |
| − | *Por este motivo, las mejoras en la parte del cliente generan muchos más beneficios que las mejoras en la parte del servidor.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | ====Imágenes====
| + | |
| − | * Uso de sprites (y también image maps para imágenes contiguas). Ver ejercicios.
| + | |
| − | *Elección del tamaño adecuado de las imágenes: el html no debe escalar la imagen.
| + | |
| − | *Podemos usar programas como [http://toki-woki.net/p/Shrink-O-Matic/ Shrink O’Matic] o [http://www.imagemagick.org/ ImageMagick] para generar distintas versiones de nuestras imágenes.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | *Uso de atributos: texto alternativo (alt), título de la imagen (title) y width y height.
| + | |
| − | *Elige el formato correcto de las imágenes: JPG para imágenes grandes y llenas de colores. GIF y PNG para el resto. [http://www.websiteoptimization.com/speed/tweak/format/ Más información]
| + | |
| − | *Nombres de ficheros de imágenes descriptivos (SEO) y en la medida de lo posible con links (al usuario le gustan y a google también).
| + | |
| − | *HAZ DE LA OPTIMIZACIÓN DE IMÁGENES UN HÁBITO.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | *Uso de imágenes embebidas (eliminamos peticiones http pero deben ser imágenes pequeñas), [http://en.wikipedia.org/wiki/Data_URI_scheme puedes ver pros y contras].
| + | |
| − | *[http://www.motobit.com/util/base64-decoder-encoder.asp Herramientas de codificación]. Ejemplo en código:
| + | |
| − | <source lang="html4strict">
| + | |
| − | <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
| + | |
| − | </source>
| + | |
| − | <source lang="css">
| + | |
| − | div.menu {
| + | |
| − | background-image: url('elephant.png');
| + | |
| − | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTk
| + | |
| − | SuQmCC');
| + | |
| − | }
| + | |
| − | </source>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Uso de CDN===
| + | |
| − | *Es importante la proximidad del servidor web al usuario
| + | |
| − | *Un CDN propio es una solución cara. Necesitamos clientes globales para que tenga sentido.
| + | |
| − | *Con clientes locales será importante escoger un servidor web con un buen tiempo de respuesta: pocos saltos de red, cercano.
| + | |
| − | *Un CDN es sencillo de implementar, pero si nuestra aplicación tiene escrituras a BBDD, el diseño de la arquitectura distribuida puede ser muy complejo.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Cabeceras HTTP y cache===
| + | |
| − | *Los clientes web almacenan en una caché las páginas que van visitando, sus imagenes, css, etc.
| + | |
| − | *Los servidores web indican el tiempo que tiene que estar almacenado en la cache mediante alguna de las siguientes cabeceras:
| + | |
| − | **Last Modified
| + | |
| − | **ETag
| + | |
| − | **Expires
| + | |
| − | **Max-Age
| + | |
| − | [http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/ Más información sobre cada uno de los métodos]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Uso de gzip===
| + | |
| − | *Desde HTTP/1.1 los navegadores pueden indicar en las cabeceras http los formatos de compresión que soportan:
| + | |
| − | <pre>Accept-Encoding: gzip, deflate</pre>
| + | |
| − | *El servidor web lee dicho header y en función de su configuración, mandará comprimida la página web, indicándolo también en los http headers:
| + | |
| − | <pre> Content-Encoding: gzip</pre>
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | *Normalmente el servidor web utiliza una política de comprimir ficheros en un función de su extensión.
| + | |
| − | *Comprimiremos html. También podemos comprimir css, js, xml o json. Las imágenes y pdf's no se comprimen.
| + | |
| − | *La compresión de los ficheros suele ser de un 70%.
| + | |
| − | *[http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ Más información]
| + | |
| − | </div>
| + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Colocación de hojas de estilos en la parte superior===
| + | |
| − | *Las páginas web se deben renderizar de forma progresiva: sirven al usuario para darle un indicador de progreso de carga.
| + | |
| − | *Muchos navegadores no renderizan las páginas hasta que no leen todos los css:
| + | |
| − | **Así se evitan las penalizaciones en tiempo de ejecutar varios render
| + | |
| − | **El usuario mientras tanto ve una página en blanco.
| + | |
| − | *Los @import se comportan como los <link> al final de la página en IE, por lo que debemos usar mejor <link>.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | *Se deben evitar expresiones CSS (se utilizaban bastante en IE hasta la versión 8):
| + | |
| − | <pre>background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );</pre>
| + | |
| − | *'''Resumiendo... los css siempre en el head y antes de cualquier javascript.'''
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Colocación de scripts en la parte inferior===
| + | |
| − | *La especificación HTTP/1.1 sugiere que los navegadores no deben descargar más de 2 ficheros de un mismo host de forma simultánea.
| + | |
| − | *Cuando las descargas son scripts, se hacen de una en una
| + | |
| − | *¡No siempre se pueden llevar a la parte inferior!
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Utilizar JavaScript y CSS externos===
| + | |
| − | *Si los CSS o JavaScript se utilizan en varias páginas mejor externos
| + | |
| − | *El html ocupará menos y los otros ficheros estarán cacheados entre páginas de la web y no consumirán un http request
| + | |
| − | *Es negativo para visitantes de una sola página.
| + | |
| − | *El mantenimiento es más sencillo, así como la reusabilidad del código.
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Reducir peticiones DNS===
| + | |
| − | *Si utilizamos varios hosts, permitimos descargas simultáneas
| + | |
| − | *Si utilizamos varios hosts podemos provocar penalizaciones por búsqueda en dns
| + | |
| − | *Los sistemas operativos y los navegadores realizan caches de dns
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Uso de versiones minified de JavaScript y CSS===
| + | |
| − | * [http://yuilibrary.com/projects/yuicompressor/ YUI Compressor] (Yahoo User Interface)
| + | |
| − | <pre>
| + | |
| − | java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
| + | |
| − | </pre>
| + | |
| − | * Otras opciones: [http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx Microsoft Ajax Minifier]
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="slide">
| + | |
| − | | + | |
| − | ===Contenido de la web===
| + | |
| − | *No juzgues un libro por su portada
| + | |
| − | *En una web, si la primera pantalla "no gusta" el usuario no seguirá
| + | |
| − | *Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba
| + | |
| − | *Utiliza la 3ª regla de Krug:
| + | |
| − | : Reglas de Krug:
| + | |
| − | :1.''“Don’t make me think.”''
| + | |
| − | :2. ''“It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”''
| + | |
| − | :3. ''“Get rid of half the words on each page, then get rid of half of what is left.”''
| + | |
| − | | + | |
| | </div> | | </div> |
| | </div> | | </div> |
