Por @Alvy — 7 de Octubre de 2019

Frecuentemente oímos muchas opiniones sobre CSS: que está roto, que es genial, o a veces ambas cosas a la vez (…) Es un poco como lo de: ¿esta imagen es un pato o un conejo? Dependiendo como lo mires, algo puede ser un bug o una feature, un fallo o una característica interesante.

– @MiriSuzanne

Este vídeo de @MiriSuzanne para Mozilla acerca de por qué CSS es como es, incluyendo que resulte un poco raro pero a la vez altamente conveniente es una auténtica maravilla. Una joya que debería ser estudiada antes de adentrarse en los procelosos mundos del HTML/CSS y del “diseño” (comillas en el aire incluidas) para la web. No estaría mal que lo vieran también los clientes y jefes de proyecto que encargan webs y apps –aunque probablemente no lo harán– para entender por qué algunas cosas son como son y otras no conviene hacerlas.

Cuando Tim Berners-Lee inventó la World Wide Web había documentos de hipertexto, en su mayoría artículos científicos. Pero que esa fuera la motivación original no implica que sólo sirviera para eso ni que eso siga siendo así ahora (igual que porque Gutenberg impriera primero biblias no significa que la imprenta sólo sirva para imprimir biblias). De hecho como el HTML es un estándar abierto la idea era que funcionara en todo tipo de ordenadores y dispositivos; no estaba limitado por unas reglas de diseño concretas.

Es la separación entre el HTML y el CSS (que llegaría años después) permitió al consorcio W3C seguir con estándares abiertos, con principios que funcionan en todo tipo de aparatos: tanto en los ordenadores como en los móviles, los coches o los relojes. En el mundo real esto también es así: se diseñan asientos y cinturones de seguridad que sirven para personas de distintos sexos y tamaños, y hay estándares de usabilidad para personas ciegas y edificios para quienes no puede utilizar escalones sino rampas. Esto también se aplica a las diversas interfaces de entrada y salida: teclados, auriculares, Braille y demás.

El CSS es un estándar que cuando falla, falla grácilmente, lo que quiere decir que si alguna característica nueva no funciona en un tipo de dispositivo simplemente no se usa. Se ignora. Los aspectos del diseño se unen «en cascada» hasta que el navegador recibe toda la información y decide cómo mostrarlos. Quien diseña no decide cómo se va a ver exactamente; tan sólo lo sugiere. El navegador es por tanto resiliente y a prueba de fallos; siempre lo hará lo mejor que pueda. Esa era la idea original y se ha mantenido: todo es compatible con lo que existía antes. El hecho de que la primera página web todavía funcione es toda una pista y un gran ejemplo.

Suzanne compara este trabajo con escribir un guión: se pueden incluir palabras y frases, e incluso quién-dirá-qué, pero el resultado será diferente dependiendo de los actores y actrices de la obra y de los teatros concretos en que se escenifique, o si una productora la adapta al formato serie o película. Pero la base es la misma. El CSS es contextual, está pensado para adaptarse al contexto, a los dispositivos y las aplicaciones. Por eso es tan raro. Pero esa rareza es algo tremendamente positivo, como ya ha demostrado a lo largo de su corta pero interesante vida en la Web.

(Vía Jen Simmons.)

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 1 de Octubre de 2019

HEAD

HEAD, del que existe una versión traducida al castellano (HEAD en castellano) es básicamente «una lista de todo lo que podría ir en la cabecera (head) de tu página web». Lo cual incluye elementos obligatorios, otros recomendables y otros opcionales (pero viables) en esa zona de las páginas HTML que son prácticamente lo primero que analizan los navegadores web. Es una idea de Josh Buchea y está cedida al dominio público (licencia CC0) y traducido por Álvaro Araoz y Kenneth Luján.

Hoy en día –que estas cosas cambian de tanto en tanto– son obligatorios el meta charset y el meta name="viewport"… como los dos primeros elementos de la página, seguidos del title. El primero indica el conjunto de caracteres que se va a usar (normalmente UTF-8), el segundo cómo es la visualización (versiones desktop/móvil) y luego el título de la página.

Todo lo demás es opcional, pero lo único válido son los elementos meta, link, title, style, script, noscript y base. De cada uno hay una explicación y ejemplos: cuándo se usan, cuándo no usarlos, ejemplos con código real… Ojo que por ejemplo para meta o link hay casi infinitas variaciones, dependiendo de si esos meta-tags los va a «entender» Google (u otros robots/buscadores) o si tienen carácter de estándar aprobado –o no– como en el caso del link rel, que varía casi cada mes.

Resulta una guía bastante completa y detallada, sobre todo para localizar en plan rápido algo que pueda hacer falta o hayas visto en alguna otra página web.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 30 de Septiembre de 2019

