Vagabondage de tweets – Décembre 2016 – Drupal 8, Bootstrap, Foundation, Elm Lang, Progressive Web AMPs...

Drupal

7 décembre - Ludovic Coullet @lcoullet
Pull Content From a Remote #Drupal 8 Site Using Migrate and JSON API: http://bit.ly/2iDR98H
Vous souhaitez exploiter des données d’un site Drupal 8 à un autre ? Voici une astuce qui peut vous intéresser : utilisez le module JSON API pour diffuser les données sur un site et passez par le module Migrate pour explorer les données sur un autre. Drupal embarque deux façons d’exporter des données JSON : vous pouvez soit accéder aux données de n’importe quelle entité en ajoutant ?_format=json au path, soit utiliser Views pour paramétrer l’utilisation des données JSON. Cependant, ces manières de procéder ne sont pas les plus efficaces puisqu’elles impliquent de connaitre le chemin de chaque entité. L’API JSON propose une autre solution : vous n’avez plus besoin de connaitre le chemin pour chaque entité ! Dorénavant, connaitre le chemin général d’un type d’entité suffit. Par exemple, vous pouvez trier ou filtrer les articles ou amener toutes ou parties des entités liées dans la même requête. Pour exploiter des données d’un site Drupal 8 à un autre, voici la marche à suivre :

• Préparer les sources de votre site : il n’y a beaucoup de travail à fournir puisque le module propose une flexibilité qui facilite grandement les choses. Tout d’abord, il faut télécharger le module API JSON. Ensuite, il convient de créer un fichier YAML pour mettre en marche le module et confirmer l’URL d’où les données JSON proviennent.
• Préparer le site cible : le site doit au moins être sous la version Drupal 8.2.3, et doit proposer un type de contenu article ou des champs image afin d’accueillir les articles de l’autre site. Il faut activer le module du core Migrate et télécharger les modules Migrate Plus et Migrate Tools pour intégrer du contenu venant d’une autre source.
• Migrer : il vous reste à migrer le contenu d’un site Drupal 8 vers un autre depuis la source JSON. N’oubliez pas de configurer la migration des images…

9 décembre – Christophe Dugué @chdugue
Les meilleurs modules (13) #twig pour aider les themeurs #Drupal : http://bit.ly/2hcKD8a  - #Theming
Avis aux thémeurs Drupal qui passent par ici, cet article va probablement vous intéresser. Voici les 13 modules Drupal de theming qui vont peut-être changer votre manière de développer :

• Twig tweak : ce module Drupal  permet de disposer de fonctionnalités et de filtres supplémentaires pour la création de templates.  Parmi ses fonctions, citons drupal_block qui permet d’intégrer un block  Drupal, drupal_entity qui permet d’intégrer une entité, drupal_token qui propose d’utiliser les tokens des API pour envoyer des données dans les templates, ou encore drupal_image qui fournit un chemin ou une URL vers l’image originale, et bien d’autres !
• Twig Field Value : il permet aux themeurs d’obtenir des données partielles à partir de tableaux.  Ainsi il est possible d’avoir un contrôle sur les valeurs des champs.
• Twig extensions : il permet de disposer d’une librairie proposant des filtres supplémentaires (Text, I18n, Intl, Array, Date…) ;
• Twig Extender : il fournit un plugin pour ajouter de nouvelles extensions de Twig dont un filtre appelé truncate et la fonction user_is_logged_in pour vérifier si un utilisateur est connecté.
• Themable forms : c’est un module plutôt utile pour themer vos formulaires, il permet entre autres d’ajouter des suggestions dans les champs d’un formulaire.
• Twig Renderable : c’est un autre module qui permet lui aussi de disposer de nouvelles fonctions et filtres de Twig. Celui-ci est intéressant pour les tableaux PHP affichant des données. 
• Transliterate Twig Filter : celui-ci permet de disposer d’un filtre Twig pour traduire les chaines en un texte simple. Il permet également de traduire les signes ou les accents, par exemple {{ 'Hällo' | transliterate() }} devient => Hallo.
• Responsive SVG : ce module propose plusieurs fonctionnalités pour les fichiers SVG dont les SVG Stacks qui incluant plusieurs images dans un seul fichier.
• Twig Xdebug : il permet d’utiliser les breakpoints du débogeur PHP Xdebug avec les templates de Twig. Pour cela, il suffit d’insérer {{ breakpoint ( ) }} dans le template où vous souhaitez entreprendre le debug.
• Twig Clean Debug : ce module permet de supprimer les outputs lors d’un debug qui sont en général des commentaires HTML. 
• Twig Link Attributes : celui-ci permet d’ajouter des attributs à des liens avec la possibilité de merger avec des attributs existants.
• Themers Little Helper : tout comme le module Twig Tweak, il propose plusieurs filtres et fonctions Twig dont base_url, wrap_filter, drupal_view ou encore drupal_block.
• Component librairies : ce module propose d’enregistrer les composants des librairies définis dans le thème ou dans le module, comme des namespaces Twig.

