WebVr: Avenir du web ou de la VR ?

La réalité mixte (AR, VR) semble tout autant être en passe de créer une révolution dans le web que l’IA (Intelligence Artificielle), croisée avec les big data (ou métadonnées).

D’abord définissions le WebVr: C’est une application Javascript permettant de créer des expériences immersives en VR dans un navigateur. Donc en théorie, compatible avec Mozilla (Mozilla VR) avec son standard A-Frame, et Chrome, via Google Cardboard qui permet d’utiliser son smartphone et une simple appli. VR (Virtual Reality) car en effet l’environnement est fermé, on ne voit pas à travers l’écran… Tous les programmes potentiellement affichés par les application déjà disponibles et compatibles pour Oculus Rift, Samsung Gear VR, DayDream, HTC Vive, Microsoft Edge: De la visite virtuelle de musées, à un Google Earth en 3d, des vidéos et créations d’artistes indépendants, visualisation d’objet dans un cadre éducatif, les photos en 3d…

Pour l’instant l’utilisation du WebVr est assez fragmentée, tous les devices ne sont pas compatibles avec tous les navigateurs. Les utilisateurs du « cheap » Google cardboard seront rivés à leur téléphone (encore?) tandis que les autres utiliseront leurs casques: Windows Mixed reality pour Edge, Vive et Oculus (Facebook) pour Mozilla ou encore Chromium. Le standard Google WebVr a été cependant annoncé comme en cours d’adoption par tous ces fournisseurs de lunettes.
Compatibilité WebVr

Comme le met en avant Google, son standard WebVr se passe très bien d’un application. On y accède donc depuis le navigateur chrome de son smartphone. Les sites supportés sont pour l’instant Matterport (visites virtuelles immobilières, archi-construction) et Sketchfab, avec 11,000 de scènes 3D, Powster pour les sites de films et trailers 3D. Il semble bien en effet que les sites promotionnels de films soient parmi les premiers à se mettre à ce nouveau standard.


Une impression desktop du musée 3D WebVr sur le site A-Frame de Mozilla. Toutes les applis compatibles VR présentent l’icône de lunettes en bas à droite.

Pour l’instant d’après ce qui est annoncé, le travail porte surtout sur le fait de rendre responsive l’expérience avec un utilisation optimale des ressources. Les expériences sont différentes selon les supports digitaux:

-Sur desktop l’utilisateur utilise le pointeur de la souris pour se déplacer dans un environnement 3d, comme on peut le faire avec n’importe quel embed de sketchfab à l’heure actuelle. En revanche le « mouvement » n’est pas forcément convaincant mais il possible d’interagir avec l’animation sans problème, le tout avec un environnement 3d interactif et éventuellement une bande son de fond.

-Sur tablette c’est le doigt qui va fournir le point d’ancrage pour le mouvement dans l’environnement 3d. Avec les interactions digitales habituelles dans n’importe quel environnement.

-Sur smartphone, c’est le device lui même qui assure l’orientation grâce à son accéléromètre. L’impression est celle d’une « fenêtre magique » intuitive qui se rapproche le plus de l’expérience idéale VR/AR.

Quelques exemples à tester en live (également platef-forme de soumission pour les projects WebVr): https://experiments.withgoogle.com/webvr

Toutefois tous les sites n’ont pas comme business modèle le display de visuels enrichis. Pour vraiment faire la différence, le WebVR devra trouver sa voie avec l’ensemble des expériences web actuellement disponibles, des réseaux sociaux aux forums, blogs, en passant par l’E-commerce et pratiquement tous les sites corporate et institutionnels. Et c’est là que la 3d peut se révéler intérressante, soit pour rendre l’affichage plus ergonomique avec des éléments en arrière plan sollicitables, soit pour tout simplement créer un univers spécifique et se différencier. La sémantique du site en entier étant prise en compte, il faut espérer que la navigation puisse même se faire en mode vocal.


Le superbe documentaire Canadien WebVr « bear 71 » qui se termine par une map interactive avec des effets bluffants. https://bear71vr.nfb.ca/