El vídeo explicativo de The Spinner [¡cuidadín!] es tan inquietante como perturbador: un servicio que ofrece influenciar subconscientemente a la persona que elijas mostrándole contenido en los sitios que suela visitar. Dicho así suena un poco peliculero, pero luego explican cómo lo hacen y más o menos todo encaja: envían un «correo inocente» a la persona objetivo, que al visitar una web recibe una cookie que permite identificar su navegación a partir de ese momento. Desde entonces los sitios web que visite que colaboren con The Spinner (por ejemplo, mostrando publicidad, contenidos patrocinados, publicidad programática y similares, algo ubicuo hoy en día) mostrarán selectivamente imágenes y textos personalizados sólo a esa persona con el fin de lograr el objetivo definido.

Entre los diversos «posibles usos» altamente controvertidos del servicio se incluyen «proponer matrimonio», «dejar de fumar» o «iniciar una relación sexual». También muestran algunas de las sugerentes imágenes y textos (estilo titulares guarripeich como los que lees cada día por todas partes) con los que explican que se consigue el efecto. Es algo bastante burdo pero directo al grano. Se supone que todos estamos expuestos a miles de impactos de este tipo al día a través de los medios, y que verlo –aunque sea subconscientemente– diez, veinte, cincuenta o cien veces al cabo de unos días debería influir de algún modo.

The Spinner no es una broma ni del todo falso: es una iniciativa real, con una empresa detrás, que ofrece el servicio básico por unos 50 dólares. Otra cosa es que funcione. Y otra que sea legal, por no hablar de ético. Según investigó Ipsa en Hacker News todo lo que hay detrás es bastante turbio: la empresa tiene enlaces con el mundo de la publicidad y el juego online, un origen incierto, varias sedes, unos pocos empleados y no muchos clientes (calculan que unos 500). La mayor parte parecen perseguir además fines sexuales: se ve que «la cabra tira al monte» y la más vieja razón del mundo acaba siendo más habitual que el espionaje industrial o las ganas de quitarse de vicios como el tabaco voluntariamente. El servicio además estaría prohibido en Europa por las leyes de protección de datos.

Por otro lado sabemos que la publicidad subliminal es una leyenda urbana, pese a que irónicamente luego también es ilícita en España según los artículos 3 y 4 de la Ley General de Publicidad:

Artículo 4. Publicidad subliminal. A los efectos de esta ley, será publicidad subliminal la que mediante técnicas de producción de estímulos de intensidades fronterizas con los umbrales de los sentidos o análogas, pueda actuar sobre el público destinatario sin ser conscientemente percibida.

Más claro agua. La Ley también podría decir que es ilegal el control mental y la tortura a distancia desde satélites espía pero eso no haría reales las «armas psicotrónicas» (!!??), imagino que se entiende con esto que ilegalizar algo no le da validez científica.

Todo este asunto de The Spinner se relaciona con la manipulación publicitaria de masas; véase al respecto el altamente recomendable libro de Marta Peirano El enemigo conoce el sistema. Se mencionan siempre casos como el Cambridge Analytica y su influencia en la victoria de Trump o el resultado de la consulta británica sobre el Brexit. Pero no hay que creerse todo lo que se dice en artículos y documentales, y menos lo que dicen las propias empresas rarunas:

No hay pruebas de que Cambridge Analytica sea eficaz (…) Lo que sabemos sobre microtargeting nos dice que no es muy poderoso a la hora de persuadir votantes. – Kiko Llaneras

El caso es que tampoco está claro si esa «tecnología mágica» para manipularnos como a conejillos pudiera ser más, menos o nada efectiva si se dirige a una persona en concreto, con mensajes a medida y con la intensidad y repetición suficiente. Sus creadores no dicen que «funcione siempre» sino que prefieren calificarla como «altamente efectiva». Y si no funciona además la gente tampoco se va a quejar mucho, dado los fines turbios para los que suele usarse. Yo desde luego no arriesgaría mi dinero ahí. Ni para ligarme a Claudia Shiffer. Me huele más a timo.

Más sobre el tema en otros sitios serios:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 30 de Septiembre de 2019

Trucos de rediseño de interfaces de usuario

Steve Schoger y Adam Watham son los autores de Refactoring UI, que es un libro de diseño web sobre rediseño de interfaces de usuario. Técnicamente el término es refactoring, pero como no existe refactorización en castellano –aunque se usa para diseño y software– podríamos dejar en «rediseño»: arreglar una web utilizando más o menos los mismos elementos pero presentándolos de forma más adecuada, limpia, útil e informativa.

El libro me lo encontré tras leerme el estupendo hilo con trucos de rediseño que Schoger republicó en Twitter. Decenas de ejemplos de cómo arreglar cosas que están mal, o que están bien pero no excepcionalmente bien. La búsqueda de la perfección, con ejemplos claros y visuales. Entre mis favoritos: tablas y formularios:

Trucos de rediseño de interfaces de usuario

Lo impresionante es que cada «truco» cabe en 280 caracteres y una imagen. Imagen que muestra el antes y el después, y que incluye indicaciones sobre el código HTML/CSS a usar: tipografías, tamaños, colores RGB, etcétera. Es un ejemplo de elegancia y sutileza, algo que diseñadores, programadores web y responsables de producto deberían ver e interiorizar, pero que a cualquiera viene bien para entender cuáles son los problemas y cuáles las soluciones.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear