Fallos de Usabilidad - Foto perfil de Tuenti

Nada más entrar en Tuenti una de las primeras cosas que un usuario hará es cambiar la foto de su perfil. Esto es lo que sucede para todos los usuarios que entran a tuenti por primera vez.

• Ven que su perfil tiene una foto por defecto y deciden cambiarla
• Pulsan el botón cambiar foto
• La aplicación deja elegir entre las fotos en las que salgo y las fotos subidas por mi. Sin embargo, dado que soy un usuario nuevo no tengo ninguna foto subida.
• El usuario busca durante un tiempo la posiblidad de subir una foto directamente
• Sale del menú "Cambiar Foto perfil"
• Busca en la interfaz como subir una foto. En el menú superior me el menú vídeo, sin embargo no fotos. Ah, a la derecha hay un botón llamado "subir fotos"
• Sube una foto
• Entra en otra vez en el menú "Cambiar foto" del perfil y selecciona la foto subida.

Lo que debería pasar es:

• Ven que su perfil tiene una foto por defecto y deciden cambiarla
• Pulsan el botón cambiar foto
• Dado que no hay fotos en el sistema, se ofrece la posibilidad de subir una foto.
• La foto subida por el usuario pasa a ser la foto del perfil del usuario.

Motiviación

Con esta serie de entradas defectos de usabilidad quiero crear una colección de fallos de usabilidad que voy encontrando en la Web. La idea no es publicar estos fallos para criticar a los desarrolladores de estos portales sino hacerlos visibles para que todos aprendamos de ellos y podamos mejorar la usabilidad de nuestras páginas y aplicaciones. Todos los desarrolladores, yo el primero, cometemos el error de pensar que todos los usuarios entenderán nuestra aplicación y nuestra página tal y como nosotros la tenemos en nuestra mente. El problema es que a menudo, nuestra imagen mental difiere totalmente de la de nuestros usuarios. Voy a escribir a los creadores de las páginas y aplicaciones para comentar lo que en mi opinión es un fallo de usabilidad. Trataré de actualizar estas entradas con las contestaciones que reciba.

Si has encontrado otro fallo de usabilidad envía un email a support@softamo.com y lo incluire en el blog.

Etiquetas: usability

Curso de Diseño Web VIII - Fuentes en CSS

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas , la historia y estándares HTML y como añadir estilo con CSS. En esta entrada hablamos del tipo, peso, color y tamaño de fuente.

Tipo de fuente

El uso de un tipo u otro de fuente puede dotar a nuestros diseños de un carácter propio. La siguiente imagen muestra algunos de los tipos más usados en el diseño Web.

La siguiente linea de código muestra como declaramos el tipo de letra en CSS:

body { font-family: Verdana, Geneva, Arial, sans-serif;}

Puedes especificar más de una fuente usando la propiedad font-family. Escribe el nombre de la fuente separada por comas. Escribe el nombre de la fuente como se pronuncia, incluyendo mayúsculas y minúsculas. Generalmente la especificación del tipo de fuente contiene muchas alternativas, todas de la misma familia.

¿Porqué necesitamos dar una lista de alternativas?

Porque el diseñador Web no tiene control de las fuentes que el usuario tiene instalado en su ordenador y puede suceder que la fuente especificada no este disponible. Si la fuente mencionada en CSS no se encuentra disponible, el navegador prueba con la segunda alternativa y así sucesivamente. Por esto, es común usar como última fuente el nombre de una familia tipográfica. En CSS hay cinco familias que se muestran en el siguiente gráfico.

La familia sans-serif incluye fuentes sin serif. Los serif son puntas y ganchos decorativos al final de las letras. Las fuentes sans-serif son generalmente consideradas más legibles en pantallas de ordenador que las fuentes serif. La familia serif incluye fuentes con serifs. Mucha gente asocia estas fuentes con prensa escrita.

Tamaño de fuente

Podemos fijar el tamaño de fuente de una letra por medio de la propiedad font-size. Ésta se puede fijar usando px, %, %em o palabras clave. Las siguientes lineas de código ilustran los diferentes modos.

body {font-size: 14px;}
h1 {font-size: 150%;}
h2 {font-size: 1.2em;}

