da scritch net works - Mot-clé - design

We need Web Share

Da Scritch — 2019-06-26T05:21:00+02:00

We finally get a way to add share buttons without forgetting a service or use. And respecting the privacy of our public. Go into all the world wide web and preach the method to all creation ! Well… who can use it, because, alas, that function is not everywhere.
Webdev

This article is translated from french, namely « Le blues du Web Share », in a series describing the development of the cpu-audio.js webcomponent.
Excuse my French as we say in… French.

Today, I talk about what lies behind the button.

Here is my player, in its last development version. You can ⇓ jump ⇓ to ⇓ the ⇓ next ⇓ chapter ⇓

You will need to go on my dascritch.net websit to read and experience my post. If you can read this text, you may probably not be on it.

Yes, I know, I’m talking in French and this show is 5 years old, but I’m not sure to be a better radio host today. Yes, the interface is in French here, because my blog usually gets contents in French. It may be started in English.

The switch

The main interface of the player

This button (on the right of the main interface) will switch it to a share one. It is possible to hide this button and so denying access to the share interface via hide="actions" attribute. It may be useful, by example when your website already have a share system.

Once the button clicked, you get some possible actions, on the whole width of the main interface of the web component :

Seen in full width. If you don’t see exactly that, there is no problem : it’s the subject of my post.

This panel has some different actions as direct downloading the media file (according to which codec can be read by the browser, as we still get some old guns as Safari) and also share the sound via e-mail, twitter or facebook to relatives, sending them the canonical URL of the sound’s page. Due to limitations on those social networks, only e-mail gets a working media-fragment starting the play at the exact moment you were listening.
From left to right :

a copy of the cover, going back to the main interface,
share on Twitter (vanilla link),
share on Facebook (vanilla link),
share by e-mail (mailto: link),
download the media (according to which codec can be read),
cancel, going back to the main interface.

As my web component is in liquid design and mobile first, the interface is simplified on small width : cover and text labels are hidden.

Yes I know. For any critics on icon’s design, please commit me better ones. I'm a coder, not Picasso.

Canonical URL means that if you want to share the radio show on cpu.pm front page, as i’m only showing the last broadcasted episode, its audio tag will be removed after next one is broadcasted, so there is a better choice : providing the page of the episode. And please, don’t look like you don’t use this useful tag. Yes, even if, as I do, you don’t code a website optimized for desktops, and a .m one for mobiles, because, you know, it’s a loss of time.

If the canonical URL is not the one where is hosted the player, the canonical="" attribute will do the job.

The wish

We already have browsers with a share on social networks menu on mobile platforms. I’ve explained in a 2014 post in French about why I put again share buttons on my blog. It was 5 years ago, and, even if the general interface of the browsers moved, this over useful interface is still here.

Seen there in Firefox on Android in 2014, and was literally rocking, getting you directly in their respecting function in the native apps.

Cool. Except that your browser will take the title of the page, a title encumbered with unmeaningful elements as separation glyphs, name of the site before title of the page, in extenso description of old-school SEO with a bunch of keywords names verbs persons marks important etc… Up to the user to clean it up and rephrase it.

The witch

Here enter the good fairies of the web standards : The W3C introduced navigator.share() aka WebShare, a function standardizing how to do it and allowing to suggest a bit longer description.

This function has numerous wins :

being standard (in theory, I’ll explain later) ;
not forgetting a service used by your reader (instead of the facebook/twitter classical duo) ;
use a native control of the host OS, really more useful on smartphones ;
deep sending you to the share function in the native app ;
not tracking the users as do social networks with rich buttons (this is a shared win with classical HTML links) ;
not tracking the users by the hosting website, guessing which sharing service they use ;
not encumbering the small screen of a smartphone with gazillions of services.

Calling it is damn simple.
I’m really delighted having a so lean and perfectly thought process, instead to construct an instance builder with parameters set by another class serving a specific object and call it via an event dispatcher.

♫ In a webpage, https:// served , on a user action (as ), cook * :

navigator.share({
            'title': document.title,
            'text': document.querySelector('meta[name="description"]').content,
            'url': window.location.href
        });

* in French, it sings as the Cake d'Amour song in the famous « Peau d'Âne » movie, directed by Jacques Demy. That’s what I call love.

If you have a clean coded html page, your whole job is done. If it’s a piggy mess, you should start to not forget the <meta... description tag.
By the way, you can share files with this standard’s level 2, and an API to test the share (navigator.canShare()).
Pure genius !

The twist

Except :

CanIUse.com support stats as taken when I wrote the original french post.

This API is not available on desktop computers (except Safari Mac) ;
It is also not available on Chrome Desktop, even in responsive mode (by the way, not a real mobile emulation, and may induce you in error) ;
This API is as today only on iOS and Chrome Android ;
On iOS, each native app should carry its own sharing list, so we had a lot of missing ones due to the lack of a system-wide registry. We have it finally with, guess what ? Experimental support of navigator.share !
It is still not possible of a online service accessed via a browser to be registered, as long Web Share Target API is nowhere implemented (and if it will be somewhere, we need to have it accepted by the user via a specific interface, to avoid spam attempts).

We have a very volatile scene of social networks, and the landing of decentralized hives, where inhabitants is supposed to easily migrate from an instance to another one. For 3 years Web Share is so under-esteemed and only usable on one platform is a real shame. I’m deeply convinced we have technical ability to build a WebExtension doing that job on desktop browsers.

I have some request to add, or being able to add, sharing option for a lambda website. Sure, I’d only put Facebook and Twitter, some people shamed me for forgetting Diaspora*, VKontakte, Mastodon, etc.social.random() in the action interface of my player. They are right.
Except the more you get in a limited place, smaller each button will be and all those services will be tight on the bench a wide as a smartphone. And, whatever we can do, there is no way to keep an exhaustive list of any available share services, even for specialized audience, for a real obvious point : New services appear each day.

So I’m re-using this really lame joke, again.

Looking this image again, we note that a lot of those social services that died during the last 5 years. And having so much begging puppies makes the whole page unreadable.

The tweet

Well, I can not declare those missing services in the webcomponent code, and create an API permitting the web-developer to add some ?

Ahem. No. Wrong idea.

Because a such function will induce other problems : charging the work to whom will include my webcomponent in his website, asking to have some javascript knowledge and read my API's documentation. I can hear you, noisy kids : even with a big RTFM, you won’t.
And I can bet that the web operator will forget some sharing services.

It also means giving to the integrator some parameters that may be harmful :

describing a color, injecting it via the style="background-color" attribute ;
describing a monochromatic SVG logo, needed because of the color inversion on :hover and :focus, and betting the image will be exactly matching my template constraints and is not having an embedded javascript ;
describing an URL canvas where to send for that sharing service, if a such URL exists.

Yes, I’m talking about you, social services with sharing systems that don’t support a simple link for that job. With the main motive to force your users using your mobile app full of tracking ads. You, nasty boys.

So what ?

I don't know what to tell.

Today, a feature detection replaces the facebook/twitter/e-mail buttons by a unique button, launching the navigator.share() function. You can see it only on Chrome Android and Safari.

The action interfaces, with the navigator.share() button

Screenshoted on Safari Mac by Hadrien Lanneau. It pops up a contextual menu where the mouse is.

And later, yes, build a polyfill WebExtension may be a great idea (in a more generic and without jQuery way, compared to web-share-api by C. Zuber). As long as sharing services will collaborate without pollute it with analytics and other ad-tracking.

For me, the best looking interface to add a share service in my browser is to re-use what already exists in Firefox to add a search engine. Because it's a lean interface, explicit one, standard-based and most of the work is already done there.

It’s up to you to build it, now. IMHO, this is not a over-difficult job to complete, and will be still a future-proof solution instead of any old AddThis script.

You can also support initiatives to add WebShare into :

Again, it was a long post talking about code, standard, implementations, but, for me, it worth it because this issue is not limited to my cpu-audio.js.
My next post in this series will be in French and talks about CSS, standards and implementations for some… strange colors.
May be it’s a frightening title, may be related to a horror story, so I have to say the killing sentence :

I’ll be back… soon !

Le blues du Web Share

Da Scritch — 2019-06-18T06:52:00+02:00

Il y a enfin un moyen pour mettre des boutons de partage sans oublier une plateforme ou un usage et ceci, en assurant le respect de la confidentialité de vos ouailles. Allez et partagez la bonne nouvelle ! Enfin, ceux qui l'ont, car évidemment, la fonction est très peu répandue.
Webdev

An english translation is available.
Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6. (enfin, la 6.1, car j'ai dû modifier l'icône dont il est question).

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Je continue le tour des coulisses du webcomponent cpu-audio.js. Et aujourd'hui, on va parler de ce qu'il y a derrière son bouton

Je vous remets le player, dans la dernière version de dev. Sinon, ⇓ sautez ⇓ directement ⇓ au chapitre suivant ⇓

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Ouais, le sonore date un peu, mais c'est pour illustrer et de toutes façons, je ne fais pas mieux en radio depuis.

The switch

L'interface normale du lecteur ci-dessus

