DBO Design

DBO DESIGN

Content Reactor 3.0

Test de Thelia

Rédigé par dbodesign Aucun commentaire
Classé dans : Webdesign Mots clés : aucun
Thelia est un CMS E commerce. Ce n'est pas le plus connu par ailleurs, mais l'ayant déjà testé dans le passé et installé un exemple pour une cliente, j'ai pu apprécier sa très grande simplicité. Il constitue une bonne l'alternative à de grosses machines comme Prestashop et plus encore, Magento.

Les CMS E-commerce en Septembre 2019:

Vous voulez vous lancer dans l'E-commerce (commerce en ligne, boutique virtuelle) ? Plusieurs solutions s'offrent à vous selon vos choix:
  1. Vous avez déjà un site avec des pages bien référencées:
    1. Wordpress ? > mettez en place un plugin Woocommerce ou équivalent comme WP Commerce...
    2. Drupal ? > Idem pour DrupalCommerce, Ubercart
    3. Wix ? > Square Online Store.
    4. Jimdo ? > Module interne
    5. Ecwid : A placer sur tout site existant (codage attendu !)
  2. Vous n'avez pas de site et n'en voulez pas: RedBubble, Pixels, et bien d'autres pour une gestion plus limitée (fixer les marges, etc.), ou encore les boutons et liens d'achat Paypal à mettre par ex. sur un réseau social.
  3. Vous voulez une boutique en ligne mais facile à gérer: Shopify par exemple pour un bon degré d'autonomie: Vous gérez le site, la livraison, etc. D'autres solution auto-hébergées existent comme X-Cart, ...
  4. Vous voulez votre propre E-commerce et être autonome dessus (open source):
    • Prestashop: Solution Francaise favorite: Simple et récent
    • Magento: Solution lourde mais puissante, pour gros projet
    • ZenCart: Une autre ancienne référence, comparable à Presta.
    • OpenCart: Plus simple mais moins customisable
    • OS Commerce: Le vétéran. Tech anciennes, plus de maintenance
    • Jingoshop: Un nouveau venu comparable à Presta.
    • BigCartel: Ecommerce assez simple destiné aux artistes

Thélia en Bref

Thélia est l'une de ces pépites Francophones, souvent présenté comme le nouveau Prestashop. C'est un projet déjà ancien, réalisé par la société Octolys en 2005. Thelia est passé sous licence GPL en décembre 2006 de manière à croître de manière plus rapide, et à été repris par la suite par OpenStudio en 2012, qui continue à travailler sur le projet de nos jours. Actuellement dans sa version 2.3.5 c'est un projet en évolution assez classique mais robuste, basé sur Apache, Nginx, PHP 5.5-7.2 et MySQL. Thelia a toutefois suivi les évolutions et intégré Smarty, bootstrap 3, les microdata, le préprocesseur css et beaucoup de nouvelles fonctionnalités pour plus de performance. -Derrière on retrouve les moteurs de template Smarty et Twig. -Le front-office est construit autour de Bootstrap 3 et est gérable depuis un mobile. -Toute l'architecture est modelée autour de HTML 5 et des microdata pour donner une signification plus sémantique au contenu et aux données. -Pour une meilleure maintenance, le préprocesseur CSS est utilisé pour générer une feuille de style en less ou sass. Côté back-office ce dernier est pensé encore ergonomique et fonctionnel avec un responsive design intégré au bootstrap 3, HTML 5 est entièrement personnalisable via Smarty et les options natives de Thelia. Bien qu'encore mal connu en 2012, Thélia progresse et reçoit des avis favorables dans les comparatifs, au moins en France. Les Options proposées sont: > Fonctionnalités de base d'E-commerce > Aucune limite de nombre de produits/catégories > Gestion des déclinaisons, attributs, marques, images, documents ou associations entre produits > Personnalisation par template des Factures et autres documents PDF > Multi-langues, multi-devises, et taux de change mis à jour en auto > Panier, Historique & suivi de commandes avec génération de PDF auto > Recherche multicritères de produits > Combinaisons de déclinaisons à l'infini > Editeur HTML TinyMCE pour le rédactionnel > Promotions en pourcentage ou somme fixe avec conditions d'application > Interfaçage amélioré avec plus de solutions de paiement en ligne/hors ligne > URL rewriting, Gestion des shopbots.

Installation de Thelia

Une fois le fichier de base récupéré sur la page download du site, il convient de l'envoyer sur le serveur avec votre logiciel FTP préféré. Il faut aussi créer sur le serveur une base de données. Etape 1: Une fois le dossier en place, il suffira d'appeler le fichier d'installation par défaut pour l'installation et le paramétrage (6 Etapes) On peut choisir à ce moment la langue supportée - Anglais par défaut (Fr ou Allemand). Etape 2 détaille simplement les permissions accordées sur le serveur en PHP. Si tout est au vert c'est parfait. Etape 3 est la connexion et l'installation et à la base de données. Elle doit avoir été créé au préalable comme dit plus haut. Il faut donc un nom d'hôte et de serveur, un identifiant, et un mot de passe. On laisse aussi en principe le port de connexion par défaut. Etape 4 Le cas échéant il peut y avoir d'autres bases détectées, il conviendra de choisir la bonne. Etape 5 Il s'agit de paramétrer proprement le site: Choisir l'identifiant de l'administrateur principal, son adresse mail de récupération, son mot de apsse et d'autres infos comme la langue de l'interface par défaut, l'Email de contact, et l'URL du site, si nouvelle. Etape 6 Finalisation du process (si tout va bien) en envoi sur la page d'accueil par défaut. La prochaine fois nous feront une update avec le test complet du back-office et un premier setup de quelques produits. En savoir plus & liens utiles Pour se connecter: adressedusite.fr/web/admin/ Il existe un module pour changer cette adresse par défaut. https://demo.thelia.net/admin Support: https://forum.thelia.net/

Echo Frames d'Amazon, Game changer ou gadget ?

Rédigé par dbodesign Aucun commentaire
Classé dans : Réalité Mixte Mots clés : aucun
La révélation du lancement à titre de prototype, des lunettes connectées Echo Frames a surpris la presse, dans la mesure où la marque de Bezos n'avait jamais rien dévoilé auparavant sur le sujet. Le modèle dispose d’un micro, mais pas de caméra, donc son interactivité est singulièrement réduite, à celle d'un auxiliaire de maison comme Echo Show, le concurrent de Google Home dans la catégorie des "smart speakers". La Gamme echo s'étend simplement à des lunettes, accessoire portable, plutôt qu'à un device en place fixe. Quel intérêt, alors, d’opter pour ces lunettes plutôt que des écouteurs ou une bague ou une smartwatch interactive ? Les porteurs des lunettes pourront certes choisir des verres à leur vue. Pour le reste de la population qui ne porte pas de lunettes, Amazon aura peut-être plus de difficultés à convaincre de l’utilité de porter des smart glasses, surtout sans l'interactivité visuelle, un des atouts majeurs à la base du fonctionnement de la réalité augmentée et mixte. Overdose de lunettes connectées ? Il semble étrange de lancer un tel produit alors que ce genre de matériel, déjà proposé par d'autres marques, n'a pour l'instant pas fait de percée auprès du grand public. En effet en cette fin d'année 2019, Google, Facebook, Amazon et Apple rivalisent en annonces et effets de communication autour de futurs produits. Google est un vétéran de ce domaine, avec une offre entreprise bien rodée en concurrence directe avec Microsoft Hololens. Vu son prix et le manque de contenu proposé au grand public (créé sur mesure pour des applications pro), le géant de Cupertino est pour l'instant peu disert sur son modèle "grand public" très attendu depuis 2014. Facebook est derrière Oculus, mais n'a pour l'instant rien lancé, peaufinant un produit en réalité augmentée uniquement visible pour l'instant au travers de quelques dépôts de brevets. Mark Zuckerberg affirme que ses futures lunettes seront stylées, à l'image de son alliance avec Luxottica, le fabricant Italien des Ray-Ban. Que'elles seront probablement mixtes (AR/VR) de manière a basculer en mode réalité virtuelle en full opacité notamment pour accéder a son réseau social en VR. En outre la marque développe son propre assistant vocal. La date limite pour la sortie évoquée est tardive, 2025, mais l'idée est pour la firme aux pouces bleus de faire l'impasse sur un éventuel smartphone et passer directement à l'étape de lunettes connectées qui pourraient le remplacer. RDV dans quatre ans donc. Quand à Apple, c'est le secret le plus total, comme à l'accoutumée. La stratégie de ce dernier vise à créer un produit qui serait un levier d’adoption universel des services pour Apple. Apple a renforcé sont expertise en rachetant huit start-up spécialisées et investi massivement depuis deux ans. Donc que vient donc faire Amazon "dans cette galère" ? Ces premières lunettes intelligentes sont équipées d’Alexa, en relation avec le micro. D'une part la technologie est moins complexe et risquée que de s'attaquer à la vue, et sans doute d'expérimenter sur le terrain commercial sans prendre le risque de long développements, peut-être à l'image de Snapchat et de ses malheureuses SnapGlass, un produit de niche actuellement à sa version 3 sans vraiment rencontrer le succès. Expert en «dark patterns» tout comme ses concurrents, Amazon se dote maintenant d'un premier produit pour mieux cerner ses utilisateurs grâce à la foule de data qui seront collectés. Ce prolongement d'Alexa, l’assistant virtuel d’Amazon sorti en 2014 et ne permettant au début que 13 fonctionnalités différentes (jouer de la musique, écouter la radio, contrôler la domotique, les objets connectés, faire ses courses, gérer son calendrier, météo et news...) a en quatre ans augmenté les possibilités, proposant de nouvelles intégrations et de nouveaux partenariats. Auxiliaire domotique fixe, il est donc logique que ce portage soit une prochaine étape. En effet, on peut parler vu sa richesse d'un véritable écosystème, un OS qui ne dit pas son nom. Or, la firme de Seattle a raté son entrée dans les systèmes mobiles. Certes, Alexa est présent dans des enceintes Bluetooth et des systèmes audio maintenant proposées par quelques marques automobiles, mais son Fire Phone a été un échec commercial. De leur côté Google Assistant et Siri se sont implantés sur les smartphones. L'étape suivante est donc une extension de l'écosystème Echo en outdoor par un moyen ou un autre. Le nouveau produit (Frames) vient donc en complément de deux autres produits connectés, Echo Buds, rival des AirPods d’Apple, et la bague connectée Echo Loop, pour l'instant un prototype. L'ambition avouée est d'aller encore plus loin dans l'adoption d'Alexa en domotique, vers la mobilité, mais aussi d'instaurer quelques garde-fous par rapport à la vie privée, notamment de déterminer les fois ou Alexa "sors de son silence" et intervient sans sollicitation, de masque la caméra, ou bloquer l'écoute dans certains cas... Amazon a été en tout cas convié à travailler sur un projet de règlementation de l’usage décrié de technologies de reconnaissance faciale, déjà en pointe en Asie. Notons que la firme est juge et partie, commercialisant déjà via AWS son produit Rekognition, notamment aux états et grandes compagnies privées. En savoir plus & Sources: https://www.frenchweb.fr/decode-pourquoi-les-gafa-sobstinent-a-lancer-des-lunettes-connectees/379058 https://www.frenchweb.fr/decode-amazon-va-vous-ecouter-de-plus-en-plus/377257 https://www.cnet.com/how-to/amazon-echo-frames-heres-what-you-didnt-know-about-amazons-new-smart-glasses/ https://www.theverge.com/2019/9/25/20883892/amazon-echo-frames-smart-glasses-features-specs-alexa