En la cabecera de primer nivel h1 decimos que el tamaño de letra es 150% el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h1 es (14*150)/100 = 21px.
En la cabecera de segundo nivel h2 decimos que el tamaño de letra es 1.2em el heredado. Como hemos heredado 14 pixeles de body. Sabemos que el tamaño de letra de h2 es (14*1.2) = 16.8 px. O lo que es lo mismo aproximadamente 17 pixeles.

Podemos usar las siguientes palabras clave para definir el tamaño de letra

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

¿Por que no usar siempre pixeles?

El usar unidades relativas como % o em nos ofrece una mayor libertad a la hora de cambiar nuestros diseños. Es habitual definir el tamaño de letra en body, de modo que sea heredado por todos los elementos, y sobreescribir este valor con un unidades relativas en los elementos que deseamos. Si en algún momento queremos cambiar el tamaño de nuestra página podemos hacerlo fácilmente editando sólo un valor, el del elemento body.

Color

Podemos fijar el color de una letra por medio de la propiedad color. Esta se puede fijar usando palabras clave o una escala de rojo, verde y azul. La siguiente imagen muestra los 17 colores definidos por medio de palabras clave en CSS.

Las siguientes lineas de código ilustran los diferentes modos de definir la cantidad de rojo, verde o azul necesaria para formar nuestros colores. Podemos hacerlo en tanto por ciento, en una escala de 0-255 y en hexadecimal. Las siguiente lineas son equivalentes. Un 80% es 204 en escala 0-255. 204=(255*80)/100.

background-color: rgb(80%, 40%, 0%);
background-color: rgb(204, 102, 0);
background-color: #cc6600;

Peso de la fuente

Podemos fijar el peso de una letra por medio de la propiedad font-weight. Se pueden usar los siguientes valores:

• lighter
• normal
• bold
• bolder

Decoración del texto

Añade incluso más estilo a tu texto con la propiedad text-decoration. Por ejemplo los elementos a, los enlaces, tienen por defecto la propiedad text-decoration fijada en underline para aparecer subrayados.

• none
• underline
• overline
• line-through
• blink

Resumen

• CSS te da mucho control sobre el aspecto de tu tipografía, incluyendo tipo de fuente, peso de la fuente y estilo de la fuente.
• Una familia de fuentes es un conjunto de fuentes que comparte ciertas características.
• Las familias de fuente para la Web son serif, sans-serif, monospace, cursive y fantasy. Serif y sans-serif son las más comunes.
• Las fuentes que tus visitantes vean en tu página Web depende de las fuentes que tengan instaladas en sus ordenadores.
• Es una buena idea, especificar fuentes alternativas a la familia que desees para que se usen estas alternativas cuando el usuario no tenga instaladas las fuentes mencionadas como primera opción.
• Escribe siempre la última fuente como una familia genérica como serif o san-serif, de modo que el navegador pueda encontrar una substitución adecuada si no se encuentran otras fuentes.
• El tamaño de las fuentes se especifica normalmente usando px, em, % o palabras clave.
• Si usas pixeles (px) para especificar el tamaño de letra, le estas diciendo al navegador como cuantos pixeles de alto quieres que tengan tus letras.
• em y % son tamaños de letra relativos. Especificar el tamaño de letra usando em y % significa que el tamaño de las letras será relativo al tamaño de letra del elemento padre.
• Usar tamaños de letra relativos puede hacer que tus páginas sean más fáciles de mantener.
• Puede hacer que su texto este en negrita usando la propiedad CSS font-weight.
• Use palabras clave para definir el tamaño de letra básico en una regla para el elemento body. De modo que todos los navegadores pueden escalar el tamaño de la fuente en el caso de que los usuarios quisieran fuentes más grandes o más pequeñas.
• La propiedad font-style se usa para crear texto en cursiva o oblicuo.
• Los colores Web se usan mezclando diferentes cantidades de rojo, verde y azul.
• Si mezcla 0% de rojo, 0% de verde y 0% de azul obtiene negro.
• CSS tiene 17 colores predefinidos, incluyendo negro, blanco, rojo, azul y verde.
• Puede especificar el color que quiere usando porcentajes de rojo, verde y azul. Para ello usara valores numéricos de 0-255 para el rojo, verde o azul o usara un código hexadecimal que represente al color deseado.
• Un modo fácil de encontrar el código hexadecimal del color que quiera usar es mediante la herramienta de selección de color de una programa de edición de imágenes o alguna de las numerosas aplicaciones online.
• Los códigos hexadecimales tienen seis dígitos de 0-F. Los primeros dos dígitos representan la cantidad de rojo, los segundos la cantidad de verde y los dos últimos la cantidad de azul.
• Puede usar la propiedad text-underline para subrayar texto. El texto subrayado se confunde a menudo con el texto usado en enlaces. Debido a esto se debe usar esta propiedad con cautela.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, tipography, Web Design