Et voilà, vous êtes dorénavant bien équipés pour gagner du temps dans le theming de votre site Drupal 8 !

12 décembre – Bluedrop Agence web @bluedrop_drupal
Parce que #Drupal n'est pas seulement un #CMS, c'est aussi une communauté, des valeurs et des motivations : http://bit.ly/2i94zpD
Voici un article de Mathew Tift qui a attiré notre attention ce mois-ci : il parle de Drupal comme action politique. Avec les nombreux incidents de harcèlement dans la société et la propagation de la haine notamment envers la démocratie, il n’est pas évident de trouver un angle d’action. La communauté Drupal réunit des personnes motivées dont la collaboration est basée sur le respect et la considération de chaque contribution et contributeurs. La communauté Drupal a fait de son unicité une force, et si cette communauté pouvait servir pour des problèmes sociétaux voire politiques ? Une problématique au première abord intrigante, puisque l’on a tendance à penser que la communauté est spécialisée et qu’elle n’a pas forcément la connaissance et la capacité pour comprendre des problématiques tierces. Pourtant, soulignons que la communauté Drupal respecte des principes comme le rejet du racisme, du sexisme, de l’homophobie et de la xénophobie. Des principes fondamentaux certes, mais pas systématiquement défendus par bien des organisations. En effet la communauté Drupal promeut des valeurs morales et l’interaction forte avec les contributeurs et les utilisateurs. La technologie Drupal a eu un impact sur la pauvreté dans le monde, sur l’autonomie des journalistes, sur la promotion de la liberté d’Internet et sur la diffusion de la connaissance.

12 décembre – Bluedrop Agence web @bluedrop_drupal
La création d'un parallax scrolling qui envoi du pâté, c'est simple, c'est clair, c'est ici ! #drupal http://www.wdtutorials.com/drupal/theming
L’effet parallaxe est une des tendances qui semble être bien ancrée dans les standards de webdesign, à condition qu’il soit bien réalisé ! Effets de scrolling, customisation des blocks, template d’un type de block custom, mise en place d’un layout fluide, CSS et animations Javascript, voici un tutoriel génial avec une vidéo explicative de Samuli Natri pour réaliser un effet parallaxe digne de votre site Drupal 8.

23 décembre – Christophe Dugué @chdugue
Les prototypes de l'#ui de #drupal admin pour la version 8.5 : http://bit.ly/2hfIHuy  - collaboration : http://bit.ly/2hfKVKv
Pour les curieux voici un petit trailer du prototype de l’UI de Drupal admin 8.5. L’interface administrateur propose quelques améliorations plutôt pratiques, tout d’abord vous pourrez disposer d’une barre supérieure qui permet d’avoir une vision générale de tous les workspaces récents et pouvez y accéder facilement. Vous avez également un petit bloc appelé « Curent workspace » qui permet d’avoir une vision de votre workspace actuel avec des informations utiles comme : la date et heure de la dernière mise à jour, le statut du contenu travaillé (par exemple : brouillon), et la possibilité de changer directement le statut du contenu. Plutôt pas mal non ?

Bootstrap vs Foundation

