– parte 1: ¿Qué es y para que sirve?
Existen diferentes técnicas de análisis de usabilidad de una
web. El test heurístico es una técnica que nos puede resultar muy interesante
por su eficacia, su relativa rapidez de utilización y su facilidad de uso.
Los heuristics son una serie de factores de usabilidad que
deben ser considerados a la hora de realizar un análisis de una web.
Tras la aparición del web, la consultora Jakob Nielsen
desarrolló varios estudios que describían la existencia de un conjunto de
principios de medición de la usabilidad. El cumplimiento de éstos, permitiría
asegurar la calidad de usable de una web. A estos criterios se les llamó
principios heurísticos y suman diez.
A partir de los principios antes mencionados, se enunciaron
varios heuristics. Nielsen propuso que un grupo de expertos pudiera revisar la
usabilidad de un Sitio Web –ya fuera en estado operativo o en etapa de
construcción- y contrastar su funcionamiento contra este nuevo grupo de
heuristics. A dicha prueba se le conoce generalmente como “test heurístico”.
Se ha detectado que una evaluación heurística, detecta
aproximadamente el 42% de los problemas graves de diseño y de usabilidad y el
32% de los problemas menores, dependiendo del número de factores que se le
apliquen al site. Posteriormente se recomienda realizar un test de usuarios
para completar la evaluación.
Ventajas del test heurístico
La principal
ventaja de la evaluación heurística es su bajo coste en relación a un test de
usuarios.
En la evaluación
heurística no es necesaria la interpretación externa, porque la información
elaborada por los evaluadores, a partir de los factores de usabilidad, está
contenida en sus informes.
Puede ser usado en
fases tempranas del proceso de desarrollo.
Los evaluadores no
requieren entrenamiento formal en usabilidad.
Desventajas del test heurístico
Los evaluadores
individuales identifican un número relativamente pequeño de aspectos de
usabilidad
El evaluador sólo
simulará el comportamiento de un usuario. El feedback del usuario real sólo
puede ser obtenido de un test de usuario
No siempre propone
soluciones inmediatas a los aspectos de usabilidad que son identificados
Las evaluaciones
heurísticas pueden ser propensas a reportar falsas alarmas- que los problemas
detectados no sean problemas de usabilidad en la aplicación
Procedimiento
Es recomendable
que el evaluador navegue por el site al menos dos veces, para familiarizarse
con su estructura y antes de comenzar con la evaluación propiamente dicha.
A la hora de
llevar a cabo un análisis heurístico, será importante contar con una lista de
factores que pueda recoger los aspectos a evaluar. De esta manera, se evita que
un evaluador olvide estudiar alguna faceta de la interfaz.
El análisis de
cada problema detectado por el evaluador se ha de realizar por separado y no en
conjunto.
En el caso de que
se disponga de una site terminado, es aconsejable realizar la evaluación
heurística antes de los test de usuario. Un test de usuario previo solo
serviría para detectar problemas de usabilidad que en una evaluación heurística
hubieran sido fácilmente detectadas por los expertos a un coste mucho menor.
Como nos dice
Eduardo Manchón en su artículo Evaluación heurística (o por expertos) de la
usabilidad:
La
jerarquización de la gravedad de los problemas del sitio facilitará la
aplicación posterior de políticas de rediseño del sitio web efectivas. La
gravedad de los problemas de usabilidad es medida por tres factores la
frecuencia con la que el problema ocurre, el impacto del problema cuando sucede
y la persistencia del problema.
En los siguientes artículos, veremos como realizar un
informe, los principios heurísticos básicos y comenzaremos a elaborar una lista
de factores, (o lista de comprobación), lo más completa posible que nos permita
elaborar un test heurístico eficiente.
Test heurístico – parte 2: Como hacer un informe
En el primer artículo de esta serie, Test heurístico – parte
1: ¿Qué es y para que sirve?, se explicó de manera general que era un test
heurístico, para que servía y las ventajas que tenía respecto a otros test de
usabilidad. Debemos recordar que en la heurística, todo gira alrededor de los
factores de evaluación, que son una lista de principios de usabilidad
comúnmente aceptados que aplicaremos a nuestros análisis.
El resultado de un test heurístico, es un informe emitido
por el evaluador en el que describe el problema analizado, las reglas
específicas que son afectadas por su comportamiento y cómo podría mejorar el
cumplimiento de ellas con un cambio en la interfaz. Hay que añadir que si bien
esto último no es posible, sí será importante que los problemas encontrados
sean anotados con el fin de intentar hacer las modificaciones posibles para
aportar a su solución.
Así pues, en este artículo veremos que aspectos debe incluir
un buen informe de evaluación heurística. Dicho informe está dividido en varias
secciones:
Descripción del método a seguir:
En esta parte de la evaluación se debe hacer una breve
descripción de las características del proceso realizado. Al fin y al cabo, el
cliente tiene derecho a saber porque vale tanto el informe que le estamos confeccionando.
Entre los elementos que hay que citar incluiremos los siguientes:
Fecha y hora de la
evaluación.
Tipo de conexión a
Internet, para descartar problemas de velocidad y optimización.
Datos sobre la
forma y la puntuación de la evaluación.
Justificación de
los diferentes factores utilizados en nuestra lista de comprobación
Criterios de evaluación
Es necesario que los analistas que la lleven a cabo el test,
tengan un sistema de evaluación que permita interpretar y homologar los comentarios
vertidos a cada factor evaluador.
Nuestra escala de evaluación irá a de 1 a 5:
No funciona:
Existen graves defectos en la estructura y diseño de la página. No se muestran
los contenidos correctamente. El evaluador debe recomendar rehacer todo el
sitio.
Funciona pero no
sirve: A pesar de que los contenidos del sitio se muestran de manera aceptable,
la experiencia general y navegación no son correctas. Se debe recomendar
cambiar la mayor parte del sitio.
Funciona pero debe
mejorar: El contenido y su distribución es de relativa calidad, pero es
susceptible a mejoras. Se deben aportar mejoras al sitio.
Cumple: El
contenido evaluado es satisfactorio, a pesar de todo hay detalles que pueden
mejorar. Se deben aportar mejoras al sitio.
Es lo que el
usuario busca: El contenido cumple o excede la expectativa del usuario.
Dichas notas deben ser puestas, tras analizar los factores
de evaluación, que vamos creando alrededor de las diferentes áreas de un sitio
web. Los factores se articulan alrededor de estas áreas:
Generales
Identidad e
información
Lenguaje y redacción
Rotulado
Estructura y
navegación
Lay – out de la
página
Búsqueda
Elementos
multimedia
Ayuda
Accesibilidad
Control y
retroalimentación
Desarrollo del Informe
Puntuados los factores, el evaluador debe hacer un
comentario que explique al usuario el estado real de su sitio, de está manera
se podrán sacar conclusiones. Habrá que recopilar los aspectos positivos y
negativos de cada factor evaluado. Con estos apuntes se hará más fácil la tarea
de mejorar el sitio web.
Conclusión Final
En esta parte se entrega la recomendación final respecto de
los problemas encontrados. En función de los resultados obtenidos con este
informe, el cliente podrá decidir si es conveniente o no, hacer un análisis más
detallado o cualquier otro tipo de inspección de usabilidad.
Número de expertos
Respecto del número de expertos que debe llevar a cabo dicho
informe para que éste tenga validez, todo dependerá del costo-beneficio. Más
evaluadores deberían ser usados en casos en que la usabilidad de una web sea
crítica para la rentabilidad de la misma.
Con estos pequeños apuntes, nos podemos hacer una idea de
cómo se hace un informe heurístico. En los siguientes artículos, veremos los
principios heurísticos básicos que propuso Jakob Nielsen y confeccionaremos una
detallada lista de factores para que podamos aplicarlos a nuestras propias
páginas.
Test heurístico – parte 3: Los principios heurísticos
básicos
Recordemos que el primer artículo de nuestra serie dijimos
que el estudio Jakob Nielsen desarrolló 10 principios de usabilidad bautizados
como principios heurísticos básicos o reglas generales. A partir de estos
principios señalados, se desarrollaron los heurístics o evaluadores de
usabilidad, que permitieron a los evaluadoes realizar sus informes para
describir los problemas de usabilidad de los site analizados. Pues bien, en
este artículo repasaremos cuales son dichos principios básicos.
Los principios definidos por Nielsen los puedes encontar en
www.useit.com y son los siguientes:
¿Qué está
pasando?: el sistema siempre debería mantener informados a los usuarios de lo
que está ocurriendo, a través de un feedback apropiada dentro de un tiempo
razonable.
Ejemplo:
presentar mensajes de espera cuando se está efectuando una transacción o o bien
de confirmación o cuando se ha efectuado una operación solicitada por el
usuario
Relaciona el
sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios
mediante frases y conceptos que sean familiares al usuario, más que con
términos relacionados con el sistema. Seguir las convenciones del mundo real,
haciendo que la información aparezca en un orden comprensible y lógico.
Control y libertad
del usuario: los usuarios frecuentemente hacen elecciones por error y deben
contar con una "salida de emergencia" para dejar las cosas tal como
estaban, sin contar con el botón "back" que cada browser incluye.
Ejemplo: que
el usuario sienta que tiene el control de la web es fundamental, por ello las
animaciones que requieren plug-ins especiales y no tienen una forma de
"saltarlas", los pop-ups y las ventanas que se abren de repente, son
muy nocivas para una buena experiencia.
Consistencia y
estándares: nuestro sitio debe ser consistente en cuanto a los nombres de las secciones,
botones y contenidos de las mismas.
Ejemplo: un
enlace a "ayuda" debe llevar a una página que se llame así y no
"preguntas frecuentes".
Prevención de
errores: mcho mejor que los buenos mensajes de error, es un diseño cuidado que
prevenga que ocurran éstos.
Es mejor
reconocer, que recordar: el usuario no debería recordar la información que se
le da en una parte del proceso, para seguir adelante. Si bien es imposible
tener todas las opciones a la vista en sitios demasiado extensos, al menos
debería haber una categorización clara de los contenidos que indique el camino
a seguir.
Flexibilidad y
eficiencia de uso: a pesar de que los aceleradores, no son muy utilizados por
los usuarios más novatos, hay que tener en cuenta a los más avanzados que sí lo
hacen. Nuestra página debe ser fácil de indexar en una lista de favoritos. Esto
se logra evitando el uso intensivo de frames y utilizando nombres de ficheros
que no caduquen.
Diseño práctico y
simple: los diálogos no deben contener información irrelevante que distraiga o
entorpezca la navegación. Es preferible que esta información esté enlazada para
que quien la requiera pueda verla, pero que no moleste a los que no la
necesitan. Si quieres más información sobre como es un patrón de lectura de los
usuarios web, échale un vistazo a este artículo.
Ayuda, por favor:
los mensajes de error se deben entregar en un lenguaje claro y simple,
indicando en forma precisa el problema y sugerir una solución constructiva al
problema.
Compatibilidad:
nuestra página debe ser compatible con distintas versiones de navegadores y
sistemas operativos.
Estudio de patrón de lectura de usuarios web
Pensamos en crear
“literatura de calidad” (o al menos “el folleto de un producto”), cuando la
realidad del usuario está mucho más próxima a la “cartelera publicitaria que
pasa a 100 kilómetros por hora”.
Steve Krug
Según un estudio realizado por Jackob Nielsen, los usuarios
no leen, sino que escanean la página para determinar si merece la pena examinar
ese contenido. El usuario más común solo lee primeras palabras de cada frase,
empezando por arriba y perdiendo interés a media que baja.
Patrón de lectura
Como se puede ver en esta foto, el patrón de lectura que
genera el test de usuario tiene forma de “F”.
Otro estudio nombrado por Jackob Nielsen indica que la
mejora de los buscadores y la popularización de la banda ancha han modificado
el comportamiento de los usuarios. En dicho estudio se indica que la mayoría de
los visitantes de una web sólo leen entre 20% y un 28% del texto de la página y
que un 17% están menos de 4 segundos antes de pasar a otra página. Esto nos da
una idea bastante clara del carácter del usuario.
Las personas como depredadores de información
El uso corriente de Internet viene motivado por el deseo de
ahorrar tiempo. El usuario sólo busca las partes que se ajustan a su interés.
El resto de información es simplemente irrelevante. Hojear es la forma de
encontrar las partes que nos interesan.
A este respecto, es muy interesante la teoría que
desarrollaron a principios de los años 90, Peter Pirolli y Stuart Card. Según
su teoría del rastreo o forrajeo de información (Information Foraging) , los
usuarios se comportan como animales salvajes que rastrean su entorno en busca
de comida. Tienen un objetivo claro y empiezan su búsqueda buscando rastros de
lo que necesitan. Las personas utilizan el rastro de información para decidir
en qué enlace hacen clic.
Cualquier rastro (enlace, texto, imagen) que les permita
realizar un progreso hacia su objetivo será seguido. Si el rastro se mantiene
constante (dando la sensación de dar rodeos sin llegar a ninguna parte) o
disminuye, lo más probable es que abandone la página. Así pues, cualquier
elemento que sea percibido como no relevante será ignorado.
De esta manera, si la información que busca una persona está
en nuestra web, pero camino que lleva hasta ella tiene poco rastro de
información, la persona probablemente lo busque en otro sitio.
Como mejorar el rastro de información de nuestras páginas:
Indica la
información más importante en los dos primeros párrafos de cada página: De esta
manera es más probable que los usuarios lean el contenido que tu quieres que
lean. Hay posibilidades de que los usuarios lean todo el material de tu web,
pero ten por seguro que serán muy pocos.
Busca las palabras
más comunes respecto a la temática de tu web: Estas palabras llaman mucho la
atención e incitan a hacer clic en los enlaces que las contienen.
No entierres el
contenido en documentos demasiado largos: Divide los textos en varios
documentos enlazados o crea un índice que permita identificar y moverse por las
secciones de cada documento.
Realiza un estudio
las estadísticas de tu página: Para conocer a los usuarios que entran en tu web
y averiguar que información andan buscando. Saber de que enlaces vienen, te
ayudará a hacer ajustes en las páginas para facilitarles el camino a lo que
buscan.
HTML y Flash, una visión actualizada
Mucho se ha discutido sobre la conveniencia de la
utilización de elementos de una tecnología propietaria como es flash dentro de
HTML. Hace tiempo que existen agrios debates entre los defensores y detractares
de Flash, avivados desde el ya célebre artículo de Jakob Nielsen Flash: 99%
Bad, del año 2000. Pero desde el año 2002 y la versión MX, esta tecnología ha
introducido mejoras en varios aspectos conflictivos que en su momento se le
criticaron. Por eso me hago la pregunta, ¿con la tecnología actual, es
conveniente utilizar el formato flash en nuestras webs?, ¿Todos cambios
introducidos han sido suficientes?, ¿Cómo se utiliza actualmente flash?
En este artículo veremos los avances de esta tecnología en
varios puntos escabrosos y un pequeño estudio sobre su uso en las webs
españolas más importantes:
Representación de la lucha entre HTML y flash
Puntos problemáticos y avances de flash para el desarrollo
web:
Accesibilidad: Con
la introducción de la paleta de accesibilidad en la versión MX 2004, se mejoró
notablemente la accesibilidad en los archivos flash. Ahora es posible que
algunos lectores de pantallas puedan detectar ciertos elementos de una película
swf, pero aún así la tecnología flash todavía no es completamente accesible
para personas con discapacidad.
Posicionamiento:
También se han hecho avances en este sentido. Ahora los buscadores son capaces
de procesar los archivos swf y leer las cadenas de texto que contienen. El
problema radica en que si todo el sitio está desarrollado en un único flash, el
peso de nuestras keywords se diluye, ya que los robots no reconocen que el
flash se divide en diferentes secciones. Existen varias soluciones parciales a
este problema, pero ninguna es mejor en cuanto a posicionamiento como disponer
de un web realizada únicamente en HTML.
Actualización: Una
de las mayores criticas de Jakob Nielsen a las páginas desarrolladas en Flash,
era que resultaba difícil mantenerlas actualizadas. Es necesario editar
directamente el archivo fuente para realizar los cambios. Volcar contenido en
XML, o la integración de Flash con fuentes de datos dinámicos usando Flash
Remoting y Web Services también ha solucionado parcialmente este problema.
Carga de
contenidos: A pesar de varias optimizaciones que podremos someter a nuestras
bibliotecas y archivos flash, estos se cargarán más lentamente que los
contenidos creados en HTML. Además, hay que tener en cuenta que la velocidad de
fotogramas asignada a una película, casi nunca se cumple. Esto dependerá de
factores como la cantidad de código a ejecutar, la complejidad de éste, la
potencia del ordenador, los recursos del sistema operativo, etc.
Estadísticas.
Utilizando Flash Remoting podremos realizar estadísticas de visitas. El
problema viene si desarrollamos toda la web en un único archivo. De esta manera
sólo podremos saber cuántas personas visitaron la portada de la web, no sus
secciones.
¿Actualmente como se utiliza Flash mayoritariamente?
Por otro lado, leo en wezstudio un informe del año pasado
sobre la utilización de flash en las 20 páginas españolas más importantes.
Estos son los resultados más relevantes que arroja dicho estudio:
Aproximadamente el
50% de los sitios analizados contienen algún elemento Flash
Ninguna web esta
totalmente desarrollada en Flash mientras que un 45% son completamente HTML.
En las página
analizadas solo se utiliza Flash como herramienta de publicidad o bien para
mostrar vídeos.
Solo el 10% de la
superficie total de la home utiliza elementos Flash
Sin embargo flash
ocupa entorno al 60-80% del total de la publicidad
Conclusiones del informe
Analizando estos datos podemos decir que actualmente Flash
es una tecnología ampliamente extendida y utilizada como complemento del HTML.
Parece ser que su utilización para el desarrollo íntegro de una web está
decayendo.
Según este estudio, flash es utilizado principalmente para
mostrar vídeos y publicidad. Si bien su utilización es muy común para el
montaje de galerías y pases de diapositivas, podemos adivinar que el desarrollo
y la utilización de frameworks para JavasScript, está haciendo que también
decaiga su utilización para estas tareas.
Entonces, si como indica este estudio flash se utiliza
mayoritariamente para mostrar video, ¿Qué pasará con la tecnología Flash cuando
tarde o temprano se normalice el uso de HTML 5 y su etiqueta video?
Introducción a las URL Schemes
Los URL Schemes son recursos que invocan las aplicaciones
instaladas en cada dispositivo, para poder delegar funcionalidad en ellas. De
esta manera conseguiremos una experiencia más fluida para el usuario. Los
schemes son válidos para las aplicaciones nativas de iOS, Android y HTML5.
Las ventajas de los URL Schemes son evidentes, las más
importantes son:
No obligan al
usuario a estar conectado permanentemente a la red.
Son un método
simple y rápido de integrar las aplicaciones de sistema con nuestras
aplicaciones. Llegando a poder utilizarse dentro del código HTML.
Proporcionan una
interfaz de comunicación pública, que cualquier aplicación puede aprovechar.
Su funcionamiento es muy sencillo. Cada aplicación se
registra con un identificador, que es reconocido por el navegador del móvil. La
función del navegador será:
Comprobar si hay
alguna aplicación instalada que responda al nombre de ese identificador.
Abrirla.
Pasarle como
parámetro los datos de la URL que le hayamos definido.
Hay una enorme cantidad de Schemes, pero ahora veremos
algunos de los más sencillos y útiles:
tel URL Scheme
El esquema de URL tel se utiliza iniciar la marcación el
número de teléfono que le hayamos especificado.
Al tocar un enlace telefónico, se mostrará una alerta preguntándole si el usuario
realmente quiere marcar el número especificado.
Si este acepta se iniciará la llamada. Ten en cuenta que si proporcionas
un número internacional, tendrás que incluir el código del país. Un enlace
telefónico se puede especificar tanto en aplicaciones nativas de iOS/android,
como para web. El marcado HTML sería el siguiente.
<a href="tel:000000000">000000000</a>
En iOS y Android, la detección de número de teléfono está
activada por defecto. Para desactivar esta detección de número, utiliza la
siguiente meta etiqueta:
<meta
name = "format-detection" content = "telephone=no">
Text URL Scheme
Este Scheme configura el cliente de SMS para que los
usuarios puedan enviar rápidamente un mensaje de texto. También es posible
proporcionar el cuerpo del mensaje. El marcado HTML es el siguiente.
<a href="sms: 000000000">Escriba un nuevo
mensaje de SMS</a>
mailto URL Sheme
El esquema mailto, es un antiguo conocido de los
maquetadores web. Se utiliza para iniciar la aplicación de correo
predeterminada del dispositivo. En su
forma más simple, un mailto URL contiene una dirección de correo de
electrónico:
<a
href="mailto:ejemplo@mail.com">ejemplo</a>
Archivos HTC – HTML Components
¿Qué son los componentes HTC?
Los componentes HTC, fueron desarrollados por Microsoft para
implementarlos en Internet Explorer 5.5 y posteriores. La idea era proporcionar
un mecanismo alternativo para encapsular código y comportamiento DHTML en un
componente de script.
En realidad los HTC son archivos XML que contienen
secuencias de comandos y elementos específicos, como propiedades, métodos y
eventos que definen dicho componente. Luego se guarda con extensión .htc.
¿Cómo se ejecutan?
Los archivos HTC se ejecutan en la hoja de estilo, con la
propiedad behavior, de esta manera:
1
2
3
img {
behavior: url(iepngfix.htc);
}
La propiedad behavior permite utilizar CSS para fijar un
script a un elemento específico y aplicar a ese elemento componentes dinámicos,
como los mencionados archivos .HTC.
Ten en cuenta que behavior es una propiedad no estándar que
solo soporta Internet explorer. Por esta razón y para prevenir errores de
validación, es conveniente aplicarla en una hoja de estilo exclusiva para
explorer.
¿Para qué se utilizan?
Actualmente su utilización es muy limitada. Lo más normal es
utilizarlos como hacks para IE o para replicar características que otros
navegadores tienen y Explorer no puede reproducir de forma nativa.
¿Cómo modificarlos?
No hay mucho que decir en cuanto a desarrollo y modificación
de archivos de HTC. Son básicamente estándar de Javascript, con un pequeño
envoltorio XML. Por lo que si sabes Javascript, no deberías tener demasiados
problemas modificar un HTC. De todas formas, Microsoft ha publicado
documentación al respecto en HTC Reference
¿Por qué deberías utilizarlos?:
Como he dicho antes, solo tendría sentido utilizarlos si vas
a escribir o modificar un hack para IE. Para prácticamente todo lo demás
Javascript es la mejor opción.
Usando HTML5 (coding HTML 5)
CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda
una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías
facilitarán también la integración de plantillas o maquetas a los
desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y
modificar nuestros hábitos de codificación para mantener la Web Accesible.
Poco a poco nos tenemos que familiarizar con estas nuevas
tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no
muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando
en contacto.
Así que hoy vamos a experimentar un poco con estas nuevas
tecnologías. Al final de este artículo aprenderemos cómo:
Uso de Graceful
Degradation, las técnicas y tecnologías para mantener las cosas en su lugar en
los navegadores.
Utilizar técnicas
de mejoras y las tecnologías para estar al día con las últimas tendencias.
HTML5 junto a un
aumento de la tecnología: microformatos.
Tener una visión
clara de algunas de las más emocionantes nuevas características que CSS3 y
HTML5 traerá.
La Mejora Progresiva y el Graceful Degradation
El Graceful Degradation es un término que se usa para
definir lo siguiente; Cuando utilizamos las tecnologías mas recientes luego
debemos conseguir fijar todo para los distintos navegadores que no la soportan.
Esto lo hacemos a diario, creamos un código para Firefox y luego otro
alternativo para arreglar los problemas en Internet Explorer y otros
navegadores. Como hacemos la mayoría de nosotros (al menos yo), creamos primero
el marcado y luego creamos la hoja CSS.
Cuando hablamos de mejora progresiva se refiere a la
costumbre de construir primero para los navegadores “menos capaces”,
(navegadores antiguos) y, a continuación, para aplicar las últimas tecnologías
en los navegadores más potentes o recientes.
Diseño
Os muestro un diseño básico estructura para entender y
visualizar claramente la organización del ejemplo de una Web con HTML5, este es
la plantilla que conseguiremos maquetar al final del ejemplo:
Diseño Web HTML 5
El marcado
Os escribo el marcado básico inicial que usaremos antes de
empezar:
Resumiendo…
3 diferentes comentarios condicionales para IE. En primer
lugar incluye un código de Shiv html5 directamente desde Google Code para todas
las versiones de IE. La segunda incluye el archivo IE8.js para una mejor
compatibilidad de IE7 e inferiores, así como un archivo que ie.css spara
solucionar los bugs de Internet Explorer. Y una tercera únicamente para bugs de
IE6. Una tercera es simplemente un archivo CSS para arreglar bugs IE6.
Esta es una base muy sólida y de inicio para cualquier
proyecto con HTML5 que podríamos hacer en el futuro. Con esto, podemos empezar
a asignar etiquetas a las diferentes secciones de nuestro diseño. En la imágen
vemos como quedaría la estructura Web de nuestro código:
Estructura
Web. Header > menu. Featured. Menu > Posts-list. Extras. About. Copyright
Ejemplo práctico HTML5
Ahora vemos como quedaría el código HTML5 de nuestro
ejemplo:
Smashing
HTML5! HTML5 in the year 2022 2009
home
portfolio
blog
contact
Smashing
Magazine
Featured
Article
HTML5 in
Smashing Magazine!
Discover
how to use Graceful Degradation and Progressive Enhancement techniques to
achieve an outstanding, cross-browser HTML5 and CSS3 website today!
This be the title
10th October 2005
By Enrique Ramírez
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus
blandit nec et leo. Ut ut malesuada tellus.
...
...
blogroll
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
HTML5 Doctor
HTML5 Spec (working draft)
Smashing Magazine
W3C
WordPress
Wikipedia
social
delicious
digg
facebook
last.fm
rss
twitter
Smashing
Magazine Amazing Magazine Smashing Magazine Logo Smashing Magazine is a website
and blog that offers resources and advice to web developers and web designers.
It was founded by Sven Lennartz and Vitaly Friedman.
2005-2009
Smashing Magazine.
Activando el HTML5
Como hemos dicho antes la mayoría de los navegadores no
entienden de HTML5 actualmente. Y desde que están desarrollo se ha discutido
por los estilos por defecto que contendran las nuevas etiquetas. Por lo tanto
estas etiquetas que no existen paa el navegador vendrán sin estilos, por lo
tanto les aplicaremos los estilos para elementos de bloque:
/* HTML5
tags */
header,
section, footer,
aside, nav,
article, figure {
display: block;
}
Ahora podremos usar estas nuevas etiquetas como si fuesen
<div>
Bueno después de una breve explicación os dejamos ver el
ejemplo una vez finalizado, para que podáis estudiarlo por completo y ver como
funcionan conjuntamente estas 2 nuevas tecnologías (CSS3 HTML5):
La semántica de los enlaces: definiciones de atributo rev y
rel
Con la aparición de los microformatos y más recientemente de
los microdatos de HTML5, se ha desatado un enorme interés por la semántica. Hay
muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e
indexar mejor la información que generamos. Un método clásico, pero no muy
extendido, para generar metadados es a través de los enlaces.
Repasemos algunos atributos básicos de los enlaces. Como
veremos, algunos de ellos ya aportan información extra sobre el contenido
enlazado:
Definiciones de atributos
href: Especifica
la localización de un recurso de la Web. La ruta generada podrá ser absoluta o
relativa respecto a la web.
hreflang: Ester
atributo sólo puede utilizarse junto con href, porque especifica el idioma del
recurso enlazado.
title: Añade
información sobre un vínculo. Esta información puede ser utilizada de manera
opcional por los agentes de usuario o dependiendo de la versión de navegador,
puede ser representada mediante un tool-tip.
name: Asigna un
nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a
modo de ancla.
type: Especifica
qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos
especificar que lo que enlazamos es un documento PDF. Si es un tipo de
contenido no soportado por los agentes de usuario, pueden optar por no
mostrarlo. En este artículo repasamos algunos de los tipos de contenido
registrados.
charset: Este
atributo especifica la codificación de caracteres de la página o recurso
enlazado con el atributo href.
Para enriquecer semánticamente los enlaces, los atributos
más interesantes y puede que más útiles son rev y rel. Ahora veremos su función
y sus valores.
Atributos rev y rel
rel: Permite definir la relación entre la
página actual y la enlazada.
rev: Define la
relación que tendrá la página enlazada con la actual.
Valores de los atributos de rev y rel
alternate: Indica
que es una versión alternativa al documento actual. Cuando se utiliza
conjuntamente con el atributo “hreflang”, significa que enlaza a una versión
traducida del documento. Si es utilizada con el atributo “media”, implica que
esa versión está preparada para un medio diferente (como una impresora)
stylesheet: Indica
que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con
“Alternate” para ofrecer hojas de estilo alternativas seleccionables por el
usuario.
start: Indica a
los motores de búsqueda que el documento actual es considerado por el autor
como el punto de inicio de un conjunto de documentos. Por ejemplo la primera
página de una paginación o el primer capítulo de un manual…etc.
next – prev:
Indica que es el documento que enlazados es anterior o siguiente al actual
dentro de una secuencia lógica de documentos. En una paginación estos valores
pueden sernos muy útiles.
index: Es el
documento que hace la función de índice en una secuencia de documentos.
copyright: Se
refiere al aviso de copyright del documento actual.
help: Se refiere a
un documento que ofrece ayuda (más información, vínculos a otros recursos
informativos, etc.)
La especificación oficial de HTML define la lista completa
de tipos de relaciones que se pueden utilizar.
Como microformatos
Se han creado varios microformatos para ser utilizados como
valor de estos atributos. Algunos de estos microformatos son tan útiles y se
han hecho tan populares que incluso han sido recomendados por google para no
ser penalizados, a continuación veremos unos pocas aplicaciones:
nofollow: Sin duda
es el más popular de todos. Fue propuesto por algunos buscadores para indicar
qué enlace no debe ser considerado por los algoritmos de posicionamiento y de
este modo para luchar más eficazmente contra los spammers. Su aplicación más
común, es para aplicarlo a respuestas y comentarios en blogs. Enlace a
documentación.
license: Indicar
el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar
que el destino del enlace es la licencia del contenido de la página actual.
Enlace a documentación
tag: sirve para
agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs
mediante la adopción de este tipo de etiquetas. Enlace a documentación
Como semantizar textos – Parte 1 – (Los formatos RDF)
Cada vez se hace más evidente que aportar textos
enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots
intentar deducir un dato basándose en el contenido que lo rodea, pero con
semántica seremos nosotros quien le digamos a los robots que tipo de
información es. Obtendremos así búsquedas más precisas y mejoradas aumentando
también la experiencia de usuario, porque las búsquedas en Yahoo y Google
mejoran su apariencia con contenidos semantizados.
Actualmente la información semántica puede aparecer en la
web de las siguientes formas:
Ficheros RDF
Meta etiquetas
Utilizando
vínculos relacionales
Etiquetas HTML
semánticas
Microformatos
Microdatos
Dejando de lado algunas etiquetas muy concretas HTML4 y el
uso de metadatos en la cabecera de los documentos HTML, el primer paso firme
para la adopción de textos enriquecidos fueron los eRDF (estándar para XHTML
1.0) y los RDFa (para XHTML1.1). Estas semánticas las explicaremos con más
detalle en este artículo.
Texto enriquecido mediante RDF (Resource Description
Framework)
Se trata de es un framework para metadatos recomendado por
la W3C en 1999. Bajo una sintaxis XML, está pensado para dar semántica a la
información y generar metadatos sobre dicha información. Esto permite que los
datos puedan ser integrados y reutilizados.
RDF constituye una tecnología fundamental dentro de la Web
Semántica, cuyo funcionamiento se resume en una conversión de recursos de la
Web en expresiones compuestas que se estructuran en tres partes:
Lo que se
describe.
La propiedad del
recurso que se desea definir.
El valor de la
propiedad con el que se define la relación.
Ejemplo de RDF
La frase: “La semántica y la web 3.0 – Parte 1, está escrito
por Jorge López en el blog círculo de maquetadores”, se representa en RDF de
esta manera:
1
2
3
4
5
6
7
<rdf:RDF>
<rdf:Description
about="http://www.circulodemaquetadores.com/semantica-RDF-RDFa">
<s:Creator>Jorge
López</s:Creator>
<dc:title> La semántica y la web
3.0 - Parte 1</dc:title>
<dc:publisher>Cículo de maquetadores</dc:publisher>
</rdf:Description>
</rdf:RDF>
El resto de información y gramáticas formales sobre RDF la
podrás encontrar en la correspondiente especificación de la W3C.
RDFa
(Resource Description Framework-in-attributes)
Se trata de extensiones específicas de XHTML 1.1, (a la
espera de su implementación en HTML 5) propuestas por W3C. Este método
enriquece los textos a través de los atributos y anotaciones de las etiquetas
XHTML invisibles para el usuario. Se validan mediante la DTD – Document Type
Definition- XHTML1.1+RDFa. Aunque todo esto parezca muy complicado, en realidad
de lo que se trata de extender el manejo de los atributos “rel”, “content” y
“property“.
Para estandarizar su uso utilizaremos diccionarios predefinidos
como Dublin Core. Para indicar en RDFa que estamos utilizando un diccionario,
lo haremos de la siguiente manera:
1
2
3
4
5
6
7
8
<body>
<div
class="articulo">
<h2> Como
semantizar textos - Parte 1 </h2>
<p>Texto del
artículo.</p>
<p>Autor: <span
property="dc:author" content="Jorge lópez"> Jorge lópez
</span></p>
<p>Fecha: <span
property="dc:date" content="2011-12-14">14 de diciembre
de 2011</span></p>
</div>
</body>
En el diccionario Dublin Core vienen especificados los
términos author y date. Para buscar otros términos solo tendremos que buscarlos
en el diccionario.
Como vemos la ventaja de RDFa es que sus reglas son
genéricas, lo que facilitará la labor de muchos autores. Las páginas que no
contienen RDFa se visualizan igual que las que tienen, ya que de lo que se
trata es de aportar riqueza semántica a la información, no de cambiar ni el
contenido ni de la disposición de los elementos.
Nuevamente, la mejor manera de completar la información
sobre RDFa es hacer referencia al borrador de trabajo sobre RDFa de la W3C. El
blog para webmasters de google también recomienda utilizar marcado RDFa para
mejorar los resultados y además proporciona algunos ejemplos.
eRDF (Embedded RDF)
El formato eRDF fue creado en 2005 por Ian Davis inspirado
por los microformatos. Se trata de una sintaxis para extraer la información del
documento ya sea por medio de un Parser o una Hoja de estilos XSLT. eRDF solo
está parcialmente apoyado por la W3C.
Para que un documento HTML le sea reconocido la existencia
de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra
sumando el atributo profile en el head del documento:
La tabla periódica del SEO
El portal Search Engine Land, ha creado una imprescindible
infografía que organiza como si de una tabla periódica se tratase, algunos
factores que impactarán de manera positiva o negativa en el posicionamiento de
una web.
Search
Engine Land Periodic Table of SEO Ranking Factors
Hay disponibles dos versiones de la tabla para descarga: la
versión en formato extendido (con las descripciones y leyenda completa) y en
formato reducido (solo el esquema).
En este artículo podréis encontrar un breve resumen y
sobretodo el significado de las abreviaturas de la tabla para poder
decodificarla correctamente.
Factores internos de posicionamiento
Factores On page: Area Abreviatura
Significado Importancia del factor
Contenido Cq Calidad de contenido +3
Cr Investigación
de las palabras clave +3
Cw Inserción de
las palabras clave en el contenido +3
Ce Contenido
participativo +2
Cf Contenido
fresco y original +2
Código HTML Ht Título de la página +3
Hd Descripción
de la página +2
Hh Encabezados
de la página +1
Arquitectura Ac Página fácilmente rastreable +3
As Velocidad
de carga +2
Au Construcción
de la URL +1
Factores externos de posicionamiento
Factores Off page: Area Abreviatura
Significado Importancia del factor
Enlaces Lq
Calidad de los enlaces entrantes
+3
Lt Texto de
los enlaces +3
Ln Número de
enlaces que apuntan a tu sitio +2
Social Sr Reputación del sitio +2
Ss Con
cuántos usuario se comparte el sitio +1
Confianza Ta Reputación del sitio +3
Th Antigüedad
del dominio +1
Personal Pc
País de origen de la visitas +3
Pl Ciudad de
origen de la visitas +3
Ph Fidelidad
de las visitas +2
Ps Opinión de
tus amigos sobre el sitio +1
Factores con posible penalización
Violaciones Abreviatura Significado
Importancia del factor
Vt Contenido
superficial y sin sustancia -2
Vs Utilización
excesiva de palabras clave -1
Vh Ocultación
de contenido -1
Vc Engañar a
los robots de búsqueda -3
Vp Uso de
enlaces de pago -3
Vi Creación
de spam -1
Tipos de bloqueos
Bloqueos Abreviatura Significado
Importancia del factor
Bp Bloqueos
personalizados -1
Bt Bloqueos
masivos o totales -3
Como escribir para la web
La Web tiene características propias que determinan como se
estructura cualquier texto y el modo en que el usuario accede a la información.
No hay duda alguna que el modo en que está escrito un texto afecta de manera
dramática la experiencia de los usuarios. Hace tiempo hablamos precisamente de
esto cuando analizando el patrón de lectura de los usuarios de la web. La
conclusión fue que es un error escribir en la web de la misma manera que para
un soporte impreso, puesto que los usuarios se comportaban de manera diferente.
Un boligrafo encima de un ordenador
La intención de este artículo es introducir varias técnicas
y metodología que optimizarón la calidad y legibilidad los textos de nuestras
webs.
En primer lugar vamos a explicar la diferencia entre un
lector de material impreso y un usuario web. Hay que tener en cuenta varias
consideraciones:
La lectura en un
monitor es más incómoda que en un texto impreso.
El usuario es
impaciente y voraz , porque tiene a su disposición millones de alternativas a
la tuya.
¿Por qué debo adaptar la redacción de mis textos para la
web?
En la web el
contenido es lo más importante: recuerda que lo usuarios se mueven buscando
información. Si no presentas tu contenido de forma legible y agradable no será
leída por mucha gente, por muy buena y útil que esta información sea.
Atraerás visitas:
si tienes buenos contenidos, bien estructurados y fáciles de leer, será más
probable que otros usuarios quieran compartirlos mediante enlaces a tu web o en
redes sociales.
Ayudará a mejorar
tu posicionamiento: será más fácil para los robots de búsqueda rastrear tu
contenido mejorando tu posicionamiento.
Tu página será más
accesible: esta manera de jerarquizar y escribir contenidos, hará que tu página
sea más accesible para personas con discapacidad, aumentando tu número
potencial de usuarios.
Técnicas y estrategias
Debemos entender que la forma de estructurar los textos en
Internet está determinada más por razones funcionales que por simples razones
estéticas, literarias o artísticas. Teniendo en cuenta esto, vamos a ver varias
técnicas que pueden ayudar a los usuarios a retener mejor nuestros textos
Estilo de
escritura en pirámide invertida : una manera de organizar nuestro contenido es
jerarquizándolo de mayor a menor interés, esto es comenzar con las
conclusiones. Este estilo es muy eficaz porque nos asegurará que el usuario lea
la información más importante cuando abandone nuestro sitio.
Mensajes clave:
siguiendo la filosofía del punto anterior, el mensaje principal que quieras dar
debe ser evidente desde el primer párrafo. La claridad y la concisión son
fundamentales para redactar nuestros contenidos.
Separación en
trozos: los textos muy largos se deben dividir y agrupar el contenido en partes
significativas, con su respectivos títulos descriptivos para mostrarlo en
distintas páginas. Cada página se enlazará con el índice principal del
artículo.
Como mejorar la legibilidad
En cuanto a la redacción:
Utiliza frases
cortas que expresen una sola idea.
Lenguaje simple e
informal: es más adecuado que el elegante o formal, ya que la lectura es más
rápida en el primero.
Contenidos
escaneables: para que puedan ser mejor visualizados, es necesario maquetar
nuestros textos con distintos niveles de encabezados que describan el contenido
de cada página, usa listas siempre que puedas.
Jerga: Lo más
probable es que el usuario no sepa nada del tema del que habla su web por ello
elimine la jerga específica de su contenido, recuerde segundo primer punto de
esta lista.
Texto Abreviado:
omite palabras y frases que no aporten contenido relevante.
Propaganda: los
usurarios detestan la publicidad y aprenden pronto a ignorar los mensajes
publicitarios, incluso cuando intentan aparecer como información objetiva
camuflada en el texto. Además, esta forma de redacción impone a los lectores
una carga mental extra, que les obliga a filtrar las exageraciones para llegar
a las cuestiones concretas. Esto hace lenta su lectura y finalmente los hace
huir del Sitio. El usuario viene a tu sitio en busca de información útil, no de
publicidad.
Verbos expresivos:
El uso de un verbo preciso comunica con mayor fuerza lo que usted desea
expresar. También elimina redundancias y reduce la longitud del texto. Por
ejemplo:
Tomar una
decisión / decidir
Proporcionar
apoyo / apoyar
Hacer uso de /
usar
Sirve para
explicar / explica
Efectuar un
examen / examinar
Juegos de palabras
y localismos: no aludas a referencias culturales o bromas de ámbito geográfico
limitado. Lo que tu entiendes que puede ser gracioso para alguien de tu región,
puede que no sea entendido por los usuarios de otra región distinta o en el
peor de los casos, puede que sea ofensivo para ellos.
Eufemismos: huye
de ellos, muchas veces lo políticamente correcto no es más que una forma de
esconder la verdad.
En cuanto al diseño:
Deja espacio
alrededor de sus textos.
Minimiza la
anchura de sus párrafos
Usa colores de
alto contraste que diferencien bien el texto del fondo.
Usa fuentes
grandes (preferiblemente 12 puntos) y si es posible sans-serif . Las fuentes
pequeñas se deben dejar para el texto que poca gente lee. Por ejemplo, descargo
de responsabilidad.
Utiliza negritas
para resaltar las partes más importantes de sus textos. Además será un buen
recurso de color para romper la uniformidad del texto. Utilizar la negrita en
exceso puede ser contraproducente.
Es mejor evitar
marcar párrafos enteros con cursivas o mayúsculas. No estamos acostumbrados a
leer la letra impresa de esa manera.
