Muchas veces queremos usar un determinado grupo de colores, con la siguiente herramienta podremos seleccionar uan gama de colores adecuada para nuestra Web. Además podemos “jugar” con diferentes colores ayudandonos del cono 3D de colores. Lo idea es el grupo de colores o gama de colores que desarrolla a partir de un color principal.

ColoRotate es un nuevo e interesante sitio Web que recoge un enfoque novedoso para el selector de colores del diseño tradicional. En lugar de los círculos 2D o deslizadores, ColoRotate cuenta con un cono 3D. En el centro del cono está el espectro de colores. En la intersección, se encuentra el tinte que se encuentra en el eje z. Puedes manipular cada uno por separado para ayudar a llegar a su color. También puedes combinar dos colores juntos.

Una vez que haya elegido unos colores de la paleta, puede usar controles adicionales para modificar toda la paleta a la vez. Además, el sitio tiene mucha información sobre el color y la teoría del color.

Si estás buscando una nueva herramienta que te ayudará a generar paletas de colores, ColoRotate vale la pena.

La etiqueta meta description (<meta name=”description”) ofrece a Google y a otros motores de búsqueda un resumen de lo que trata la página. Considerando que en la etiqueta <title> podemos usar unas pocas palabras o una frase, la descripción de la página si puede contener una frase o dos o un pequeño parrafo. En las Herramientas para Webmasters de Google podemos encontrar un artículo práctico sobre las meta-tags.

La descripción nos muestra una breve reseña de lo que ofrece la página Web.

La descripciónes (description) son importantes porque Google podría utilizarlas como fragmentos de sus páginas de resultado. Tenga en cuenta que decimos “podría”, porque Google puede optar por utilizar una sección de su página visible si hace un buen trabajo de concordancia con la consulta del usuario.

Después de haber hecho la consulta “baseball cards”, nuestra página web aparece como un resultado, con parte de su descripción del meta-tag description que habíamos introducido.

Buenas prácticas para el meta tags description

• Resume con precisión el contenido de la página: Escribe una descripción que informe y de interés ya que los usuarios verán su descripción como un fragmento en el resultado de una búsqueda.
  • Evitar:
    • Escribir una descripción (description) de la etiqueta meta que no tiene ninguna relación con el contenido de la página.
    • La utilización de descripciones genéricas como “Esto es una página Web” o “Página sobre tarjetas de beisbol”.
    • Introducir únicamente palabras clave en la etiqueta.
    • Copiar y pegar todo el contenido del documento en la descripción.
• Utiliza descripciones únicas para cada página: Disponer de una descripción diferente para cada meta-etiqueta, la página ayuda a los usuarios y a Google, especialmente en las búsquedas que los usuarios pueden abrir múltiples páginas de su dominio (por ejemplo, las búsquedas utilizando el operador site. Si su sitio contiene miles o incluso millones de páginas, introducir a mano la descripción metacódigos probablemente no es factible. En este caso, se puede generar automáticamente la descripción basada en el contenido de cada página.
  • Evitar:
    • Utilizar una única description igual en todas las páginas de su sitio Web o en un gran grupo de páginas.

Pués hasta aquí es lo que hablamos sobre la etiqueta meta description. En la siguiente parte (Parte 3) seguiremos con la tema de las keywords.

La etiqueta title proporciona a los usuarios y a los motores de búsqueda cual es el tema de una página en particular.

Si el documento aparece en una página de resultados de búsqueda, el contenido de la etiqueta <title> por lo general aparece en la primera línea de los resultados.

El título de tu página de inicio puede incluir el nombre de tu sitio Web y podría incluir otros trozos de información importante, como la ubicación física de la empresa o tal vez algunos de sus servicios principales u ofertas.

El título de la página principal de nuestro sitio, muestra el nombre de la empresa y tres áreas de enfoque.

Nuestra página Web aparece como resultado de ello, y como vemos el título aparece en la primera línea.

Después de tener claro los conceptos y la prioridad de la etiqueta <title> en los búscadores, os dejo con una lista de buenas prácticas para la optimización en Google.

Buenas prácticas para la etiqueta <title>

• Describir con precisión el contenido de la página: Elige un título que comunique de forma eficaz y clara el tema del contenido de la página.
  • Evitar:
    • Elegir un título que no tiene ninguna relación con el contenido de la página
    • Utilizar por títulos por defecto o títulos sin información útil como “Sin Título” o “New Page 1″
• Crear títulos únicos para cada página: Cada página debe tener su propio título, ya que ayuda a Google a interpretar que se trata de páginas distintas del sitio.
  • Evitar:
    • La utilización de un único title en todas las páginas de tu sitio web o de un gran grupo de páginas.
• Utilice un title breve, pero descriptivo: Los títulos pueden ser cortos e informativos. Si el título es demasiado de largo, Google mostrará sólo una parte de ella en el resultado de la búsqueda.
  • Evitar:
    • La utilización de los títulos muy largos que no ayudan a los usuarios
    • Introducción de palabras clave innecesarias dentro de la etiqueta title

En la Parte 2, veremos como usar de forma óptima orientada al buscador Google la línea meta description.

El uso de internet aumenta año a año. En el documento se muestra el estudio estadístico de EGM (Estudio General de Medios) en relación con el uso de internet en la sociedad española actual. Además, la tendencia es ascendente en todas las gráficas, lo cual indica que todavía queda mucho crecimiento de Internet para los próximos años.

También destacadar que cada vez aumenta también el número de usuarios con edades más avanzadas, se ve claramente que el uso de internet se orienta en gran parte como apoyo profesional. El uso de internet se equilibra en ambos sexos (masculino y femenino). Y se ha elevado notablemente en la Clase media, ya no es una tecnología fuera de nuestros bolsillos, ya es una “necesidad” a la que puede acceder cualquier tipo de persona. El número de días que usamos Internet también va aumentando año por año.

Os dejo el enlace del documento PDF con las estadísticas completas de uso de EGM del 2009

Ver Estadísticas de uso de en Internet 2009

Os dejo una lista de herramientas que nos servirá a los maquetadores o desarrolladores web a conseguir Web más accesibles. Con estas herramientas sabremos mucho mejor como se comporta nuestras páginas Web cuando interactúan en ellas diferentes tipos de usuarios.

La mayoría de ellas son muy interesantes y útiles para hacer pruebas y mejoras de accesibilidad web en el desarrollo de nuestros proyectos.

Simuladores de personas con discapacidades cognitivas

• Distractability Simulation
• Dyslexia simulation
• Flicker Rate Test for Gif Images
• Misunderstood Minds
• PEAT (Photosensitive epilepsy analysis tool)
• Readability Index calculator
• Readability Test

Simuladores de personas con problemas de visión

• aDesigner
• Daltonize
• Fangs
• Graybit
• Low-Vision Simulation
• Lynx Viewer Text-Only Simulator
• Screen Reader Simulation
• VisCheck
• Visual Impairment Simulator
• Web Page Backward Compatibility Viewer

El objetivo del atributo summary es proporcionar una breve reseña o descripción de como están organizados los datos de una tabla, o una breve explicación de como navegar por la tabla. Como ya sabemos el atributo summary de table proporcionar una información disponible para los lectores de pantalla, no se muestra visualmente.

El summary es útil cuando la tabla tiene una estructura compleja (por ejemplo, cuando hay varios conjuntos de encabezados de columna o fila, o cuando hay varios grupos de columnas o filas). También puede ser útil para tablas de datos simples que contienen varias columnas o filas de datos.

El atributo summary puede utilizarse o no dependiendo de la complejidad y volumen de información de la tabla. También sabemos que la tabla tambien dispone de un título llamado caption. Si se usan ambas cosas (summary y caption) nunca se deberá duplicar su contenido. A continuación vemos unos ejemplos de uso:

Ejemplos

Ejemplo 1: Una tabla de datos con summary y sin caption

Este ejemplo muestra un horario de autobús. El número de Línea y la dirección se incluyen en el summary junto con información sobre cómo utilizar el horario.

  …


Estación 1
Estación 2
Estación 3
Estación central

4:00
4:05
4:11
4:19

Ejemplo 2: Una tabla de datos con summary y caption

En este ejemplo, el caption identifica la Línea de autobús. El summary ayuda a los usuarios que son ciegos a comprender cómo utilizar el programa. Los lectores de pantalla leen el caption seguido por el summary.

…

Línea 7 Centro Ciudad (Horario)

Fuente: Techniques for WCAG 2.0 de W3C

En Diciembre de 2008 hasta Enero de 2009, WebAIM realizó un examen de preferencias de los usuarios que usan lectores de pantalla. Recibieron 1121 respuestas válidas a la encuesta sobre los lectores de pantalla, que fue realizada en Diciembre de 2008 – Enero de 2009. La respuesta fué asombrosa.

Ver el Estudio de Preferencias de Usuarios con Lectores de Pantalla

Conclusiones

Tal vez la conclusión más significativa que podemos hacer de estos resultados de la encuesta es que no existe el “usuario típico” que usa un lector de pantalla. Como desarrolladores, solemos usar algún lector de pantalla como JAWS accesibilidad o Window Eyes o VoiceOver (o cualquier otro). Esta encuesta pone de manifiesto que la accesibilidad en lectores de pantalla es sobre la gente real y sobre las personas que tienen diferentes habilidades y preferencias. Como desarrolladores, debemos hacer todo lo posible para acomodar las necesidades de este diverso grupo.

En general, estos resultados sugieren que, a raíz de las directrices y normas de accesibilidad, el uso de tecnologías que apoyan los altos niveles de accesibilidad, y proporcionar a los usuarios distintas alternativas es lo más importante. La amplia gama de respuestas de los usuarios hace que sea difícil dar recomendaciones definitivas para muchas cosas.

También puede ser interpretado que algunas cosas (como las diferencias relativamente insignificantes en la variante de texto o la redacción de “saltar” enlace). Esto la verdad es que afecta muy poco en los usuarios que usan lector de pantalla. Por otro lado, el estudio también indica un alto nivel de dificultad con el contenido de Flash.

Esperamos que estos resultados den una idea a los desarrolladores para analizar mejor las opciones de desarrollo que hacemos para los usuarios que usan lectores de pantalla.

Más de uno de nosotros nos hemos encontrado con crear un sistema de votos factible y práctico. Como vemos en Youtube o en Amazon. La mayoría de ejemplos que encontramos por la Web, estan desarrollados con JavaScript que funcionan correctamente bien, pero ya sabemos que si lo tenemos desactivado ya no nos sirve de mucho.

A continuación vemos como crear un sistema de votos o Rating Star únicamente con CSS, de esta manera evitaremos usar Scripts para conseguir el efecto deseado.

En el ejemplo solo se usa una imagen con 2 estrellas, una para el estado inicial y otra con el hover. De esta forma prescindimos de crear varias imágenes para cada valor de cada estrella. Debajo vemos el ejemplo ya funcionando.

Ejemplo del Sistema de votos:

• 1
• 2
• 3
• 4
• 5

HTML

1
2
3
4
5

CSS

.star-rating {
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(star_rating.gif) top left repeat-x;
}
.star-rating li {
	padding:0px;
	margin:0px;
	float: left;
}
.star-rating li a {
	display:block;
	width:20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
}
.star-rating li a:hover {
	background: url(star_rating.gif) left bottom;
	z-index: 1;
	left: 0px;
}
.star-rating a.one-star {
	left: 0px;
}
.star-rating a.one-star:hover {
	width:20px;
}
.star-rating a.two-stars {
	left:20px;
}
.star-rating a.two-stars:hover {
	width: 40px;
}
.star-rating a.three-stars:hover {
	width: 60px;
}
.star-rating a.three-stars {
	left: 40px;
}
.star-rating a.four-stars {
	left: 60px;
}
.star-rating a.four-stars:hover {
	width: 80px;
}
.star-rating a.five-stars {
	left: 80px;
}
.star-rating a.five-stars:hover {
	width: 100px;
}