Curso de Diseño Web VII - Añadiendo Estilo con CSS

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. Hemos hablado del funcionamiento de Internet, los enlaces entre páginas, la metodología de trabajo cuando nos enfrentamos a un proyecto Web, la publicación nuestro proyecto Web en Internet, la inclusión de imágenes en nuestras páginas y la historia y estándares HTML. En esta entrada introducimos CSS.

Para aplicar estilo a nuestras páginas podemos usar el lenguaje de programación conocido como CSS. CSS es la abreviación de hoja de estilos en cascada. El siguiente código (explicado en los pasos a continuación) fija como rojo el color de fondo de los párrafos de nuestra página y nos permite ver el aspecto de CSS.

p { background-color: red;}

1. Seleccionamos el elemento al que queremos aplicar estilo. En este ejemplo, el elemento <p>. Observe, que en CSS no se pone <> alrededor del nombre de la etiqueta.
2. Especificamos la propiedad a la que queremos aplicar estilo, en este caso el color de fondo del elemento. En ingles background-color.
3. Entre el nombre de la propiedad y el valor de la misma ponemos dos puntos.
4. Para definir el color de fondo como rojo, fijamos el valor de la propiedad a red.
5. Al final ponemos punto y coma
6. Recuerde colocar todos los elementos de estilo para el elemento <p> entre {}.

Para añadir estilos CSS directamente en HTML, añada las etiquetas de apertura y cierre del elemento <style> con el atributo type de valor text/css en el elemento <head>. Esto se muestra a continuación:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Rock and Beer Guadalajara</title> 
    <style type="text/css"> 
        
        p { background-color: red;} 
        
     </style> 
  </head> 
  <body> 
  ... 
  .. 
  . 
  </body> 
</html> 

A menudo, nos va interesar que todas nuestras páginas usen las mismas reglas de estilo. Los periodicos, por ejemplo, usan a lo largo de todas sus páginas el mismo tamaño de letra para los encabezados, el mismo espacio entre lineas etc. ¿Cómo podemos hacer que todas nuestras páginas tengan las mismas reglas de estilo?. Imaginemos un portal con dos archivos; index.html (la página de inicio) y bebidas.html. Para lograr aplicar a ambas páginas las mismas reglas de estilo, realizaríamos los siguientes pasos:

1. Sacar las reglas CSS del archivo index.html y colocarlas en un archivo llamado estilo.css.
2. Crear un enlace externo a este archivo desde el archivo index.html
3. Añadir el mismo enlace externo en el archivo bebidas.html

Usamos el elemento link para enlazar con información externa. En este caso enlazamos con un archivo externo de estilos. El código sería algo así:

<link type="text/css" rel="stylesheet" href="estilo.css"/>

Con el atributo type indicamos que el tipo de esta información es text/css. En otras palabras una hoja de estilos en cascada, un CSS. El atributo href indica donde se encuentra el archivo de estilos. En este caso un camino relativo, aunque podría ser una URL completa. El atributo rel especifica la relación entre el archivo HTML y lo que estamos enlazando. Estamos enlazando una hoja de estilos, por lo que le damos el valor stylesheet.

CSS permite agrupar declaraciones de estilo comunes para varios elementos en una sola regla. Por ejemplo:

 
h1 { 
    font-family: sans-serif; 
    color: gray; 
} 
h1 { 
    font-family: sans-serif; 
    color: gray; 
} 

Es equivalente a:

 
h1, h2 { 
    font-family: sans-serif; 
    color: gray; 
} 

Herencia

Sin duda la propiedad más interesante de CSS es la herencia de reglas de estilos entre elementos. Podemos imaginarnos nuestros archivos HTML como un árbol invertido de elementos que se anidan los unos en los otros. Si quisieramos fijar la tipografía de nuestras s de primer nivel a sans-serif escribiríamos una regla como la siguiente:

h1 { font-family: sans-serif;}

