Accesibilidad y Usabilidad en Sitios Web

Archivo de Abril 2008

Sobre la calidad de un blog: el índice CAFCAUT

Publicado por Guillermo Spottorno en 29 Abril 2008

Hace un momento que empezaba este post dando las gracias a “Mas Que Accesibilidad“, y he comenzado a pensar los motivos por los que debo darle las gracias. Así que le he dado la vuelta a la idea principal del post para meteros el rollo que sige:

Hay blogs de todo tipo: los que sigues con devoción, otros que entras emocionado y sales escaldado, otros, como el mío, condenables por la falta de continuidad, otros que se enrollan una barbaridad, etc.

Creo que estaría bien hacer una categorización de los blogs. Habría que montar un debate al respecto, pero aquí va un punto de partida. Por ejemplo, decir que un blog es “interesante” o que tiene un “diseño bonito” son opiniones subjetivas, por lo tanto no las pondría como una de las variables para hacer una valoración de blogs.

Voy a nombrar las cualidades con las que creo se puede resumir la calidad de un blog:
Comunicatividad, Actualidad, Fiabilidad, Continuidad, Accesibilidad, Usabilidad y Tecnología.

Así que el acrónimo quedaría como el índice CAFCAUT.

- Comunicatividad: que tenga una correcta redacción y un ritmo agradable.
- Actualidad: que hable de temas actuales.
- Fiabilidad: que ofrezca datos contrastados.
- Continuidad: sin largos períodos de tiempo sin actualizar.
- Accesibilidad: para que cualquier persona sin importar la discapacidad que tenga pueda visitarlo. En este caso daría un “0″ al que no cumple ni el TAW por mucho; un “1″ al que se acerca a conseguir la A; un “2″ al que cumpla la A; un “3″ al que cumpla la AA; un “4″ al que cumple la AAA; y un “5″ al que además tiene un cuenta las pautas manuales.
- Usabilidad: facilidad para encontrar lo que se busca y para ofrecer lo que se quiera.
- Tecnología: a la moda de la Web 2.0 y lo que nos queda por ver…

De cada cualidad se puede dar un valor de cero a cinco. La máxima puntuación de una web sería por lo tanto de 35 puntos.

Por ejemplo, a la web de “Mas que accesibilidad” le daría yo un 27:

Comunicatividad: 5
Actualidad: 5
Fiabilidad: 5
Continuidad: 5
Accesibilidad: 1
Usabilidad: 3
Tecnología: 3

A ver si en los próximos días evalúo más páginas de las que sea asiduo y os pongo aquí las conclusiones… lo malo es que a mi blog le pondría un “0″ en continuidad!

Publicado en Accesibilidad, Diseño web, Estandares web, Internet | Etiquetado: , | 2 Comentarios »

Cómo generar un kml: la kmlización

Publicado por Guillermo Spottorno en 24 Abril 2008

Acabo de hacer para Portal Mayores una cosa que hemos llamado “kmlización“. Antes de empezar a hacerlo de manera dinámica, lo he hecho totalmente a mano.

Esto es más o menos lo que he hecho:

[1] Un kml, se formará usando la estructura siguiente en un fichero con una extensión ‘.kml’:

<?xml version=”1.0″ encoding=”UTF-8″?>
<kml xmlns=”http://earth.google.com/kml/2.0″>
<Folder>
<name>NOMBRE DEL KML</name>
<Style id=”icono”>
<IconStyle>
<Icon>
<href>http://www.misitio.es/imagenes/icono-kml.gif</href>
</Icon>
</IconStyle>
</Style>
<Placemark>……………………………………………………..</Placemark>
<Placemark>……………………………………………………..</Placemark>
<Placemark>……………………………………………………..</Placemark>
</Folder>
</kml>

[2] Por lo tanto, la gracia está en rellenar el contenido que va entre los <placemark>. Cada fila, un registro.

[3] El contenido del <placemark> va más o menos así. De aquí, se pueden hacer todos los cambios y mejoras que se deseen: Más info en google

