Resumen de la conferencia Paris Web 2016

¿Qué es Paris Web?

¡Es una asociación que se dedica a reunir a «la gente que hace la web», como les gusta decir! ¿Pero qué significa eso? En realidad, se trata de un encuentro que tiene lugar una vez al año, en el que, durante unos días, los profesionales de la informática —o, más concretamente, de la web— se reúnen y hablan sobre su día a día profesional. ¡Allí se encuentran desarrolladores, diseñadores, ergonomistas (mis favoritos) y curiosos de la web!

En un ambiente alocado, entre unicornios, kilts, pelo azul y fotobombas, dimos inicio a este maratón de conocimientos.

Los temas de moda este año han sido:

• La seguridad de los datos personales recopilados en la web
• La accesibilidad digital

Comienzan tres días de locura con la vigilancia en Internet…

Título de la conferencia: Anatomía de una desintoxicación de Internet bajo supervisión

Así pues, Thibault Jouannic es quien inaugura Paris Web 2016 con su ponencia: «Anatomía de una desintoxicación de la web bajo vigilancia». En ella nos enteramos de que nuestros datos se registran, más o menos, sin que nos demos cuenta (¡eso ya lo sabíamos, ¿no?!). Pero también nos enseña cómo ver con mayor precisión el impacto de este registro de nuestros datos a través de la aplicación Light Beam (https://www.mozilla.org/fr/lightbeam/).

El problema es que no todo el mundo sabe cómo detectar o evitar las trampas de la recopilación de información. Por eso, el primer paso para protegerse es pensar en los usuarios —que nunca leen las condiciones de uso— y, por lo tanto, ayudarles definiendo de antemano en las especificaciones funcionales:

• ¿Qué datos es relevante registrar? ¿Realmente es interesante saber cuál es tu fecha de nacimiento o tu sexo?
• ¿Y cómo almacenarlos correctamente? ¿Se pueden incluir en el mismo lugar tanto tu dirección postal como tus preferencias sexuales?
• proponer la no conservación de los datos para proteger a sus usuarios
• cifrar los datos, si se almacenan
• ¡y respetar la ley, sencillamente!

Título de la conferencia: ¡Si no hay avances, no hay caras de enfado!

Continuemos con nuestra historia junto a Thomas Gasc, quien nos habla de la renovación de la página web de Mediapart. Se enfrentaban a problemas de seguridad, ya que no era posible que toda la página web estuviera en https, lo que generaba desconfianza a la hora de realizar el pago. Sin embargo, tras realizar pruebas con los usuarios, descubrieron que estos se sentían tranquilos en cuanto veían que se indicaba que el pago era seguro. ¡Indicarlo es tranquilizar!

Luego continuaron con el proceso de pago en:

• añadiendo nuevas formas de pago
• información sobre los plazos de pago
• Simplificar el campo de la dirección: claro, en un sobre de papel es solo un cuadrado blanco, así que ¿por qué tener un campo para el número, otro para el edificio, otro para el nombre de la calle, otro para el número de la calle, otro para el código postal, etc.?
• Evita que tus usuarios salgan de la página, ¡están llenos de errores! Si ven un campo, querrán rellenarlo, así que si les das la posibilidad de introducir un código promocional, lo buscarán en otra parte y, ¡zas!, perderás la venta. Es mejor usar una casilla de selección y, si está marcada, mostrar el campo para rellenar 😉
• Seguimos con la creación de una cuenta de cliente. Bueno, no, dejemos que no la creen; de todas formas, ya tenemos toda la información que queríamos 🙂

Una vez que hayas conseguido puntos de conversión, es necesario trabajar en la tasa de retención. Y sí, una vez realizado el pedido, no dejes al usuario con la sensación de que todo ha terminado con un mensaje que diga «gracias, tu pedido ha sido registrado». No, no, no, sobre todo eso no, ¡porque es en ese momento cuando todo sucede, cuando todo se decide! Hay que mimar a los clientes y darles más información. Vale, tu pedido se ha registrado correctamente, pero esto es lo que va a pasar: 1. Embalaje, 2. Envío por correo, 3. Blablá, 4. Blablá. Luego recibirás un correo electrónico cuando se envíe, etc. Pero antes de irte, ven a descubrir nuestras novedades 😉. En resumen, ¡la vida no se detiene después de la compra!

Título de la conferencia: ¿Es fácil lanzar una página web a nivel internacional? ¡Sí, si se tiene todo en cuenta!

Pasemos al ámbito internacional con Aurélie Guillaume, desarrolladora, que nos cuenta su experiencia en el desarrollo de una página web a nivel internacional. Estos son los errores que hay que evitar:

Las fechas

En una tienda online, se importan la fecha y la hora, por ejemplo, para enviar los paquetes. Sin embargo, las fechas varían según el país y la ubicación.

• Para automatizar el cambio de hora, hay que tener en cuenta la norma ISO 8601 y el UTC.
• Ojo, algunos países tienen varias zonas horarias…
• Y, sobre todo, si tienes acciones que dependen de la hora, como concursos o ventas relámpago, tenlo en cuenta ^^
• Y tendréis que lidiar con el horario de verano y el de invierno; sí, no hay una norma ni una regulación al respecto, cada país hace lo que quiere y ¡todavía hay disputas!

Los formularios

• Todo el mundo conoce el captcha gratuito de Google, ese que dice «I am not a robot». Pues bien, si lo eliges para tu página web porque es muy práctico, ten en cuenta que en China todos los captchas están prohibidos, así que ya no tendrás protección ^^
• Atención: en los países asiáticos, los nombres pueden caber en un solo ideograma, por lo que, si restringes el campo del apellido o del nombre a más de dos caracteres para que sean válidos, tus usuarios asiáticos no podrán iniciar sesión.

SEO

• Google no es el motor de búsqueda número uno en todas partes
• En muchos casos, iniciar sesión con Facebook es obligatorio, pero en algunos países las redes sociales son de pago y no todas están disponibles.
• CDN: Para no tener que implementar un servidor por país (TATA, Akamai, Amazon)
• Contenido duplicado para idiomas comunes y rel=canonical

¿Y qué hay de la ley en todo esto?

• Si vas a desarrollar tu negocio en China, debes disponer necesariamente de un servidor ubicado físicamente en ese país,
• No se puede vender de todo en cualquier lugar y a cualquiera; ¡la mayoría varía según el país, por ejemplo!

Título de la conferencia: Seguridad web desde el diseño

Es la sección de seguridad con Jérémie Bourdin y Benjamin Leroux.

La cosa empieza bien con la brecha de seguridad de Yahoo en 2014, o la de LinkedIn, con más de 100 millones de cuentas pirateadas y más de 300 000 contraseñas, o incluso la de Castorama, donde un hacker aficionado ejecutó un script en la función de autocompletado (por ejemplo, «sierra tonton tonton»).

Pero ha entrado en vigor un nuevo reglamento, el RGPD (Reglamento General de Protección de Datos de la UE), es decir, un nuevo texto europeo que se aplica a todo el mundo. El plazo de adaptación es de dos años. La novedad: la responsabilidad sobre los datos de carácter personal; una empresa debe plantearse cómo proteger sus datos y demostrarlo en caso de auditoría (-> privacidad desde el diseño). Si la empresa no ha prestado atención a ello, será sancionada.

Algunas malas prácticas

Si hay diseños deficientes, hay que preguntarse a qué riesgos se va a exponer mi proyecto y cuáles son las posibles soluciones. Si no se tiene esto en cuenta, puede tener graves consecuencias para la resolución del problema o para la facilidad de mantenimiento… Algunos ejemplos:

• La comprobación de los datos de entrada
• Un uso incorrecto del cifrado; a veces, las contraseñas están almacenadas sin cifrar en el código
• La falta de un marco de trabajo
• Secreto almacenado directamente en el código
• Falta de registros, ya que si los hubiera sería más fácil detectar dónde está el fallo
• Sistema de autenticación falible
• Heterogeneidad de los entornos
• Silos entre arquitectura y desarrollo: ¿qué equipo pensó en la protección?

Si tienes curiosidad, echa un vistazo al código de un dron, jajaja

Hoy en día, los problemas se deben principalmente al tiempo de comercialización —lanzar un producto rápidamente— o a que nadie tiene conciencia de la seguridad y se siguen prácticas de desarrollo inadecuadas.

Pero, ¿qué hay que hacer?

En primer lugar, ¡la seguridad no se reduce a los antivirus!

Se trata de una etapa transversal que debe integrarse en cada fase del proyecto. Los fundamentos:

• Hay que prestar atención a la disponibilidad; el sitio web debe estar disponible en todo momento.
• Y luego está la confidencialidad: tengo que proteger los datos, las contraseñas y demás
• La integridad: si tengo un 0 en una casilla, no debe convertirse en un 1
• La trazabilidad o auditabilidad: ¿cómo puedo asegurarme de lo que ocurre dentro de un sistema?

¡La seguridad se aprende! Por ejemplo, con OWASP, que elabora fichas prácticas y, sobre todo, una lista con las 10 vulnerabilidades más frecuentes en los sitios web, y también con Open SAMM, que te permitirá conocer tu nivel de seguridad y mejorarlo.

Para más información:

• Aprovechar un marco de trabajo
• Ir creando tu caja de herramientas poco a poco
• Aprovechar la experiencia entre proyectos

Día 2

Título de la conferencia: La accesibilidad sin complejos: lo que quiere hacer contigo

Nicolas Hoffmann nos expone su punto de vista sobre la accesibilidad.

Esta palabra está muy de moda… ¡«sin complejos» y no «accesibilidad»! El objetivo es compartir reflexiones sobre esta cuestión. Empecé a poner en práctica herramientas y buenas prácticas, porque mi primera reacción fue culpar de los errores a mis compañeros de trabajo, ¡pero en realidad eso no sirve de nada!

Lo importante es hablar antes de criticar.

El último becario que tuve me preguntó: «¿Por qué tenemos que trabajar en la accesibilidad?». Le respondí: «Por el bien de todos». Luego le hice una demostración en una página web. Evidentemente, no había ninguna medida de accesibilidad implementada, así que hice una demostración negativa… Y mi becario no parecía muy motivado para trabajar en ello. ¡Había creado una percepción negativa! ¡Le había mostrado que la accesibilidad es el producto que no funciona!

Para el siguiente, decidí explicarle que en materia de accesibilidad disponemos de muchas herramientas nuevas a las que no estamos acostumbrados a utilizar, como el zoom al 200 %, los lectores de pantalla, etc. Observé el efecto contrario: mi becario estaba entusiasmado por conocer y descubrir nuevas herramientas. Luego, al mostrarle el antes y el después, ¡pude demostrarle las ventajas de la accesibilidad!

Tras unos años de experiencia, la accesibilidad me ha permitido repasar y perfeccionar mis habilidades; y es que, efectivamente, se trata de un ámbito transversal.

La accesibilidad se escribe A11Y (porque entre la A y la Y hay 11 letras J). Así que, al reelaborar los complementos, he podido crear Vani11y, donde encontrarás un montón de cosas accesibles.

Título de la conferencia: El kit de supervivencia

Emeline Racon nos cuenta su experiencia con los grupos focales.

Tras algunos contratiempos al inicio de su andadura en el campo de la ergonomía —como un taller de juegos de cartas con militares que se marcharon porque les resultaba demasiado infantil, o un taller de dibujo que no funcionó—, tuvo que encontrar una solución para evitar que se repitieran esos casos.

La solución es preparar un kit de supervivencia, que tiene cuatro objetivos:

• Protegerse = anticiparse a los talleres, saber qué tipo de personas voy a encontrar, identificar a los responsables de la toma de decisiones y comprender bien el contexto

El kit de herramientas de diseño de servicios me permite trabajar mejor en ello.

Utiliza el taller de drawToast como actividad para romper el hielo; la idea es simular cómo funciona una tostadora y crear sinergia.

Aquí tienes el kit de herramientas de la ponente:

• Alerta y comunicación = hay que explicar, repetir, pero también escuchar y dejar hablar a los participantes y, sobre todo, transmitir adecuadamente el proceso
• Hidratarse
• Alimentarse, buscar recursos para mantenerse activos = asistir y participar en otros talleres y establecer un intercambio de opiniones

Título de la conferencia: Aplicaciones web progresivas: llega el futuro de la web

Hubert Slabonnière nos cuenta su viaje a la nieve… Para saber cuáles son los momentos más adecuados para usar el móvil o el ordenador.

En resumen, cuando el uso es frecuente, preferirá una aplicación nativa, como por ejemplo para la banca, mientras que si el uso es más esporádico, preferirá utilizar la web y no instalar la aplicación nativa, como por ejemplo Doodle.

El problema de la aplicación es que no tiene URL, por lo que es difícil compartirla con alguien que no la tiene… «¡Las URL son la vida!» Hoy en día hay más visitantes únicos en la web móvil que en las aplicaciones, y cuando miramos las cifras de descargas de aplicaciones por mes y por visitante, ¡nos da miedo! Por ejemplo, en China, la gente se pasa memorias USB con las aplicaciones porque tardan demasiado en descargarse...

Los 5 pilares en los que hay que trabajar:

• Tiene que ser enlazable
• También es responsivo
• Safe, cuando se utiliza una aplicación nativa, ¿cómo se puede saber si es segura?
• Independencia en materia de conectividad, sí, pero no hay que olvidar que los próximos millones de usuarios de Internet se encuentran en África y en Asia, por lo que hay que pensar en las situaciones sin conexión

En ese momento se puede crear un service worker en JS #&@%$`£#§ bla, bla, bla... En fin, evidentemente fue un momento súper interesante para el desarrollador, pero yo no entendí nada 😉

-> Aquí hay más información: https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API

• Arquitectura
• Reactivable: anima al usuario a seguir interactuando con tu aplicación. ¡No nos olvidemos de las notificaciones push!

WCAG: ¿qué camino tomamos a partir de aquí?

¡El gurú de la accesibilidad, John Foliot, nos lo cuenta!

Las WCAG datan de 1999; en aquel entonces había 14 recomendaciones y solo 65 puntos de verificación. El enfoque era realmente superficial y el texto era muy rígido (mientras escribo estas palabras, tengo la impresión de que se refiere a la actualidad). Con la nueva versión, el objetivo es invitar a los lectores a reflexionar sobre qué es la accesibilidad.

4 principios:

• Contenido que ve el usuario
• Manipulación de este contenido
• Comprensibilidad del contenido
• Y la solidez

Hoy en día, esos cuatro pilares siguen vigentes.

Continuamos con otros estándares como el UAAG, que se refiere principalmente a los navegadores.

En diciembre de 2015 se publicaron las directrices para las herramientas de creación de contenido (ATAG 2.0).

En 2016, ya sabemos que ya no se crean páginas web, sino aplicaciones web, lo que conlleva una obsolescencia y deficiencias en cuanto a su uso. Con las normas WCAG 2.0, UAAG 2.0 y ATAG 2.0 se pueden abordar todos estos problemas.

Hay otras deficiencias, como las relacionadas con la consideración integral de las discapacidades.

Por eso vamos a elaborar una nueva norma AG (directrices de accesibilidad). Se denominará «proceso silver» y constará de varias etapas:

• Incluir todas las perspectivas en el proceso
• Dar a conocer nuestros esfuerzos y nuestro trabajo
• Facilitar y ampliar los medios de comunicación
• Utilizar datos para elaborar nuestras normas
• Analizar el ámbito de aplicación
• Establecer pasos claros

4 posibles enfoques para el proyecto Silver:

• La opción del enfoque basado en la investigación y el proyecto de diseño
• Opción por un avance más rápido: trabajar de forma iterativa con ciclos cortos
• La opción que ofrece mayor flexibilidad, pero aún no hemos podido concretarla
• La opción más económica es aprovechar lo que ya tenemos e intentar optimizarlo

Hoy no sabemos qué opción elegir.

Nuestra hoja de ruta está planificada para un periodo de entre 5 y 7 años con el fin de implementar esta nueva versión de accesibilidad. Pero no podemos esperar todo ese tiempo para actualizar las versiones de las WCAG. Nos aseguraremos de que la versión 2.1 se mantenga estable y no afecte a los cambios introducidos en la versión 2.0. En la versión 2.1, vamos a trabajar mucho en la verificabilidad del cumplimiento.

Vamos a tener nuevas recomendaciones, como por ejemplo la relativa al manejo del teléfono: «cuando se ofrecen gestos para manejar el dispositivo, debe existir un mecanismo que permita utilizar estas funciones mediante el tacto, salvo en los casos en que la función subyacente requiera una entrada que no pueda proporcionarse a través de la interfaz táctil, por ejemplo, los datos de recuento de pasos o la presión barométrica (nivel AA)».

Caso de uso:

• Agitar para deshacer. Un usuario con una tableta acoplada a una silla de ruedas necesita una forma de deshacer la acción que no implique agitar el dispositivo.
• (excepción) Las aplicaciones de recuento de pasos o el GPS no necesitarían una fuente de datos alternativa, ya que estos datos no provienen directamente del usuario, sino que forman parte integrante del dispositivo.

También cambiarán otros criterios ya existentes, como el 1.4.3 sobre el contraste mínimo. Queremos modificar este criterio para que no se aplique únicamente a la tipografía, sino también a los iconos.

Así que hoy, en este preciso momento, tenemos 50 nuevas propuestas de criterios. Nos preguntamos realmente cómo van a poder asumirlas las empresas.

Próximo paso: 2.1, primer trimestre de 2018, y vamos a intentar que la periodicidad sea de dos años.

Ya es hora de que nos incorporemos oficialmente al equipo:

GitHub: https://github.com/w3c/wcag21/issues

Correo electrónico: w3c-wai-ig@w3.org

Sección 508

Por otra parte, gané un libro porque mi pregunta fue acertada ^^ Sí, pensé en el equipo, porque daba a entender que muchos criterios AAA pasarían a ser AA… ¡Ayuda!… Así que le pregunté si las próximas versiones tendrían en cuenta la complejidad de los proyectos, ya que en todos los proyectos complejos no se puede hacer AAA. Su respuesta fue que sí (uf) y que debíamos ponernos en contacto para hablarlo y unirnos a los equipos de trabajo.

Y yo también me volví fanática del señor Accesibilidad.

Título de la conferencia: Taller sobre trastornos de la atención

TDAH con o sin hiperactividad

Los trastornos de atención afectan tres veces más a los hombres que a las mujeres; una de las hipótesis es de carácter social, aunque también se sabe que existen factores genéticos, pero no se sabe si dependen de los cromosomas sexuales.

Síntomas:

• desatención y distracción
• tendencia a no seguir las instrucciones; las personas que la padecen deben comprender el objetivo de la tarea para llevarla a cabo; si no les queda claro, no la realizarán, lo cual suele ocurrir a menudo en el caso de los niños,
• dificultades para organizar su trabajo y su tiempo; con esta discapacidad, se pierde la noción del tiempo, y una persona puede pasar horas realizando una tarea sencilla
• Dificultades para aprender tareas que requieren un esfuerzo mental; no se trata de una limitación intelectual, pero la persona dedicará tanto tiempo a buscar otras ideas que acabará desanimándose.
• Pérdida frecuente de objetos, pérdida de datos e información, problemas de memoria a corto plazo.
• dificultad en las conversaciones

¿Qué es la falta de atención?:

• ser desorganizado,
• pérdida de atención,
• dificultades para prestar atención a los detalles, comete muchos errores por descuido
• habla a menudo con rapidez
• dificultades para centrarse en un solo tema
• capacidad para olvidarse de las actividades
• alta sensibilidad a los ruidos y a los acontecimientos

En resumen, todos podemos presentar estos síntomas en algún momento, pero se considera que existe una discapacidad si los síntomas persisten durante más de seis meses.

Hay muchas comorbilidades y trastornos:

• de oposición (entre el 30 % y el 50 %)
• de tuberías (25 %)
• ansioso
• de la motricidad
• del sueño
• de la expresión oral del aprendizaje
• desregulación emocional

Para estas personas, el ruido les ayuda a concentrarse, ya que les permite dejar de «escuchar sus propios pensamientos» y centrarse en su trabajo. El ruido y el bullicio les permiten centrar la atención en lo que les rodea en lugar de en sus propios pensamientos.

Cómo ayudar:

Evitar que surjan pensamientos intrusivos

Las personas con esta discapacidad utilizan lectores de pantalla para evitar la información superflua

«El enlace SEO es mi principal enemigo»

«Cada imagen, palabra o dato: una nueva vía de escape». Por lo general, todas las imágenes sin texto alternativo son una vía de escape, lo que significa que no están relacionadas con el contenido y despiertan mucha curiosidad en mí.

«Por ejemplo, cuando leo un artículo, si la foto no tiene mucha relación con el tema y no aporta información adicional, a mí me hace pensar en un montón de cosas. En esta foto —un hacker con una sudadera con capucha y una máscara de Anonymous—, cuando la miro, pienso que tengo que ir a comprarme un jersey nuevo y ver una película de acción en la que los actores lleven la máscara de Anonymous, y de repente pierdo el hilo de lo que estaba haciendo.

«Las animaciones deben utilizarse con discreción y moderación, porque yo soy capaz de pasarme una hora mirando cómo se mueve un sol por la página. Así que hay que hacer que eso se detenga».

La información debe estar disponible nada más abrirse la página, y no dos minutos después; de lo contrario, puede distraer al usuario. También hay que contextualizar la información de forma sistemática y evitar el ruido visual.

Los consejos de estas personas:

• navegar en pantalla completa
• dividir mi navegación en varias ventanas
• cerrar Slack
• utilizar bloqueadores de anuncios para eliminar lo innecesario (no crear antiblocadores de anuncios)

Ejercicio:

• comprar un libro en la Fnac
• comprar un billete de tren en voyages-sncf
• buscar información sobre la erupción de La Reunión
• matricularse en una carrera a distancia en la página web de una universidad

En conclusión, esta conferencia resultó interesante para poner en palabras técnicas que ya se utilizan; fue muy enriquecedora en cuanto a la accesibilidad, ya que nos dio un anticipo de lo que nos espera en 2018 y nos permitió conocer el trastorno por déficit de atención.

¡Enhorabuena! Has llegado al final del artículo y, para recompensarte, te contamos que vamos a organizar un MixYourTalent sobre el tema: «Conviértete en probador de accesibilidad móvil en solo una hora».

Apúntate la fecha