My projects website

I have uploaded some of my projects to dotsboxes.tk.

lunes, 10 de mayo de 2010

Anti patrones en Sitios Web

No, esta no es una entrada muy técnica, de hecho es bastante obvia. Son las cosas que es OBVIO que no hay que hacer en un sitio web, pero que hay ciertos diseñadorcitos gráficos que insisten en hacerlas y otras personas (ignorantes, lamentablemente) que les siguen pagando demasiado bien por hacer una cochinada.

Las capturas de pantalla están hechas según renderiza las páginas Opera, usando el modo texto. Los buscadores web (ej Google) y las personas invidentes (que usan lectores Braille o lectores en voz alta) practicamente ven las páginas de esta manera. También ayuda a saber cómo se ve el sitio para la gente con problemas visuales serios (el que nunca haya usado o querido usar la función de ZOOM que tire la primera piedra) o simplemente los que no usan el navegador que de fijo usa el susodicho diseñador gráfico (me refiero a IE 6.0). Este último caso es peor cuando alguien intenta ver un sitio desde una plataforma que simplemente NO SOPORTA FLASH, por ejemplo la mayor parte de los celulares.

(Ab)uso de imágenes

En el principio era el texto, y uno navegaba de página en página a gracias al texto subrayado. Posteriormente, con la aparición de los modems ultraveloces de 56Kbps (los que hacen bip bip boooooooooooooooop pu pu pu, ña ña, diiiiiiiiiiiiii, pun pun) y a que a alguien se le ocurrió una tal etiqueta “IMG” entonces aparecieron las imágenes en la Web.

Y quienes quiera que hicieron los estandares HTML vieron que era buena, así que no pusieron una cantidad límite para su uso. Sin embargo, todas las personas seguían pensando que el texto era para escribir las cosas que deben ser leídas y las imágenes, bueno, para imágenes. Pero llegó el “genio” y le dijo al cliente: “no, las imágenes son para poner todo, no le haga caso a la gente que habla de usabilidad. Si usas imágenes solo tendré que bajar Photoshop de PirateBay y no tendré que leer el manual de Dreamweaver, pues HTML es requetedificil, y serás tan famoso y leído como las señales de tránsito”.

Y así el honesto cliente, que siempre respetaba los altos vio que la propuesta era buena y contrató al “genio”. Y he aquí algunos de los resultados de ver http://portal.grupoice.com/wps/wcm/connect/web+content/Esp/CatTelecom/Personal/Homol/ el 9 de mayo del 2010:

ICE Celular Modo texto ICE celular modo "normal"

 

El primero es en modo texto, el segundo en modo normal. ¿De verdad necesitaban poner los loguitos de las empresas? ¿La propiedad ALT le dirá algo al “genio”?

Para los que no saben cómo sustituir las imágenes aquí van algunas sugerencias:

  • Usar texto y CSS siempre que sea posible. Si lo que desea expresar es “leíble” entonces es demasiado probable que se deba escribir con texto. Un caso especial son las fórmulas matemáticas o cosas que sabemos que no todos los navegadores pueden mostrar fielmente (como los kanjis). Otra excepción es cuando se desea hacer comparaciones, como aquí arriba (si lo ven por el celular verán la página tal como la vi yo, si la ven en modo de texto de todos modos no la verían nunca, entonces no hay problema).
  • Use texto a menos que sea imposible. Si requiere más caracteres que los pixeles que tiene la imagen es muy probable que sea mejor usar una imagen. El ASCII Art es aceptable, pero intentar reproducir cada pixel con un punto no lo es.
  • Esta bien, puede usar la imagen. Si es una parte importante del contenido (por ejemplo: “Oscar Arias inaugurando casa presidencial en el terreno que aún no se ha ni comprado”) entonces ponga la descripción en el atributo ALT. Si es una imagen de adorno (una esquina con flores) entonces NO ponga nada en ALT. Imagínese a un invidente escuchando las estupideces: Esquina floreada izquierda, borde superior de la tabla con flores, esquina floreada derecha…

Las páginas web NO son en PDF

Los archivos PDF son para mostrar un documento igual esté donde esté. Y uno quiere mostrar un documento igual esté donde esté solamente cuando va a presentar un trabajo o va a imprimir. Los sitios web son para LEERLOS. Y se pueden leer tanto en un celular mientras se espera el bus como en una Netbook de 7 pulgadas, el Wii o una iMac de 27 pulgadas. ¿A que viene esto? ¿Qué tienen de malo los PDF? A menos que sean versiones para imprimir, demasiado.

  • Muchísimos celulares NO tienen lector de PDF. De hecho, tampoco lo tienen ni Windows ni Linux.
  • Los PDF son pesados. Nadie quiere bajar 2.5Mb para ver el horario de un bus intersectorial. Más si es un vulgar horario hecho en Word y de texto plano.
  • Es un formato con muchas vulnerabilidades de seguridad.