Con CSS, sólo podemos aplicar estilo a los elementos dentro del elemento body. Debido a esto los siguientes gráficos no muestran los elementos dentro de head. La regla anterior seleccionaría todo los elementos <h1> de la página. En este ejemplo sólo hay uno como se muestra en el siguiente gráfico.

Si quisieramos cambiar la tipografía de las s de primer y segundo nivel escribiríamos la siguiente regla.

h1, h2 { font-family: sans-serif;}

Ahora el selector selecciona todos elementos los <h1> y <h2>

Si quisieramos cambiar la tipografía de los parrafos escribiríamos la siguiente regla.

p { font-family: sans-serif;}

El selector se aplica a todos los elementos <p> del árbol. Más aún, los elementos anidados dentro de los parrafos como son <a>, <em> y <a> heredan también la propiedad font-family de sus elementos padres.
El elemento <img> es un hijo del párrafo, pero no tiene ningún texto por lo que no se ve afectado.

Usando la herencia de CSS, podemos simplificar las reglas de estilo que hemos usado en los ejemplos anteriores.

h1 { font-family: sans-serif;}
h2 { font-family: sans-serif;}
p { font-family: sans-serif;}

Podemos lograr el mismo efecto si movemos la propiedad font-family de los párrafos y cabeceras al elemento body. Ahora, todos los elementos anidados bajo body heredan la propiedad font-family. A continuación se muestra el código y el gráfico que ilustra el cambio.

body { font-family: sans-serif;}

¿Cómo sobreescribir una propiedad heredada?

La propiedad font-family se define en la regla body, de modo que cada elemento dentro de body la hererda. Puedes sobreescribir el valor de font-family que has heredado. Si decides usar, por ejemplo, la tipografía serif para los elementos <em>, el siguiente código lo lograría.

body { font-family: sans-serif;}
em { font-family: serif;}

El siguiente gráfico muestra ahora los elementos con la tipografía fijada en sans-serif. Puedes ver que el elemento em ya no esta afectado.

Resumen

• CSS contiene declaraciones simples, llamadas reglas.
• Una regla proporciona el estilo para una selección de elementos HTML.
• Una regla típica consiste en un selector junto con un o más propiedades y valores.
• El selector especifica a que elementos podemos aplicar la regla.
• Cada propiedad finaliza con un punto y coma.
• Todas las propiedades y valores van entre {}.
• Puede seleccionar cualquier elemento usando su nombre como selector.
• Separando mediante comas los nombres de elementos podemos seleccionar varios elementos a la vez.
• Una de las maneras más fácil de incluir estilo en HTML es mediante la etiqueta <style>
• Para portales Web de alguna complejidad, debería enlazar a una hoja de estilos externa.
• El elemento <link> se usa para incluir una hoja de estilos externa.
• Muchas propiedades se heredas. Por ejemplo, si una propiedad que se hereda se define para el elemento <body>, todo los elementos hijos de <body> la heredarían.
• Siempre puede sobreescribir propiedades heredadas creando una regla más especifica para el elemento que queremos cambiar.
• Puede validar usando el validador de CSS del W3C.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design

Curso de Diseño Web VI - Estándar HTML

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas, en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web, en la cuarta sobre publicar nuestro proyecto Web en Internet y en la quinta entrada hablamos de la inclusión de imágenes en nuestras páginas. En esta entrada hablamos de la historia de HTML y del uso de estándares.

La Web es una industria con una historia corta pero intensa. En los últimos veinte años la explosión de contenido ha llevado consigo una evolución tecnológica y de estándares. A continuación repasamos la historia de HTML:

• 1989 / 1991 HTML 1.0 - 2.0
  Los primeros días de HTML. Se podía guardar todo lo que se necesitaba saber sobre HTML en un cajón. Las páginas no eran bonitas, pero al menos se enlazaban las unas a las otras. Nadie se preocupaba mucho de la presentación y sólo de que todo el mundo tuviera su propia Web.
• 1995 HTML 3
  El periodo conocido como la guerra de los navegadores. Durante el cual Microsoft y Netscape se peleaban por el control del navegador. Durante la guerra, ambos navegadores mantuvieron una carrera para soportar diferentes elementos y extensiones propias. A veces se tenían que escribir dos páginas Web, una para Netscape y otra para IE. Un mal periodo para los diseñadores.