TEST DE TYPESETTER

Rédigé par dbodesign Aucun commentaire
Classé dans : Webmastering Mots clés : aucun
Typesetter est un autre CMS Flat-File, gratuit en open source. Il va dans cet article être testé de A à Z. Qu'est-ce que qu'un CMS Flat File ? -Un CMS pour commencer ou "content management system" est une architecture sur internet permettant de créer et administrer son contenu. Toute application en ligne (SAAS) est un CMS, en un sens. Maintenant en "flat file", littéralement en "fichier plat" signifie qu'il fonctionne sans base de données. - Ce que ça implique: Pour le particulier qui souhaite créer et gérer son propre site internet sans faire du code, c'est une solution possible. Le côté "sans base de donnée" présente quelques avantages, mais le CMS flat File est encore rare et peu répandu, faute de connaissance du grand public. Les avantages sont les suivants: > Plus rapide (Google adore la performance !), donc meilleur référencement > Plus sécurisé (Pas de base attaquable) > Plus facile à sauvegarder: Une seule opération de sauvegarde périodique des fichiers. Les inconvénients sont les suivants: > Moins puissant que les CMS avec base de données (Comme wordpress), sauf GRAV et solutions payantes > Communauté moins développée (pour résoudre les problèmes) > Généralement moins de templates et modules En clair, un CMS Flat File est une solution pour petit projets. Il présente un net avantage face à de "grosses machines" traditionnelles telles que Wordpress, en étant plus léger et rapide, plus difficile à attaquer et moins connu, ce qui permet d'être négligé par les hackeurs. Des dizaines de CMS Flat File existent sur le marché. Maintenant tout dépend si l'interface est facile d'utilisation et suffisamment puissante pour faire à peu près tout type de site. GRAV est sans doute le plus connu, abouti et puissant de ces CMS Flat File, il est sans doute le plus puissant, toutefois, il possède une courbe d'apprentissage relativement haute. PluXML: Fut une très bonne surprise, c'est sans doute le plus simple mains néanmoins puissant de ces CMS Feindura : Ce CMS a ses mérites mais son interface date un peu ! Bludit : Également pour petits projets, quelque peu décevant sur certains points. Il nous restera à tester Wondercms et Automad. Typesetter 1

Mise en place et premières impressions