Así que, cuando usarlos. En resumen, NUNCA. Si todavía desea usarlos hay que observar lo siguiente:

  • Cuando lo importante NO es el contenido, sino la PRESENTACIÓN. Por ejemplo, el programa de una obra de teatro NO debe estar en PDF (uno quiere leerlo rápidamente), pero la versión para imprimir y llevar al teatro SÍ puede estar en PDF (uno no quiere acomodar márgenes para imprimir). En la mayor parte de los casos es mejor crear dos versiones, una HTML para ver en línea y otra PDF para imprimir.
  • Cuando se requiere máxima fidelidad. Esto es cierto en documentos técnicos, versiones electrónicas de documentos impresos o versiones para archivar. Contratos, sobres, presentaciones, documentaciones y otros caen en esta categoría, pero solamente si se trata de algo para archivar o imprimir.
  • La versión PDF debe aportar. No se trata de guardar en PDF y listo. La versión en PDF debe estar optimizada: si es para imprimir debe tener un estilo excelente: números de página, sangrías, la mejor tipografía posible; si es para ver en pantalla: letras grandes, imágenes a todo color, más tipografía excelente, índice, etc.
  • La versión PDF debe usar TEXTO, nunca imágenes. En el peor de los casos (documentos escaneados) hay que aplicarles de ser posible OCR. Si quieren ver un ejemplo de un buen uso de los PDF vayan a http://sites.google.com/site/periodicoelfaro/ .

Un ejemplo de lo inútil del PDF llevado al máximo está en la página de la periférica, pero como el PDF no carga no voy a mostrar nada. Imagínense una página en blanco sin los horarios de los buses.

Las páginas web tampoco son Flash

Por el tono de este post parece que creo que Adobe es el enemigo de la usabilidad. Pues no, solo creo que les facilita demasiado la vida a gente que no sabe lo que hace. Y un ejemplo de esto es Flash. Esta tecnología permite hacer sitios increíbles. Increíblemente inusables e inaccesibles: intenten copiar texto, hacer zoom, buscar en la página… ¡no se puede! Y por si fuera poco no se pueden ver en ningún navegador, a menos que se haya instalado Flash (en muchas empresas esto no se instala nunca).

Puntos en contra de Flash:

  • Requiere un programa adicional. Si se puede hacer con HTML y Javascript entonces NO hay que usar Flash.
  • Para poner adornitos tontos es mejor no usarlo. Hay gente que PAGA por descargar, no es muy descarado que a alguien le cobren solo porque un baboso quería poner un botón con brillo.
  • Es lento
  • Es pesado
  • Está pesimamente hecho y suele colgarse, afectando a todo el navegador
  • Es caro y difícil de mantener. Requiere intervención manual para insertar contenido nuevo, por lo que el cliente se vuelve dependiente de un baboso que solo sabe usar Flash (en el caso de los sitios web enteros hechos en Flash).
  • ¿Videos? HTML 5 ya tiene soporte para videos
  • ¿Tipografía avanzada?. ¡Use CSS/imágenes!
  • ¿Juegos? ¿No los puede hacer en Javascript? ¿Seguro? Bueno, hay casos en que sí tiene sentido usarlo. En los casos para los que fue pensado originalmente.
  • No se puede hacer zoom, texto alternativo o hacer click en un vínculo.
  • Usualmente Flash se usa cuando se pudo haber usado un GIF animado. ¡Use GIFs animados!

Ejemplos de paginitas hechas en Flash son:

  • Los delincuentes de Noval Graphics (en muchas legislaciones el spam es delito penado con cárcel). Este es el ejemplo típico de la gente que dice hacer sitios web pero no sabe ni lo mínimo de HTML. Ni siquiera pueden escribirlo.
    • image
  • El sitio web de la periférica. Aunque no lo crean TODO es 100% Flash, la misma dirección para cada página en el sitio, el texto desaparece si le pasa una ventana por delante e incluso hay texto que aparece de cabeza. Y por supuesto, NO se puede acceder a este sitio desde un celular.
    • image
    • image
    • Nótese que ellos encontraron un problemita de accesibilidad =).

Todo en uno

También quería poner el mejor ejemplo que he visto de un sitio web mal hecho. El del ICE. Sin Flash no funciona, pero como Flash usualmente no funciona entonces este sitio suele ser inaccesible. Si alguien se quiere aventurar lo reto a que busque información sobre kölbi y las líneas 3g, específicamente los modelos de celulares disponibles. Verán abuso de Flash y de imágenes. El link es este: http://portal.grupoice.com/wps/wcm/connect/Web%20Content/esp/cattelecom/personal/personalh. Si todavía se atreven a más busquen el blog. Tiene tantos artilugios que hasta en Google Chrome es lento.