<Placemark>
<name>NOMBRE QUE SE VE AL LADO DE LA CHINCHETA</name>
<description>
<![CDATA[
<a href="http://www.miportal.es">http://www.miporta.es</a>
<br><b>Título de mi portal</b>
<br><b>Dirección: </b> Calle Gran Vía 88
<br>28000, Madrid, Madrid
<br><b>Contacto: </b>Teléfono - 913 333 333
<br><b>Correo electrónico: </b> guille@miportal.es
<br><b>Sitio Web: http://www.miportal.es</b>
<br><b>Coordenadas: </b>Longitud: -3.000001. Latitud: 36.000001
]]>
</description>
<styleUrl>#icono</styleUrl>
<Point>
<coordinates>-3.000001,36.000001</coordinates>
</Point>
</Placemark>

[4] Así que ahí queda la estructura de un KML. Ojo, que si subes un KML a tu servidor, tendrás que configurarlo para que se abra con el Google Earth. Para ello mira esta información: <http://code.google.com/apis/kml/documentation/kml_tut.html#kml_server>

De todas formas, si lo que se quiere es hace un enlace simple desde un href, la cosa más simple es como sigue. Ya digo, que esto se puede complicar cuantos se quiera.

http://maps.google.es/maps?f=g&hl=es&geocode=&q=42.000001,-3.000001(Descripcion)&output=kml

Publicado en Estandares web | Etiquetado: , , , | Deja un Comentario »

Divs centrados en el body

Publicado por Guillermo Spottorno en 17 Abril 2008

Vuelvo. Siento la parada, pero mi vida es un caos…

Y vuelvo con ganas de analizar algunas páginas para comprobar cual es la estrategia de centrado de los divs en el Body. Esto viene a raíz de una conversación con Elsa Palacios. Hace poco en un curso nos dijeron que la forma de centrar los divs era creando un div contenedor y darle lo típico de:
#contenedor { margin: 0 auto 0 auto; width:48em; }
Sin embargo, yo cuando hice el diseño para Portal Mayores, utilicé la opción de darle al “body” tamaño y un text-alaign: center:
body { text-align:center; width: 48em; }
Sin embargo, en mi portal de poesía tengo todavía el 100%. Así que voy a hacer una “ronda informativa” de portales para ver qué se cuece en sus css. Sólo pondré clases que den información al respecto:

Últimos premios TAW

  • Ministerio de fomento <http://www.fomento.es>
    .capaContenidos {font-size:1em; padding: 0; margin: 0; width: 48.75em; overflow: hidden;
    background-color:#ffffff; background-image:none;border:none;}
    Y no encuentro cómo lo centra…
  • Ministerio de cultura <http://www.mcu.es/>
    body#body{ width: 48em; margin: 0 auto; text-align: center; }
  • Munimadrid <http://www.munimadrid.es>
    #contenido {width: 48.45em; margin: auto; text-align: left}
  • Caffeto KAldi <http://www.cafettokaldi.com/>
    #outer_container{ border: 4px solid #fff; margin: 0 auto; width: 770px;}

Y otros Sitios Web

  • Tawdis <http://www.tawdis.net>
    #contenedor { width: 96%; left: 50%; margin-left: -48%; position: relative; border-left:1px #AAA solid; border-right:1px #AAA solid; background-color: #FFF; }
  • AENOR <http://www.accesible.aenor.es/>
    #contenedorcuerpo { width:96%;border:0;margin:12px 2%;}.dimensioncuerpo { max-width:840px; min-height:98% !important; height:auto !important;
    height:98%; margin:0 auto; padding:7px 8px; border:1px solid #9F9D9E; background:#fff; text-align:left;}
  • El País <http://ww.elpais.es>
    .zona_superior {width:993px; margin:0px auto; border:1px solid #C7CFD2; border-bottom:0px;}
  • Público <http://publico.es>
    body{ text-align: center; width: 994px; padding: 0px; margin: auto; border:1px solid #999999;}
  • El Mundo <http://www.elmundo.es>
    #contenedor { width: 990px;} body { margin: 0;}
  • Google, Inteco, W3C, Sidar, Ceapat, INE, wikipedia, usan el 100%

Por ahora ahí está. A ver si mañana puedo meter alguno más.

Publicado en Accesibilidad, Diseño web, Uncategorized | Etiquetado: , , , , | Deja un Comentario »