Pour mettre en place Typesetter il convient d'abord d'aller le télécharger. On avait pris l'habitude de voyager entre différents pays, Typesetter est un CMS Suisse (fait à Lucerne). Un peu plus d'infos sur Typesetter: Il met en avant le fait qu'il est le plus rapide et simple CMS. La slogan est usé jusqu'à la corde donc nous allons le mettre à l'épreuve. Un peu plus loin il est dit qu'il est "Over 8 Times Faster Than Wordpress", donc huit fois plus que la référence internationale. Outre le fait qu'il propose un Wysiswig d'entrée (pas d'installation supplémentaire requise, de même que pour le formulaire de contact intégré), facilité de gestion d'images, Installation rapide, organisation SEO-friendly, dispose de nombreux plugins et thèmes, et supporte le multilingue. Le dernier aspect est assez essentiel. - Il utilise PHP, Jquery, CSS Less (plus simple et rapide), Bootstrap (responsive), et extension de style CSS SASS, et CK Editor, l'éditeur de text standard Wysiwig intégré. Interface d'Installation, une fois les fichiers envoyés en ligne.

Installation

Après avoir téléchargé le fichier sur le site, on pourra l'ouvrir avec Winzip ou Winrar, ou encore la solution open source 7-Zip. Une fois le dossier Typesetter déverrouillé, on pourra l'envoyer sur l'espace FTP. Le dossier compressé ne fait que 4 MO. GRAV de son côté fait 10.4 mo. Une fois que l'on dispose d'un espace d'hébergement web et nom de domaine, il faudra se connecter a son serveur via un client de connection FTP comme par exemple Filezilla, qui est gratuit. Le transfert va durer quelques minutes, cela dépend de la vitesse de connection. En effet, il faut transférer 875 fichiers. Une fois que tout est transféré et en ligne il suffira de se connecter sur l'adresse par défaut du site. Si installé à la racine de son serveur, il sera directement sous le nom de domaine. Mais il peut aussi être installé et fonctionner parfaitement sur un sous-répertoire. Dans notre cas, deux niveaux plus base que le nom de domaine: http://www.tanks-encyclopedia.com/static/Typesetter/ L'interface d'installation peut paraître intimidante mais elle ne doit pas l'être. La partie haute du tableau ne fait que constater si le serveur est apte à recevoir Typesetter. Notamment la version de php, la gestion des droits, les permissions d'écritures, le type d'images supportées, etc. Si tout est vert, c'est OK. S'il subsiste du rouge ou autre couleur reste à voir s'il est possible d'installer quand même le CMS (Bouton plus bas accessible). Dans notre cas, voir images plus haut, c'est tout bon. Reste maintenant à s'occuper de la partie formulaire un peu plus bas. Il s'agit de quelques champs basique à remplir pour installer le site: -Le nom du site -L'adresse Email (pour se connecter et retrouver son mot de passe) -L'identifiant de connection (ce que vous voulez) -Le mot de passe de connection, répété. C'est tout. On clique ensuite "installer". Confirmation installation Confirmation de l'installation de Typesetter. Il est précisé de supprimer de son espace serveur (FTP) le fichier ../include/install/install.php par sécurité.

Découverte de l'interface

Typesetter 4 L'interface montre en même temps l'aspect extérieur du site ET une barre de menu en haut à gauche de gestion. A première vue une réduction sur desktop de la page montre que la mise en page en colonne est responsive ce qui est plutôt une bonne chose pour maximiser l'affichage. La police de base est simple, élégante et lisible, et le template minimaliste.

Le TEST de création de page

Et nous voici dans la phase de test habituelle de DBO Design ! Comment créer son premier contenu sans rien savoir de l'interface. A première vue, "Contenu" parait un bon départ. Dans le sous-menu je choisit "Créér une nouvelle page". Un popup apparaît par dessus l'interface, qui affichent deux onglets, 'copier' et 'Type de contenu'. Ne sachant pas ce que "copier" signifie ici, puisque je souhaite un nouveau contenu, la première impression est déroutante. 'Type de contenu' montre des exemples de mises en page. J'en choisit une et je clique le bouton "créer une nouvelle page". Un dialogue m'empêche de faire l'action et me demande un "Label". Qui est en fait le titre de la page. Un nouveau dialogue m'affiche une redirection dans 15 secondes. L'interface de gestion du contenu (nouvelle page) selon la mise en page choisie, ici un bloc de texte aligné à gauche et une image alignée à droite, les deux blocs sont éditables. Je choisit d'éditer le texte par défaut (Lorem Ipsum). Au survol un "crayon" apparait. Le sous-menu qui apparait au survol présente les options et je choisit la première, logique, "modifier". Ceci fait apparaître à droite le menu Wysiwig, comprenant les options habituelles de FK Editor, la plus connue des interfaces open source. Nul besoin de passer au travers des options; Je choisit de simplement modifier le texte en deux paragraphes avec des titres respectifs. Une fois terminé, mauvaise surprise, point de gros bouton "sauver". En cherchant un peu ledit bouton se trouve en bas du menu Wysiwig et n'est pas très visible. Je choisit ensuite d'éditer le bloc de droite, l'image. Le sous-menu possède l'option "modifier" qui concerne sa taille et "sélectionner l'image" qui est en fait le menu permettant de charger une nouvelle image. Il faut cliquer "envoyer des fichiers". L'option ouvre une boite de dialogue sur son ordinateur assez classique. Une fois l'image choisie elle est importée dans le CMS. Et là, il suffit de cliquer l'image pour l'afficher. Si cette dernière est trop grande elle va prendre une taille telle qu'elle s'affiche en bas par défaut. Pour la remettre en bloc droit et en taille réduite, il faudra cliquer "modifier" et réduire sa taille et modifier sa largeur et hauteur. Cliquer "fermer" va avoir pour conséquence de tronquer l'image, mais pas de la 'diminuer' réellement. Reste encore une difficulté ! Par défaut la page ne s'affiche pas car elle en mode privé. Un petit détour par le gestionnaire de pages permet de voir le listing des pages et de trouver le statut à modifier, ici, de cliquer sur "visibility: private" (non traduit encore) ce qui passe en public. Toutefois on n'est pas encore sorti de l'auberge. En effet un passage sur un nouveau navigateur montre que le site n'affiche nulle part le nouveau contenu maintenant en "public". En effet dans le gestionnaire il est affiché en statut fixe (colonne de droite) "Exclure du menu principal", ce qui est le cas. La mauvaise nouvelle est qu'un passage dans l'édition "renommer/détails" n'aide pas à affecter la page ou que ce soit. En désespoir je clique donc sur le titre pour être renvoyé sur l'interface d'édition. Aucune option n'apparaît toutefois. Je retourne donc dans le gestionnaire de page pour essayer de trouver une option valable, et tente "listes" en bas, qui est un filtre d'affichage. Le choix de "dans aucun menu" ne fait que confirmer que c'est le choix. A force de tourner en rond je constate qu'une changement de placement dans le menu est à priori "difficile". Finalement de retour dans le gestionnaire de pages, affichage du menu, sous-menu, j'ai pu trouver l'option "insérer avant", non loin de "insérer après" ce qui ouvre un popup de sous-menu (voir image ci-dessous). Dans le cadre "copier" plusieurs pages sont affichées (pas forcément évident qu'il faut cliquer dessus). Je clique donc sur la nouvelle page créée précédemment. Cliquer "copier" ne fera que créer un dialogue d'absence de titre. Il faut donc veiller à ce que "Label" (titre) soit renseigné. Reprendre le même titre entraînera un refus. Je tape donc un nouveau titre. Une vérification du site "en live" permettra de voir que la page est effectivement insérée dans le menu. Ouf !!!.

Le TEST d'arborescence.

Ce teste consiste à voir quelle profondeur de pages filles on peut obtenir, de manière à savoir quelle taille de site est possible: 5 pages, 1000 pages ? Cela ouvre ou ferme la porte "grand projet" ou "petit projet". Revenu dans l'interface de gestion du menu je teste donc l'option "créer un fils" (3e bouton) sous "ajouter au menu". J'ajouter une nouvelle page existante avec un titre factice et je clique "copier". On en est donc déjà a une profondeur 3, ce qui permet au moins 50-60 pages. (Après l'affichage des sous-menus devient problématique sur smartphone). Test positif on en est maintenant au 4e niveau. Le 5e niveau est aussi positif, le 6e, mais pas le 8e, puisque le menu refuse maintenant le bouton "ajouter un fils". Reste qu'il faut systématiquement créer la page en amont. Mais "sous le pied" on peut sans doute créer 1000 pages. Toutefois un passage au visionnage du site en "live" sur un autre navigateur, et c'est la douche froide. Le manager montre bien 6 niveau d'arborescence mais le site n'en montre que deux !!! Un passage sur le forum de Typesetter s'impose. Reste la performance du CMS sur ce niveau d'arborescence, et la gestion des catégories en amont (lors de la création de page). Nous n'avons pas encore abordé la distinction page/post (article de blog).

L'interface en détail

La configuration avec une barre latérale à gauche ressemblant a Wordpress permettra ceux et celles qui connaissent déjà de s'y retrouver facilement. Les boutons du haut de cette barre (Aucun légende ne s'affiche au passage du curseur !). La "maison" est pour le retour à l'interface principal, l'habituelle roue dentée pour les paramètres, et la loupe pour la recherche. Les options textuelles qui suivent sont assez claires. -Contenu est un sous-menu affichant soit le gestionnaires de pages, l'interface de création d'une nouvelle page, l'interface de fichiers (comprenez images, documents, etc.), les "conteneurs de contenus" (en fait la personnalisation des contenus fixes, comme les textes du formulaire de contact, de bas de page, etc. Et enfin la parte "galerie" permettant de créer et gérer ses galeries d'images. La suppression n'est pas définitive car comme sur wordpress on retrouvera une partie "corrbeille" avec les fichier supprimés, qui pourront être restorés. Apparence: Gère les thèmes de Typsetter. Le thème par défaut ici est "Bootswatch_Scss/Flatly". On y voit un gestionnaire de templates, avec quatre templates par défaut à choisir en alternative, la recherche de templates supplémentaires sur le web, 68 sont disponible, ce qui laisse une belle marge de manoeuvre pour la personnalisation. On remarquera en passant que la traduction n'est pas complète, puisque l'on voit 'Available' s'afficher. Le réglage en Français se fait depuis la page paramètres (settings). Il suffit de valider la partie concernée.