Historiquement, le WebVr fut créé en 2014 par Vladimir Vukićević (Mozilla). La première version opérationelle 1.0 en Mars 2016 a été déployée sur Mozilla et Google Chrome, formant le standard actuel reconnu par tous les acteurs du web et les géants du numérique, Microsoft annonçant en avril 1917 sa participation à la version 1.1. Utilisant la bibliothèque WebGL, la technologie est intrusive (GPS et caméra). En août dernier, sur Mozilla WebVr est installé par défaut. Un icône apparait demandant l’usage de lunettes, mais on peut utiliser ces applications sans. Une dizaine d’acteurs de la VR sont actuellement en train de travailler avec ce standard, et les logiciels 3D Unity and Blender viennent d’ajouter des formats d’export compatibles. 3ds Max et Maya devraient rejoindre la partie incessamment sous peu bien qu’Autodesk participe à des projets de VR.

Voici donc les promesses et limitations actuelles du WebVR:

Le WebVr tel qu’il existe actullement permet d’inclure des applications VR dans le web existant; Il en est tout autre d’un univers VR intégrant le web, et qui puisse inclure la représentation 3D d’un site internet. On avait déjà atteint une concentration des informations sur la page d’accueil avec le storytelling (au point de n’avoir plus comme pages que les mentions légales pour les petits sites), cette fois 360° sont disponibles pour l’affichage. La hiérarchisation et le caractère invasif des informations va donc définir un nouveau storytelling, et de nouveaux usages. Mais pour l’instant le WebVr ne se fait uniquement que via des embeds d’objets 3d (comme ceux de shapeways), mais rien de comparable avec les sites en 3d tels qui pourraient apparaître à terme. La question est de savoir si le web va intégrer plus de VR au point de se muer graduellement en expérience VR, avec peut-être pas mal de 2D restante comme ces films marketés pour la 3D mais ne méritant pas d’être vus avec, ou bien la prééminence et l’accessibilité des devices AR/VR va construire graduellement un authentique web 3d sans concession qui remplacera le premier.

Car pour l’instant en effet ce sont surtout les éditeurs de lunettes VR qui poussent a créér des contenus pour le web en VR afin d’augmenter les contenus disponibles et donc de rendre l’acquisition de ces devices, encombrants et coûteux, plus intérressant pour les usagers et plus universel. Une démarche qui rappelle les fabricants de console de jeu, ayant vite intégré l’accès au Web et à la TV numérique. Dans tous les cas le caractère open source de l’application est une puissante incitation à créér ces contenus et améliorer les scripts. Une autre chose qui sauve le WebVr est une courbe d’apprentissage courte du fait de l’usage massif de bibliothèques existantes et de commonalités avec les standards du web, comme A-Frame qui ne nécéssite pas de connaître WebGL. C’est d’ailleurs plus facile pour un utilisateur de surfer sur le web et d’enfiler ses lunettes pour entrer sur une application VR que d’en passer par le process habituel de télécharger un app VR, de l’installer et éventuellement de la paramétrer.

Il y a aussi une limitation physique au décollage du WebVR, celui d’un parc de hardware viellissant/ Rappelons que les smartphones doivent posséder un gyroscope les ordinateurs être VR-ready (générations 2016-2017), sans compter la vitesse de connection (qui peu jouer au chargement). Les applications VR en général demandent de la ressource en mémoire vive: La plupart des fabricants maintiennent que des cartes graphiques NVIDIA GTX 970/AMD R9 390, avec un équivalent CPU au i5-4590. NVIDIA GTX 1060 3GB et AMD RX 580 sont également recommandés en équivalence pour les applications à venir. Les développeurs sont de toute façon souvent dépassés par la vitesse à laquelle de nouveaux matériels aparaissent, mais de gros progrès restent à faire pour l’immersion. Les images montrés par MagicLeap en sont un bon exemple et la réalité en est encore loin.

HyperReality-Matsuda
Le toujours superbe « Hyper Reality » de Keiichi Matsuda, qui semble ne pas prendre de rides (2016), parfait « product preview » de l’AR

Rêvons juste un peu

Imaginez… Vous êtes dans la rue en 2022 et attendez un bus, donc un peu de temps à perdre. Vous disposez d’un ordinateur personnel dans votre poche, plus petit qu’un iphone, sans écran, ni port prenant la poussière. Il est relié en LiFi* à vos lentilles de contact. Ces dernières peuvent corriger votre vue mais à la base affichent des informations en temps réel, sans casque. Elles peuvent s’opacifier pour passer en mode VR, mais fonctionnent en mode AR le reste du temps: Messages et informations s’affichent dans le coin des yeux, le son par ondes vers la boîte cranienne, et l’inverse lorsque vous parlez via le mico récepteur au niveau des lentilles.