• 1998 HTML 4
  El final de las guerras de navegadores y la aparición del W3C (World Wide Web Consortium). Su plan separar el contenido de la presentación en dos lenguajes. Un lenguaje para la estructura (HTML) y un lenguaje para la presentación (CSS). No obstante la parte más complicada era convencer a los fabricantes de navegadores que estaba en su mejor interés adoptar estos estándares.
• 1999 HTML 4.01
  HTML 4.01 entra en escena en 1999 y es la versión más actual de HTML. Todo el mundo esperaba que HTML 4.0 fuera la versión definitiva, sin embargo se necesitaban algunos arreglos. Estos arreglos llegaron con la versión 4.01. La llegada de HTML 4.01 supuso que escribiendo código estándar, este funcionará prácticamente sin problemas en todos los navegadores.
• 2000 XHTML 1.0
  Por supuesto, aparecieron nuevas tecnologías. Apareció otro lenguaje de etiquetado conocido como XML (Extensible Hypertext Markup Language). Juntando los conceptos de XML y HTML nació XHTML 1.0. Éste unía la popularidad y funcionamiento en navegadores de HTML a la extensibilidad y reglas estrictas de XML.

¿Cómo decimos al navegador la versión de HTML usada?

Para decir al navegador la versión que estamos usando hay que añadir un definición del tipo de HTML que usamos al comienzo de nuestros archivos HTML. A continuación se muestra la definición de tipo para HTML 4.01 en su variante estricta.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Para comprobar que nuestro código cumple los estándares que queremos, la W3C pone a nuestro disposición diversas herramientas. Por ejemplo, el validador de HTML permite saber si nuestro código es correcto.

Guía para HTML 4.01

• No olvides el elemento <html>
• Recuerda usar los elementos <head> y <body> dentro de <html>.
• Usa siempre <title> dentro de <head>
• Pon dentro de tu elemento <body> elementos de bloque <h1>,
<h2>, ... <h6>, <p>, <blockqoute>
• No pongas elementos de bloque dentro de elementos en linea. Dentro de los elementos en linea sólo puede ir texto u otros elementos en linea.
• No poner elementos de bloque dentro de <p>
• Sólo los elementos <li> están permitidos dentro de los elementos <ul> y <ol>
• Pon todo lo que quieras dentro de <li>
• El elemento <blockqoute> requiere uno o más elementos de bloque.
• Sea cuidadoso anidando elementos en linea dentro de otro elemento en linea. Por ejemplo, no se puede anidar un enlace dentro de otro.

¿Qué son las etiquetas meta en HTML?

Usamos las etiquetas meta dentro de head. Estas etiquetas indican al navegador que le vamos a decir algo sobre la página. Por ejemplo par indicar la codificación de nuestros archivos podemos usar:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

El atributo content es donde especificamos la información sobre el tipo del contenido. Con la parte text/html indicamos que es un archivo HTML. La parte ISO-8859-1 indica al navegador la codificación que estamos usando.

Resumen

• HTML 4.01 es el estándar HTML más soportado por los navegadores.
• El W3C (World Wide Web Consortium) es la organización internacional que define que es estándar HTML.
• Muchos navegadores tienen dos modos de representar HTML: modo "rareza" (quirks en ingles) para HTML antiguo y modo estandarizado para HTML 4.01
• Si no dices al navegador que versión de HTML estas usando, algunos navegadores usaran el "modo rarezas", que causara inconsistencias en la representación de la misma.
• El DOCTYPE (Document Type Definition) se usa para decir al navegador en que versión de HTML esta escrita la página.
• El DOCTYPE estricto se usa si estas escribiendo HTML 4.01 totalmente estándar.
• La etiqueta <meta> dentro del elemento <head> se usa para proporcionar al navegador información adicional sobre una página Web, como el tipo del contenido y la codificación del texto de la misma.
• La codificación de texto se usa para decir al navegador que estándar de codificación (UTF-8, ISO 8859-1 ...) se usa.
• La mayoría de los lenguajes usados en el este de Europa pueden ser pueden ser representados con la codificación ISO-8859-1
• El validador W3C es un servicio online gratuito que comprueba que la página cumpla los estándares.
• Use el validador para asegurarse que tu HTML este bien construido y que los atributos cumplan los estándares.
• Cumplir los estándares, hace nuestras páginas carguen más rápidas y que haya menos diferencias entre navegadores.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design