Changer l'apparence

Il suffit de par exemple, prendre un nouveau template. Une fois le temple repéré (ou importé), il suffit de cliquer dessus. L'image passe en blanc, et de cliquer le lien "prévisualiser", permet de voir une preview du site "habillé". Il suffira ensuite de cliquer sur le bouton (haut-droite) "créér une nouvelle mise en page avec ce thème" pour l'appliquer. On peut même labelliser le titre.

Les options de configuration

Typesetter est assez puissant, eu égard au nombre de variables et d'option accessibles: Depuis paramètres/configuration On règle le SEO, l'interface (visualiseur d'images, galerie) la gestion des langues au niveau du BO et du FO, les liens de bas de page affichées ou non... La gestion des images (vignettes, quota en taille et nombre...), les performances (minification CSS et JS, redirections auto, cache...), et les options du formulaire de contact et du recaptcha. Plus loin on trouvera aussi un configurateur CDN. Les autres options incluent la gestion des utilisateurs (droits des administrateurs, etc.), les options propres à l'éditeur CKEditor, les classes Bootstrap, la gestion des permaliens comme sous wordpress, la détection de liens brisés (404) et la gestion de redirections 301.

Les Outils

Grand classique, l'export permet de compiler tout ou partie des contenus su site (non pas de tous les fichiers) et de les exporter en Zip ou autre compression. J'ai testé, l'opération est simple et instantané. Mieux vaut cependant renommer le fichier zippé pour le retrouver plus facilement. Un autre outil scanne le site à la recherche de problèmes éventuels, scannant 152 fichiers. Une option existe aussi pour désinstaller le site, du fait que certains fichiers peuvent avoir un changement de droits sur le serveur qui l'empêcherai de tout supprimer, forçant tous les droits à 0777. Enfin la ressource cache affiche les fichiers cachés par heure.

Admin

Cet onglet affiche: > Les dernières parties consultées du CMS (utile comme flicage si deux utilisateurs sont sur le même compte) > Les réglages d'administrateurs (création des utilisateurs et gestion des droits: 23 et contenus spécifiques éditables) > La déconnexion et les remerciements (equipe Typesetter, liens open source spécifiques aux bibliothèques utilisées)

Performances

Cet onglet ne renvoie vers aucune page mais affiche simplement les performances en temps réel du site, ce que je vois rarement. Une bonne idée par les temps qui courent de flicage Google de la vitesse.

Ressources

Bibliothèque des thèmes et modules, support du forum officiel (lien externe), partenaires, site officiel Typesetter, et report de bug sur la page Github.

Le Bilan

Au final Typesetter est une solution puissante tout en présentant les avantages classiques d'un flat-file, léger et mieux sécurisé que les sites classiques. Toutefois l'ergonomie n'est certainement pas aboutie, eu égard au temps passé à localiser des options assez simples, et moins la difficulté à créer un premier contenu que simplement de l'afficher. Autre point noir, l'arborescence en principe possible depuis le back-office et impossible côté front office. D'un autre côté, quelque chose de vite pardonné étant le positionnement "mobile first" affiché de Google. Sans être une usine à gaz, Typesetter semble plus abouti au niveau des options que bien des CMS flat-file que j'ai pu tester, dispose d'une gestion de contenus passable, et d'une interface donc la logique mériterai un sérieux coup de dépoussiérage. C'est une option valide pour un client cherchant à faire faire un site plus complexe que le basique site vitrine, avec environ une cinquantaine de pages et plus, tout en tenant compte des contraintes mobile (notamment au niveau des menus à rallonge). Mais cela entend que le client n'a jamais eu d'autres CMS dans les mains et prenne ses marques dans celui-ci, avec une formation conséquente. Ce test-ci est un premier pas. Il est a noter que Typesetter n'a même pas encore de logo associé. Si vous souhaitez tester Typesetter en live, connectez-vous sur http://www.tanks-encyclopedia.com/static/Typesetter/ avec "lambda" et "passwordtpst". Et vous, connaissez-vous Typesetter ? Avez-vous déjà utilisé cette base sur un projet, avez-vous un avis ? Ressources additionnelles: Forum: http://www.typesettercms.com/Forum CKEditor: https://ckeditor.com/ Pages Github: https://github.com/Typesetter/Typesetter

Créer des expériences en XR: Le Panel

Rédigé par dbodesign Aucun commentaire
Classé dans : Realité Virtuelle, Réalité Mixte Mots clés : aucun
Le WebXR a graduellement pris en pas sur le WebVR, encore supporté mais en principe remplacé. Rappelons que le WebXR tend a être un standard international aussi bien pour la réalité augmentée que la réalité virtuelle. Or, en WebVR comme en WebXR, créer une expérience passe par la génération de code, aussi bien pour l'intégration de modèles 3D que des éléments associés, formes, couleurs, textures, lumière, effets de caméra et effets spéciaux, intégration audio/video, interactivité... Heureusement depuis 2016, les plate-formes de génération de ce genre de code, assez proche du Javascript (Wysiwig) ou celle intégrant une partie du process se sont multipliées. Les premières (non couvertes ici) se sont focalisées sur des besoins de "pure players" dans le real estate (Immobilier) comprenant l'intégration de photos 3D et quelques éléments informatifs simple sur un canevas très contrôlé. Donner la possibilité de créer toutes sortes d'expériences, basées sur l'ensemble des bibliothèques, est un challenge. Des plateformes qui couvrent ce besoins sont encore rares. Elles se destinent aux agences de communication qui doivent par exemple "disrupter" leur marché, ou pour des applications spécifiques et ponctuelles, sans avoir a y passer des heures. En effet pour avoir expérimenté pas mal avec le code (voir qwazaam.com) à part l'inspecteur de code, il n'y a guère de solutions pour créer des univers en VR utilisant toute la palette d'effets, textures, couleurs, animations et autres inserts multimédias qu'il est possible d'avoir. Pour s'en convaincre il suffit de parcourir la bibliothèque A-Frame. L'A-Frame Inspector, qui permet de modifier du code et de générer la version modifiée visuellement à copier-coller dans sa page Il existe en ce moment deux standards de base XR (VR-AR), un pour Google, appelé ARCore, une pour Mac appelée ARKit, et d'une certaine manière une pour Facebook appelé SparkAR, qui développe son propre écosystème principalement autour d'"effets snapchat" pour mobile (en concurrence avec ce dernier).

Le point sur les technos

ARKit et ARCore, frères ennemis: ARKit génère beaucoup plus de bruit que le second, et représente cinq fois plus de développement en volume combiné. Pourtant en 2018, 85% des smartphones sont sur Android et donc utilisent ARCore. Cela se traduit toutefois sur un accès plus faible à la VR/AR de qualité (ou tout court) sachant que les utilisateurs sous Android ont en général des smartphones de moins bonne qualité, donc la performances sont un frein à l'adoption. La dispersion des hardwares spécifique au marché des smartphones android est aussi un frein, tout n'est pas compatible avec la XR. Les Iphones sont beaucoup plus homogènes. Le gyroscope en particulier est problématique sur la plupart des smartphones android, soi un sous-standard, soi inadéquat pour le support XR. Facebook de son côté mise énormément sur ses filtres AR de caméra avec le marché des smartphones. Donc la logique du hardware conduirait donc a plus de chances de succès pour des éditeurs de solutions XR, afin de proposer des contenus plus recherchés, à même de conquérir et fidéliser une audience par la qualité. L'incompatibilité ARKit/ARCore est totale, les smartphones android n'autorisant pas l'utilisation de ce dernier. En développement Si la WebVR a été un petit évènement sur la sphère internet, cela n'a été que de courte durée: Il est actuellement considéré comme non compatible avec l'actuel WebXR qui est considéré toujours "en développement". Cela signifie qu'à cause des rétro-compatibilités, il n'est pas sûr qu'il soit bien judicieux de se lancer à présents dans d'importants développements. Ce que reflète l'actuelle tendance vers du "snacking" au niveau de la production. Sketchfab Editor (non testé encore) Protocoles XR: Deux cas de figures: -Soit l'application requiers une immersion -Soit l'application est en "magic window" (non immersif). 1-L'expérience requiers la création d'un calque graphique (rendus en bitmap) 2-Boucle de rendu lancée, produisant des frames graphiques pour display 3-La boucle se fait à travers ses vues et dessine le contenu à partir d'elles 4-Le process se répète à l'infini jusqu'à ce que l'utilisateur quitte la session. Considérations préalables: Pour développer une application simplissime en AR (sur ARCore) par exemple, afficher un modèle 3D en réalité augmentée, il est nécéssaire pour les tests d'avoir par exemple Android version 8.0 Orea ou plus, avoir ARCore installé, et Chrome Canary sur le device d'affichage, mais aussi un serveur adéquat (sécurisé et rapide). Enfin un cable USB de connection entre la station de travail et le device d'affichage (ex. smartphone). La connaissance du code web mais surtout de Chrome DevTools est un plus. Le webserver de développment Chrome possède l'adresse IP http://127.0.0.1:8887 et le port d'accès doit être à 8887 pour afficher le contenu sur localhost:8887, a vérifier sur chrome://inspect. Il y a des possibilités de l'affichage "unsupported browser", ce qui indique que la version du navigateur n'est pas la bonne. L'hébergement choisi si autre que Chrome, sera nécessairement en https. Notons qu'ici l'affichage passe par l'utilisation de THREE.js. Coder une expérience AR nécéssitera l'utilisation d'un "hit point", point d'affichage sur le sol "réel", nécéssitant en fait un calibrage du smartphone dans son environnement, et s'assurer que ce dernier, selon son inclination/disposition comprend bien son environnement réel pour une bonne intégration des objets. Cela passe par l'API XRSession. Une fois la mise en place de l'objet, son affichage dépend au préalable de l'affichage d'un réticule au sol. Pour les tests d'affichage les plus basiques, préalables, un simple cube en code peut permettre déjà de sécuriser le placement, l'étape suivante étant de charger par exemple un modèle 3D creative commons de la bibliothèque Google Poly. L'ajout d'une ombre se fait dans un second temps. Il utilise la propriété WebGLrenderer de THREE.js. La propriété pour l'ombre est Shadowmesh dont on définit la position comme propriété enfant du modèle 3D. Voir quelques exemples A noter que d'après le site Babylon.js, le plein support des animations en AR est toujours en développement, la version actuelle ne supporte que la parité WebVR/WebXR de manière à reconvertir les expériences vers ce format.

Les possibilité de création sans coder

Le grand standard AVEC CODE est assez riche, dès lors que l'on souhaite créer avec: A-Frame: (WebVR, Composants-entités, simple pour débutants), THREE.JS: Librairie javascript pour WebXR et Polyfill. React360: Pour utiliser la librairie React360 de Facebook, d'accès plus facile. Il existe deux types de plate-forme utilisables pour aider à la création: -PlayCanvas -Sumerian A noter que d'autres acteurs permettent d'utiliser ce système pour des applications: Ex. InstaVR https://www.instavr.co/ Ne pas oublier les acteurs de niche "pure players", notamment dans l'immobilier: https://delight-vr.com offrant aussi des possibilités de création sans code.

Playcanvas

A la base une moteur de rendu 3D pour le web. Permet de faire aussi bien de la VR que de l'AR. A la base conçu pour WebVR 1.1, mais disposant d'une extension AR. Point fort: Il dispose du PlayCanvas Editor qui permet de créér une expérience en drag-and-drop sans taper une ligne de code. A première vue, c'est un dérivé de l'inspecteur de code de base WebVR/AFrame. L'éditeur permet une large gamme d'expériences comme par exemple le déplacement par bonds plutôt que par les touches du clavier, ou certains niveaux d'interaction. Ex.https://playcanv.as/p/sAsiDvtC/

Sumerian

AWS Sumerian pic gallery Ce dernier fait part de la galaxie Amazon Web Services. Outre l'hébergement optimisé VR/AR d'AWS, les applications développées par Sumerian sont compatibles avec Oculus Rift, Oculus Go, Oculus Quest, HTC Vive, HTC Vive Pro, Lenovo Mirage Solo, Samsung Gear VR et Google Daydream. La mise en place des éléments, variables et interactions se fait via VR Asset Pack, important tout les prérequis dans la scène. Le pack cmprend l'Ajout de la fonctionnalité 'VR Grab' aux entités (haptique quand possible) avec les manettes, l'ajout de la fonctionnalité de téléport VR aux entités, et l'ajout de fonctionnalités aux entités VR déclenchant des comportements d'entités. Le lancement d'une scène demande d'importer les assets (bibliothèques de codes et d'effets) puis d'importer le Current VR camera rig, après avoir importé l'entité VRCameraRig. Coup d'oeil sur le tutorial de création Sumerian.

CreateWebVR pour en savoir plus

Ce site met en exergue les bibliothèques vues plus haut, Create WebXR, et permet de couvrir l'AR et la VR, et l'ensemble des plateformes connus, et les outils tels que: Pour l'AR: Pour la VR, outre ceux vus plus haut, et l'A-Frame inspector: En savoir plus & ressources: https://immersive-web.github.io/webxr-reference/webxr-device-api/lifetime.html https://webxr.nl/news/ https://ios-viewer.webxrexperiments.com/ https://codelabs.developers.google.com/codelabs/ar-with-webxr/#0 https://developers.google.com/web/updates/2018/05/welcome-to-immersive https://dev.to/chrystianv1/comparing-google-arcore-and-apple-arkit-2lin https://immersive-web.github.io/webxr-samples/ https://doc.babylonjs.com/how_to/webxr https://www.supermedium.com/

Test du Navigateur Brave

Rédigé par dbodesign Aucun commentaire
Classé dans : Webmastering Mots clés : aucun
Disposer d'une structure sur internet est tout aussi important que de pouvoir y accéder. Avec la lourdeur accumulée des différents navigateurs grands public et malgré leur volonté affichée de faire plus léger, il y a de vastes marges de manœuvres, mais pas que. Chrome et IE ont la fâcheuse habitude de tracker/pister les moindres actions navigateur pour mieux cibler la publicité. Mozilla est relativement "safe" a ce titre bien que la publicité et la tracking (et cookies) y sont aussi présents (finances oblige), mais le caractère open source et la volonté de ne dépendre d'aucun groupe rend le navigateur assurément plus "user-friendly". Il est associé depuis son lancement à DuckDuckGo. Démarré aux US en 2015 le projet de Brendan Eich* et Brian Bondy a reçu des investissements de Danhua Capital, Digital Currency Group, Foundation Capital, Founders Fund, Huiyin Blockchain Venture, Pantera Capital, and Propel Venture Partners. Bien qu'open source, le business modele du navigateur est a nouvelle façon d'appréhender vie privée et revenus publicitaires, avec l'incentive d'un traçage moins lourd, de performances très supérieures et rémunération du surf. *Brendan Eich est le créateur de JavaScript et co-fondateur de Mozilla Screenshot BRAVE BRAVE fait partie de ces récents navigateurs très récents, lancé en Mai 2019, en open-source et qui fonctionne sur Windows, MacOS, Linux, Android et iOS. Il est basé sur Chromium, un navigateur open source lancé par Google et utilisé comme OS sur une éphémère série de laptops. Brave se définit comme complètement "non traçé": Pas de cookies ni de tracking. Il garantit donc par défaut une navigation anonyme. Ses points forts: -Pour le particulier, une navigation ads-free (et plus rapide). -Pour le professionnel, faire des évaluations de ranking sans souci de "biais". -Intègre plusieurs moteurs de recherche dont le Français Qwant. -En principe 8 fois plus rapide que Chrome ou Safari (d'après le site) -Intègre TOR -Dispose de la synchonisation et d'une application mobile Le système se déploie aussi au niveau des smartphone en partenariat avec l'HTC Exodus 1 comme navigateur par défaut. Etre payé pour surfé S'il est gratuit pour son lancement, et acquérir et fidéliser une base d'utilisateurs, Brave mise pour sa version finale une version payante. Il met en place également un système de récompense de ses sites préférés et de créateurs de contenus via un système de tokens en blockchain ("de monnaie virtuelle"). L'un des points assez particulier de Brave est aussi de proposer un système de publicités respectant la gestion des données utilisateurs, en tant que browser privé. Il fonctionne par machine learning* et permet aux utilisateurs de gérer le volume de publicités qui leur est imposé eux-même. De plus Brave propose un système assez intérressant au niveau de la publicité via son programme d'affiliation: Les utilisateurs sont payés par l'affichage de publicités: Ils reçoivent 70% des revenus qu'ils génèrent, sur un compte bitcoin, Brave et ses partenaires recevant le reste. *Le système de machine learning permet aux utilisateur de décider eux-même le placement des publicité et de considérer quel est le niveau d'intrusivité qu'ils supportent le mieux. Ces statistiques sont précieuses pour les publicitaires par ailleurs; Ce système en apparence novateur a été toutefois vivement critiqué par la presse Américaine, Ars Technica, TechCrunch, Computerworld, et Engadget en particulier on créé la controverse autour du projet; Le BAT* (Basic Attention Token) est une spécificité du browser, basé sur la plate-forme Ethereum propre au browser. La NMA (News Media Alliance) à même déposé une pétition contre le navigateur. Les paiements s'effectuent en bitcoin. Le tracking s'effectuant localement il n'y a pas besoin de tiers-partie, ce qui fluidifie la connection. Le système Brave Paiement permet de rémunérer les créateurs de contenus. C'est une alternative aux rémunération google en théorie plus intéressante, mais la diffusion sur Brave reste extrêmement confidentielle et ne se pose pas encore en alternative à Google. Outre twitch.tv, les BAT sont utilisés pour les contenus diffusés par le Washington Post, The Guardian, NPR, LA Times, Vimeo, MarketWatch, Barron's, DuckDuckGo, Qwant, BitTorrent, Slate, et Vice. Blocage Brave settings Paramètres de blocage et modération du tracking et publicités sur Brave Fonctionnement: Que vaut brave comme navigateur ? Téléchargement d'un fichier compressé, puis installation, le process d'installation est très simple et standard. D'emblée le navigateur propose de personnaliser son expérience en important ses onglets et favoris de son navigateur préféré, puis de choisir un moteur par défaut, quoique les autres moteurs restent disponibles. Une fois prêt a surfer on observe une barre de menu assez standard, avec un mini-tutorial pour expliquer les spécificités du navigateur. En place haute on trouve la classique barre d'adresse/moteur, un icône de compte et un icône de menu/options. Brave et VR: Brave et qwazaam L'affichage se passe sans problème et est effectivement très rapide, plus que pour un navigateur classique la encore, ce qui est séduisant dans le cadre d'une présentation pro. Pour le reste, le passage d'un lien à l'autre est également fluide. Il ne bloque pas des contenus d'office et d'autorité, autorise par exemple les lecteurs flash (sans troisième partie envahissante, qui peuvent l'être). Il permet aussi d'ouvrir des fichiers pdf en interne dans le navigateur et intègre par défaut l'extension "HTTPS Everywhere". Sur PC l'installation est assez lourde, de manière surprenante, avec plus de 570 mo et dans AppData/Local/. Chromium est quand même un OS à la base ! Au final: Sans avoir testé les fonctionnalités publicitaires en tant qu'utilisateur rémunéré, mais juste en tant que pro, Brave est une alternative très, très rapide et solide (pas de crash ou de bugs détecté), aussi bien pour faire des recherche de ranking SEO hors sol, ou tout simplement du surf. Toutefois il reste "barebone" avec aucun catalogue d'extensions, mais certaines, basiques, intégrées d'emblée. Ce qui limite son potential sur une utilisation courante et de long-terme, à moins de planifier l'intégration soi-même d'applications Chromium, dont le choix est large. Au final, ce navigateur est toujours en évolution mais risque de rester relativement confidentiel faute de "killer app" ou d'étendre ses possibilités à l'instar de Vivaldi.
Fil RSS des articles