13 décembre – Bluedrop Agence web @bluedrop_drupal
"Choisir framework CSS Bootrap vs Foundation | Drawboard #1 | bluedrop.fr»: http://youtu.be/zpgKG8GWTdA?a  via @YouTube
Bootstrap ou Foundation pour le front-end : quel framework front-end vaut vraiment le coup ? Les deux solutions sont de taille mais certaines différences peuvent faire basculer votre choix. Bootstrap est un framework bien conçu et fournit de la documentation de qualité. Il propose plusieurs fonctionnalités qui font gagner du temps. Pour Foundation, même s’il est moins « user friendly », c’est une solution d’intégration complète qui permet de disposer d’un plus grand pouvoir de personnalisation avec des animations de menu très fluides aussi bien sur desktop que mobile. Depuis de nombreuses années déjà, l’agence bluedrop.fr est fidèle à Foundation compte tenu des fonctions puissantes que le framework propose et un impact moindre sur les feuilles de styles. De plus, on vous a préparé une petite vidéo comparative des deux frameworks pour vous aider dans vos choix techniques futurs ! 

Elm Lang

15 décembre – Ludovic Coullet ‏@lcoullet 
Ça y est, le tutoriel @elmlang est entièrement traduit en français https://www.elm-tutorial.org/fr/  (et maj pour 0.18). À vous de jouer ! #elmlang
On vous parle souvent de Elm Lang, mais impossible de faire l’impasse sur un tutoriel à la fois efficace et surtout en français ! Pour les novices, Elm Lang est un langage fonctionnel récent inspiré de Haskell, principalement pensé pour le développement front-web puisqu’il se compile en Javacript pour être exécuté par un navigateur. Avec ce tutoriel, vous pourrez apprendre les bases de ce langage, comprendre les commandes et les souscriptions avec Elm, comprendre son architecture, séparer une application en sous-composants et ressources, réaliser l’intégration CSS, récupérer les données JSON, gérer le routing et les opérations CRUD (creat/ retrieve/ update/ delete).

Progressive Web AMPs

12 décembre – Christophe Dugué
Progressive Web AMPs – Smashing Magazine http://buff.ly/2gviPfq  Un des meilleurs articles de la semaine dernière.
Jusque là, la frontière entre les sites mobiles et les applications mobiles était bien délimitée. Face à l’utilisation croissante des mobiles et notamment des applications mobiles, une nouvelle catégorie d’applications dénommée Progressive Web Apps a fait son apparition il y a quelques mois. Le but de ces types d’applications est d’associer les avantages du web et des applications natives. L’utilisateur peut accéder à l’application depuis la page d’accueil de son Smartphone sans avoir à télécharger quoique soit. En réalité, un raccourci est créé et lorsque l’utilisateur utilise l’application, il est redirigé vers le navigateur avec un affichage en plein écran. Les Progressive Web Apps permettent également d’interagir avec le Smartphone en envoyant des notifications grâce à des API. Les avantages sont nombreux : l’utilisateur n’a pas besoin d’installer l’application, le coût pour développer une telle application est nettement plus inférieure que pour les applications natives, la mise à jour est plus simple et une fois installée l’utilisateur peut y accéder en mode hors connexion grâce à la mise en cache de l’application grâce à l’API Service Worker.

Pourtant un point important reste à éclaircir : la rapidité est-elle vraiment au rendez-vous ? Même si la mise en cache est efficace pour charger rapidement l’application, il y a des contraintes qui subsistent en connexion mobile : une bande passante limitée et une connexion internet plus pauvre. Et si on utilisait l’AMP pour optimiser la performance des Progressive Wep Apps ? Le projet AMP permet de lancer des blocs de pages notamment les parties statiques pour donner l’illusion que l’application se charge instantanément et pour éviter que les utilisateurs ne fuient fasse à une attente trop longue. Attention, la solution AMP n’est pas vraiment idéale pour les pages demandant un nombre important de fonctionnalités dynamiques. Découvrez les différentes possibilités d’utiliser les pages AMP pour votre Progressive Web App.

VueJS 2.0

1 décembre – Christophe Dugué @chdugue
Le guide essentiel pour commencer avec #VueJS : http://bit.ly/2gQ2XA8  - #javascript #FrontEnd
En septembre 2016 sortait la version V2 du populaire framework JavaScript : VueJS. L’avez-vous testé ? VueJS justifie de statistiques de performances exceptionnelles dont les fonctionnalités ont été fortement inspirées d’autres frameworks. C’est une bonne chose de piocher les avantages de certains Frameworks et librairies, par exemple le templating de VueJS se rapproche fortement de celui d’Angular, tandis que ses composants et la méthode des cyles de vie sont similaires à ceux de React et AngularJS 2. VueJS 2 utilise toujours un DOM virtuel pour optimiser le taux de réactivité et maintenir un certain niveau de performance. Pour les intéressés, voici un tutoriel utile pour bénéficier pleinement des fonctionnalités de VueJS 2 : configuration rapide et simple avec Vue CLI ou Webpack, une boite à outil pratique avec Vue Devtools, des formulaires faciles à mettre en place grâce aux composants et bien d’autres…