Besoin de travailler deux minutes, voir ou relire un document, envoyer un message ? Vos mains remplacent le clavier. Un espace virtuel 3d géré via GPS depuis votre UCC*, et une caméra pour le feedback des mains au niveau des lentilles. Avec quelques gestes, vous faites venir un dossier, sortez un document (en intérieur la commande vocale ça marche aussi). Pointez du doigt un élément et dictez la correction. « envoyer » puis le nom du contact, et le document part.

Des informations s’affichent sur les restaurants et dernières démarques des deux côtés de la rue. IA et big data vous connaissent bien et l’achat se fait en un clic. Encore une minute et il vous manque des choses pour ce soir ? Passez en opacité, et entrez le shopping virtuel d’une grande enseigne, parcourez les rayons, visualisez les informations des produits en surbrillance, puis envoyez au panier. On les livrera à votre retour.

Voilà une petite introduction du système universel work/entertainment qui pourrait envahir nos vies dans les dix années à venir. Les technologies décrites existent ou sont en développement.

Le web lui-même continuera à exister sous une nouvelle forme, probablement avec une longue phase de transition entre sites 2D et 3D. Ce sera la prochaine grande révolution après le responsive (affichage tablettes/smartphones).

Sources pour cet article
agence-realite-virtuelle.net/creation-site-webvr-realite-virtuelle/
webvr.info/
blog.google/products/chrome/experience-virtual-reality-web-chrome/
developer.mozilla.org/en-US/docs/Web/API/WebVR_API
w3c.github.io/webvr/spec/1.1/
github.com/w3c/webvr/blob/master/explainer.md
venturebeat.com/2016/09/17/how-webvr-will-make-virtual-reality-massively-available/
www.w3.org/2016/06/vr-workshop/papers/courchesne.html
aframe.io/
vr.chromeexperiments.com/

CMS sans base de données: Zwii

Qu’est ce que Zwii ?
Un récent CMS ou Content Management System (comme il y en a des dizaines), mais là où le choix se restreint et ce qui le rend intéressant, c’est que c’est un CMS sans base de donnée.

Vous allez me dire « et alors ? ». Si, ça fait une réelle différence que je vais expliquer ici.

La première bonne raison, c’est la sécurité. Les bases de données de tous poil standard (MySql en particulier) sont la cible de hordes de robots malveillants et de hackeurs en général. leur but ? Pénétrer la base, voler des données, utiliser la structure du site pour générer du spam ou des liens pourris. Pas de base, pas de risque, vous réduisez la surface d’attaque.

La seconde bonne raison c’est la simplicité côté webmaster comme utilisateur: Installation hyper-rapide car pas de base de données à créer pour à remplir lors de l’installation avec des identifiants et mots de passe suplémentaires. Pas de sauvegarde de base ni de back up régulier à faire, ni de surveillance particulière de l’ip ou du serveur.

La troisième bonne raison c’est la simplicité. (user friendly)
Côté utilisateur, ça tourne vite est c’est léger et très simple à utiliser. En effet faute de base qui gère des tonnes de données les concepteur d’un CMS de ce type se limitent au strict minimum. Pas de courbe d’apprentissage, on est très vite en mesure de créer et d’éditer du contenu.

La troisième bonne raison c’est la vitesse.
Pas de base de données ou de serveur (qui peut être poussif) à interroger avant d’afficher des contenus. C’est léger, c’est fluide, aussi bien pour le visiteur que pour l’utilisateur côté back office, pas de freeze ou de temps mort.

Zwii en détail
Personnellement je ne connaissait pas Zwii avant d’avoir effectué une recherche web sur « site sans base de données ». J’avais déjà testé CMS made simple, mais il existe aussi pulse cms, Grav, Pico, batflat
Cette nouvelle tendance s’appelle aussi « flat file CMS ». Ce qui pourrait vaguement se traduire comme « CMS en dur ».

Pour tester Zwii: Connectez vous sur la page de login et entrez les identifiants suivants:
-login: login
-mot de passe: password

Vous pouvez également tester Concrete5 sur http://www.spiders-encyclopedia.com/

A voir aussi:
cmscritic.com/flat-file-cms/
readerspark.com/non-database-content-management-systems/
1and1.com/digitalguide/hosting/cms/cms-without-database-a-useful-alternative/
queness.com/post/16142/11-lightning-fast-flat-file-cms

Une alternative aux hébergements d’image gratuits

Que ce soit pour vos clients ou vos propres sites, vous avez sans doute eu besoin à un moment ou à un autre d’héberger vos images sur un serveur (pas le vôtre). Héberger des images sur un autre serveur peut présenter quelques avantages:

