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/

Photonerd: Comment Photoshop a façonné une nouvelle culture de l’image

Le logiciel d’Adobe a été le premier produit et le plus célèbre d’une firme qui existe depuis 1982 (34 ans maintenant) fondée à Mountain View, en Californie, aussi le fief de Google et bien d’autres startups Américaines devenues légendaires. A cette époque, les professionnels du graphisme utilisaient tout autant Corel, qui régnait en maître depuis 1984 au Canada. La plate-forme de rigueur était un Mac, mais les deux compagnies s’adaptèrent vite au marché du PC, certes toujours boudé par la communauté des graphistes. Outre un logiciel de dessin vectoriel, Illustrator, Adobe s’était surtout fait connaître par son format compressé devenu un standard, pdf (portable document format). Des million de millards de pdf ont sans doute été créés et échangés depuis.

Photoshop lui s’est imposé comme le leader incontesté de la retouche photo, au point d’être vendu via des accords de partenariats sous des versions simplifiées telles que photoshop elements avec des scanners. Mais les possibilités de photoshop (Lancé le 19 Février 1990) ont été rapidement exploitées par les amateurs d’imagerie, non seulement pour des photomontages, photocompositions, manipulations d’images, mais également toute une génération d’artistes sur palette graphique ou ordinateur créant un véritable mouvement de peinture digitale. Le logiciel est devenu non seulement le standard de l’industrie mais est entré de la pop culture et le language courant, comme « photoshopper ». Il est difficile de trouver aujourd’hui une image de couverture (de mode, design, architecture, etc;) qui ne soit pas retouchée via ce standard. Il serait même impensable à un magazine de mode de présenter des photos non retouchées aujourd’hui…
Comme les bons effets spéciaux ils sont là sans que le public ne s’en rendre vraiement compte.

Les photoshoppeurs à l’origine de scams
Outre les professionnels, les particuliers ont aussi tiré leur épingle du jeu et créé des manipulations qui ont souvent fait le buzz sur les réseaux sociaux, en particulier Youtube, à l’origine de nombreux et fameux Fakes utilisés en catch image:

Dans la veine des « anciens géants » ces fameux fakes ont écumé le net depuis des années.

Neo-surrealism
Une autre de ces applications à participé au renouveau du surréalisme, inventé et pratiqué au début du XXe siècle (Magritte, Dali..). Il y a même des concours internationaux récurrents qui peuvent servir notamment aux agences de publicité à dénicher de nouveaux talents, comme :


Tejal Patni http://www.tejalpatni.com/


Erik Johansson: http://www.erikjohanssonphoto.com/

Movie Concept Art
Outre les « artist impression » qui servent à vendre des projets, souvent basé sur des modèles 3D, dans l’industrie, l’architecture et de design de manière générale, photoshop a aussi engendré une génération de « digital painters » dont les réalisations néo-impressionistes de « Peinture numérique » très prisées sont utilisées par l’industrie du cinéma. Deviant Art aux États-Unis et Poobbs en Chine sont des annuaires et portfolios connus dans l’industrie, de même que pour des Game designers.


Série de photomanipulations par l’auteur @dbo-design

Règne sans partage ?
Photoshop, surtout dans ses versions les plus récentes, a été critiqué pour sa complexité et sa lourdeur, sans doute dûe à une débauche d’additions au cours des années, parfois très éloignées de sa vocation première: Gestion des polices, 3D, animation… Imposant par ailleurs aux utilisateurs de se reformer sur une nouvelle interface, avec le temps d’adaptation requis. Les infortunés utilisateurs sous windows ont aussi maudit l’instabilité et les limitations des premières versions (pas d’autosave en cas de plantage).
Photoshop à cependant une concurrence établie, quoique ces outsiders n’ont jamais pu s’imposer comme véritables standards alternatifs dans l’industrie, ou de compatibilité.
-Corel Photo-Paint: Lançé en 1992, un peu plus limité, il peut être amélioré via des scripts and macros
-Gimp: Le photoshop du « monde libre » bien connu, il était proposé en même temps que mozilla et d’autres applications sur les distibutions Linux. Avec ses mérites et limitations, il est resté plus simple que photoshop toute en disposant des fonctions attendues pour ce type de logiciel comme la gestion des calques, les transparences, les formats, avec le luxe d’accepter les formats photoshop avec le bon plugin. Pour les particuliers non désireux d’investir ou de pirater, c’est l’alternative la plus populaire.
Le renard à ses adeptes et imitateurs comme Paint.NET, Seashore, Pixlr, PicMonkey, SumoPaint, Krita, CinePaint…

Un art « populaire »
L’arrivée de nombreux logiciels d’images mais surtout d’internet comme galerie géante (ce qui inclus également les réseaux sociaux) à multiplié de façon exponentielle le nombre d’oeuvres créées, sans la phase de curation que l’on retrouverai dans une galerie d’art classique. Avec la facilité de partage sur les réseaux sociaux, ces oeuvres voyagent et les artistes peuvent d’autopromouvoir, ce qui à démocratisé l’accès à l’art comme jamais.