CSS3

22 décembre – Ludovic Coullet ‏@lcoullet
Top 20 Best Free CSS3 Frameworks for Web Development – Web Development Zone: http://bit.ly/2hRkVHx
Les frameworks CSS3 facilitent grandement la vie des développeurs notamment pour la compatibilité navigateur et le responsive design et l’avantage des frameworks est de fournir un cadre et une boîte à outils déjà prête pour construire des sites web. Pour cela, voici une vingtaine de frameworks CSS3 qui vous permettront de gagner un temps significatif sur le développement. Par exemple pour le material design vous avez un grand choix comme les solutions Materiel Framework qui est simple d’utilisation, Leaf qui propose une base plutôt flexible, Materialize qui permet de disposer d’un large choix de fonctionnalités. Il a également le framework Essence qui intègre la librairie très populaire ReactJS. 

CMS

23 décembre – Christophe Dugué @chdugue
Les 7 points critiques à observer pour choisir le bon #CMS : http://bit.ly/2h8Lans. Et c'est souvent #Drupal quand même :)
Avec tous les CMS en vogue, difficile de choisir l’outil sur lequel nous allons construire un projet et pourtant ce choix est à penser minutieusement au péril d’investir ses efforts dans un outil qui ne correspond ni aux besoins du projet ni aux compétences pour le maitriser. Pour choisir votre CMS, orientez votre réflexion vers les points suivants :

• Simplicité d’utilisation : les CMS répondent à un ensemble de besoins assez large pour réaliser un projet, la facilité d’utilisation est un critère de base pour choisir votre CMS. En effet, un CMS qui propose une plateforme simple et intuitive sera plus facilement et plus rapidement maitrisé. Soyez tout de même vigilant aux fonctionnalités que propose le CMS visé puisque souvent la simplicité d’un CMS empiéte sur la capacité fonctionnalité proposée.
• Les fonctionnalités : comme mentionné précédemment, les fonctionnalités que proposent un CMS constitue le second critère primordial qui doit influencer votre choix. Un CMS est avant tout une boite à outils qui permet de répondre à l’ensemble de vos besoins. Faites attention aux plugins ou aux fonctionnalités qui demandent une dépendance à un outil tiers, sachant que des fonctionnalités basiques peuvent répondre à vos besoins. Le CMS idéal doit permettre de répondre à une grande majorité voir la quasi-totalité des besoins de votre projet et permet également d’implémenter des fonctionnalités d’applications tierces.
• L’infrastructure de déploiement : Soyez attentif sur l’infrastructure demandée pour déployer votre site internet, est-elle coûteuse ? Demande-t-elle un investissement important en ressources ? Le CMS est-il flexible ? C’est tout un tas de questions de ce genre qui vont permettre de prendre conscience de la demande en infrastructure pour déployer un CMS.
• Le design : tous les CMS n’ont pas la même flexibilité pour concevoir un design personnalisé. De nombreux sites se ressemblent. Il convient d’étudier la capacité de votre CMS à pouvoir customiser le design. N’oubliez pas que votre site internet doit exactement ressembler à ce que vous avez prévu.
• Le multi-sites : choisissez un CMS en fonction de la nature de votre projet. Dans le cas d’une entreprise qui prévoit de gérer une dizaine voire une centaine de sites internet, un CMS qui justifie d’une certaine capacité et performance dans un projet multi-sites serait plus adapté. Bien entendu tous les CMS permettent de créer un site internet mais pas tous permettent de supporter la gestion de plusieurs sites sur une même plateforme, si bien que certaines entreprises se retrouvent à gérer des sites sur plusieurs plateforme différentes ce qui s’avère être coûteux et peu productif.
• L’intégration des tiers : un CMS doit permettre de communiquer avec un maximum de tiers comme les API, les CRM ou les outils de marketing automation. Les sites ne sont plus seulement statiques, mais ils doivent permettent d’interagir avec des tiers.
• Sécurité et support : la sécurité est un critère à ne surtout pas négliger d’autant plus qu’en cas d’incident elle risque d’engager des coûts importants de maintenance corrective. Par ailleurs, recherchez des informations sur le support de ce CMS : est-il soutenu par une communauté importante ? Y-a-t-il un niveau de réactivité important comme la réponse à des questions ou des problèmes ? Y-a-t-il de la documentation pour que je puisse développer mon projet en respectant les standards et les bonnes pratiques ?