-Grandement diminuer la charge serveur lors de l’affichage de vos sites
-Eviter les problèmes de hotlinking (vos images affichées ailleurs, mais physiquement hébergées sur votre serveur)
-En cas de déménagement du site et/ou de changement de nom de domaine, les liens images ne changent pas

Les plates-formes d’hébergement d’images sont nombreuses, en voici quelque-unes parmi les plus importantes avec leur conditions d’hébergement:

-Photobucket: Limite 2Go ou 8Go avec app
-Imgur: En fonctions des vues+limite taille (img/vid)
-Flickr: Permanent (compte yahoo)
-ImageShack: 90 jours, +Limites uploads/jour +Compte
-TinyPic: En fonction des vues+limite/jour
-SmugMug: Illimité mais payant
-Shutterfly: Limité+ Compte obligatoire
-Free Image Uploader: Permanent
-CTRLQ: Passe par embeds, utilise Gmail Mail Merge
-Imgbb: Pour forums, limite 16mo, compte nécéssaire
-Picasa: Une fois gérés sur l’ordinateur les images sont transférées sur le cloud Google

Mais c’est aussi une solution qui présente des inconvénients:

-C’est du provisoire: La plupart des plates-formes d’hébergement d’image ont été créé au départ pour les Forums, et leur durée d’hébergement est assez courte, l’image étant souvent éliminée si pas affichée pendant un certain temps. Cela privilégie la « fraîcheur » des contenus. Même principe avec les applications récentes et réseaux sociaux comme instagram et snapchat.