4 comentarios:

  1. Pues no aportas demasiado en tus criticas, pon links de sitios que consideres buenos, no solo lo que a tu parecer es malo...además tu blog es muy malo, no posee atractivo, creo que alguien con tal capacidad de crítica y analisis de los trabajos web, deberia presentar algo realmente bueno, ¿no crees? la verdad suenas muy pedante...att el jaime

    ResponderEliminar
  2. No estoy criticando los trabajos web como tales. De hecho hay sitios web en Flash que son impresionantes y el PDF es útil y las imágenes tambien, pero:
    1) Los sitios 100% Flash requieren más trabajo, son más caros y a la larga inútiles, pues no son sencillos de extender (es más fácil hacerlo de cero)
    2) Es software bastante pesado para la mayoría de computadoras (los que tienen una mac o un quad-core no opinen :p)
    3) Las personas con discapacidades visuales quedan ignoradas de plano. Mi blog podrá ser feo, pero cualquier persona puede verlo, ya sea con zoom o con un lector de pantalla, los sitios en flash solo con lupa.
    4) El abuso de imágenes, flash, pdf, gif, etc, etc es malo.
    5) Aquí estoy criticando la accesibilidad. Creo que no critiqué que hayan diseñadores gráficos que cobren $1500 por una página en Flash y luego cobren $100 por modificar aunque sea una sola letra.
    6) Sí, en parte "el jaime" tiene razón (hubiera puesto el jaime, eso de "Anónimo dijo..." lo veo raro). 6a) La agarré con el ICE por el excelente trato que me dieron en la agencia de San Pedro ("... toda la información está en el sitio web...", voy a ver la página desde el celular y... va entrada al blog).

    ResponderEliminar
  3. ok se lo digo por puntos:
    no se por que criticas tanto al flash se nota el poco y limitado conocimiento que tienes sobre este tema (limitado en todo el sentido de la palabra),
    Te puedo dar 50 formas fáciles de realizar web videos etc en flash sin ser un hack en esto.
    Te puedo dar mas de 10 formas diferentes y nada difíciles de pocisionar una web flash en un buscador x o y (FAIL POR LO DE ESA GENTE DE NOVALSHIT),
    Hay cosas que ni en sueños se van a poder hacer en html 5 y menos e html básico,
    Es cierto si no se sabe tratar o manejar el flash puede llegar a ser pesado pero , hola y las cargas dinamicas?,
    Y sino sabias en flash puedes agregar texto dinámico con opción para ser leído como html y ser seleccionado y le puedes agregar la opción de zoom,
    bueno no se cual es tu trauma o problema contra el flash pero hay unas cien razones mas que me dicen de tu limitado conocimiento en el tema, es mejor averiguar antes de abrir la boca o escribir sin saber... saludos

    ResponderEliminar
  4. Creo que estoy hablando de accesibilidad. Y ese es precisamente el punto más debil de Flash. Y sin embargo lo siguen usando para hacer cosas que no lo ameritan. Por supuesto que es facil insertar un video, posicionar un sitio web, hacer cargas dinámicas y todo eso pero:
    - sigue sin poder verse en el celular
    - un lector de pantalla no lo puede leer (alguien se acuerda de los invidentes, gente con problemas serios de vista, etc). A los buses de la periférica les exigen que 10% de la flotilla tenga rampas mecánicas, pero como que no se acordaron de que hay muchos invidentes que usan el bus (afortunadamente el horario es muy fácil de memorizarlo: no hay). Traumas con Flash... no ninguno (bueno, ActionScript es feo, pero puedo tolerar la ciberdiversidad de lenguajes), pero en el único navegador con el que funciona sin problemas es Chrome 6. Creo que cada herramienta para lo que fue creada... y Flash es demasiado para lo que usualmente se usa y ahora la usan para todo: solo falta que lo puedan meter en los títulos de ventana...

    ¿Porqué nadie me critica por criticar el uso abusivo de imágenes sin atributo ALT?

    Mi resumen: entre menos se use Flash, silverlight, NaCl, Java mejor. Prefieran HTML 5. Entre menos usen HTML 5 mejor, prefieran el HTML 4. Entre menos usen CSS última versión mejor, usen el CSS 2.0 o 2.1.... A menos que no tengan otra opción y deban usarlo.

    ResponderEliminar

Podés usar las etiquetas html "b", "i" y "a" para negrita, cursiva y vínculos respectivamente.
No agregue correos electrónicos directamente. Puede agregarlos poniendo algo como "soy fulanito con correo en hotmail, obviamente com". Se evitarán que ladrones como los de NovalGraphics les envíen spam (nadie sabe de donde roban los correos, entonces mejor prevenir).

Entradas relacionadas

Related Posts with Thumbnails