…et pourtant on ne se pose jamais assez de questions ! Le choix d’un CMS doit être mûrement réfléchi puisqu’il impactera forcément le rendu final de votre projet, l’investissement pour développer votre site notamment en termes de coût et de temps… 

Ergonomie

9 décembre – Ludovic Coullet ‏@lcoullet 
"Dois-je utiliser ?" Des points d'ergonomie discutables pour les choix que l'on croise souvent sur les sites > https://doisjeutiliser.fr/
Voici un excellent site internet pour répondre à vos différentes questions concernant les éléments qui vont composer votre futur site web : doisjeutiliser.fr. Ce site propose plusieurs contre exemples d’ergonomie pour optimiser au mieux le front-end de votre site ! Dois-je utiliser un carrousel ? Dois-je utiliser un infinite scroll ou dois-je utiliser une popin instrusive ? Vous trouverez toutes les réponses à vos questions avec des arguments justifiés tant sur le fonctionnel que sur l’accessibilité et une proposition de solutions. Un petit site sympa qui peut en aider plus d’un !  

CSSPIN

6 décembre – Christophe Dugué @chdugue
Ressources : quelques loaders #CSS pour faire plaisir à maman - http://bit.ly/2gEwX2Z
Une autre trouvaille qui va intéresser les ergonomes/ webdesigner : une liste de classes CSS pour intégrer des loaders et des spinners très colorés et "tendance" pour animer votre front-end à votre guise.  

Divers

20 décembre –Bluedrop Agence Web @bluedrop_drupal 
Améliorez votre taux de conversion grâce à la ligne de flottaison, découvrez comment ici : http://bit.ly/améliorer-conversion-site-web … #CTR #UX #UI #site #web
Il y a plusieurs moyens pour améliorer le taux de conversion dont la ligne de flottaison. En effet, la ligne de flottaison est la ligne la plus basse d’un site internet en-dessous de laquelle le contenu n’est plus visible à l’écran et nécessite un scroll pour y accéder. Cette ligne est importante puisque tous le contenu qui se situent au-dessus de la ligne de flottaison doivent attirer l’attention de l’utilisateur : il convient d’étudier méticuleusement chaque éléments qui doit se situer au-dessous et en-dessous de la ligne. Pour orienter votre choix quant à la disposition des éléments du site, trois questions peuvent vous aider :

• Est-ce l’internaute connait votre entreprise et la solution que vous proposez ?
• Si l’internaute connait votre entreprise et/ ou la solution en pense t-il du bien au point d’effectuer votre call to action ?
• Le call to action est-il simple, rapide, peu engageant et gratuit à réaliser ?

Si un élément répond positivement à ces trois questions, vous pouvez le placer au-dessus de la ligne de flottaison. En revanche, si un élément ne répond pas à ces trois critères, il aura de grandes chances de se trouver en-dessous de la ligne de flottaison. Dans ce cas, il convient de mettre en place des moyens pour inciter l’utilisateur à scroller la page comme par exemple du contenu intéressant. Le scrolling implique que l’utilisateur visite une majorité des informations les plus importants et favorise donc le taux de conversion. A vous de jouer !

22 décembre – Christophe Dugué @chdugue
Mise en production du site #OpenData de la Métropole de Montpellier : http://bit.ly/2h66ha4  - #Drupal #Dkan ! par @bluedrop_drupal
Il y a déjà quelques semaines, nous avions eu enfin le plaisir de mettre en production un de nos projets Drupal 8 entrepris en 2016 : la refonte du portail Open Data de la métropole de Montpellier. Ce projet a été important pour l’équipe Drupal de bluedrop.fr, puisque nous avions eu l’occasion de réaliser le projet avec la distribution DKAN de Drupal qui a permis de servir à plusieurs grands projets Open Data. Nous vous invitons à jeter un coup d’œil au résultat de notre travail : data.montpellier3m.fr.