Categoría: Accesibilidad

  • Tabla comparativa de compatibilidades de navegadores

    Los navegadores son el talón de Aquiles de los diseñadores y desarrolladores web, la tecnologí­a está mucho más avanzada que lo que soporta el software. Lo peor es que no sólo debemos crear websites compatibles con todo el software, también tenemos que tener en cuenta a los usuarios que no han actualizado a la última versión.

    Tabla comparativa de compatibilidades de navegadores

    Este es el resumen de la tabla comparativa de compatibilidades de navegadores, en distintas tablas nos dice qué versión de qué navegador soporta alguna propiedad CSS3, HTML5, SVG y otras tecnologí­as.

     Internet ExplorerFirefoxSafariChromeOpera
    Pasado lejano6.0: 4%2.0: 35%3.1: 43%1.0: 54%9.0: 34%
    Pasado7.0: 12%3.0: 48%3.2: 66%2.0: 77%9.6: 55%
    Presente8.0: 28%3.5: 79%4.0: 87%3.0: 84%10.0: 60%
    Futuro cercano (2009)8.0: 28%3.6: 89%4.*: 89%3.0: 84%10.0: 60%
    Futuro (2010 or later)9.0: 28%4.0: 89%4.*: 89%4.0: 86%10.*: 71%

    Como era de esperar es Internet Explorer 6 el que saca la peor nota, tan solo el 4%.

    La tabla por defecto te muestra esta información pero puedes filtrar y ordenar los resultados de la tabla e incluso comparar dos navegadores:

    img_flickr_ceslava003

    Sigue la agoní­a de IE6

    La campaña para acabar con IE6 continúa, aún son muchos los usuarios que no han actualizado. Digg, uno de los que encabezan esta campaña, intenta convencer nada menos que al 10% de sus usuarios

    Las estrategias para rematar al ya agonizante navegador dan para la imaginación, Nathan Rice (ví­a) por ejemplo propone que los que usemos WordPress mostremos el theme por defecto, el theme Kubrick a los usuarios que nos visiten con IE6

    Dos enlaces para reflexionar y opinar

  • inFrame | Plugin para meter iframes con jQuery

    inFrame es un interesante plugin para jQuery que permite incrustar páginas a modo de iframes para por ejemplo mostrar demos dentro de una página.

    Para utilizarlo tan solo debes añadirle esta clase css al enlace

    <a class="inframe" href="https://ceslava.com/demo">Demo</a>

    Al hacer clic sobre ese enlace se cargará justo debajo la página dentro de un iframe:

    inFrame jQuery captura

    La idea es que tus usuarios no abandonen la página para ver una demo que requiera de algún css o javascript extra.

    Posible usos

    Pongamos que tienes un blog sobre diseño web y tus artí­culos tratan de CSS, javascript, mootools, jQuery, etc. Si conoces el estupendo blog de Nikko (Xyberneticos) te harás una idea.

    Puedes mostrar los códigos necesarios en tus posts pero difí­cilmente mostrarás en ese post una demostración, una live demo, o bien la muestras en otra página tuya o la enlazas con la demo del autor.

    Con inFrame esos enlaces harán que al clicarlos se cargue en un iframe la página que contiene la demo y así­ el usuario permanece en tu página.

    A pesar de que los iframes no son muy recomendables al hacerse con este método los usuarios que no dispongan de javascript seguirán viendo el enlace.

    Uso «ilimitado»

    El autor nos invita a utilizarlo estúpidamente, justo antes de los comentarios ha creado un enlace a la propia página que contiene un iframe de ella creando un juego de meter iframes dentro de iframes de ciclo infinito.

    Documentación y demos

    ví­a WebAppers

    Dicotomí­as relacionadas en pqpq.es

  • Cuando la palabra clave es el nombre propio | Andreas Smetana

    El portafolio web del prestigioso fotógrafo australiano Andreas Smetana, ganador de un FWA, es un sitio web que a priori no cumple los estándares de accesibilidad, usabilidad, SEO.

    img_flickr_ceslava001

    300 imágenes que pertenecen al creativo trabajo de numerosas campañas para clientes como NIKE, Audi, etc. y otras de proyectos más personales:

    img_flickr_ceslava002

    Cuando la palabra clave es el nombre propio

    Las galerí­as web, los portafolios de fotógrafos, ilustradores y de cualquier creador de imágenes pasaron de HTML a Flash y de nuevo a HTML al que se le añade algunos efectos AJAX, es decir javascript.

    La web de Andreas desarrollada en Flash es usable, ligera, rápida, el diseño aprovecha todo el espacio del navegador para mostrar la imagen al 100%, no está optimizada a ninguna resolución porque como ya he comentado las webs hay que optimizarlas para cualquier resolución, es un diseño lí­quido, las imágenes se adaptan al tamaño del navegador.

    Home a 800×600

    img_flickr_ceslava005

    En cambio:

    • tiene tí­tulos duplicados,
    • no tiene meta-tags,
    • no está pensada para la accesibilidad pero cómo puede la galerí­a de un fotógrafo optimizarse para una persona ciega por mucho texto alternativo que tenga la imagen,
    • no tiene mapa web,
    • no utiliza los botones de compartir,
    • no tiene URL amigables,
    • etc.

    EL quid de la cuestión es que el contenido de la web es tan bueno que no hay que preocuparse del SEO, ¿qué más que Google cuando buscas Andreas Smetana te devuelva esta información?

    img_flickr_ceslava004

    Lo importante es que vamos a entrar porque conocemos al autor y queremos ver su trabajo, el diseño web y el SEO no van de la mano si el cliente no necesita generar tráfico desde palabras claves, los backlinks surgirán sin buscarlos, y si además el diseño no está mal, la palabra clave es el nombre propio.

    Despedimos el artí­culo con otro trabajo de Andreas,  «a dormir la mona» :)

    img_flickr_ceslava003

    Dicotomí­as diseño web en pqpq.es

    Dicotomí­as fotográficas en pqpq.es

    Cursos relacionados en cursos v2b

  • Entrevista a Pedro Corchero Murga | Blogger de éxito con solo 17 años

    Entrevista a Pedro Corchero Murga | Blogger de éxito con solo 17 años

    Hoy es un honor presentarles al pacense Pedro Corchero Murga, es el autor de un blog con una temática muy definida, CSS, y con un ritmo frenético de publicación: CSSBlog.es

    pedro-corchera

    En los primeros contactos para la entrevista tuve una de mis grandes ideas y le pedí­ un CV para preparar las preguntas, el siempre amable y cortés Pedro no podí­a enviarme un CV porque aún no habí­a trabajado ni terminado sus estudios. Así­ que se presentó con este texto:

    «Me llamo Pedro Corchero Murga, tengo 17 años (04-03-1992) y estoy empezando 2º de Bachillerato de Ciencias. Me encantan los deportes, especialmente el tenis, deporte en el que compito a nivel regional. También me gusta leer libros sobre técnicas de marketing, programación web…»

    Sabiendo su edad y que es estudiante, podrí­amos pensar que acaba de empezar pero no, lleva ya 4 años desarrollando sitios web.

    «Todo lo que sé lo he aprendido de forma autodidacta, curioseando por Internet y leyendo muchos artí­culos. Empecé creando webs en 2005, con Zptweb.net. Más tarde fui investigando y creé otros proyectos, como Addictools.com y Ombligear.com, estos últimos aparcados por el nuevo proyecto, CSSBlog.es

    Al entrar en la blogosfera noté un cambio brutal, yo que trabajé 4 años con sitios web, algunos desde 0, veo que en la blogosfera todo es mucho más fácil de difundir, y esto a la larga acaba teniendo mayores posibilidades en cuanto al incremento de visitas y seguidores. Está claro que, el perfil de usuario en la blogosfera conoce mejor los sistemas sociales que, por ejemplo, un perfil de usuario relacionado con el ocio.

    CSSBlog.es fue creado en Febrero de este año (2009), y ha pasado de 2000 visitas mensuales a 40.000 en los 6 meses que tiene de vida.»

    Sepamos algo más del blogger, de Pedro, ¿Quién es ese blogger?

    Empezaste a los 13 años a crear sitios web ¿qué te inspiró a hacerlo?

    Desde que era chico me gustaba realizar construcciones parecidas a lego (creaba cosas de todo tipo: molinos, aviones, edificios… -en una escala menor, obviamente-). Empecé a rebuscar por Internet y encontré un juego de estrategia, era el mí­tico «Rollercoaster Tycoon». Este juego era parecido a las construcciones que realizaba, pero a lo grande. Me gustaba el juego, pero yo querí­a hacerlo todo un poco más real.

    Posteriormente se me ocurrió la idea de hacer páginas web, ya que eran, en cierto modo, muy parecido al juego anteriormente citado (las montañas rusas podrí­an ser los sitios web, y los visitantes del parque podrí­an ser los usuarios/lectores de la web).

    Entonces me metí­ de lleno en la creación de páginas web, primero creí­a que la web en su conjunto era la base de datos MYSQL, un error anecdótico. Mis primeras páginas web eran a base de plantillas alojadas en servidores gratuitos, con su correspondiente dominio gratuito. Me fui metiendo de lleno, leyendo todo tipo de artí­culos y consejos sobre la creación de sitios web de forma autodidacta. Mi primer sitio web fue Zptweb.net, una página relacionada con el ocio y todo lo relacionado con software que ahora cuenta con unas 10.000 visitas únicas diarias. Y así­ llegué hasta donde estoy ahora.

    Zptweb

    ¿Trabajas solo o en equipo?¿Por qué?

    En mis inicios (el primer año) trabajaba en equipo (junto con un argentino de nick «Hellvulcano»), pero no podí­a seguir el ritmo de publicación que querí­a y dejó de ayudarme, aunque seguimos siendo amigos, nos comunicamos cada cierto tiempo. Los siguientes 3 años trabajé en solitario, tanto en la administración como en la publicación de la totalidad de los proyectos que creé (Zptweb.net, Ombligear.com , Addictools.com), todos ellos aparcados por el nuevo proyecto, CSSBlog.es

    ¿Cómo se te ocurrió lo de ombligear???

    Ombligear.com fue un proyecto un tanto alocado y muy original que realicé no con el propósito de conseguir visitas, sino de ver cómo reaccionaban los usuarios al ver un sitio así­. Hubo opiniones de todos los gustos, y, curiosamente, muchas personas lo visitan dí­a a dí­a (hay gente para todo).

    ombligear

    ¿Cuánto tiempo pasas frente a la máquina? ¿Qué tiempo le dedicas al blog?

    Depende de qué época del año. Cuando estoy en época de estudios suelo pasar unas 2 horas diarias conectado, mientras que en verano o festivos paso unas 8 horas. Al blog le dedico unas 7 horas de ese tiempo, 1 hora y media en la época de estudios.

    ¿Qué esperas en un futuro? ¿Qué proyectos tienes?

    Espero seguir aprendiendo y mejorar mis técnicas de programación web, para realizar sitios todaví­a más dinámicos, atractivos y al mismo tiempo accesibles. No tengo ningún proyecto más en mente por ahora.

    ¿Qué opinas de los estándares web? ¿Te preocupan o te importa más el diseño?

    Los estándares web nos sirven de guí­a para mejorar la accesibilidad de nuestro sitio, es algo que, en mi opinión, tendrí­amos que seguir lo más cuidadosamente posible, no deberí­amos dejarlos de lado. Seguir los estándares web me preocupa más que el diseño ya que de nada nos vale tener una web correctamente diseñada, si es inaccesible. El diseño es secundario, aunque también es importante.

    ¿Cualquiera puede ser hoy dí­a diseñador web o crees que hace falta formación previa?

    Todo el que lo desee puede ser diseñador web, sólo necesita tener motivación y curiosidad en lo que se está haciendo. Debe gustarle aprender, leer muchos artí­culos y consejos para ir afinando cada vez más sus habilidades, ser constante y tener paciencia. Desde aquí­ animo a todos los que estén en el proceso.

    ¿Cómo te definirí­as? ¿Blogger, diseñador, programador?

    Me defino un conjunto de todo ello, creo que es necesario obtener conocimientos sobre cada una de las ramas que mencionas para ser completo ya que así­ nuestro abanico de recursos será mucho más amplio a la hora de crear nuestro proyecto.

    Twitter y Facebook ¿qué usos les das?

    Utilizo Twitter para ver qué actividades realizan cada dí­a las personas que conozco y también conocer nuevas personas (bloggers y lectores, mayoritariamente) en Internet. Por otra parte, identifico a Twitter como un sitio de conocimientos donde los usuarios (yo me incluyo) comparten nuevos recursos mediante enlaces.

    No uso Facebook, no me gusta su filosofí­a.

    Cita alguna(s) web(s) cuyo diseño te inspire

    Aunque la web de Apple me inspiró mucho al crear mis primeros proyectos, no tengo ninguna fuente de inspiración en cuanto al diseño de sitios web, pienso que algo diseñado por ti mismo y nadie más, tiene mucho más mérito a la vez que es gratificante ver tu diseño propio hecho realidad.

    Cita alguna(s) web(s) cuyo contenido te sea imprescindible

    Ningún sitio web o blog me parece imprescindible, ni siquiera los mí­os.

    ¿Crees que es rentable ser blogger? ¿Se puede vivir de ello?

    Ser blogger no es algo muy rentable. Existen algunas personas que pueden ganarse la vida con ellos, pero las probabilidades de que se de este hecho son casi nulas. Creo que, ante todo, lo que estemos haciendo no podemos hacerlo por el dinero, debemos tener otro tipo de motivaciones mucho más simples. Por ejemplo, el hecho de convertir el proyecto en una realidad ya es algo motivador. Lo demás, vendrá después.

    ¿Dónde encontrarte?

    Mi perfil de Twitter es: http://www.twitter.com/cssblog_es, en el que tengo unos 820 seguidores. También tengo perfil de Bitácoras.com (Perfil de Bitácoras) y Technorati (Perfil de Technorati). Y recientemente en Frienfeed.

    Todo el que lo desee puede suscribirse al feed RSS de CSSBlog.es

    ————

    Os recuerdo que en CSSBlog.es además de publicar todo lo relacionado con CSS en distintos niveles (básico, intermedio y avanzado) dispone también de un foro para resolver dudas.

    Muchas gracias Pedro por la entrevista. Estoy seguro que con la pasión y honradez que pones todo lo que te propongas tendrá éxito.

     

     

    Dicotomí­as en pqpq.es

  • Sobre la agonía de IE6

    Mucho se ha escrito sobre Internet Explorer 6, mucho se ha presionado, muchas las iniciativas y muchas acciones tomadas pero IE6 sigue siendo el navegador principal de muchas máquinas.

    Liderando la campaña viral contra el navegador están desarrolladores y diseñadores web, IE6 que data del 2001 no soporta las transparencias PNG ni el estándar CSS2.1 por lo que para desarrollar o diseñar un sitio web compatible con todos los navegadores hay que prescindir de muchas técnicas o abogar por hacks. En el otro lado está Microsoft que asegura que no abandonará a sus usuarios y seguirá dándoles soporte hasta el año 2014.

    La desaparición o simplemente el ignorar a este caduco navegador supone un ahorro de trabajo y esfuerzo por un lado y la posibilidad de tener sitios webs más «modernos». Esto es lo que han hecho sitios como YouTube, Digg o Facebook.

    Campaña NO IE6

    ¿Quié usa IE6?

    ¿Por qué entonces alguien querrí­a tener un software limitado, con fallas de seguridad y mal visto en la comunidad web? Pues parece que la respuesta son los administradores de las redes corporativas, las empresas públicas o privadas que están anquilosadas y que prefieren ahorrarse los costes de actualización.

    La pregunta ahora es ¿debemos fastidiar o presionar a los internautas que aún navegan con IE6? Existen multitud de formas de detectar el navegador del usuario y mostrarle un aviso para que actualice o simplemente diseñar un sitio que visto en IE6 sea imposible.

    Si como decí­amos antes el último usuario, el empleado sin permisos de administrador, cada vez que visita un sitio se le dice «Actualiza o cambia de navegador« hacemos de su Experiencia de Usuario una mala pasada sobre todo porque él no puede tomar cartas en el asunto. Además cómo este empleado puede decirle al administrador que no puede navegar bien por YouTube o Facebook, vamos que lo tiene crudo.

    Por otra parte que un software, tecnologí­a o producto requiera una presión mediática para que su fase de declive, su agoní­a natural se acelere es un sí­ntoma de que los usuarios no tienen la última palabra, piensen en los sintonizadores TDT.

    ¿Cuántos?

    Siempre he defendido que se debe cuidar a las minorí­as, es el principio de accesibilidad, si trabajamos sólo para los navegadores y las resoluciones más habituales tendremos una web elitista.

    En este sitio y según las estadí­sticas el 26,4% de los usuarios que me visita lo hace con IE6. ¿Será porque no tengo ningún hack y este sitio se preocupa por los estándares web? ¿Por el perfil de usuarios? Decí­dmelo vosotros.

    Como decí­a Umberto Eco, ¿apocalí­pticos o integrados?

    ¿El «sistema» debe imponer su software y tecnologí­a o la red es un sistema democrático y libre donde cada uno elige?

    La dicotomí­a está servida, en pqpq.es, las preguntas y las respuestas:

  • sIFR | Facelift | Typeface | Cufon | @font-face | 5 formas de usar la fuente que quieras en tu web

    A la espera de que la propiedad de CSS3 @font-face sea implementada por todos los navegadores, se proponen alternativas para poder usar el tipo, la fuente, que queramos en nuestro sitio web.

    El más popular es sIFR, del que ya hablamos en este tutorial y del que surgen proyectos paralelos como el interesante Font Burner pero no es la única técnica, que yo conozca hay 5:

    1. sIFR | Tutorial | Tutorial en TodoWordPress | plugin jQuery | plugin para WordPress | Generador | Font Burner (Font Burner Control Panel)
    2. Facelift Image Replacement | Artí­culo
    3. Typeface.js: Generador | Artí­culo
    4. Cufon | WP-Cufon | Tutorial
    5. @font-face

    Cufon es la última que he incorporado a esta lista, tiene la misma utilidad pero su uso es más sencillo, desde su web generas el archivo de la fuente y descargas los javascripts personalizados con las opciones que decidas. El texto se reemplaza por una imagen PNG, puedes ver un ejemplo y un tutorial en los tí­tulos de los posts de Tinnta, el texto de la etiqueta h2 es reemplazada por PNGs

    img_flickr_ceslava001

    Si utilizas WordPress y prefieres utilizar un plugin, WP-Cufon hará todo menos generar el archivo de la fuente. En Eliseos.net tenéis un tutorial en español sobre cómo utilizar este plugin.

    Ví­deos de Proyecto-F explicando el funcionamiento de typeface y de cufon

    Cuestiones y Cuestionario

    1. ¿Conoces alguna técnica más?
    2. ¿Crees que merece la pena aumentar el peso de la página y la pérdida de accesibilidad / usabilidad para mostrar una fuente no de sistema? Mirad los comentarios y el debate de Elias y Skeku en este post.
    3. De no utilizar estas técnicas ¿Cuál crees que es el mejor tipo de letra para web? ¿Y el peor?
  • Accesibilidad, WordPress, compatibilidad y CSS para el iPhone y otros dispositivos móviles

    El iPhone y los dispositivos móviles son empleados cada vez más para acceder a Internet. Las compañí­as de telecomunicaciones lanzan tarifas planas e hí­bridas para animar a la movilidad de sus clientes.

    Seas de los que piensan que se viví­a mejor sin móviles o apasionado del iPhone como Arturo Goga si eres diseñador o desarrollador web te debe interesar cómo evoluciona el mercado de los dispositivos con acceso a Internet.

    navegando-iphone

    Si diseñamos pensando sólo en resoluciones 1024×768 o mayores nos olvidamos de los dispositivos móviles que como el iPhone usan resoluciones de 320×480 (o viceversa) y de los que cada vez más tienen un ultraportátil.

    Posibles soluciones para diseñar para móviles

    1.- Layouts lí­quidos o elásticos

    (más…)

  • Cómo crear Icono RSS con CSS, vectorial y cross-browsers

    Sí­, ya sé que debéis pensar que me aburro mucho para hacer este tipo de artí­culos, máxime cuando hay cientos de librerí­as y tutoriales sobre cómo crear este universal icono (1, 2, 3), pero es al contrario no me aburro, me divierto

    dibujando con css

    Ventajas de crear un icono con CSS en vez de con una imagen:

    • el icono será escalable y vectorial,
    • con fondo transparente en todos los navegadores,
    • y según el tamaño tendrá menor peso que una imagen.

    Hay dos formas de crear el icono:

    1. Utilizando la propiedad de esquinas o bordes redondeados. Una forma sencilla pero que no es compatible con IE ni con Opera  (Demo 1)
    2. Utilizando texto. Cross-browsers, compatible con todos los navegadores. El siguiente icono está formado por 3 caracteres: «o», «o» y «.» con sólo CSS, puedes probar a aumentar el tamaño del texto (CTRL +) y comprobarás que es vectorial.

    (Demo 2)

    A continuación muestro el código necesario y al final algunas conclusiones.

    (más…)