-Limitations SEO: Les images ne sont plus hébergées sur votre site, ce qui veut dire qu’elles ne cmptent plus pour son référencement, surtout si elles sont rares et apportent une vraie plus-value. Il est connu aussi en SEO qu’une image avec un nom significatif (ex.terme1terme2terme3.jpg) conserve un avantage marginal mais mesuré sur le référencement, et est plus facile à trouver. Le chemin d’accès également sémantique peut compter (ex. http://site.com/terme1/terme2/images/terme1terme2terme3.jpg) peut aider au crawling et à la manière dont Google voit le site.

-La plate-forme peut être en maintenance, indisponible à certains moments, voir changer de nom ou disparaître.

-Il y a presque toujours des limitations globale de taille (quelques Go)

Pour éviter certains de ces inconvénients il existe une alternative peu connue: Héberger ses images sur son compte Google Drive

La solution est séduisante en effet:
-Pas de limite de durée
-Pas de risque de disparition ou indisponibilité, vu la popularité et les ressources de Google
-Une gestion « saine », en interne sans être obligé de taper des captcha de validation antispam, ou de subir des tonnes de publicités, sans compter les lenteurs de scripts tiers.

Malheureusement Google Drive ne propose plus nativement de le faire. On ne peut que partager le lien vers l’image, pas l’intégrer comme image.
Il faut en passer par une application tierce, GDurl direct Permalinks, qui est une sorte de bit.ly permettant d’afficher des liens cryptés pointant vers votre Drive.

L’installation s’installe simplement, et l’utilisation est assez intuitive, quoique mériterai d’avantage de simplicité.

1-Une fois l’application téléchargée et installée sur votre navigateur, connectez l’application avec le compte Google souhaité.

2-Rendez-vous sur le site de l’application (dans vos favoris).

3-Parcourez le Google Drive à la recherche de votre dossier d’images

4-Au survol de l’image, cliquez sur le pictogramme en forme de lien

5-Une boîte de dialogue apparaît pour la création d’un lien public, à valider

6-Cliquer sur le nouveau pictograme « share file » qui apparait à la place (chaînon+user)

7-Confirmer la boite de dialogue

8-Cliquer « create GDurl » pour générer le lien.

9-Vous basculez dans une page d’affichage. Un champ contient le lien à copier (CTRL+c)

10-Collez le lien dans la balise image (si travail en code) ou dans la boîte de dialogue et le champ « URL » en mode Wysiwig sur votre site/blog.

11-Revenu sur la page gdURL il faudra cliquer précédent dans le navigateur pour avoir accès de nouveau à son tableau de gestion des images.

Le site pour se rémunérer en version gratuite affiche des publicités, pas trop gênantes, et un bouton de support Paypal. C’est un système qui fonctionne, mais comme dut plus haut l’ergonomie mériterai plus d’attention pour diminuer la charge de travail sur les gros volumes. Les étapes pour rendre le lien public et le partage mériteraient d’être traités d’un clic, et l’affichage du lien partageable en popup, ce qui éviterai les aller-retour avec le panneau de gestion Google Drive et les boîtes de dialogue intempestives.
C’est particulièrement fastidieux si la connection est lente, et dans certains cas les scripts publicités peuvent causer des conflits (notamment sur IE).

Il est noté également que pour les grandes images, l’embed (intégration) est bloquée par Google à cause de l’impossibilité de les scanner pour possible virus.

Toutefois les avantages de cette solution de long terme semblent convaincants. Avant de l’adopter pour vos projets, il reste à se poser la question technique de l’utilité de gdURL en mettant en balance la Vitesse de chargement du site / popularité des images de son site (SEO).

Afficher video Youtube responsive


Comment faire pour que ma vidéo soit responsive (s’auto-adapte à l’écran)?

C’est un vieux problème, que Youtube ne semble pas motivé à le résoudre pour l’instant, et pourtant ce serait logique vu l’ampleur du traffic mobiles et tablettes.

Pour résumer, Youtube (et d’autres plateformes de vidéos) de récupérer le code d’intégration (embed) à placer dans une page.

WordPress par défaut dispose d’une fonction intégrée d’intégration de vidéo. Mais lorsque cette intégration se fait hors d’un éditeur et en code, le problème persiste pour tous les webmasters qui proposent à leur client d’intégrer une vidéo: Le site est responsive, la video ne l’est pas. Youtube et consorts appliquent une taille en dur par défaut, il faut donc revoir le code pour rendre le lecteur vidéo flexible.

Exemple d’embed video « brut de youtube »:

On passerait logiquement en mode responsive à:

Et oui, la largeur est bonne, mais ni 100% en hauteur ni le mode « auto » ne marchent

Cependant, on peut appliquer la règle suivante en standard HTML5 depuis le CSS:


video {
max-width: 100%;
height: auto;
}

Pour aller plus loin, le mieux est encore de placer ce code dans la partie édition du css de votre template:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Et ensuite dans le widget lui même (ou d’ailleurs dans votre article/contenu):

div class="video-container"
iframe src="lienyoutube" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"
/iframe
/div

Notez le div qui applique le style. La taille est une « taille maxi » par défaut en mode desktop.

Des commentaires, des réactions ?

WordPress 4.8 est arrivé

La nouvelle mouture de WordPress 4.8 vient de faire son apparition, qui de neuf ?

Trois nouveaux widgets (ces modules qui prennent place en colonne latérale) permettant d’afficher des vidéos, images et audio. Jusque là ces options n’étaient accessibles qu’avec des plugin ou en mode « huile de coude », puisque l’on peut toujours décider de créér un module avec du texte, puis y glisser un shortcode ou un peu de code en espérant qu’il passe… Fait pour un client, ça marchait.

On peut d’ailleurs placer n’importe quel embed dans un widget (je l’utilise pour y placer le code d’intégration google adsense). Comme on le verra plus loin, l’ajout de l’éditeur pour mettre en forme le widget de texte est aussi une bonne nouvelle.

Autres nouveautés de WordPress 4.8:
L’insertion du formatage du texte dans le widget texte est aussi une bonne nouvelle pour qui n’a pas envie de « mettre les mains dans le cambouis ». L’option reste disponible quand même depuis l’onglet « texte » de l’éditeur. On peut par exemple créer un lien sans passer par le code.

-Autre nouveauté, appelée « frontières de liens »: Modification du lien. En clair, si l’interface ne change pas, on peut maintenant insérer un texte derrière un lien sans qu’il soit nécéssairement englobé par le lien. Cela évite des manipulation pénibles à chaque fois (comme de passer en mode code).

-Les évènements de la communauté WP deviennent plus accessibles, avec une boîte affichant les plus proches chronologiquement. Toutefois pas encore de filtre par pays, ou de système d’alerte, ce qui aiderait un peu…

-Autres modifications: Des titres plus accessibles sur le panneau d’administration pour les mal-voyants, une API JavaScript pour l’éditeur de texte (TinyMce permettant d’instancier l’éditeur à chaque démarrage), un API pour les Widgets Media (ceux vu plus haut, gérés par une même classe), une mise à jour multisite, et la colonne de personnalisation en mode « custom » du style devient responsive. Egalement, wordpress ne support plus les formats WMV et WMA (Silverlight), pas une gross perte !

Bon blogging !
Si vous avez des remarques ou des commentaires n’hésitez pas à m’en faire part…