On retiendra toutefois que cette débauche de « sources d’inspirations » telles qu’affichées sur instagram ou pinterest par exemple, a tendance à diminuer la spontanéité et la fraîcheur, l’originalité des créations. C’est là qu’interviennent les nombreux blogs de design, qui jouent ce rôle de curateurs et que consultent les professionels. Il y a une qualité objective sur laquelle tout le monde s’accorde.

Par ailleurs les places de marchés où vendre ces oeuvres se sont multipliées (Etsy, pixels.com, redbubble, etc.). On compte près de 200 sites de vente d' »art » en ligne sans compter les boutiques spécialisées (posters thématiques, etc.), et les grandes bases d’images comme Shutterstock ou Fotolia.

Un art de l’éphémère
Reste que si photoshop est un standard et semble en passe de le rester, nombre de créations (en particulier acoustiques) souffrent de l’obsolescence programmée dûe à une création correspondant à une époque particulière sur un matériel et un logiciel qui va disparaître au bout de quelques années. De ce fait l' »art numérique » est difficile, voire impossible à conserver. D’après une étude de l’IRCAM en 1972 moins de 60 oeuvres électroacoustiques, sur 1000 sont encore jouables. Les oeuvres visuelles semblent ne pas souffir ce genre de limitations, pouvant être imprimées sur tous formats à tous moment.

Mais les informations stockées, enregistrées de multiples fois s’érodent et des erreurs s’insinuent à la longue, sans compter la perte des supports. Sur internet la « création visuelle » au sens très large est plus pratiquée comme un art de l’éphémère, notamment sur snaptchat. Les créations ne sont stockées que le temps du partage et disparaissent. Ce phénomène va augmenter avec l’arrivée prévue de la réalité augmentée et une demande qui surpasse largement la capacité de serveurs de plus en plus energivores.

Et vous, utilisez vous photoshop ? Avez vous développé un usage particulier ? Vous apporte-t’il des avantages dans votre travail et a t’il changé votre façon de travailler ?

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).

Test de Concrete 5

Parmi les CMS (Content Management System), ou architectures de sites les plus utilisées, concrete 5 fait partie des petites mais intéressantes étoiles montantes du web. C’est un CMS open source, avec une licence du MIT. Sa grande force, qui est partagée par des plate-formes de sites « gratuits » comme Wix, est de proposer un moteur d’édition et de construction dynamique, en java. En d’autres termes, un particulier qui désire modifier ses contenus et son site en temps réel, peut « jouer » directement avec les éléments, sans une seule ligne de code ou connaissance dans ce domaine. Le CMS serait le 4ème en termes de popularité d’après prweb (http://www.prweb.com), comblant un vide entre wordpress et drupal, et la société PortlandLabs qui est derrière, assurant un support de qualité et une cohérence d’ensemble malgré la licence open source.

Spécificités

En termes plus techniques, ce CMS fonctionne sur le principe « Modèle-vue-contrôleur » (Model–view–controller) un Wysiwig (What you see is what you get) bonifié. Le CMS avec un language orienté objet notamment dispose d’un cache de serveur intégré, d’une API de développeur, d’un système de suivi de version et de l’optimisation de son moteur de recherche.

Prévoyez un ordi réactif et un bon débit

Le côté négatif de ce mode de fonctionnement à priori assez intuitif est sa relative lourdeur, puisque via le protocole http et l’accès au serveur en temps réel, il faut une bonne connexion et un ordinateur qui ne soit pas surchargé de tâches. Tout son mode de fonctionnement tourne autour de la possibilité de gérer des blocs, certains affichant par exemple le titre, le menu, un flux d’article, une galerie… C’est particulièrement vrai sur les templates de type « commercial » pour lesquels le storytelling impose un scroll avec de nombreux éléments superposés. Il est très facile de déplacer n’importe quel élément en simple glisser-déposer. Moins d’éléments à cocher, cachés dans des sous-menus de paramétrage donc, plus facile et intuitif à gérer au moins en théorie.

Le point fort: Design très intuitif

Chaque bloc dispose de propriétés propres et peut être édité entièrement (editeur de textes intégré), dupliqué, supprimé, importé… Ainsi quelle que soit la complexité des blocs en question (formulaires, galeries, vidéo, etc.) n’importe lequel peut être déplacé en direct sur le site. Reste toutefois une validation à faire via le cache pour afficher aux internautes ces modifications.

Ce système de cache puissant est intrinsèque au fonctionnement du CMS. C’est aussi, pour qui n’en à pas l’habitude, une vraie plaie, car les éléments modifiés n’apparaissent que forcés au prix de contorsions avec les paramétrages. Frustrant.

Pour avoir une idée claire de ce CMS j’ai choisi de l’installer sur un nom de domaine qui en fera frémir plus d’un (et d’une !), spider-encyclopedia.com. Un choix personnel lié a une arachnophobie traitée en tentant de la muer en centre d’intérêt et de l’intêrét de… dominer le web.

L’occasion en tout cas d’apparaître sur la toile avec un site spécialisé dans un domaine ou les extrêmes s’affrontent, vieux sites scientifiques complets mais peu attractifs et sites en one-shots d’étude de collégiens truffés de gifs animés et abandonnés. Bref, quelques raisons concrêtes d’utiliser concrete 5 (allons-y pour les jeux de mots).

Concrete 5 en bref

Concrete 5 existe depuis 2010 et à quelques atouts dans sa manche, outre la taille de sa communauté (282 000 membres, 723 194 sites), le nombre des add-ons (beaucoup de payants également), son côté responsive de base (avec contrôle très bien pensé sur différents types de smartphones !), ses systèmes de droits et permissions et ses options SEO intégrées. Concrete 5 met aussi en avant le fait que son CMS a été choisi en 2016 par l’US Army pour son programme MWR (Unified Web Presence) (msg: Si un troufion de base peut gérer ça…) – bref, un CMS en béton armé à prise rapide :).