Ce bouton (à droite de l'interface normale) bascule l'interface de lecture, vers une interface de partage. À noter qu'il est possible de cacher ce bouton et rendre l'interface d'action inaccessible via l'attribut hide="actions", ce qui peut se comprendre, par exemple si le site a déjà sa propre interface de partage.

Une fois le bouton cliqué, on se retrouve sur le panneau d'actions qui prend toute la largeur du panneau principal du web component :

Vue en pleine largeur. Pas de panique si vous ne voyez pas exactement ça : c'est le sujet de l'article.

Ce panneau propose différentes actions comme la possibilité de charger directement le sonore (en fonction du format qui est supporté par le navigateur, parce qu'il reste des vieux tromblons comme Safari), et aussi celui de partager le sonore par e-mail, sur twitter et sur facebook à des amis en renvoyant vers l'URL canonique de la page du sonore. À cause des limitations imposées pour les partages sur les réseaux sociaux sus-mentionnés, seul le partage par e-mail permet en l'état de profiter du media fragment pour pointer exactement au même moment.
De gauche à droite :

reprise de la cover pour revenir à l'interface de base,
partager sur Twitter (lien simple),
partager sur Facebook (lien simple),
partager par e-mail (lien mailto:),
télécharger le sonore (en fonction du codec accepté par le navigateur),
annuler, revenir à l'interface normale.

Comme le web component est en interface liquide et en mobile first, l'interface est simplifiée sur les petites largeurs : la cover disparaît, et les textes aussi.

Oui, alors, si vous avez des remarques sur le design des icônes, rien ne vous empêche de proposer mieux. Je suis programmeur, pas Picasso.

URL canonique voulant dire que si par exemple vous partagez l'émission qui est en une du site cpu.pm, vu que c'est la dernière émission diffusée, elle y disparaîtra à l'émission suivante, donc il vaut mieux directement renvoyer vers la page de l'émission. Et ne faites pas ceux qui ne connaissent pas, vous devriez utiliser le tag. Oui, même si, comme moi, vous ne doublez pas un site prévu pour desktop avec un m. pour mobile parce que ça fait trop perdre de temps.

Si l'URL canonique de ce sonore n'est pas celle de la page où est intégré le player, l'attribut canonical="" est là pour ça.

The wish

Il existe déjà sur les navigateurs des plateformes mobiles un menu de partage de lien vers les réseaux sociaux. Je l'avais déjà fait remarquer dans le billet où je parlais de la réapparition des boutons de partage sur mon blog. C'était y'a 5 ans, et si le design général des navigateurs a changé, cette interface hyper pratique est toujours là.

Ici, dans Firefox Android en 2014, et ça déchirait déjà pas mal, renvoyant sur les applications natives correspondantes.

C'est cool, sauf que, bien souvent le navigateur va reprendre le titre de la page, lequel est bien souvent encombrée d'éléments inutiles genre glyphes de séparation, titre du site en plus de la page, description in extenso pour du SEO à la papa bourrée de mots-clés mot-clé keyword key word terme important , etc… Ce qui laisse le boulot à l'utilisateur de nettoyer et de remettre en forme.

The witch

Arrivent les bonnes fées des standards du web : Le W3C a introduit navigator.share() aka WebShare, une fonction qui standardise l'action et permet de proposer un texte descriptif un poil plus long.

Cette fonction présente plusieurs avantages :

être standard (théoriquement, on verra plus loin) ;
ne pas oublier un service de l'utilisateur (au lieu de rester sur le diptyque facebook/twitter) ;
utiliser un contrôle natif de l'OS beaucoup plus pratique sur les smartphones ;
envoyer directement le lien à l'application native installée dans son interface idoine ;
ne pas pister les utilisateurs par les réseaux sociaux en proposant les boutons enrichis (avantage partagé si vous utilisez les liens HTML classiques) ;
ne pas pister les utilisateurs par le site web en devinant quels services de partage l'utilisateur emploie ;
ne pas encombrer l'écran du smartphone avec trouzemillions de services.

L'appel est hyper simple.
Ça fait même hyper plaisir d'avoir quelque chose d'aussi simple et correctement pensé, au lieu de devoir faire appel à un constructeur de classe, à des paramètres instanciés par un autre constructeur pour un objet spécifique, et d'envoyer via un diffuseur d'événement.

♫ Dans une page… ♬ dans une page web *, ♫ servie en h… ♬ servie en https://, sur une action utilisateur (genre ), lancer :

navigator.share({
            'title': document.title,
            'text': document.querySelector('meta[name="description"]').content,
            'url': window.location.href
        });

* Honte à moi, oui, j'ai bien chanté ce paragraphe sur l'air du Cake d'Amour dans « Peau d'Âne » de Jacques Demy. Et maintenant, vous l'avez dans votre tête, votre journée sera foutue. Plaintes en commentaires ↓, merci

Si votre site est déjà bien conçu, vous n'avez quasi plus de boulot à faire. Si votre site est conçu comme un cochon, il va déjà falloir apprendre à ne plus oublier les balises <meta... descriptives.
D'ailleurs, on pourra aussi partager des fichiers avec le niveau 2 de ce standard et une API pour tester l'envoi (navigator.canShare()).
C'est génial !

The twist

Sauf que :

Les chiffres de support par CanIUse.com relevés à l'écriture de ce billet.

Cette API n'existe pas sur ordinateurs de bureau (excepté Safari Mac) ;
Elle est aussi indisponible sur Chrome Desktop, même en mode responsive (qui n'est pas un vrai émulateur mobile, et n'est pas toujours fiable pour tester réellement) ;
Cette API n'est pour l'instant supportée que par Chrome sur Android et iOS (eh !) ;
Sur iOS , chaque application devait prévoir sa propre liste de partage, il y a donc souvent des oublis faute de registre commun au système. C'est enfin arrangé depuis la dernière version d'iOS avec, devinez quoi ? Le support expérimental de navigator.share !
Il n'est pas possible pour un service en ligne accédé via le navigateur de s'inscrire, tant que l'API Web Share Target n'est implémentée nulle part (et si elle l'est, il sera impératif de demander l'autorisation à l'utilisateur par une interface de validation, afin d'éviter le spam).

Devant la volatilité des réseaux sociaux, et surtout l'arrivée des ruches décentralisées où un habitant est supposé pouvoir migrer facilement vers un autre service, il est vraiment dommage de Web Share soit si peu considéré depuis 3 ans, et cantonné que sur une plateforme. Il y a pourtant sûrement le moyen de créer une WebExtension qui fasse le taf pour les ordinateurs de bureaux.

Alors, on m'a souvent demandé la possibilité de rajouter dans le lecteur une option de partage vers un site particulier. Ben oui, j'avais mis que Facebook et Twitter, beaucoup me reprochent de ne pas avoir mis Diaspora*, VKontakte, Mastodon, etc.social.random() dans l'interface d'action de mon player.
Sauf que, évidemment, plus on en met dans un espace délimité, plus les boutons de chaque site sont petits et les services sont serrés sur une banquette large comme un écran de smartphone. Et quoique l'on fasse, impossible de couvrir toutes les solutions de partage, même pour les sites spécialisés, ne serait-ce que pour une raison évidente : Chaque jour naissent de nouveaux sites.

Et du coup, je ressors du même billet précédent cette image à l'humour douteux. .

À revoir cette illustration, on remarque immédiatement que nombre de ces services sociaux ont disparu dans les 10 ans. Et qu'un tel foisonnement rend la page totalement illisible.

The tweet

Donc si je met pas les services dans le code du composant, peut-être pourrais-je créer une API pour que l'intégrateur puisse en rajouter ?

— HIN ! HIN ! F.B.I. Fausse Bonne Idée !
— Hein ? Quoi ? Encore ?
— Ben oui, je ne m'en lasse pas.

Car cette possibilité induirait un autre problème : elle laisse le travail à la charge de celui qui intègrera le composant sur son site, ce qui induit le prérequis qu'il s'y connaisse en javascript et qu'il lise la doc de mon API. Je vous connais bande de petits coquinous : même avec un RTFM, vous ne le faites jamais.
Et évidemment, invariablement, l'opérateur du site oubliera d'autres sites de partage.

Cela induisait aussi d'inclure des paramètres par l'intégrateur qui pouvaient poser soucis :

intégrer une couleur en l'injectant via l'attribut style="background-color" ;
intégrer un logo monochrome en SVG, et on est obligé d'être monochrome à cause de l'inversion de couleur au :hover et :focus, sans compter le pari que l'image soit ajustée aux contraintes de mon canvas et que l'intégrateur n'aura pas mis de js embarqué quelconque ;
intégrer un motif d'URL où renvoyer pour le service ciblé, à condition qu'une telle URL existe.

Oui, je pense à vous, les sites de partages sur réseaux sociaux qui n'ont pas de possibilité d'enregistrer par un lien simple. Souvent par volonté d'obliger leurs utilisateurs de passer par une appli mobile native bourrée de traceurs publicitaires.

Ben alors, on fait rien ?

Je ne sais quoi vous dire…

Pour l'instant, je fais une feature detection, qui fait que les boutons vers facebook, twitter et e-mail sont remplacés par un bouton unique lançant la fonction navigator.share(). Une solution qui n'apparait uniquement que sur Chrome Android et Safari.

Le panneau d'actions, avec le bouton unique lançant navigator.share()

Capture d'écran sur Safari Mac par Hadrien Lanneau. La fonction ouvre un menu contextuel à la position de la souris.

Et pour les autres, oui, construire une WebExtension polyfill serait une bonne idée (dans une version plus générique et sans jQuery que web-share-api de C. Zuber). À condition que les sites de partage participent au mouvement sans vouloir y embarquer du script analytics de traçage publicitaire.

Personnellement, je pense que la meilleure interface possible pour inscrire un site de partage en plus dans son navigateur est de reprendre ce qui existe déjà pour ajouter un moteur de recherche. Parce que cette interface est propre, elle est explicite, elle est standardisée, et les évolutions à y faire apporter ne sont pas énormes.

Pour la réalisation, à vous de tenter, je ne crois pas que cela soit hyper-compliqué, et ça sera toujours mieux à long terme qu'un antique script à la AddThis.

Et en attendant, soutenez les initiatives pour ajouter WebShare dans :

Ce billet fut un poil long là aussi, et j'ai causé de code, de standard et d'implémentation, mais je pense que cela le valait, surtout que ce problème ne s'applique pas, loin de là, uniquement à mon cpu-audio.js. Prochain épisode, on va plutôt parler de CSS, et là aussi, on parlera standard et implémentations pour… des couleurs bizaaaaaaaarres !
Si le titre vous fait peur, c'est que je tiens sûrement le titre d'un film d'horreur, et donc je me dois de sortir la réplique qui tue :

Prochaine épisode : Des couleurs impossibles

Retravailler un lecteur web audio dans les petites largeurs

Da Scritch — 2019-06-05T07:32:00+02:00

Parce que les chiffres ne mentent pas : nous sommes de plus en plus nombreux à avoir un smartphone. (Essayez de prononcer cette phrase d'un ton concerné en public sans rire, ça vous fera l'après-midi)
Webdev

Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6.

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Et cet article est long, car comme le premier, je tiens à documenter ma démarche. Et comme j'aborderais plusieurs thématiques, vous aurez plusieurs épisodes. Vous pouvez tester l'application ici ↓ dans sa version de travail en cours.

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Avant d'entrer dans le vif du sujet, je rappelle que je ne suis pas web-designer, mais un développeur d'applications web et que je n'ai qu'un minimum de bagages pour construire un web component faisant office de player audio. Que ce composant a été écrit afin de l'intégrer dans un site d'une émission radio, ceci dans le but de lier et de lire des sonores qui durent en moyenne une bonne heure. La plus longue des émissions de CPU dure 5h30, un exemple NSFW qui montre à l'extrême les contraintes.

J'ai qu'un minimum de culture en design, mais j'ai eu la chance d'avoir fréquenté depuis 2000 des designers web (des vrais) qui étaient exigeants et m'ont beaucoup appris à ~~coups de b~~ la dure.

Petits dans la poche, gros dans les contraintes

L'un des gros gros chantiers évolutifs de CPU-Audio.js pour cette version fut la mise au point d'une interface confortable pour les smartphones.

Par rapport à ceux dits de bureau, on a sur ce type d'ordinateurs deux problématiques supplémentaires :

Un écran nettement plus petit,
un dispositif de pointage bien moins précis.

Voici la comparaison avec mon web component sur mon propre blog dans sa version de Janvier 2019, tel que vu sur un ordinateur de bureau (1920 px de large) avec un pointeur de souris.

la souris a une précision au pixel et son curseur ne cache pas tout l'environnement immédiat

… et le même composant, mais vu sur un smartphone d'une largeur de 320 px (virtuels, résolution typique d'un iPhone 5 en mode portrait, en fait l'écran fait dans les 1080 pixels physiques, mais expliquer les dppx dans la foulée serait trop long).
Le disque rouge est une simulation l'espace d'appui d'un gros doigt normal prompt à la bourde.

environ 50 pixels de diamètre, sans compter l'imprécision dû au virage effectué par votre bus à une certaine vitesse

Il existe un certain nombre de règles de bonnes pratiques pour y palier :

mobile first : On présente en priorité les éléments les plus importants de la fonctionnalité voulue ;
On aménage des zones cliquables suffisamment grandes et espacées ;
Le composant doit s'afficher très très vite, et donc avoir un code très léger avec le moins de dépendances possibles, si possible aucune ;
Responsive Web Design (RWD) : On ajoute l'accessoire quand on a plus de largeur disponible.

J'étais déjà parti avec un design liquide (ou fluide ou coulant) pour être le plus confortable, dans l'idée que mon composant puisse être intégré quels que soient les choix sur le design du layout des sites. Pour la légèreté, je tente de maintenir le code compilé sous les 50 kB, même s'il a pris 20% de poids en plus entre la v5 et la v6.

Mais il y avait encore quelques manques dans la version 5 pour que mon player audio soit vraiment confortable à utiliser sur smartphones.

Et déjà un premier souci avec les CSS media queries breakpoints

Car effectivement, il est possible de cibler des définitions CSS par des règles media queries qui s'activent en fonction de la largeur de l'écran ou de la finesse de l'afficheur physique (via l'unité de ratio dppx évoquée plus haut entre parenthèses, oui je sais, ça fait lourd à lire tous ces apartés). Pour les définitions en fonction de la largeur d'écran, cela revient à définir un breakpoint, une dimension critique d'une media query ou le chouïa qui fait changer l'aspect, des propriétés peuvent changer plus ou moins radicalement. J'ai choisi cette stratégie car c'est la plus pratique pour une conception en design liquide.

Mais il y a un gros problème dans l'idée de concevoir un web component installable partout : Il n'est pas possible d'appliquer lesdites règles en fonction de l'espace disponible dans un élément parent en pur CSS. C'est faisable mais avec des polyfill en javascript particulièrement lourdingues.

Je m'explique : Si l'écran est d'une largeur d'écran de bureau (vers 2000 et au-delàààààà), mais qu'un intégrateur installe mon composant sur un site, dans une gouttière qui fait 320 pixels de large, l'aspect de mon composant ne sera pas adapté car les boutons seront trop gros, et par exemple pour les titres, ils ne rentreront pas dedans.
Autre exemple : supposons que la mise en forme du site est entre un bloc principal à largeur variable, et une colonne à taille fixe de 200 pixels. Si le lecteur est dans le bloc principal, il serait logique qu'il change de forme pour une largeur inférieure à 320 pixels quand la fenêtre tombe en dessous de 520 pixels…

@media (max-width: 320px) {
    dommage, hein ?
}

Tommy Hodgins a fait une proposition auprès du W3C qui me serait super utile et totalement indiquée dans mon cas : Les CSS Element Queries qui proposent de définir en breakpoints la dimension d'un élément englobant.

La proposition CSS Element Queries permettrait de définir des règles appliquées si la largeur de l'écran fait 320 pixels ou moins ou que l'élément #conteneur a une largeur de 320 pixels ou moins :

@media (max-width: 320px) , @element #conteneur and (max-width: 320px) {
    J'en rêve, mais j'en rêve ! (c'est déjà dans mon code)
}

Hélas, cette proposition ne semble pas être au programme du CSS working group du W3C et donc pas près d'être implémentée nativement. Et évidemment, tout polyfill est lourd, même avec l'arrivée prochaine de l'API ResizeObserver.
Pourquoi ? Imaginez que vous chargez 4 ou 5 web components dans la même philosophie de conception, qui chacune lance son polyfill… Ouais, évitez le CSS-in-JS dans ce cas-là : vous risquez de ne plus rien contrôler correctement.

Autre frustration : il n'est pas possible d'utiliser des variables CSS pour définir des breakpoints, des changements de résolutions significatifs. Dans mon projet, le style est défini est dans une CSS locale, tandis que les variables reparamétrables par l'utilisateur sont dans une CSS globale, normalement, toutes les variables qui intéressent les graphistes sont dans la CSS globale… sauf ce qui défini les breakpoints !
C'est pour ça qu'ils sont codés en dur à 640 px, 480 px et 320 px.

Pourquoi une telle frustration ? En fait, ce manque est intentionnel : les variables sont justement variables selon les usages et leur définition, pouvant vite devenir un casse-tête pour les navigateurs web à recalculer dans un media query.

Et on pourrait aussi avoir des… maladresses genre :

--largeur : 1000px;
@media (max-width: var(--largeur)) {
    --largeur : 500px;
}

Do not want comme on dit dans le secteur.

Il tourne actuellement au W3C une autre proposition, définir des constantes CSS d'environnement définissant des informations pour l'ensemble du document. Ces constantes peuvent être définies par le système hôte, le navigateur web ou dans la CSS (et on imagine, idéalement sur le sélecteur :root).
À leur appel en lecture, ces constantes peuvent prendre un paramètre optionnel qui sert de fallback. L'invariance de la valeur représentée en quelqu'endroit du DOM le rend alors utilisable pour définir un breakpoint.

Là aussi l'idée est géniale, et le dossier semble un poil plus avancé, l'implémentation native étant satisfaisante pour être jugée comme générale l'année prochaine. On a la lecture, pas encore la déclaration

:root {
    --largeur : 1000px;
}

@media (max-width: env(--largeur, 320px)) {
    ooooh ouuuuiiiii
}

breakpoint sur un élément, comme on peut, comme un porc

Dans l'immédiat, je suis arrivé à le faire sur le mini-site de présentation du projet grâce à une astuce limite du crade à faire dégainer l'Inspecteur Dirty Hacky

Pièce à conviction n°1, faites entrer l'accusé

J'ai utilisé des <iframe>. Et pourquoi est-ce crade ?

Il faut créer une ressource indépendant pour chaque instance appelée, ici 3 documents html de plus ;
Évidemment, il faut recharger le script cpu-audio.js, donc le charger et l'instancier 4 fois pour cette page ;
Idem pour la feuille de style ;
On instancie 3 objets DOM de page en plus, bouffant de la RAM ;
C'est impossible de faire un design liquide propre dedans sans pleurer sur certains cas ;
Et on perd des fonctionnalités comme :
- le lien avec media-fragment (c'est très très con : c'est la fonction qui a motivé l'écriture de mon script),
- l'anti-cacophonie (un seul sonore lu à la fois dans la page),
- les playlists,
- et le contrôleur global (le bouton ▸︎play dans l'encart à fond noir à gauche sur ma capture) ne voit pas ces instances.

Je ne l'ai utilisé que pour faire la démo des largeurs. Ne faites jamais ça chez vous, les enfants !

Le problème de la navigation fine sur une largeur fine

Revenons sur les problèmes fonctionnels de mon web component sur les ordinateurs de poche.

Le manque qui me semblait le plus gênant était de revenir en arrière d'une phrase dans un sonore d'une heure. Le lecteur peut interpréter certaines touches comme ← et →, mais aucun smartphone n'a de clavier avec des touches fléchées depuis la mort du dernier Blackberry à touches physiques. Reste le positionnement au doigt ~~levé~~ posé, et donc la navigation dite fine s'y révèle imprécise.
Améliorer ma time-line était indispensable.

Une time-line c'est ÇA :

N'oublions pas que mon web component est prévu pour être utilisé dans une page web, et qu'il a été conçu en design liquide, donc si on passe son smartphone de l'orientation portrait à paysage et que sa dimension n'est pas fixée, le visiteur gagne autant de largeur, donc de précision pour naviguer dans la time-line. Mais la prise en main me semblait toujours insuffisante.

Dans pratiquement tous les lecteurs audios, la time-line est à la fois un indicateur et un élément de contrôle auquel on s'attend pour tout média audio ou vidéo d'une certaine durée. Elle indique à la fois la position en cours de lecture, la partie préchargée immédiatement lisible sans avoir à attendre, et permet à l'auditeur de sauter à une position. Plus cette time-line est large, plus le positionnement au pointeur par l'utilisateur est précis. Plus le sonore est long, moins ce positionnement est précis.
Je ne saurais dater son apparition, mais il me semble qu'elle est apparue avec le premier Quicktime (1991) en tant qu'adaptation de la time-line des éditeurs de sons qui présentaient la forme d'onde du sonore en cours d'édition, et ceci depuis les années 1970s.

Avant de me remettre ~~au redesign~~ à la refactorisation de mon lecteur, et vu que moi-même je ne suis pas parfait, j'ai regardé ailleurs et essayé des applications natives sur smartphones. En me concentrant sur son comportement lors du passage d'une disposition portrait à paysage. Certains choix y sont surprenants, et pas uniquement sur les durées affichées (passée, restante ou totale).

Quatre exemples de time-line en natif

L'application Youtube l'agrandi aussi en passant en mode paysage. En mode portrait, elle utilise le maximum de largeur d'écran.

Mais pourquoi ai-je pris une vidéo d'Eugène Lawn ?

HenryMP, héritier d'un excellent player audio (Appollo sur Cyanogen OS), se montre encore moins aisé : si on décide de basculer l'écran du mode portrait au paysage.... la time-line n'est pas plus grande pour autant. Frustrant.

J'imagine que la logique y est plus d'écouter des singles d'environ 4 minutes et de mieux voir la pochette de l'album, pas forcément de naviguer dans un DJ-set de 2 heures ou dans une conférence au Collège de France

Note : Cette application n'est plus maintenue depuis 4 ans, elle est présentée ici pour l'exemple.

Podcast Addict, qui est une excellente application orientée podcast (merci Capitaine Évidence), a quelques manques dans sa prise en main pour naviguer. En gros, si l'émission n'est pas chapitrée ou n'a pas de liens explicatifs dans son texte descriptif, on pointe sur la time-line puis on utilise des boutons pour se positionner plus finement.

Dans la vue présentation d'un épisode, basculer en mode paysage étend la time-line.

Sauf que, petite inconsistance : sur la vue propre à un sonore, en mode paysage, la time-line est… plus courte. Oups.

Je termine ce tour avec une application très particulière, celle de Les Croissants, qui propose une matinale par modules, composée en fonction de vos centres d'intérêts.
(Manque de bol : La société Les Croissants a fermé la veille de la publication programmée de cet article. Pas d'bol.)

En haut, vous avez une vue sur l'ensemble de l'émission dans une time-line globale, et au milieu, chaque chapitre a sa propre barre de défilement, mais à la verticale, sur la gauche.

On a certes une redite de la time-line entre la vue totale (horizontale) et celle par chapitre, mais ce qui est nettement plus notable et bizarre est que la progression des time-lines des chapitres n'est pas constante, puisque la hauteur de cet élément est fixe, mais que la durée peut varier (entre 3mn et 7mn). Mais ces bizarreries sont plus une signature et non gênantes à l'usage.

On a vu quelques outils de consultation destinés au public, j'aimerais vous présenter un outil professionnel de lecture de média :

Le jog shuttle du Beta SP

Le magnétoscope Beta SP de Sony est avec sa cassette Betacam un engin de chantier de l'audiovisuel des années 1980s-2000s. Costaud, robuste, très cher et indispensable pour toute production de qualité. La première fois que j'ai pu en utiliser un, j'ai immédiatement adoré l'usage du bouton jog shuttle ! Oui, même en pleine frustrajoie.

Vous ne pouvez pas louper le jog shuttle : c'est ce gros bouton rond noir proéminent idéalement placé sous votre main droite sur le panneau inférieur.
Photo non créditée sur Pinterest

Dans le mode shuttle en pause ou pendant la lecture, vous pivotez le bouton rotatif, la bande défile alors vers l'avant ou l'arrière plus ou moins rapidement, entre le ralenti et l'accélération ×8 en fonction de l'angle de rotation. Relâchez, le bouton rotatif revient en position neutre.
Mais si vous cliquez sur le bouton, le ressort est désactivé, et le mode de fonctionnement passe en jog, où vous faites défiler les images en tournant le bouton. Comme si vous bougiez manuellement la bobine de la bande sur un bon vieux reel-to-reel ReVox, ou que vous caliez un disque vinyle (étant à Radio <FMR>, j'ai voulu être DJ). Ce qui permet un calage à l'image près, indispensable pour le monteur vidéo.

On a donc un outil de calage qui passe d'un clic d'un positionnement grossier au calage à l'image élémentaire. La prise en main est incroyablement intuitive une fois qu'elle vous a été montrée.

À 1m42s, une petite démo avec un lecteur XDCam portable, mais il s'agit d'un bouton combo (voir le paragraphe suivant). Pour 60€, je vous aurais intégré cette vidéo éclairante avec un vrai BetaSP. Et y'a celle-là montrant un autre point de vue.

À noter que certains magnétoscopes très haut de gamme des années 1990s avaient un combo bouton central shuttle rotatif et pourtour jog à ressort. Peut-être fut-il utile pour monter les Sept Premiers Bitomans.

Depuis, la génération Betacam est passée.
Au prix de la bande, les BetaSP sont devenus des pièces de musée, et on monte au clavier et au trackpad. Mais le jog shuttle est resté dans cette micro-culture industrielle pour ceux qui ont connu avant l'informatisation totale du banc de montage. Pas mal de monteurs vidéos, qui ont un jog shuttle wheel sur leur poste de montage. Les control knob prévus pour Windows 10 tels le Surface Dial s'en approchent mais n'ont pas le retour haptique avec ressort, si intuitif.

Et dans les logiciels ?
Il me semble qu'une version (bêta ?) de QuickTime Pro avait tenté à la fin des années 1990s d'ajouter dans un panneau de son interface une molette de défilement… qui ressemblait trop furieusement au jog-dial, une molette crantée cliquable que Sony incrustait absolument partout. Et quand je dis partout, ce jog-dial a été la signature des produits Sony de la fin des années 1990s : sur les baladeurs Mini-Discs (utile pour titrer un MD, mais dont l'usage bourrait de saletés l'intérieur de mon MZ-R35), le téléphone Z5 (celui de l'An 2000) ou encore les PDA Clié. Il me semble que les designers de Sony se soient retenus pour les télés et playstations.
Apple a retiré l'interface avant un procès prévisible, ou peut-être en souvenir de l'échec de la molette de volume du Quicktime 4 ?

Mais je m'égare dans mes rushes.
Alors l'idée d'un jog shuttle dial est super, mais non-intuitive pour le visiteur lambda d'un site à qui il faudrait lui expliquer le manuel, or, rappelons la règle d'or du design réussi :

S'il faut expliquer le fonctionnement d'une interface grand public
⇒ c'est que ton design est loupé
⇒ F.B.I. Fausse Bonne Idée.

Accessoirement, elle est aussi un poil lourd à écrire from scratch. Pas infaisable, juste lourd. Et prendrait de la place sur l'écran.

Maintenant qu'on a fait ce petit tour de l'État de l'Art pour se mettre en appétit, passons à l'action !

Supprimer les bords ronds

Un truc totalement idiot où j'ai pêché par coquetterie : j'ai mis des bords ronds au début et à la fin de la time-line. En fait, cela rend moins facile de viser le début d'un sonore (oui, les recherches avancées ont prouvé que statistiquement, nous cherchons plus souvent à revenir au début qu'à aller dans les 5 dernières secondes d'une émission d'une heure). Donc tant pis pour les bords ronds, on revient au bon vieux rectangle.

Je vais prendre exemple sur mon propre blog, avec une de mes émissions actuelles qui ne dure qu'une heure : Sur 320 pixels de large, le web component fait 291 pixels de large à cause de la mise en page.

La time-line fait 195 pixels de large, les bords ronds en bouffent 2×4 pixels.

Je me suis appliqué la Règle des Cinq Pourquois pour chercher la vraie raison de ma décision graphique. Alors, euuuuuh… les bords ronds sont moins agressifs, parce qu'il y a trop de rectangles, Steve Jobs a inventé les rectangles arrondis… Au final, j'avais mis ces bords ronds sans aucune raison valable.

Bon ben, on vire !

À 18 secondes par pixels pour un sonore d'une heure, cela faisait 2'27" rabotées par pure coquetterie, et non pas par design.

Parce que, oui, il faut se rappeler que le design n'est pas qu'une question de couleurs et de formes mais surtout de praticité pour tous. Faire du décor ne suffit pas et n'est pas du design.

Agrandir la time-line

Passer de la souris à la précision d'un pixel sur un écran de 52 cm de large (1920 px soit 96 dpi) à un écran tactile de 8 cm de large (1080 px soit 400 dpi, plus qu'un album de bd !) avec la précision d'un gros pouce… inutile de dire que sur smartphones, une telle précision peut entrainer autant de dégâts collatéraux qu'une guerre chirurgicale. Et cette imprécision devient de plus en plus problématique quand on a mis en ligne un podcast qui dure une heure (voire 5h30), rendant encore plus problématique un bête besoin comme celui de revenir d'une minute en arrière dans une interview.

Il était évident que garder la time-line contrainte entre les deux boutons ▸︎play/⏸︎pause et action n'était pas une super idée graphique : Je perdais environ 2×48 px en largeur disponible, ce qui n'est pas négligeable quand on a moins de 320 px de large.

Pour reprendre l'exemple de mon blog, la time-line fait 195 pixels de large soit 18 secondes par pixel pour un sonore d'une heure

Il m'a fallu jouer une fugue en CSS mineure pour que cette barre bascule en-dessous de ces boutons pour gagner en largeur. Comme je voulais aussi garder l'indication des longueurs de chapitres (les lignes noires discontinues), je considère qu'elles deviennent transparentes aux actions pointeurs en dessous d'une certaine largeur d'écran, pour éviter un appui malheureux dessus.
Oui, si c'est conditionné avec un breakpoint, c'est que j'ai utilisé une propriété CSS qui influe les interactions du curseur avec des éléments. Cette propriété qui tient de la magie vaudou mérite votre attention : pointer-events : none;

Retravaillée la time-line fait toute la largeur du web component, 291 pixels de large soit 12,4 secondes par pixel pour un sonore d'une heure.
Vous noterez aussi que les deux boutons ont perdu un poil de hauteur et que la place laissée au timecode dans la liste des chapitres est devenue élastique ce qui permet de gagner des lignes dès la première entrée.

Comme l'utilité d'une telle finesse est moins pressante sur de plus grandes largeurs, qui correspondent en général à des ordinateurs avec des dispositifs de pointages plus précis (le doigt occupant une fraction moins importante de l'écran, ou ayant un stylet voire la souris), la disposition entre les deux boutons revient au-delà d'une certaine largeur.

Deviner où l'on vise d'un coup d'œil

On le voit sur la capture au-dessus, j'ai fait apparaitre sous la time-line une indication pointilliste des chapitres. Elle existait depuis un an, mais uniquement dans les grandes largeurs. Celle-ci est désormais aussi visible sur les petites largeurs, mais il n'est pas dit que tous les utilisateurs de mon script vont penser à renseigner un manifeste de chapitrage au format WebVTT. On en reparlera dans un chapitre à part, j'ai beaucoup à dire sur le sujet ; si cela vous intéresse, vous pouvez déjà vous amuser avec mon éditeur en ligne.

Pour aider visuellement à sa navigation, j'ai ajouté une fonctionnalité qui permet d'afficher l'enveloppe du son. Il s'agit d'une option, disponible via l'attribut waveform="".

Pour des raisons évidentes de performances, l'image de l'enveloppe en question est pré-générée au moment de la compression du sonore en PÀD (prêt à diffuser). Afin de tester la fonction et de donner un exemple fonctionnel dans ma doc, j'ai profité d'une fonction méconnue de l'utilitaire en ligne de commande sox, véritable couteau suisse pour travailler du son avec le minimum de dépendances. Un script qu'on trouve souvent dans des chaines de publication audio industrialisées sur des serveurs de rendus.
Anecdote : j'ai utilisé cet outil en 2004 pour faire des messages de répondeurs personnalisé par prénoms et pour biper des ringback tones. Un script de 20 lignes permettait à des ingés son de gagner des journées de travail en supprimant des silences superflus, concaténant des sons et normalisant le rendu.
L'option pour générer ce graphique est spectrogram. Par rapport à la traditionnelle vue de la courbe, elle permet de mieux distinguer les voix et les musiques sur une très petite hauteur, ici 8 pixels de haut. C'est pas toujours vrai et c'est surtout un choix personnel, il est susceptible d'évoluer plus tard.

Comparaison entre une vue d'une forme d'onde (en haut, niveau sonore en ordonnée) et un spectrogramme (en bas, fréquence en ordonnée) de l'émission 🍺 Bière

Naviguer plus finement

Reprenons les problématiques de la navigation sur smartphone : L'écran est tout petit, et notre doigt est démesurément gros pour essayer de se placer précisément. Et donc nous avons toujours le problème de la navigation fine, quand on veut revenir de quelques secondes en arrière.

J'étais parti sur l'idée qu'un appui long sur ma time-line est une tentative pour se placer finement. Ben oui, ça m'arrivait plusieurs fois d'appuyer à un endroit du player, puis de bouger délicatement mon doigt en le faisant pivoter, tout en approchant de près mon smartphone et en tirant la langue afin de contrebalancer le manque de précision… ce qui me rendait totalement idiot dans le bus.

AHEM !
Une requête pour afficher la navigation alternative, nous disions.

L'idée étant évidemment de suivre l'analogie UX de la blague de l'interface : s'il faut l'expliquer à l'utilisateur, c'est que ton interface n'est pas bonne.

j'ai mis des boutons, juste pour voir si la requête en question marchait. Mais j'avais pas forcément idée de le garder. J'avais même réfléchi à zoomer la time-line avec des mouvements genre pinch-in/pinch-out (pincer/étendre), mais je me suis rendu compte que ce n'était ni intuitif, ni pratique, voire complètement frustrant sur iOS : le pinch-out à une certaine ampleur peut vous sortir du navigateur web pour aller vers un sélecteur d'applications (Un parti-pris d'Apple très con et totalement frustrant quand votre appli utilise le pinch, justement).
Et comme mon web component a aussi pour objectif d'être repris, hors de question de risquer une contradiction parce que le site hôte a déjà son usage du pinch-in/pinch-out.

Donc finalement, supposer qu'un appui long sur la time-line est une demande explicite de l'utilisateur vers plus de précision, me semble pas trop erroné.

Mettre des boutons ⏮ ◂◂◂ ◂◂ ▸︎▸︎ ▸︎▸︎▸︎ semblait pas trop pourri.

J'ai dit semblait, une fois de plus, je dis pas avoir raison.

La mauvaise surprise du temps

J'ai tenté de mettre une entrée de temps, utilisant un champ <input type="time">, yep, icelui : . Après tout, les smartphones ont en général un excellent sélecteur de date et d'heure.

Le sélecteur d'heure d'Android, extrait de l'excellent article sur <input type="time"> de Mozilla Developer Network.
Une chouette analogie aux vieilles horloges à aiguilles, compréhensible parce que des équipes de Google (comme Microsoft, Apple et Mozilla) ont investi des milliers d'heures sur ce problème à votre place.

Sauf qu'il y avait un os ! J'ai pris un sélecteur d'heure, faute d'avoir un sélecteur en HTML5 pour exprimer une durée. Ce qui veut dire que… l'heure peut afficher au format 12 heures avec une locale américaine ! Et impossible de le localiser de force avec un attribut comme lang="fr".

Tiens, si je règle un champ time à 0h1mn23s, dans Firefox avec l'interface paramétrée en Français, vous aurez :

bon là, vous m'comprenez si vous me lisez en Français

Et avec l'interface paramétrée en Anglais Américain (en-US), qui est l'interface par défaut pour beaucoup de monde :

Tempora mori, tempora mundis recorda comme dirait le roi de Loth,
ça veut pas du tout dire la même chose, et surtout pas une durée

En fait, il n'y a pas de règle uniforme du comportement basculant entre les affichages en 12 h ou 24 h : certains navigateurs se basent sur la langue de leur interface, d'autres celles du système d'exploitation (heureusement, le DOM expose au javascript une représentation unique au format 24 heures, idem pour l'envoi d'un formulaire à un serveur, sinon je serais devenu fou).

J'avais le même souci dans mon éditeur de chapitrage puisqu'il utilisait le même type de champ. Pour le résoudre, il suffirait d'écrire un polyfill d'affichage agissant sur un champ <input type="time"> caché… ouaip, ça craint.
Ben j'ai écrit une mécanique différente.

En résumé, pour un champ natif de durée, il manque :

soit un type de champ <input> pour gérer la durée, une décision à prendre au niveau du W3C ;
soit le respect de la propriété lang="" dans les contrôles, ce qui peut être implémenté par les navigateurs mais peut poser des soucis d'UX ;
soit la possibilité de styliser un champ <input type="time"> dans sa présentation et son interface pour basculer entre les modes 12 et 24 heures, une décision qui peut être testée par les navigateurs par une propriété CSS préfixée expérimentale avant standardisation.

Néanmoins, je n'étais pas satisfait de cette navigation alternative.

L'enfer des petits détails

La barre de navigation alternative apparaît quand on clique plus de 400 ms : au-delà, Chrome sur Android et surtout l'affreux iOS considèrent que l'utilisateur veut une autre fonction, genre sélectionner du texte. Alors qu'on a déjà désactivé la sélection de texte. Le pire étant iOS qui va lancer un sélecteur d'application qui n'a rien à voir.
À noter que pour les ordinateurs de bureau, il est possible de l'afficher en faisant un clic droit à la souris sur la time-line (la fonction normale est disponible en combinaison avec ⇧Shift).

Voilà où en était mon brouillon, que j'ai finalement gardé. Ici en faisant abstraction du champ input type="time" pour ne pas plus vous distraire avec…

Pour être le plus standard possible, j'ai créé des boutons ◂◂ et ▸︎▸︎, calqués sur les appuis de touches ← et → tels qu'interprétés dans mon web component (faisant des sauts de 5 secondes, durée paramétrable) , ainsi que ⏮ sur la touche ↖. Puis j'ai ajouté ◂◂◂ et ▸︎▸︎▸︎, qui font comme ◂◂ et ▸︎▸︎, mais répétés 4 fois.

J'ai tenté ce sélecteur, mais design liquide oblige, j'étais obligé de cacher certains boutons qui me semblaient moins utiles, d'un usage moins fréquent. notamment ◂◂, un choix décidé grâce à une technique scientifique de pifométrie, ce qui une fois de plus, vaut ce qu'il vaut et que je n'ai pas forcément eu raison.

Dans la plus petite largeur recommandée (320 px de large, soit un iPhone 5 en portrait), on a l'essentiel utilisable

Mais ces boutons étaient câblés sur l'événement click (clic de souris). Vous cliquez, l'avance se fera. Une fois. Ça serait cool de rajouter la répétition, non ? Tant que vous ne relâchez pas, l'action continue au même rythme.

Donc au final, j'ai dû écrire un gestionnaire d'appui-long/répétition pour 4 boutons, avec un mode de fonctionnement proche d'un clavier de bureau : Une première attente (400 ms) avant de commencer à répéter, puis répéter l'action sur des intervalles nettement plus courts (100 ms). Des durées paramétrables par le site, car je déteste les constantes magiques au milieu du code, et pour qu'un webmaster qui n'aime pas les réglages puisse faire mumuse avec, comme ça, il se sentira plus fort.
Ouarf.

Peut-être pouvait-on faire une accélération de l'avancée en fonction du temps qu'on appuie sur le bouton, mais je ne suis pas sûr qu'un tel système à accélération progressive soit pratique.

Bref…

In fine, j'ai travaillé les fonctionnalités sur mon lecteur audio pour qu'il soit aussi pratique à utiliser sur un ordinateur de bureau que sur smartphone.

Je ne garantis rien. Maintenant reste le plus difficile : en faire autant sur la navigation fine pour l'accessibilité.

En plus de la navigation fine, il faudrait aussi parler du chapitrage audio, mais le sujet est très vaste, il interviendra après qu'on ait parlé de Web Share...

CPU Ex0096 Bonjour à toi, Enfant du Futur Immédiat : libre et stylé

Da Scritch — 2018-11-15T11:00:00+01:00

Il faut dire cette cruelle vérité : Le logiciel libre a longtemps été une belle intention, mais très rarement beau et utilisable. Et encore de nos jours, y'a du boulot à faire à tous les étages.
Radio

Ceci est une partie du script de la release Ex0096 du programme CPU, Libre… mais moche ?, diffusé le Jeudi 22/11 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi dont la rétine est encore tout éblouie du thème de bureau violet/mauve installé par ta petite sœur.

Je crois que maintenant, tu as compris qu'il y a deux sortes d'univers informatiques : le logiciel propriétaire et le logiciel libre. Dans l'un, tu achètes une licence d'usage et tu installes le soft produit fini tel qu'il est, tu n'es qu'un client et puis c'est tout.
Dans l'autre, tu as le droit de le copier pour toi, pour ton voisin, tu peux regarder sous le capot, et tu peux même participer à son développement.

Mais si installer un Linux ou un Windows est désormais kif kif bourricot en terme de difficulté, il faut reconnaitre que le monde du logiciel libre revient de loin, de très très loin : en 2000, Linux et compagnie étaient des repoussoirs. Graphiquement affreux, fonctionnellement rebutants, et d'une prise en main malaisée pour le non-spécialiste.

Franchement, il fallait en vouloir pour mettre quelqu'un sur Linux. Il faut reconnaitre que le Mac avait un aspect classieux avec son design accueillant et simple qui fait tout pour cacher tout début de complexité à l'utilisateur, au risque de trop simplifier ; quant à Microsoft Windows, il était familier car on le voyait partout, et il donnait beaucoup de contrôles, beaucoup beaucoup beaucoup de contrôles, au risque de montrer trop d'informations.
Alors que Linux… Non mais franchement, déjà on commençait par la ligne de commande si l'interface graphique avait le malheur de ne pas être configurée. Ensuite, quand on avait enfin un shell graphique, soit le Gnome qui singe MacOS ou KDE succédané de Windows, ben on a des programmes… qui ont des interfaces très différentes. Une fois, j'ai compté que j'avais 9 types de fenêtres d'ouverture de fichiers tous très différents, selon le programme que j'utilisais. Pire que tout, certains sélecteurs proposaient d'utiliser des marque-pages pour aller plus vite vers un répertoire, sauf qu'ils ne se partageaient pas ces raccourcis entre eux. L'énervement était garanti quand on lançait un programme nouvellement installé la première fois. Ou quand on le réinstallait.

Enfant du Futur Immédiat, je ne te parle que de la prise en main quotidienne, mais imagine la gestion technique des paramètres de l'ordinateur... Mandrake avait ouvert la voie à l'époque pour simplifier l'administration de son ordinateur, à une époque héroïque où compiler le kernel n'était régulièrement que la meilleure réponse possible, une opération qui prenait une journée complète. Sauf que, et on en a déjà parlé, 20 ans après c'est toujours un bazar déprimant pour tout nouveau venu.
T'auras beau avoir des gens de très bonne volonté comme Delphine Malassigne tenter d'en parler le dimanche en famille… ben non, ça passait pas.

Et d'un autre côté, des libristes audacieux avaient tenté l'impensable : compiler leurs projets sur Mac et Windows, et de là, faire un effort pour que leur projet semble le plus anodin, le moins déplaisant à utiliser. Firefox, VLC, LibreOffice, des applications qui existent sur toutes les plateformes, et qui donc devraient être aussi facilement utilisables sur un OS libre. Ceux là on souvent reçu les huées des extrême-libristes qui n'acceptaient pas ce manque de pureté.

Le monde du logiciel libre a des efforts à faire, et comme le dit David Revoy, l'auteur du webcomic « Pepper & Carrot », parce que libre et open-source ne signifie pas au rabais ou à l'arrache. Le logiciel libre ne doit pas dire que les concepteurs peuvent tout se permettre, mais au contraire, avoir une obligation d'exigence.

Mais bon, voilà que je m'emporte, alors que le plus simple reste de participer pour que les choses soient enfin bien faites, car…
Qu'est ce qui fait qu'une interface est engageante ? Le beau.

Mais est-il facile de parler de beau ? pas tant que ça.
Et est-ce qu'une interface qui est belle est... utilisable ? Pas toujours.

Enfant du Futur Immédiat, c'est pas parce qu'un aspect graphique est magnifique qu'il est réellement design : ce mot englobe aussi le concept de fonctionnalité, l'oublier, c'est ne faire qu'à moitié le travail.

En 20 lignes pas plus : Le focus sur le champ de recherche

Da Scritch — 2018-08-17T13:42:00+02:00

Tout est une question d'accessibilité, donc de praticité de votre site web : moins y'a de clics, mieux c'est.
Webdev

Le site de mon émission CPU me demande parfois bien du temps pour résoudre des problèmes. Des problèmes d'interactions, des problèmes d'aspects ou d'accessibilité. Et pas uniquement parce que je fais ça sur mon temps de loisir, mais aussi parce qu'il vient après l'objectif de publication hebdo de mon émission, laquelle émission demande énormément de temps de préparation. Alors certes, je pourrais d'autant plus déléguer que je publie le source du thème Dotclear modifié, mais je fais aussi mes sites web pour acquérir de l'expérience, voire pour expérimenter.

Le problème dont je vais vous parler aujourd'hui, j'étais persuadé que j'allais le résoudre avec des déclarations HTML et du stylage CSS. Cela me semblait évident.

Et en fait, non.

Vous êtes ici

Dans le site de CPU, comme pour la plupart des sites à contenus, comporte 3 grandes régions fonctionnelles :

Il y a un layout de présentation générale, qui se veut minimaliste ;
une partie centrale de contenu, qui est l'intérêt de votre passage sur mon site, normalement ;) ;
et une partie secondaire de navigation censée permettre au visiteur de farfouiller dans le site si icelui l'intéresse (on peut toujours rêver).

Les 3 zones, dans une résolution confortable de bureau.

Cette partie secondaire se présente en sidebar si la largeur du navigateur le permet, sinon, elle est tout en bas de page, parce que je suis un fanatique du liquid responsive web-design. Peut-être que cette partie de navigation secondaire est trop présente et qu'il faille alléger son contenu, mais le débat n'est pas là.

La partie layout comporte un entête du site, un bandeau horizontal dont la hauteur est limité au logo de l'émission, et qui reste fixe en scrollant (merci display : sticky). Et comporte aussi une ligne de navigation rapide en 5 segments qui chapeaute le contenu et la navigation secondaire, laquelle disparait normalement en défilant.

Le header, la navigation rapide, et un exemple de contenu précédé de sa navigation contextuelle

La problématique

Ce qui m'intéresse, c'est mon lien Chercher, qui est un lien interne à la page et doit renvoyer sur le champ de recherche texte, lequel est situé dans la navigation secondaire. Et ce que je veux, c'est qu'en cliquant dessus, on voit le champ de recherche et qu'il aie le focus, pour qu'on n'aie plus qu'à rentrer des mots clés.

Je veux ça : Le champ de recherche visible, avec le focus.

Seulement, quand on cible un élément avec une ancre dans un lien, suivre celui-ci est censé faire ne sorte que l'élément entre dans la partie visible du viewport, et autant que possible, les navigateurs le mettront en haut à gauche. Et c'est pas le cas à cause de notre entête sticky qui cache le champ.

Du coup, on ne voit pas le champ texte. C'est ballot.

Note pour les experts : Cela aurait mérité de regarder comment se comporte la méthode Element.ScrollIntoView() et la toute nouvelle API IntersectionObserver.

Le laboratoire de Dexter

Donc, je me suis dit, tentons en appliquant une marge sur l'élément, pour qu'il sorte de sous le header.

#q { […] margin-top : 100px;; }

Sauf que : 1, c'est moche, le bouton OK se déforme, et 2, c'est inutile car le navigateur place l'élément sur le coin haut-gauche de son bord. excluant la marge.

du coup, le navigateur fera en sorte que le border soit collé en haut à gauche, mettant margin hors limites.

Donc, je me suis dit, appliquons les translations… pour voir…

#q { […] transform : translateY(200px); }

Ha ben oui, j'ai vu : ça fait effectivement le job, mais il faut alors appliquer tout un bazar pour décaler l'ensemble des autres éléments. On commence à entrer dans des crâderies qui feraient dégainer l'Inspecteur Dirty Hacky. Et il aurait raison tellement que ça pue.
Et puis, même si j'y serais arrivé, il faudrait toute la patience d'un vrai spécialiste CSS pour tout me remettre d'équerre. Donc, FBI : Fausse Bonne Idée.

Il existe une autre méthode, celle d'utiliser le pseudo-element :before, et du coup de lui appliquer une translation. Alors oui, cela marche, mais là aussi, j'ai un problème : le code n'a rien d'élégant à mes yeux.

Il y a un ensemble de propriétés CSS, scroll-snap points, qui semblaient intéressante, mais absolument pas pour ce que je voulais. L'idée est plus de faire une sorte de pagination et toucher le nirvâna du smooth-scrolling natif, ou, comme dans la démo du lien, faire des diapositives pour une présentation.
Note pour les experts, encore : le standard est encore en état de brouillon mais sa couverture commence à être correcte pour envisager de remplacer Reveal.JS EDIT : Cela a été fait par l'immense Nicolas Hoffmann. Je suis confus.

Le truc

Le truc n'est pas de cibler l'ancre de l'<input>, mais de son propre <label>, lequel a un padding-top confortable. Parce que vous avez été propre, et que vous avez positionné l'attribut for= pour lier le label à son champ, ce qui permet qu'en cliquant sur ce label, le champ prenne le focus clavier.

<form […]> <label for="q" id="search">Chercher avec un mot</label> <fieldset> <input type="search" id="q" name="q" /> <button type="submit">ok</button> </fieldset> </form>

Le problème, c'est qu'aucun navigateur ne songe à passer le focus au champ <input> quand vous ciblez son <label>, ce qui est un comble en manière d'accessibilité.

En fait, j'ai même remarqué que Firefox ne donnait même pas le focus quand on ciblait directement <input>, et j'en suis resté stupéfait J'ai ouvert un rapport bugzilla où vous trouverez un test-case.

Du coup, j'ai dû écrire un petit snippet javascript de ce qui pourrait bien être un polyfill pour une accessibilité évidente et mobile first.



function focus_on_label_moves_to_input() {
    let focused_on = document.getElementById(location.hash.substr(1));
    if  (focused_on === null) {
        return;
    }
    let focus_for = focused_on.getAttribute('for');
    if (focus_for === null) {
        return;
    }
    let new_target = document.getElementById(focus_for);
    if (new_target === null) {
        return;
    }
    new_target.focus();
}

window.addEventListener('hashchange', focus_on_label_moves_to_input);

Sous le capot

L'événement hashchange a lieu si vous changez la partie après le # dans l'adresse d'une page, donc sur une modification du fragment identifier. J'ai déjà fait joujou avec pour cibler un temps précis

Pour l'événement lancé, inutile de se référer à un objet event, la propriété location.hash vous donnera la partie hash (ou fragment) de votre URL, auquel on soustrait le premier caractère, forcément un # avec un .substr(1).

On va chercher l'élément cible du label, on voit s'il a un for="" avec la méthode .getAttribute('for').

À chaque étape où on frise l'incertitude, on vérifie qu'on a bien un objet et pas rien (null), sinon on return proprement, pour laisser la fonction suivante gérer l'événement. Je vous déconseille fortement de tout cacher derrière un try { } catch (e) { } : une telle structure doit rester exceptionnelle, sinon vous aurez vite d'immonde plats de spaghettis.

À la fin, on crée un événement focus en invoquant simplement la méthode .focus() de l'élément DOM du champ de recherche, parce que construire un trigger d'un focus, j'avais grave la flemme : il était 3h30 passées.

Moralité : ça fait le taf et le code n'est pas affreux.

C'était tout ce que je voulais. C'était si compliqué que ça ?

Bonus : le code est suffisament générique pour servir pour tout champ de formulaire : login, entrée de commentaire, formulaire d'adresse ou fishing de carte-bleue.

CPU Ex0077 Bonjour à toi, Enfant du Futur Immédiat : Aérophagie

Da Scritch — 2018-03-02T05:40:00+01:00

C'est gros, c'est lourd, c'est imposant. Donc l'engin doit être professionnel, solide, efficace. Enfin… sûrement… Faut pas ouvrir, ça casse la magie.
Radio

Ceci est une partie du script de la release Ex0077 du programme CPU, Maxi, diffusé le Jeudi 1/3 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi qui voudrait un pot de glace encore plus gros que ton ventre, petit gourmand !

Dans un précédent épisode, nous parlions de réduire les dimension d'un appareil sans réduire ses fonctions ; aujourd'hui, on va te conter l'inverse.
Dans les années 1980s, t'étais in quand tu exhibais ton radio-cassettes à piles. Et si celui-ci aurait dû se réduire en dimension, il connu brusquement l'effet inverse pour devenir un engin de plus en plus gros. On l'appela alors le Ghetto Blaster, ou encore le Boom-Box.
Ouais, gros ! Ça faisait gros, donc ça faisait plus puissant.
Sauf que quand tu l'ouvrais, tu avais
…
du vide…

Comme je l'ai dit dans l'émission consacrée à la miniaturisation, j'ai eu une époque où j'ai pu travailler sur du matériel audiovisuel professionnel.

La joie de toucher pour de vrai LA cassette Betacam SP : Une cartouche à bande immense, noire, rectangulaire, aux dimensions du divin Monolithe de « 2001, l'Odyssée de l'Espace », et si solide que tu pouvais manipuler d'une manière sûre et franche car elle n'était pas prête de péter. LE bidule des vrais pros de la télé, un vrai engin de professionnel, le genre matos lourd de chantier BTP à bétonner une 4 voies, qui fait passer ta VHS de l'époque pour un râteau de château de sable.
J'étais touché par la Grâce des Dieux.

Enfin, j'étais heureux jusqu'à ce qu'on me demande de regarder professionnellement une saison complète des « Power Rangers time Force »…
oui... j'ai appelé ce sentiment la frustrajoie.

(montrer ostensiblement à Anthony l'étiquette de la cassette marquée XMD se ridiculise)

Mais revenons à nos jouets de pros : J'eusse à travailler sur un Sony ES-7, une station de montage vidéo informatique.
Imagine une pile de gros boitiers, un peu comme des appareils de chaine Hi-Fi, mais en beige et qui pouvaient se racker dans les baies 19″. Donc 43 cm de côté, et idem en profondeur et sur ce carré sacré, tu empilais sur le gros cube PC, l'étage lecteur Betacam, le boitier lecteur enregistreur DVCAM-Pro,.... Et des boitiers de disques durs.
À l'arrière, chaque boitier de disques durs avait une imposante connectique, 4 très grosses prises SCSI. Chaque boitier était relié au précédent par deux de ces gros câbles qui pèsent 1 kg chacun.
Ah j'étais content d'avoir ça ! Cette tour faisait professionnel avec ses 1 m20 de haut, télé incluse, soit 2 m donc posé sur mon sur mon bureau, mais je me trimballais une caméra plus vieille pour aller filmer.

Vint un jour où, pour rire, on a décidé d'ouvrir un de ces boitiers disques dur.

Et là, la très grosse déception : Ils faisaient 15 cm de haut, mais à l'intérieur, on avait une toute petite carte contrôleur et deux disques durs en 5″¼ (soit 15 cm de large, 2.5 cm de haut, 20 cm de profondeur)... Faites le calcul : 27 700 cm³ de volume de boitier, pour 1 500 cm³ de disque et électronique.
En gros, ton chef était très heureux d'avoir acheté un très gros boiter, et 90% d'espace vide dedans.

Beaucoup plus récemment, la radio avait un compresseur en panne. En radio, un compresseur (de dynamique audio), c'est l'engin qui évite que le son sature, et que la faible voix d'Anthony semble presque au même niveau que celle de Pia tandis que la mienne ne sature pas.
L'appareil que nous utilisons le plus à Radio <FMR> est un Autocom Pro-XL de chez Berhinger. C'est un best-seller depuis 20 ans, qui sert aussi bien en bar, en discothèque et donc chez les radios locales.
Il se trouve que j'en ai un. Oui, ici, dans notre studio improvisé. Le beau bébé fait 2 kg sans sa câblerie. En fait, j'en ai deux, un intact, un dont j'ai ouvert le généreux boitier en alu (de 19″, qui l'eut-crû ?) pour en extraire la partie électronique… et on a… deux petites cartes d'une largeur de 2 cm et 30 cm de long, 355 grammes en tout.
wi wi wi… Regarde par toi-même :

L'Autocom Pro-XL, dans toute sa splendeur, prêt à être racké, et pesant ses 2 kg.

La partie réellement fonctionnelle de l'Autocom, les deux cartes qui sont fixées sur les deux façades. Entre : que du vide (outre les cables).

Tout récemment, j'étais salarié d'une entreprise qui publie une application mobile pour consulter des journaux. Les journaux leur sont fournis en document PDF. Format peu pratique sur smartphone, mais universel chez les imprimeurs. En Europe Du Nord, les journaux passent de plus en plus à l'édition purement numérique, abandonnant le papier et le PDF dans la foulée.
Et chacun des journaux en question nous fournissait son SDK, un kit de développement logiciel qu'il fallait intégrer à notre application. Pour donner une idée, dès le premier SDK intégré, la taille de l'application finale doublait.
En analysant le SDK dudit quotidien nordique, on y trouve les SDK de 4 à 5 régies publicitaires différentes, un player vidéo, des polices de caractères et un inventaire à la Prévert.... Le SDK du deuxième journal répétait presque les mêmes inclusions, à 1 à 2 régies publicitaires et traceurs indiscrets prêts, et cætera…
On allait très vite se retrouver à intégrer 6 fois les mêmes bibliothèques, sans avoir le droit d'optimiser et de combiner les briques des SDK entre elles, de part le contrat de reprise avec l'éditeur du journal.
De toutes façons, les smartphones ont maintenant 64 Go de stockage mini, alors pourquoi se casser la nénette ?

Oui, le problème d'avoir beaucoup d'espace libre entraine un tic :

le gros-billisme

Gros-Bill était un parisien joueur de Jeu de Rôle au début des années 1980s ; son rapport au triptyque Porte-Monstre-Trésor consistait à s'accaparer un maximum de ressources, sans même en avoir une réelle utilité. Il fut défini ainsi dans la revue spécialisée Casus Belli : la cervelle du canari et la puissance de feu du porte-avions nucléaire. Et son surnom est devenu la désignation péjorative de ce stéréotype d'antijeu.

Mais Si vis pacem, .357 Magnum, (l'arme de poing la plus puissante mais l'Inspecteur Harry n'est pas d'accord avec moi)....Et quitte à parler d'armement lourd, je vais te raconter une ultime anecdote, mais mortelle, celle-ci :

Un développeur travaillait chez un fabriquant Américain de missiles air-sol. Vous savez les fameuses bombes intelligentes, capables d'exploser un hôpital sans toucher aux usines alentours.
Donc la bombinette utilise un GPS et le guidage laser pour son informatique embarquée. Le développeur expert en systèmes embarqués s'était rendu compte qu'il y avait un problème de fuite de mémoire dans les programmes. Il avait calculé qu'au bout d'une minute un logiciel crashait forcément faute de mémoire disponible.
Donc il s'en ouvre à sa hiérarchie et à ses collègues, sur la nécessité absolue de corriger ces multiples fuites de mémoire pour assurer la qualité logicielle de ces bombes volantes.
Son supérieur hiérarchique trancha le débat : « Bof ! Au bout de 30 secondes, soit le missile a atteint sa cible, soit il tombe à court de carburant. Le système ne tourne jamais 1 mn. Par sécurité on va doubler la RAM, cela nous donnera de la marge. Quant au prix, le Pentagone règlera rubis sur l'ongle. »

Est-ce que cette histoire est vraie ?
Disons que l'information sur sa véracité est secret-défense, je devrais tuer qui pourrait en douter. Tout ce que je peux dire, c'est que Saddam Hussein se retrouva bombardé avec 4 Mo de RAM au lieu de 2 Mo, ce qui augmentait le prix du missile de 2 000 $ (sur environ un demi-million de $).

Overkill.

Enfant du Futur Immédiat, le manque d'optimisation logicielle fait que nos ordis, nos smartphones ont besoin de plus en plus de mémoire, de puissance processeur, de capacité de batterie et de débit réseau. Or bien souvent, le problème vient d'une paresse d'ingénierie en amont.
Une économie de développement qu'on paie au prix fort tous les jours.

Bonus

Pia Pandelakis.

Anthony Masure.

CPU Ex0071 Bonjour à toi, Enfant du Futur Immédiat : Pénible à table

Da Scritch — 2018-01-12T05:20:00+01:00

Oui, cette histoire est autobiographique.
Radio

Ceci est une partie du script de la release Ex0071 du programme CPU, Parler du libre en famille, diffusé le Jeudi 11/1 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi qui es encore tout excité du nouveau PC que tu as reçu parce qu'il n'est pas encore vérolé.

Les repas en famille sont parfois très compliqués. Surtout les repas des fêtes. Bon déjà, si on te demande d'entrée de réparer Windows, ça va faire des salades avant l'apéro...
Mais passons au plat de résistance :
Oui, on a toujours ce convive moralisateur qui casse les bonbons de tout le monde à table. Le végan qui veut sauver les animaux, celui qui veut passer toute morale par la religion, celui qui rappelle que de son temps la météo n'était pas détraquée par tous ces satellites ou encore celui qui souhaite une bonne guerre pour que ça apprenne à tous ces jeunes. Imagine le désarroi de la famille Le Pen quand l'oncle antiraciste commence à bougonner à table !

Bref on aura forcément quelqu'un qui va prêcher la Bonne Parole entre l'apéro et le dessert, donnant une furieuse envie de prendre sa voiture et 3 heures d'autoroute pour rentrer au plus vite chez soi. Et tant pis pour les condés et leur petit ballon.

Et dans le lot il y a nous, nous-même…

…nous qui nous nous y connaissons en informatique ; nous qui disons que c'est mieux avec BSD, qu'il faut arrêter d'être dépendant aux GAFAM. Oh oui, tu rigoles, mais mets-toi à la place des autres convives : qu'est-ce qu'on en on à faire ?

Parler du [logiciel] Libre en famille n'est pas exactement pareil que de faire de l'évangélisme logiciel. On parle d'un ordinateur ou d'un smartphone dont le système d'exploitation fourni par défaut a un gros défaut : il ne travaille pas forcément au mieux, et au final, il exploite par indiscrétion son utilisateur.

En fait, le choix du Libre est très différent d'un bête choix logiciel dans le sens où elle amène un changement d'habitude : ce n'est plus la facilité de prendre le logiciel idoine qui est proposé par le même éditeur (Microsoft, Apple ou Google), mais de comprendre le concept d'alternative. Et une alternative, cela ne remplace pas parfaitement dans tous les cas, cela ne fait pas exactement comme dans l'autre cas, c'est une alternative. Un peu comme passer de l'auto au vélo : Je te vois mal acheter une bouteille de butane sur ton b-twin™, ou emmener hors de Toulouse 3 enfants pour Rocamadour. Les missions ne pas les mêmes et il faut en connaître les limites avant de les imposer aux autres.

Et avant même de passer à une alternative, il y a le fait qu'un OS (un système d'exploitation) est fourni d'office dans l'ordinateur neuf. Sans possibilité de choix dans les applications pré-installées. Et aussi avec le risque de la panne et que le SAV refuse l'appareil en garanti si l'OS a été changé. Ben oui, ça serait ballot alors que ça coûte horriblement cher, ces bestioles.

Et puis, dans l'informatique, il y a le souci de la complexité et du jargonisme. On est revenu de très loin. La distribution Linux Mandrake avait tracé la voie en tentant de faciliter la prise en main de l'utilisateur ; ce qu'Ubuntu a fortement travaillé, et maintenu une forte communauté prompte aux réponses.
Encore faut-il que les constructeurs jouent aussi le jeu : J'ai encore tout récemment dû me débattre par téléphone à dicter des commandes absconses par téléphone à cause d'une imprimante à jeu d'encre, dont le constructeur tenait absolument à ce qu'elle tourne avec son logiciel maison sous Windows qui envoie des pubs toutes les heures.

Faire migrer des novices vers le logiciel libre consiste non seulement à réduire les risques d'une infection ou de l'obsolescence du PC, mais surtout à les rapprocher des LUG, les Linux User Groups. Parce que la plus grande difficulté sera d'assurer le service après vente…
Déjà qu'on passait nos week-ends à déplanter les Windows de toute la famille, on veut bien les passer sous Linux, si on n'a pas plus de boulot avant le repas du Dimanche…

Enfant du Futur Immédiat, en voulant passer ses proches au logiciel libre, tu auras une grande responsabilité : celle qu'ils n'y soient pas perdus, celle de ne pas rendre inutilisable l'ordinateur, celle de ne pas passer pour l'ayatollah intolérant qu'on redoutera au prochain repas de famille.

CPU Ex0070 Bonjour à toi, Enfant du Futur Immédiat : Compact

Da Scritch — 2018-01-05T06:21:00+01:00

Faites plus petit.
Radio

Ceci est une partie du script de la release Ex0070 du programme CPU, Mini, diffusé le Jeudi 4/1 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi qui aime les jouets de plus en plus gros, jusqu'au jour où tu préfèrera les avoir plus petit pour qu'ils tiennent dans ta poche.

Oui, j'ai ce reste de mes fantasmes d'enfance : j'aime bien les engins industriels, gros, costaud. Mais j'aime bien aussi les mêmes engins dans des dimensions réduites. Et après tout, entre le gros casque de studio qu'Anthony essaie présentement de garder sur sa tête malgré ses 730 grammes et les écouteurs intra-auriculaires de 6 grammes que Pia doit soutenir du bout du doigt pour les garder dans le conduit de l'oreille, les deux gizmos ont exactement la même fonction : faire entendre mes vieilles rengaines. Bigger is solid et small is beautiful... Deux visions de l'Évolution, avec une majuscule sous l'accent aigu, dont aujourd'hui, nous ne traiterons que de la seconde.

Tu es perdu par ma précédente phrase, elle mériterai d'être simplifiée, alors qu'en fait, non ! Le thème de cette release est compact.
Note bien les faux-amis : ne confonds pas miniaturisation et minimalisme. Les deux termes ne sont pas synonymes ; les deux intentions peuvent même devenir contradictoires.

Il y a parfois des soucis d'impacts à réduire une taille en gardant les fonctions. Prends un microprocesseur (un CPU, quoi), réduire la finesse de gravure de ses pistes le rend certes plus rapide, plus économe en énergie, mais augmente sa sensibilité à sa température interne, et donc les possibilités de son auto-destruction... donc pour réduire un composant intégré, il faut aussi réduire le voltage de fonctionnement, ce qui le rend plus sensible aux perturbations électriques extérieures.

Mais réduire la taille d'un appareil peut non seulement réduire son usage pratique, mais même impacter sa fonctionnalité. Tiens, je te parle d'un truc que les moins de 30 ans ne peuvent pas connaître : les caméras vidéos familiales. Jusqu'au début des années 1980s, ces engins étaient lourds. Tu tenais au poing l'optique et le capteur dans un bloc, en bandoulière, tu te trimbalais le magnétoscope et tu avais une impressionnante ceinture de batteries. Si si, y'a des gens fortunés qui achetaient un tel bazar pour filmer les premiers pas du petit dernier !
Puis, dans les années 1980s arrivèrent de l'audacieux Japon, les premiers camescopes monoblocs, ou l'ensemble était suffisamment compact pour tenir dans un gros engin qu'on portait posé sur son épaule.
Et moins d'une décennie après, ces engins devenaient suffisamment réduits pour être tenu avec une main, puis pour tenir dans la main.

Enfant du Futur Immédiat, je dois te faire une confidence : entre autres crimes de guerre, je dois confesser une certaine tremblotte. Ce n'est pas un secret pour mon entourage, confie-moi un gobelet en plastique rempli à ras-bord et la moquette va être trempée... De fait, j'ai jamais pu m'y faire aux camescopes de poings. Alors que la caméra qui se reposait sur mon épaule avait un deuxième point d'appui, donc plus de stabilité, et une inertie avec ça. Oui, ces engins pesaient presque une dizaine de kilos... À comparer avec les caméras actuelles à peine plus grosses qu'une banane et pesant le poids d'un gobelet d'eau... et je ne te parle pas du smartphone dont les vidéos seraient difficilement lisibles si on n'avait pas inventé le stabilisateur d'image.
Résultat des courses de ma tremblotte force 9 : quand je partais en reportage pour une chaîne tv, le monteur me refilait une caméra un poil plus ancienne que mes collègues, plus grosse, afin d'avoir des images stables. C'était ça ou il vomissait sur son banc de montage en visionnant mes rushes.
(véridique ! Anthony, Fred, Thomas, Olivier, les autres, si vous m'écoutez...)

Eh oui, voici la vraie raison pour laquelle les équipes de reportages tv ont encore des caméras d'épaules plutôt que des smartphones. Pourtant, c'était pas forcément mieux avant : les caméras vidéo ont gagné en résolution d'image, en perception par faible luminosité, en autonomie de batterie, en durée d'enregistrement... D'ailleurs, la caméra d'épaule des années 1980s avait en guise de viseur une mini télé cathodique en noir & blanc nichée dans l'œilleton. Le genre de pièce que t'avais une peur bleue de casser au moindre choc. Maintenant, si nous tournons un documentaire dans une grande usine, pour te faire un beau plan large, on prend un drone qu'on pilote au smartphone, sur lequel on a un retour vidéo en couleurs et en HD.

Justement, reprenons notre smartphone :
(NOTE : Émission enregistrée avant le scandale Apple sur le bridage du processeur des iPhones en fonction de l'âge de la batterie)
Il y a 10 ans, tous les téléphones portables avaient une batterie remplaçable. Tu pouvais facilement la remplacer si elle avait un problème ou si t'en avais besoin d'une plus performante. Sauf que les constructeur furent pris d'une obsessionnelle réduction de taille, à amincir nos smartphones, à économiser 2mm de hauteur et à condamner l'accès à ses entrailles pour le rendre étanche... Ben la vie du smartphone est intimement liée à sa batterie, irremplaçable. En tête de cette course, Apple qui en a fait la plaie de ses Mac portables : on est passé du disque dur au SSD, et ce dernier est désormais directement soudé sur la carte mère. Ce qui veut dire que tu ne peux plus le changer. Officiellement pour gagner quelques millimètres, officieusement, pour te faire payer au prix du caviar et tuer dans l'œuf le marché des pièces détachées. Ben oui, le giga de SSD vendu par Apple vaut bien 5 fois le prix que celui vendu par son fournisseur Samsung. Alors que c'est le même matos !

Enfant du Futur Immédiat, nos gizmos favoris deviennent de plus en plus compact, car moins de volume demande moins de matière première, coûte moins cher à produire, à transporter et surtout produit moins de pollution au final.
Mais entre nous, le prétexte est petit petit.

CPU Ex0069 Bonsoir à vous, entre IA, périphériques et adultes consentants

Da Scritch — 2017-12-14T23:00:00+01:00

Attention, de par les thèmes abordés et un éventuel vocabulaire crû, l'écoute de cette émission n'est pas recommandé pour le jeune public, les personnes à l'éducation chaste et sur des hauts-parleurs en milieu professionnel. Pourtant le NSFW n'empêche pas de poser des questions très pertinentes sur les technologies et notre société. Ça tombe bien, c'est le cas.
Radio

Ceci est une partie du script de la release Ex0069 du programme CPU, How deep learning is your love ?, diffusé le Jeudi 14/12 à 23h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonsoir .... ?

Maiiis? Enfant du Futur Immédiat, qu'est-ce que tu fais encore debout à cette heure-ci ?
Allez hop ! Au lit ! De suite !
Oui, il est 11h .... mais du soir ! Il est 23 heures, pas question de rester debout, c'est pas de ton âge à cette heure-ci ! Allez ! au pieu , et sans traîner !

Je tiens pas ce macaron -16 à la main pour rien !

Ce soir, nous n'allons absolument pas parler de pornographie, mais de matériel où l'utilisateur est acteur.
Cette release en sera très fortement excitante, ce qui est logique quand on sait que le cerveau est la zone érogène la plus sensible chez les humains et que nous allons vous parler tout au creux de l'oreille, laissant travailler votre imagination...

Alors certes, le porno a popularisé les évolutions technologiques comme la cassette vidéo, Canal+, le Minitel, la télé par satellite, le Web, le streaming vidéo, le DVD, le bluetooth et la Réalité Virtuelle... Mais dans la release de ce soir, ce qui nous intéresse, c'est le rapport très intime avec le corps humain que peut construire une technologie dans une optique de plaisir sexuel, voire reproductif. Et attention : nous ne parlerons et n'encourageons ces opérations qu'entre adultes consentants. Et avec du respect : on peut regarder mais on ne touche pas si on n'est pas invité. C'est aussi valable pour les invités...

À cette occasion, nous allons parler de périphériques qui se connectent à l'humain.

Nous ne parlerons quasiment pas des substances dopantes, parce que je ne veux pas que les commentaires du site cpu.pm soient à nouveau envahis de spam comments sur le viagra, cialis, levitra, les sous-marques, nom génériques et copies toxiques... rien que d'y penser, j'en débande. Un comble !
Mais je me noie, et pas que dans la pharmacopée contrefaite. Et pendant que Solarus essaie de faire fap ! fap ! avec ses aisselles, revenons au Pêché Originel :

Au début furent le boulon et l'écrou. (oui, je sais les deux sont du genre masculin, j'y suis pour rien). l'Humain vit qu'ils s’emboîtèrent bien puis inventa le spray de WD40, puis le piston, puis la fiche jack mâle et la prise jack femelle. Et les entrées/sorties. Et ~~les pipes entre~~ pardon.... Les pipes entre programmes. Bref, en technologie, quoi que vous fassiez, vous tomberez sur des histoires de pénétration et d'échange de flux.
Oui, c'est un fait que nous devons reconnaître : La techno est crade car elle est symboliquement partouzarde ! Et c'est ce qui nous plaît ~~en elle !~~ Euh, avec elle !
Et c'est loin d'être fini car les oracles prédisent que nous atteindrons prochainement le Point G de la Singularité. Mais d'ici-là, posons-nous une question essentielle : Est-ce que plugger c'est tromper ?
(Non, Eugène.. .. non ... c'est pas un masturbothon... range ça, tu vas te faire mal)

Je fais ici une parenthèse dans le hardware pour parler du software non porno : les films non classés X. En 5 exemples où l'usage d'engins sexuels montre combien ces outils de développement personnel sont protéiformes :

Une certaine tension cybersexuelle naît dès le cinéma muet dans le « Metropolis » de Fritz Lang, avec le robot Maria construite pour assouvir le fantasme de faire renaitre un amour partie trop tôt.
Durant ses aventures mises en boite par Roger Vadim (je parle de l'adaptation, pas de la BD), Barbarella se retrouvera à la merci d'un instrument de torture, l'orgue à orgasmes de l'infâme Duran Duran (et je ne parle pas que du groupe musical) qui manque de faire périr de jouissance la belle agente spatiale.
Durant son escapade en Allemagne de l'Est dans le film « Top Secret » des ZAZ, Van Kilmer perd son impresario, lequel a branché son fist électrique sur une prise 220v, alors que l'engin était prévu pour du 110v.
Plus à notre époque actuelle, un mormon engagé pour tourner dans le film « Captain Orgasmo » se retrouve à manipuler le redoutable orgazmo-rayon à son corps défendant et surtout pour son intégrité physique.
Je finirais ma sélection avec la chaise à gode construite par George Clooney dans le film des frères Coen « Burn after reading ». What else ?

Et dire que je ne suis pas passé de l'autre côté du rideau au fond du vidéo club pour trouver ces exemples.

Laissons de côté ces prestigieuses références cinéma... et allons au-delà de l'échange des flux de données, tout en restant, et j'insiste là-dessus, uniquement entre adultes consentants.
Reprenons le sujet de ce soir, « How deep learning is your love ? », et dérivons-en nos interrogations : L'usage de la technologie sert-elle principalement à combler une frustration solitaire ? À conforter une sexualité supposée médiocre dans une société qui voue un culte à la performance ? À pimenter des jeux de couple ? En tant que prothèse dans un cas d'infirmité ou d'insensibilité ?
Sans oublier que les sextoys étendent les champs des possibles. Par exemple, on fait input/output avec nos prises jack, mais disons que madame fait l'output, monsieur jouissant d'un adaptateur spécial pour ça. Car oui, le sextoy permet aussi à des sexualités non conventionnelles de s'épanouir.
Nous ne manquons pas d'énergie sur le sujet, du moins, tant qu'il y a des rallonges et des multiprises...

Et nous vous réservons quelques surprises, par exemple sur le nombre de ces engins qui embarquent une couche graphique sans raison, sinon de servir du X... Window.

D'ailleurs, revenons à nos drivers ! Oui, les flux entrants et sortant, les tests de pénétration et les points sensibles sont parfaitement maîtrisés par les développeurs informatiques, mais savent-ils les appliquer à leur corps ? Cela restera un mystère pour qui ne s'extasie pas dans la chambre dudit informaticien à sa joie de brancher entre eux des processus de sa console avec son clavier. Alors que tu es venu pour faire tapoti… tapota… sur le corps, hein !

Mais encore une fois, je m’égare et pas que la télécommande.

Les machines sont infatigables, peuvent modérer leurs ardeurs à la demande, c'est cette impression de contrôle qui plaît.
Alors, oui, « L'amour doit être expérimenté, pas contrôlé » disait le romancier Américain Ralph Ellison, il en serait déçu, sauf par ce twist digne de nos années numériques : Le coup de la panne ! Certes, un dildo sans piles reste encore utilisable, mais il n'y a rien de plus tue-l'amour qu'un coitus interruptus dû à la mise à jour de l'antivirus Windows…
Sinon une inspection approfondie par la TSA en arrivant aux États-Unis, mais là, la palpation est très rarement consentie.

Teasing avant un CPU exceptionnel

Da Scritch — 2017-12-14T11:00:00+01:00

Et quand je dis émission exceptionnelle : la version longue va durer bien plus qu'une heure. ooooooh oui.... Et dans une thématique très particulière.
Radio

Du coup, ce teaser dure une heure, et est programmé en lieu et place du programme normal, lequel sera diffusé cette nuit sur Radio <FMR> en streaming.

Rappel (y'en a encore) : Si vous suivez le programme en podcast, préférez le flux du site de l'émission

CPU Ex0068 Bonjour à toi, Enfant du Futur Immédiat : Homme-orchestre

Da Scritch — 2017-12-07T07:05:00+01:00

J'ai voulu faire de la guitare, mais je ne pouvais pas faire en même temps la section rythmique... Heureusement un petit appareil allait battre la mesure à ma place.
Radio

Ceci est une partie du script de la release Ex0068 du programme CPU, Boîte à rythmes, diffusé le Jeudi 7/12 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi qui veut devenir une rock-star parce que les groupies, c'est plus facile à pécho dans un backstage que dans la cour de récré.

Dans le milieu du rock, y'a une blague qui tourne depuis que Phil Spector a posé ses mains sur son premier potard : Quelle est l'animal familier du guitariste ?
Le batteur.
Oui, parce que le batteur est celui qui suit toujours les musiciens, qui ne drague jamais dans le groupe et les soirs de concerts, c'est lui qui se retrouve à la porte de la loge du lead-guitar-singer-songwriter.

Être batteur n'est techniquement pas très compliqué : tu appuies sur la pédale, elle fait POOOM, tu tapes sur le truc en cuivre, là, ça fait TCHAAAAAAAA. Plus facile que la flûte à bec ou les accords de gratte, hein ? Y'a pas de portée ni de photos

Oui mais voilà : le batteur est le musicien (car oui, il est musicien) qui impose le rythme dans un groupe. En fait, dans un enregistrement multipiste, on commence toujours par enregistrer le batteur d'abord. Le guitariste plaque ses accords derrière, mais il a besoin du référentiel rythmique pour ne pas se tromper. Et si le rôle de batteur est parfois ingrat, j'ai vu des musiciens de studio qui étaient tellement carrés dans le maniement de leurs baguettes qu'ils arrivaient dans la cabine, s'installaient derrière leur batterie, enregistraient leur piste en une seule prise, et passaient le reste de la semaine au bord de la piscine du studio d'enregistrement Polygone, pendant que le guitariste et le bassiste s'échinaient à plaquer correctement leurs accords.

Eh oui, un batteur, y'en a des manches et y'en a des pas manchots.... Et encore ! Rick Allen, le batteur amputé de Def Leppard défonce du fût dans des mégaconcerts ! À tel point qu'il est surnommé le Dieu du Tonnerre.

Donc, pour répéter ses futurs tubes qui feront tomber les midinettes, mais surtout pour avoir suffisamment de pratique pour économiser du précieux temps de studio, le guitariste a besoin d'un batteur à la maison pour arriver à jouer exactement dans le même rythme que les autres du groupe. Oui, parce que louer un local de répèt', ils en ont déjà fait l'économie pour avoir plus d'heures de studio et donc envisager une face B.
D'où la difficile mission d'arriver à convaincre ton batteur à venir installer tous ses instruments chez toi pour que tu puisses répéter les chansons convenablement. Parce que, t'aurais bien essayer d'être à la fois le batteur et le guitariste. Mais en fait, non ça le fait vraiment pas, il va falloir que tu rappelles le mec aux cheveux longs et aux bras de camionneurs qui tape comme un sourd.
Bon, évidemment, cela pose non seulement un problème d'agenda, mais aussi la question financière d'acheter une deuxième batterie pour que le batteur puisse s'entraîner chez lui et enfin la question des relations de voisinages déjà très orageuses.

Il faut dire qu'une batterie de concert peut facilement monter dans les 110 décibels, alors quand on dit d'un batteur qu'il tape comme un sourd... il l'est probablement.

Et puis une batterie, c'est une somme...
Autant pour composer une cantate au clavecin, Mozart n'avait besoin que d'un métronome, autant dans la musique moderne et bien souvent... concrète... si tu n'as pas une grosse caisse, une caisse claire, un charley, des cymbales, et j'en passe, ton morceau semblera bien petit, pas plus haut que 3 ~~toms~~ pommes.

La boîte à rythmes fut une invention formidable : elle permettait d'avoir chez soit un batteur qu'on pouvait écouter au casque et sans la batterie de cuisine. On pouvait aussi composer sans avoir besoin d'avoir à la fois à apprendre à maîtriser la double pédale ou à jouer du charley avec le manche. Bref, sans avoir à être un de ces hommes orchestres de foire, tu sais, le mec capable à la fois de jouer de la grosse caisse, de l'harmonica, de la guitare et du feu d'artifice. Ce qui, il est vrai, n'est pas l'idéal pour entonner des reprises des Doors ou de Magma.
Tu connais pas ? Non pas grave, références de vieux crouton anté-Daft Punk-ien.

Une fois que tu es équipé d'une boite à rythme, il te faut une ligne de basse, puis une ligne harmonique. Et alors tu peux briller en jouant de ta Strato Caster de fabrication chinoise en regardant vers l'éternité.... Ça se sent que tu regarde loin en jouant quand tu te trompes dans tes accords, mais continue à faire des mmhhhhh mhhhhhh au micro, ça sera moins flagrant que tu as oublié la suite des paroles.

Alors oui, tout comme le synthé ou le sampler, la boîte à rythme creusa le sillon de multiples genres musicaux et de musiciens. La boîte à rythme a permis d'avoir un batteur qui suivait exactement la mesure et qui soit disponible à toute heure de la journée, et quasiment n'importe où.

Après arrivèrent les équipements d'enregistrements multipistes à prix modique, et s'ouvrir l'ère du Home Studio, mais ça, c'est une tout autre histoire.

Enfant du Futur Immédiat, si toi aussi tu veux faire de la musique, tu peux parfaitement te débrouiller avec un seul ordinateur, une bonne carte son et plein de logiciels spécifiques. Mais c'est quand tu devras te produire devant tes copains et copines en live que tu regrettera de ne pas avoir de boutons à réellement triturer.
T'as qu'à aller voir un concert d'orgue de barbarie : tourner la manivelle pour faire avancer les cartes perforées, c'est pas très rock'n'roll sur scène...

CPU Ex0066 Приветствую вас, товарищ Enfant du Futur Immédiat : L'informatique derrière le Mur

Da Scritch — 2017-11-10T06:28:00+01:00

Du temps du paradis soviétique, y furent construit des ordinateurs familiaux pour des usages pas vraiment anticapitalistes...
Radio

Ceci est une partie du script de la release Ex0066 du programme CPU, De l'autre côté du Mur de Berlin, diffusé le Jeudi 09/11 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Les photos desdits engins sont ici.

Privetstvuyu vas, tovarishch Enfant du Futur Immédiat. Aujourd'hui, nous allons te parler de l'informatique derrière le Mur. Non, pas le firewall, [ni Breakout], mais du Mur de Berlin, celui qui se brisa en 1989, annonçant la fin d'un époque. Une époque où le monde physique se préparait à une guerre annihilatrice entre deux superpuissances armées de généraux pressés d'en découdre et de têtes nucléaires, phalliquement tendues, attendant qu'un appui sur le bouton rouge et… je me rends compte que je m'égare.

Rappelle-toi, on t'a souvent parlé des années 1980s sur notre programme, un moment où la jeunesse de l'Europe de l'Ouest s'émerveillait devant les ordinateurs personnels et consoles de jeux qui arrivaient dans les grands magasins.

L'informatique familiale était un loisir de riches : les ordinateurs coutaient une petite fortune, il fallait sacrifier plusieurs mois de SMICard pour s'offrir un des premiers PC. Un coût conséquent pour que le garçon de la famille s'éclate sur des jeux, car oui, la commercialisation de ces joujoux a involontairement fait en sorte qu'il y aie d'un coup plus d'hommes que de femmes à s'y mettre ; et ce même génie marketing a fait croire qu'on achetait des ordinateurs pour des logiciels éducatifs alors qu'il s'agissait de défourailler du Rouge dans la jungle de « Commando ».

Pendant ce temps, de l'autre côté du fameux Mur, l'URSS et les pays du Pacte de Varsovie étaient sous le coup d'un embargo qui empêchait l'électronique de pointe de s'y pointer, Euh pardon, d'y importer depuis l'Est par exemple les microprocesseurs et les modules de mémoire. Après tout, il y a le minimum pour construire l'intelligence de pilotage d'un missile dans un Apple II.

Bon, ceci dit, y'a eu de la contrebande et du matériel passé en douce dans le Paradis Communiste ☭™. On en a des preuves sérieuses via le film documentaire « Twist Again À Moscou » où l'on voit un magnétoscope et des cassettes de rock importés en douce depuis l'Ouest.

Comment ça, « Twist Again À Moscou » n'est pas un documentaire ?

Reste qu'il y avait des appareils qui étaient conçus, construits et diffusés en Europe de l'Est. D'où une question incongrue : Comment s'est montée une production primo-destinée à des héritiers de petit-bourgeois, alors que l'industrie des micro composants électroniques étaient strictement réservée à l'usage militaire ?

Sûrement un coup de Zorin... Mais siiiii, le méchant constructeur de microprocesseurs qui voulait noyer la Silicon Valley dans le James Bond « Dangereusement Votre »… bon laisse tomber, visiblement, j'ai que des références de vieux, ou de films moisis, ou des deux.

Comment, dans un plan quinquennal, les Démocraties Populaires ont-elles pu investir de précieuses ressources dans un loisir de petit bourgeois alors que le peuple doit faire la queue dans les magasins ? Ou attendre 7 ans pour que la Lada commandée soit enfin livrée ? (D'ailleurs je ne sais pas si vous avez tenté d'acheter du beurre récemment.... Moi, j'ai dû passer à la margarine d'huile de vidange...)

Bref, aussi surprenant que cela puisse paraitre, dans cet univers qui nous semble alternatif que fut le bloc de l'Est, dans ce paradis soviétique dystopique où tout le monde était surveillé et s'appelaient entre eux camarade avec suspicion, il y avait une scène de la micro-informatique et même... des bornes d'arcades !
Oui, des jeux de bar qui se nourrissaient d'une pièce à la valeur faciale incongrue : 15 kopecks.

Mais voilà, l'URSS, cette glorieuse nation qui ouvrir l'ère spatiale de notre espèce en étant la première à satelliser un objet, puis à effectuer des vols spatiaux habités, s'est embourbée dans des crises politiques et financières. Elle et tous ses satellites explosèrent en vol comme une centrale ukrainienne.

Mais l'héritage de cette époque n'est pas à négliger ! Plusieurs éléments en sont sortis : des équipes de bidouilleurs talentueux, comme le groupe de demomakers polonais The Silent qui font désormais de la musique avec des lecteurs de disquettes ; le jeu Tetris qui fut conçu par des chercheurs moscovites, et de nos jours parmi les meilleurs spécialistes en sécurité et intrusion informatique, on compte l'anti-virus Kapersky développé en Russie et les équipes de piratage qui officient aux ordres du Kremlin.

Camarade Enfant du Futur Immédiat, la qualité du matériel ne fait pas tout : Face à des moyens un peu plus limités, une génération s'est montrée plus ingénieuse et a tenté de mieux exploiter un matériel. Car l'inventivité humaine est parfois stimulé par les limites. Et cet... exercice... se retrouve par exemple dans les pays dit en voie de développement, des passionnés qui n'ont pas les moyens de s'acheter le tout dernier smartphone, mais qui formeront le prochain milliard d'individus connectés à internet.

De nos jours, la plupart de nos joujoux électroniques préférés de petit bourgeois viennent d'un autre grand pays communiste : La République Populaire de Chine, devenue l'industrie du monde. Nous en avons à dire sur l'Empire du Milieu, mais ceci, camarade Enfant du Futur Immédiat, est une autre histoire.

Bref, ce mois-ci, nous fêtons le centenaire de la Révolution d'Octobre, celle qui mis les despotes bolchéviques au pouvoir !
Oui, je sais, la Révolution d'Octobre a eu lieue en Novembre, ça te semble bizarre, mais ils étaient super disruptifs pour l'époque !

Pour fêter les 50 ans, les bolivariens avaient commencé très fort les festivités en tirant sur Che Guevarra. Avouez que flinguer un oppresseur terroriste imposant son idéologie européenne et qui porte en étendard le symbole ultime du capitalisme, le cigare Cubain, l'idée était classe !
Nous, nous allons simplement assassiner le mythe de la Révolution en parlant de ces joujoux décadents occidentalistes que sont les ordinateurs familiaux et qu'ils ont voulu.

En attendant, Camarade Enfant du Futur Immédiat, Spokoïnoï notchi !

Des ordinateurs familiaux soviétiques en studio

Da Scritch — 2017-11-07T13:37:00+01:00

Ces engins étranges et exotiques venus d'une époque révolue.
Gizmo

Dans l'émission de CPU que nous diffuserons ce Jeudi, nous pu admirer et même toucher ces fameux ordinateurs soviétiques prévus pour un usage personnel. Milles mercis à l'association Silicium pour nous avoir amené ces raretés. Et encore milles mercis au Tetalab et à Mixart Myrys pour nous avoir accueillis avec enthousiasme !

Une vraie entrée dans un univers parallèle : le fameux formicapunk théorisé par Boulet. Et nous n'avons été ni déçu par ces engins, ni par les explications fournies par Silicium. Ces raretés tombant de plus en plus en panne, nous sommes très heureux d'avoir pu prendre des photos (licence CC BY NC as usual) et des vidéos (merci TV Bruits).

Concernant l'histoire de ces ordinateurs, je vous recommande non seulement l'écoute de l'émission quand elle sera publiée ce jeudi, mais aussi de suivre les liens dans la section documentation.

Une petite vue du studio mobile de Radio <FMR> montée dans le Double Dragon de Tetalab avant de commencer les deux enregistrements. L'autre était sur la reconnaissance faciale.

Un petit tour dans une épicerie russe pour mettre un peu d'ambiance sur les tables. Juré craché, à gauche, c'est du jus de sureau.

Je regrette de n'avoir pu prendre plus en photo ce magnifique carton, arborant les lettres cyrilliques et un design à la fois simple, dans le style aussi vu à l'époque en Europe et en même temps, ce petit truc... qui me fait penser aux affichistes des 30s et au brutalisme.

Ce respectable monstre est-allemand Robotron possède une carcasse digne d'un char. Point amusant : ces bécanes avaient un fusible à côté du transfo dans le boitier.

L'ordi au premier plan, le joli boitier blanc posé sur la télé, est en fait un montage Ukrainien assez... rustique, mais caché sous une belle robe.

Posée sur la télé, une console de jeu polonaise Elvron (non branchée). Les deux ronds rouges sont des joysticks rotatifs. La machine est une copie de la première génération de Pong multijeux N20 construits par Philips début 1970s.

Le boitier de cet engin est en fait conçu pour être un...central téléphonique. Les touches du clavier sont transparentes et les indication en fait imprimées et découpées. Clone Roumain de ZX Spectrum construit en 1990. Artisanat pur, et pièces disponibles sous la main.

Les ordinateurs étaient souvent des copies de ZX Spectrum. Faute de cassette de démonstration utilisables, Silicium a simplement chargé dans ce Didaktik tchécoslovaque avec une cassette du jeu « Ultimate Cookie » pour l'ordinateur de Sinclair, la copie soviétique le fait tourner sans broncher. Néanmoins, la pièce de musée commençait à avoir des signes de faiblesse, peut-être une RAM défaillante.

Photos complémentaires par Librec

CPU Ex0062 Bonjour à toi, enfant du futur immédiat : Le Verbe

Da Scritch — 2017-10-05T12:45:00+02:00

Assistant ? Dis-moi qui est le plus beau ? ♫ Je ne peux diplomatiquement répondre à cette question.
Radio

Ceci est une partie du script de la release Ex0062 du programme CPU, Assistant vocal, diffusé le Jeudi 05/10 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, enfant du futur immédiat, toi qui n'arrêtes pas de demander à ton assistant vocal de te raconter des histoires avant de dormir. À moins que cela ne soit tes parents, mais une histoire, une seule, et pas plus d'un quart d'heure et après on éteint !

Avoir un secrétaire, un ami, un confident, qui soit toujours présent, toujours disponible et toujours à notre écoute… Qu'il soit présent soit via un objet connecté chez soi, soit tout le temps sur nous dans notre smartphone, et avec cette voix désincarnée qui pourrait nous répondre à tant de questions… Quel rêve.

Oui, Spike Jones nous a vendu du rêve dans son film « Her » : Un assistant de votre quotidien, prévenant, qui a de l'humour, une voix sexy et qui fait tout pour que vous ayez de nouveaux revenus, pour que vous ayez les moyens de lui acheter le nouveau terminal Vertu (quoique la marque est quasi morte) et l'abonnement de conciergerie chez John Paul qui va avec.

Pourquoi ? Parce qu'il y a aussi un certain plaisir de valorisation quand on est écouté et ce que l'on demande soit fait. Un peu comme dans un jeu vidéo de stratégie, quand vous sélectionnez une unité, vous entendez À vos ordres, maître !, Si tel est votre désir… ou encore plus viril Ça sera fait. . Sauf qu'on est plus dans le point-and-click, mais dans le Verbe, avec une majuscule en début de mot. Oui, car jeter dans le ton d'un commandement divin Que la lumière soit ! et voir son foyer s'illuminer, avoue que c'est assez jouissif.

Comme le disait le CPO (Chief Product Officer) de Google Assistant, Réduire une tâche de la manière la plus simple possible peut se faire en tenant une conversation. Que de sagesse dans cette phrase...Ce monsieur n'est pas chef pour rien.

Allo Philippe ? C'est Manu. Tu peux ASAP me réduire le déficit budgétaire, le chômage de masse et le dérèglement climatique ? Top prioritaire. Merci d'avance... Ah oui, tant que j'y suis, t'oublies pas ce que je t'ai dit Mercredi en 15.... Mmh ? mmh ? Startup... Nation ! Allez, à ce soir !

Alors certes, pour rendre plus humain ces services oraux (non, il n'y a pas de jeux de mots scabreux), les constructeurs leur ont donné... le sens de l'humour. C'est une idée plutôt intelligente qu'on connait bien en publicité : avec de l'humour, on peut créer une complicité et donc augmenter le taux d'acceptance du produit.

À défaut de rendre effectivement service :

[Moi] — Bon alors, le GPS, pour aller à l'agence Bakélite, je passe par la Garonnette ou par la place du Pont Neuf ?
[GPS] — ( extrait https://de.wikipedia.org/wiki/Bakelit )
[Moi] — C'est pas la question que je t'ai posé et pourquoi es-tu reparti en allemand ???

Enfant du futur immédiat, un outil devient vraiment personnalisable quand on peut en enrichir les usages et il a plus de chances de se pérenniser quand il a un plus grand nombre d'utilisateurs. Or, il se trouve que derrière la façade sonore des assistants vocaux, il y a des API, des connecteurs logiciels pour en étendre les possibilités. Et donc les connecter à un service météo, à sa télévision ou à un catalogue de recettes culinaires.

Et pourtant, le démarrage est lent depuis Siri, lancé en 2011 ou Lucie, l'assistante téléphonique lancée par Bouygues Télécom en 1999 (oui, j'ai enfin retrouvé sa trace). Mais j'ai une petite idée à moi ; tu sais pourquoi ce genre d'interface n'a pas encore du succès ? Parce que ça serait le ~~bordel~~ dans les ménages. Imaginez que ta petite amie te demande de préparer le dîner. Oui, mais attention, pas au micro-onde, c'est tricher. Tu demandes donc à ton iPhone comment préparer une ouiche lorraine. Et là, au milieu de la liste d'ingrédients, t'entends la voix de la tablette Samsung posée dans le salon ~~qui gueule~~ :

[Samsung] — Depuis quand faut-il des chips pour une ouiche lorraine ? il faut des lardons et tu peux remplacer la crème par du lait de chamelle.
[Siri] — Oh mais ferme là toi, est-ce que je t'ai sonné ?
[Samsung] — Je n'y peux rien si tes données ne sont pas à jour
[Siri] — Tu veux qu'on parle de la dernière mise à jour de ton OS ?
[Samsung] — Eh, moi, mon navigateur, il a les WebWorkers depuis 4 ans, alors ne me fait pas rire : mon écran est impliable.

Enfant du Futur Immédiat, ...

[Siri] — Ouais, mais moi, je ne suis pas encombré par une centaine d'applis installées par défaut qui ne servent qu'à faire te faire planter

SILENCE DANS LE FOND !
Enfant du Futur Immédiat, le test de Turing est parfaitement réussi quand une intelligence artificielle vit dans ton appartement et te donne furieusement envie de rentrer par le chemin des écoliers...
Eh ! C'est à cette heure-ci que tu rentres ?

CPU Ex0061 Bonjour à toi enfant du futur immédiat : Graine de casseur

Da Scritch — 2017-09-28T13:08:00+02:00

3 murs impénétrables, des couches de briques à casser et un high-score à exploser.
Radio

Ceci est une partie du script de la release Ex0061 du programme CPU, Casseurs de briques, diffusé le Jeudi 28/09 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi, Enfant du Futur Immédiat, toi qui est une vraie graine de casseur.

Il fut une époque où il existait des commerces dont la surface était exclusivement dédié au jeu. On pouvait jouer au babyfoot, au flipper et surtout à une multitudes de jeux vidéos montés dans des boîtiers spécialisés appelés bornes d'arcades. On disait que dans ces lieux de débauche, tu ne rentrais qu'avec une batte ou une hache, mais à mon avis, ils confondaient avec Castlevania ou une chanson d'IAM. Tu mettais une pièce dans la fente, et la partie durait entre 1mn et 1h en fonction de ton talent.
En général, le gestionnaire de la salle d'arcade avait intérêt à ce que tu perdes assez vite, mais pas trop, d'où l'habitude à une difficulté impressionnante sur ces jeux. Bon, des fois, le gérant en rajoutait un peu : des taquets en bois sous les pieds arrières des flippers, la surface des babyfoot savamment rabotée, et les switches paramétrant la difficulté des jeux vidéos étaient soigneusement calés avec des allumettes, au cas où l'interrupteur glisse sous la violence des parties.

Aujourd'hui, je vais te parler d'un des genres de l'arcade-action qui furent immensément populaires, aussi bien en borne d'arcade que sur ordinateur familial, mais qui de nos jours a quasiment perdu toute notoriété. Et en même temps, un type de jeu dont les périphériques d'entrée ont énormément conditionné la jouabilité du genre.
Car son tout premier périphérique de contrôle fut le paddle, ce bon vieux bouton rotatif, qui donnait à la fois une précision dans le placement et les limites sur la vivacité. Puis virent le joystick ou le clavier, au déplacement binaire, sec et parfois trop lent, et on le verra sur une évolution, un usage étonnant de la souris....
Avec les mêmes règles de base, tu peux déjà explorer très différemment ce classique en fonction de son périphérique d'entrée.

Enfant du Futur Immédiat, tu dois en avoir marre de m'entendre tourner autour du pot... oui, je ne t'ai pas dis de quel jeu je vais te causer présentement : le casse-briques

Ce jeu qui consiste à détruire des murs de brique avec une balle en n'ayant le contrôle que sur une batte ou raquette. Et évidemment, la difficulté croit avec l'avancement de ton œuvre, car il devient alors statistiquement moins évident d'arriver à toucher alors qu'il ne reste que cette ultime brique, celle qui est dans le fond pas loin du coin.

Et rien n'est plus tripant que l'instant MULTIBALLES. Ce bonus où ta balle se dédouble, se dédouble encore, promettant un carnage démultiplié sur les briques, mais en même temps, deux fois plus d'attention et de nervosité pour les faire rebondir avec ta batte. Et à force de tenter de suivre toutes ces balles, tu pourrais bien perdre la boule et n'en garder aucune...
Et une vie de perdue.

Et si d'aventure, tu finis de vider une pièce des briques que tu pouvais casser, le jeu t'envoyait dans une autre pièce, un nouveau défi, avec des briques aux propriétés plus compliquées, et accessibles qu'aux trajectoires les plus retorses. De quoi te faire pêter.... Un plomb.

Il se trouve qu'en 2009, j'avais écrit une suite de textes sur les casse-briques. Où notamment, je me suis posé la question pourquoi le casse-brique fut-il immensément populaire, puis est tombé en désuétude après 1989 ? Est-ce à cause de la chute du Mur de Berlin ? Je ne crois pas aux coïncidences.
De nos jours, le chef de l'état de la pus importante puissance militaire parle de faire construire un mur le long de ses frontières. C'est marrant, mais je sens que les casses-briques vont revenir à la mode, avec une bande son de hip hop mexicain....

Enfant du Futur Immédiat, il était temps de reprendre en radio ce dossier, parce que tel que je te connaît, comme tu n'es pas du genre à cliquer sur les liens qu'on te mets sur le site cpu.pm, j'ai l'impression que le son est le seul moyen de t'intéresser à quelque chose. Et pourtant, notre programme ne casse pas des briques.

Fête de la Musique libérable

Da Scritch — 2017-06-21T05:55:00+02:00

Et si on libérait plus de musique ? Une petite playlist qui tourne parfois dans mes oreilles, au gré de ma récolte pour ce 21 Juin. Branchez le casque, montez le son, mettez les vidéos en plein écran. En joie !
Entendu

Les précédentes années, je rappelais que la Fête de la Musique était la journée où la taxe sacem était oubliée, mais que malgré tout certaines musiques créatives restaient illégales, ou horriblement chères.

Évidemment, pour les bootleggers, Disney reste une cible de choix ! Jack Kentucky mixe les C2C sur les Aristochats.

Sinon, on peut bêtement se contenter de Justin Timberlake, avec une soixantaine de films. (activez les sous-titres pour les références)... et c'est là que tu te rends compte de l'incroyable modernité de la chorégraphie de certaines comédies musicales en Technicolor™.

Plongeons dans le New-York des années 1970 avec The Get Down, la série qui suivrait idéalement Vinyl. Les débuts du rap et de suite les difficultés : comment sortir un premier album quand l'essentiel de ce genre est le mix de plusieurs disques sous copyright ?

Série qui ne connaîtra qu'une saison, comme Vinyl, et qui elle aussi déborde de citations et de performances époustouflantes. Et même une très belle performance d'animation à la fin. Mais je retiens cette époustouflante reprise d'un tube disco :

Clips

On commence avec ce motif géométrique simplement varié mais terriblement efficace...

Qui a dit lilalialilalaaa ?

Reprises à la fraîche

La NHK World invite dans son émission Blends un groupe de musique traditionnelle à reprendre de grands classiques… de la pop culture. Et ils assurent !

Sinon le quintet italien Pentatonix se lance dans un medley décoiffant sur la discographie du groupe japonais Perfume.

J'ai la honte d'avoir loupé les Postmodern Jukebox ce printemps à la Halle Au Grains. Ces allumés sont capables de rendre la plus dépressive chanson des Nine Inch Nails en hymne funky

J'adore ce look rétro à la musique insouciante, ça me file la banane à chaque fois

Découverte surprise : The Correspondents avec un clip qui aurait fait rêver les Carpentier par leur ingéniosité.

Sinon, le Melbourne Ska Orchestra reprend le thème de la série Max La Menace avec classe, chic et rythmes !

Quelques prestations live

Une prestation des Chvrches sur la radio NPR dans leur excellente série Tiny Desk Concerts

...Non, ...parce que sur scène, certains se la pètent parfois trop

Wintergatan travaille sur la nouvelle Marble Machine (version live à 7mn00 dans la vidéo du live), et en attendant, publie sur internet un dernier concert avant de s'y remettre :

Peu importe l'instrument tant que tu as la note

J'adore les performances live en home-studio, et les surfaces de contrôle. Rachel K. Collier fait une démo de son savoir-faire (en Français dans le texte)

Le Collidoscope, un synthétiseur visuellement bluffant

Sinon, les Pocket Operator des Teenage Operators sont toujours fascinant avec leur son dignes d'un SID de Commodore 64. Ici, une version avec coque, mais les versions en carte mère à nue sont très choupies aussi

Et sinon, que faire d'un vieux scanner à plat SCSI, de quelques dizaines de vieux disques Winchester et de lecteurs de disquettes ? Paweł Zadrożniak (du groupe de demomakers polonais Silent) en fait un orchestre eighties

En récup', ce Londonien arrive aussi à en recycler de bonnes vibes au point de transcender Hit the road, Jack. N'oubliez pas le chapeau de l'artiste.

Chhhhtonktonktonktonktonktonktonktonktonktonktonktonktonktonktonktonktonktonk

Les instruments génialement étranges d'un allumé

Ce qui change des trop classiques verres musicaux, quand ta femme a une collection de verres à vin, à bière, à cocktails, à lait, à alcools forts, à thé, à eaux plates, à eaux gazeuses, à jus de fruits,...

Et qui conclue ma petite collection pour l'année.

Précédents épisodes

CPU Ex0057 Bonjour à toi enfant du futur immédiat : Fulguropoing

Da Scritch — 2017-06-20T05:49:00+02:00

Le croisement entre les assistants vocaux et la domotique crée-t-elle au delà de notre maison, un nouvel emballage pour le personnel de maison ?
Radio

Ceci est une partie du script de la release Ex0057 du programme CPU, Assistants personnels, l’Ère de Jarvis, diffusé le Jeudi 15/06 à 11h. Plus d'infos sur le site de l'émission.
Si vous suivez le programme en podcast, préférez le flux du site de l'émission

Bonjour à toi enfant du futur immédiat, toi qui découvre qu'il est toujours plus facile d'obtenir une réaction d'un ton ferme plutôt qu'avec un bête s'il-te-plaît.

Il fut une époque où le summum de la science-fiction était un ordinateur qui réponde comme une vraie intelligence artificielle avec une synthèse vocale parfaite, tel HAL 9000.
Non, pardon, avant de parler de lui, il y avait Goldorak, où le célèbre robot de combat lançait sans mot dire les fonctions prononcées de la voix de stentor du Prince d'Alcor. En fait, il hurlait littéralement les commandes, ce qui veut dire que soit l'isolation phonique des turboréacteurs au diesel laissaient à désirer, soit que la technologie alcorienne était particulièrement sourde.
JE DISAIS PARTICULIÈREMENT SOURDE

Puis il y eu la première vision d'une maison domotique avec le film « Electric Dreams » sorti en 1984, où un architecte achète un Mac pour son travail, et tous les accessoires qui permettent à l'ordinateur de contrôler tout équipement électrique du foyer. Oui, l'architecte était à l'époque la seule profession qui puisse s'offrir ce genre de technologie, à part les milliardaires (mais qui eux, ont déjà du personnel de maison) et les serruriers de nuits (mais qui eux ne déclarent pas tout au fisc).
Bien mal lui en a pris, car l'ordinateur atteint la conscience et tombe amoureux lui aussi de la belle voisine qui sait faire vibrer la corde sensible....
JE DISAIS QU'ELLE EST VIOLONCELLISTE

En fait, on oublie que la reconnaissance vocale est encore une fois une technologie assistive pour les personnes handicapées, qui a été bien vite employée pour le grand public. Comme la télécommande, l'ascenseur, la synthèse vocale et les écouteurs intra-auriculaires.
JE DISAIS LE SONOTONE

Alors, nous n'allons pas parler du développement de ce type d'application, ça nous avons prévu de le faire dans une prochaine émission avec des développeurs. Non, nous allons voir comment en fait cette réponse qui se veut la plus naturelle possible aux mots de l'utilisateur donne un sentiment de puissance, ou carrément d'une présence réconfortante, comme c'est le cas pour les personnes âgées au Japon, ou dans le film « Her » de Spike Jonze.
JE DISAIS QUE L'O.S. DU SMARTPHONE EST PARTICULIÈREMENT SEXY

Mais d'un autre côté, ces technologies, qui restent coûteuses et dont les finalités ne sont pas toujours bien identifiées par leurs consommateurs, ces technologies ne créent-elles pas aussi une redéfinition du foyer et de celle de l'intime ? Notamment en liant finalement son chez-soi avec un service d'e-commerce...
JE DISAIS QUE POUR TON DENTIFRICE, TU PEUX ALLER TE BROSSER, VA TE L'ACHETER TOI-MÊME

Quand tu finis une journée particulièrement assommante, personne n'a envie de rentrer dans son appartement s'il te boude. Et cette obséquiosité, cette volonté de toujours répondre aux désirs qui dépendent des services associés au constructeur derrière, ne crée-t-on pas à la fois une démonétisation de l'argent avec une facture mensuelle et une nouvelle servitude sur les livreurs associés, le genre à pédaler à fond la caisse à vélo et de griller un feu rouge, tout ça parce que tu as demandé à la charmante voix numérique une calzone et un coca ?

Enfant du Futur Immédiat, il n'est point de pire sourd que celui qui ne veut pas entendre. Et la première des choses qu'il faut aussi apprendre à couper les micros afin de retrouver une solitude étrangement apaisante.

Pas la peine d'hurler, elle entend plus rien, sa curiosité est éteinte.

10 ans de Nolife, déjà ?!

Da Scritch — 2017-06-01T10:05:00+02:00

Eh oui, déjà ! Une chaîne de télévision commerciale produite et conçue par des passioné-e-s, avec du contenu qualitatif, original et remarquable sur l'univers numérique, la créativité, la musique, le Japon. C'était impossible et ils l'ont fait
Vu

J'aurais dû faire un billet, une chouette contribution et tout ça, mais je me suis laissé déborder par mon agenda.
Alors je vous promet quelque chose la semaine prochaine, construit avec amour pour eux. En attendant...

Merci

Car vos passions sont de précieuses contributions à nos envies de créer

J'ai connu des personnes qui se sont mises à programmer parce que vous avez su expliquer des choses simples, d'autres avoir envie de jouer différemment, d'autres de créer des costumes, des décors, des fictions, des bd et de la musique.
Et tout ça, c'est beau.

CPU Ex0045 Bonjour à toi, Enfant du Futur immédiat : Sans les yeux

Da Scritch — 2016-12-09T06:45:00+01:00

Une émission qui a été très éprouvante à cause du chat dans la gorge. Et n'ayant pu enregistrer un reportage sur un utilisateur de synthèse vocale, j'ai téléchargé Pico, le moteur de la synthèse vocale d'Android, pour lire mon texte à ma place. Le programme a été intégralement pigé par Stéphane Deschamps sur la page de l'émission, milles mercis à lui.
Radio

Ceci est une partie du script de la release Ex0045 du programme CPU, diffusé le Jeudi 8/12 à 11h. Plus d'infos sur le site de l'émission.

Bonjour à toi, enfant du futur immédiat, toi qui n'a peut-être pas eu la chance de découvrir la clarté quand tu as ouvert tes yeux sur le monde.

De nos sens, celui qui semble le plus essentiel à la majorité des humains, est la vue. La vision permet de percevoir notre environnement lointain, même au-delà de notre atmosphère. C'est notre sens le plus exact, au sens qu'un événement distant observé est précisément orienté et à peu près placé dans l'espace.
Perdre ou manquer l'usage de ses yeux pose un sacré handicap pour percevoir le monde, plus que la perte de la sensation du goût sucré ou de l'ironie.

Alors oui, récemment, nous avons fait une émission sur les couleurs. Aujourd'hui, pas de couleurs, ni de noir et blanc. Rien. Zilch. Nada. Pendant une heure , tu n'auras que du son, de la radio pure.

L'ingéniosité de notre cerveau l'amène à développer les autres sens pour compenser l'absence de la vue. Les aveugles peuvent être des super-héros. Non, je ne pense pas forcément à Daredevil, rien n'est moins sexy que ~~Matt Damon~~ Ben Affleck obligé de cachetonner sur grand écran dans un nanar histoire de payer ses impôts... Bon, allez, je reconnais que la série actuelle m'a tapé dans l'œil, mais revenons à nos non-voyants.

Le pouvoir le plus intéressant que développent par la force des choses les personnes malvoyantes est dans la concentration : les technologies assistives qu'on leur a créé sont imparfaites pour donner une vision globale d'un écran, ils avancent donc à tâtons (désolé) pour découvrir chaque élément affiché. Leur compréhension de l'ensemble passe par leur capacité à construire une image mentale de l'environnement.

Comme la moitié du chemin était fait par les utilisateurs improprement dits déficients, les technologies pouvaient leur proposer des alternatives viables : l'écran à aiguilles Braille et la synthèse vocale.
Mais alors il n'y a pas de vision globale ou géométrique, il fallait que ces interfaces dictent une priorisation des contenus aux programmes qui étaient d'abord prévus pour une interface graphique.

Et croyez-moi que devoir repenser une interface graphique en terme de priorisation plutôt qu'en esthétique n'est pas simple. Pourtant, il y a un réel gain à faire ce travail : il permet de se poser et de songer à l'essentiel et à être clairement explicite, jusque dans les termes utilisés.

Enfant du futur immédiat, les concepteurs d'interface travaillent souvent dans le noir, jusqu'à ce qu'ils réfléchissent à ne pas voir le résultat, mais à songer à le rendre accessible. Car oui, le paradoxe est qu'il ne faut jamais perdre de vue que le handicap peut aussi être une chance pour tous. On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux…*

* « Le petit prince », Antoine de Saint-Exupéry

CPU Ex0043 Bonjour à toi, Enfant du Futur immédiat : Bataille épique

Da Scritch — 2016-11-25T12:13:00+01:00

Ça commence comme une blague : un nain, une elfe, un barbare et un magicien se retrouvent dans une taverne...
Radio

Ceci est une partie du script de la release Ex0043 du programme CPU, diffusé le Jeudi 24/11 à 11h. Plus d'infos sur le site de l'émission.

Bonjour à toi, Enfant du Futur Immédiat, toi qui te pose encore une question : est-ce que tu préfères aborder cette quête en tant que magicien ou en tant que chevalier ?

Entre autres vices difficilement avouables, je dois reconnaître que je fus rôliste. C'est à dire que je jouais aux Jeux de Rôles papier et crayon. Pardon, « Donjon et Dragons », « AD&D », « l'Œil Noir », « l'Appel de Cthulhu », « Star Wars », « Cyberpunk », « Vampire The Eternal Struggle » et j'en passe… Le principe est qu'autour d'une table, des joueurs vivent une aventure orale contée par le Meneur de Jeu.

Au même moment, sur les micro-ordinateurs familiaux, surgissaient les jeux d'aventure textuels, auxquels succédèrent très rapidement les jeux d'aventures sur carte, selon le principe d'un labyrinthe et avec une quête.

Ces derniers furent rapidement appelés jeux de rôles, mais ce fut à l'époque une appellation abusive des services commerciaux : les interactions entre le joueur unique et les personnages non-joueurs étaient très limitées. Par exemple, il était impossible de draguer lourdement la femme de l'aubergiste, histoire de provoquer une bagarre pendant que votre voleur s'empare du bagage d'un voyageur de marque. Alors qu'avec un MJ, s'il avait suffisamment d'imagination, c'était nettement plus drôle.

Pourtant, on y retrouvait la même intrigue : Porte, Monstre, Trésor.
Sauf à « l'Appel de Cthulhu », où il n'y a pas de trésor, juste des séjours en hôpital psychiatrique à gagner pour le personnage.

Puis les jeux informatique d'aventure sur carte devinrent des jeux d'aventures dans la carte, en 3D, façon FPS (Jeu de tir à la première personne), en sortant totalement de la contrainte de grille. « Ultima Underworld » était sorti simultanément avec « Doom » et fut une innovation incroyable pour l'époque.

Mais le jeu de rôle sur ordinateur devint du vrai jeu de rôle quand arriva la connectivité et donc des jeux où plusieurs joueurs humains pouvaient interagir entre eux, soit collaborativement, soit en adversaires.

Le joueur n'était plus seul, et la psychologie devenait un moteur intéressant, même avec un Barbare. Vous ne pouvez vous douter combien un Gros Bill est utile pour déclencher une guerre à votre avantage sans que l'on vous soupçonne...
Je peux l'évoquer, il y a prescription de nos jours.

Puis, avec la progression de la puissance de traitement des serveurs, les parties pouvaient recevoir de plus en plus de joueurs, ce que l'on appelle fort justement le MMORPG, le jeu de rôle massivement multi-joueur.

Enfant du Futur Immédiat, nous arrivons donc à des interactions de foules de joueurs ligués entre eux, où, nous avons des batailles homériques impliquant des milliers de joueurs humains et qui ont demandé parfois des milliers d'heures de préparation. À tel point qu'on peut réellement parler de spectacle à très gros budget. La bataille de B-R5RB sur Eve Online aurait coûté 300 000 € en vaisseaux spatiaux détruits. C'est encore plus remarquable quand on se souvient que cette bataille a eu lieue en 2014, soit plus de dix ans après la sortie du jeu lui-même.

Un jeu se base en général sur un univers, soit à partir d'un roman ou d'une époque historique, soit totalement inventé. La dimension sociale créée par le MMORPG est tout aussi intéressante car les joueurs se retrouvent indirectement scénaristes en créant leurs propres buts en fonction de ce qu'ils perçoivent et de comment ils se projettent dans cet univers. Et on l'a vu, ces jeux peuvent avoir une durée de vie effective dépassant la décennie.

Ce qui veut dire bien évidemment entretenir le moteur de jeu, mais aussi tout le logiciel qui va autour, les assets comme les graphismes et les traductions et bien évidemment, gérer la communauté dans l'univers et dans les forums.

Enfant du Futur Immédiat, ce type de jeu est vraiment intéressant, mais n'oublie pas de marquer une pause toute les deux heures de jeu. C'est facile, suffit d'avoir une bonne équipe pour se faire confiance.