Parmi les autres points forts:

  • De nombreux templates, gratuits, utiles, responsives, variés et …récents.
  • Son installation rapide (attention toutefois a bien vérifier sa version de php!)
  • Bonne sécurité du fait de sa relative rareté (0.2 % des CMS installés en 2015)

Maintenant, ce CMS possède une ergonomie particulière, avec quelques points faibles. Outre les lourdeurs du cache, le test suprême est de pouvoir rapidement créér une page de contenu ou un post. A ce titre, c’est peut-être un peu moins intuitif que wordpress qui propose un « + » dans sa barre de navigation permanente ET son menu latéral.

Sur Concrete 5, il existe deux icônes à droite, un icône de « fichiers » et une icône de « réglages ». Si la séparation des fonctions est logique, il faut activer cet icône pour afficher le menu latéral proposant la création et la gestion de contenus. Ensuite vient la séparation entre page et post, gestion d’images et autres selon les addons.

Notez qu’à ce stade le site est « brut de template » avec des contenus et un menu préinstallés. Pour éditer une page existante il faut se lever de bonne heure accéder au sitemap, cliquer-droit, ce qui ouvre le menu contextuel et « visiter la page » ce qui permettra de l’éditer (symbole « crayon » dans le menu de tête). Cela permettra ensuite d’éditer le bloc (autre menu contextuel). Les icônes sont bien choisis et rationnels en général.

Pour créér une page il faut passer par le symbole d’engrenage (réglages) puis « composer », ce qui ouvre à droite la partie édition permettant de remplir le titre, les champs SEO, de catégoriser et de taper son texte, ajouter des éléments.


Ajouter des éléments (symbole +) est assez intuitif. On glisse-dépose le bloc à l’endroit que l’on souhaite en édition visuelle, ce qui en code, ajoute un bloc de type div ou assimilé. La fonction ajouter html permet de place des éléments plus complexes. Le bloc « feature » permet d’ajouter à peu près tout élément spécial de mise en page (icône avec texte, lien…).
Pour sauver la page il faut en repasser par « édition » (crayon), on peut en profiter pour ajouter un commentaire en cas de travail collboratif.

Mon avis

En matière d’intuitivité, Concrete 5 écrase totalement des CMS comme Drupal ou Joomla, il se révèle même plus facile à appréhender que WordPress sur certains aspects, quoique la création et l’édition de pages soit fastidieuse. Le distinguo entre page et article n’est pas non plus évident à priori. Toute « page » est en article par défaut, puisque les commentaires sont activés. Le fait de pouvoir naviguer/éditer à la volée tout contenu avec le point de vue du visiteur est un beau tour de force. WordPress est sans doute plus « chargé » mais fait l’impasse sur les menus contextuels, en tout cas avec l’ampleur d’un Concrete5.

Donc au final Concrete5 se place comme le CMS parfait pour des débutants, plus facile d’usage et avec une courbe d’apprentissage encore plus réduite que WordPress, mais moins de fonctionnalités lorsqu’on va un peu plus dans les détails. Il faut créér un site complexe pour réellement se rendre compte de ses possibilités. J’attendrai donc une commande de ce type pour donner un avis plus éclairé sur cet aspect. Concrete 5 est en toute cas parfait pour disposer d’un site présentable et personnalisé en moins d’une heure.

Gros point noir cependant:

Concrete5 n’existe pas en Français !

POUR LE TESTER
Rendez vous sur http://spiders-encyclopedia.com/index.php/login
Identifiant: test
Mot de passe: motdepasse
adresse mail (bidon): any@mail.com

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…