Quantcast
Channel: Alsacreations.com - Apprendre
Viewing all 405 articles
Browse latest View live

Actualité : L’agence Alsacréations fête ses 15 ans !

$
0
0

Ce lundi 1er février 2021 a une saveur (fruitée) très particulière pour nous car c’est aujourd’hui, jour pour jour, l’anniversaire de notre agence web Alsacréations(.fr!), basée à Strasbourg.

Tout le monde ne le sait pas, mais Alsacréations ce sont deux projets distincts mais parfaitement complémentaires :

  • la communauté d’entraide Alsacreations.com : site communautaire ou tout à commencé.
  • l’agence web Alsacreations.fr : site professionnel qui nous permet d’apporter concrètement notre expertise sur bien des projets.

Aujourd’hui, c’est l’agence qui fête ses 15 bougies !

On a 15 ans !

Grâce aux archives du Web, où rien ne se perd, nous avons retrouvé avec le sourire aux lèvres l’article d’annonce de la naissance de l’agence et même à quoi ressemblait la première version du site web de l’agence avant sa refonte quelques années plus tard.

De quoi se replonger dans nos souvenirs et nous permettre de faire une petite rétrospective.

Dès la conception de l’agence Alsacreations.fr, nous l’avons imaginé à taille humaine et portée par des principes qui nous sont chers :

  • les standards du Web,
  • l’accessibilité numérique,
  • le partage des connaissances.

Quinze ans plus tard, ces valeurs représentent toujours les piliers de tous nos projets, quels que soient les secteurs d’activité de nos clients et la nature de leurs besoins (du site institutionnel, voire gouvernemental à la boutique en ligne pour des fabricants de maillots de bains en Australie).

C’est sur cette base, essentielle à nos yeux, mais également grâce à la confiance de tous nos clients que nous avons pu grandir et développer des projets toujours plus ambitieux et variés, tout en restant en accord avec nos valeurs. Pour ça, on vous le dit sincèrement : Merci.

Aujourd’hui, notre principale évolution est que nous sommes à ce jour 10 passionnés dans l’équipe (enfin, lorsqu’on n’est pas confinés chez nous) et que les pratiques d’antan ont bien évolué (séquence nostalgie - ou pas) : XHTML, CSS2 et Dotclear ont laissé place à des outils et technologies de plus en plus perfectionnés et notre notre cœur bat à présent pour VueJS, Nuxt, Docker, Timber, Tailwind ou encore Grid Layout.

Un bien joli gâteau d'anniversaire

Pour le reste, nous restons fidèles à nous-même !

Nous continuons à promouvoir l’Accessibilité Numérique qui reste le grand maillon faible de tant de projets web (encore de nos jours) et représente un défi que nous n’avons de cesse de relever.

Nous restons avant tout des passionnés du web qui aimons partager nos connaissances, que ce soit au service de nos clients ou de cette communauté qui nous tient particulièrement à cœur. Nous avons d’ailleurs quelques idées d’articles qui changeront un peu de nos habitudes, mais nous préférons laisser planer le mystère…

Enfin, nous sommes toujours à votre écoute pour aborder les sujets qui vous intéressent ou construire ensemble vos futurs projets web, où que vous soyez !

Une chose est sûre : nous sommes heureux de fêter cet anniversaire, nous sommes reconnaissants envers nos clients et notre communauté, et nous avons hâte de poursuivre l'aventure ensemble.

Raphaël, Rodolphe, Laurène, Alyssa, Chloé, Philippe, Jules, Olivier, Thomas et Nicolas

Publié par Alsacreations.com


Actualité : Interview des gens du web : Philippe Roser

$
0
0

Parce que certains métiers, certains profils et certaines pratiques méritent d'être mieux mis en avant, Alsacréations a décidé d'interroger quelques professionnel·le·s du Web afin de (re)découvrir des aspects méconnus de notre communauté. C'est notre série des interviews des gens du web.

Le parcours atypique de Philippe Roser, actuellement UX Consultant et ergonome chez Impact Positif, a retenu notre attention cette fois ci. Faisons connaissance avec ce grand fan de… cactus.

(Alsacréations) Quel est ton parcours ?

Philippe et son cactus

J’ai un parcours qui touche à plein de choses : au départ, un IUT d’informatique puis un Certificat de spécialisation en Infographie (MJM). Ensuite, un lancement en freelance sous le nom d'e-Toile Graphic. Et les clients se sont enchaînés ensuite plus ou moins régulièrement.

Ma position par contre a pas mal évolué, vu que je suis passé de « prestataire pour réaliser des supports de comm » à « concepteur de site web », puis « conseiller en communication ». De là j’ai continué à me former (merci ParisWeb / Alsacreations) pour aller vers plus de qualité web, d'accessibilité et d’amélioration d’interfaces. J’ai rejoint une structure privée à ce moment pour être à la fois chef de projet, intégrateur web et ergonome pour des projets d’envergure avec des administrations publiques.

Après un dernier projet pharaonique (1 seul ergo pour 70 dévs), et l'entreprise ayant été liquidée judiciairement, j’ai fondé avec Pierre & Guillaume Impact Positif. Nouveau départ avec une équipe motivée, une transparence et un partage de valeurs essentielles pour nous : éthique, qualité, confiance, … le tout pour avoir un impact positif sur les usagers finaux !

(Alsacréations) Parmi toutes tes casquettes professionnelles, à laquelle tiens-tu le plus et pourquoi ?

J’hésite beaucoup avec Ergonome… mais je dirai « Designer ». Parce que j’ai souvent changé d’intitulé, mais j’ai toujours été dans la même logique : écouter, concevoir, échanger et tester auprès des utilisateurs. Et pour moi cela correspond exactement au métier de Designer, mais il est trop souvent mal compris encore en France.

Le Vaisseau

Photo d'ambiance prise au Vaisseau : Il est primordial d’aller voir les utilisateurs dans leur contexte pour les comprendre.

(Alsacréations) Est-ce qu’il y a des “mauvaises pratiques” en ergonomie web qui t’exaspèrent particulièrement ?

Celle de penser que c’est juste du « bon sens » et que tout le monde peut y arriver ! Une interface bien conçue, personne ne se rend compte du boulot qui a été fait derrière pour y arriver :)

(Alsacréations) Tu fais partie de la team des Nouveaux qui ne jure que par l’icône “burger menu” ou la team des Classiques qui préfère un bon vieux bouton avec écrit “menu” clairement dessus ?

J’ai 2 heures ? Non parce que là, on peut parler des notions d’apprentissage, tout en rappelant qu’il faut que l’ensemble des éléments soient compréhensibles et identifiables directement par tous… Grand débat !

J’ai déjà utilisé les deux, selon le contexte, mais je privilégie un texte « Menu » pour l’accessibilité et la compréhension facile de tous.

(Alsacréations) Est-ce que l'UX de 2020 est sensiblement différentes dans ses principes, outils et son application ?

Par rapport à quoi ??

Hormis le sentiment que tout le monde prétend faire de l’UX aujourd’hui, les principes et les méthodologies de la compréhension d’une expérience utilisateur n’ont pas tellement changés pour moi. Les outils changent un peu tout le temps (on essaye de les faire évoluer surtout pour nos ateliers). Par contre côté application, on sent que 2020 est un tournant où les entreprises comprennent plus l’intérêt d’aller vers leurs utilisateurs.

(Alsacréations) Tu es également très sensibilisé à l’Accessibilité Numérique. Vois-tu des passerelles, des obstacles entre l’ergonomie web et l’accessibilité ?

Pour moi c’est totalement lié. L’ergonomie doit prendre en compte l’accessibilité. Il suffit de regarder la taille de typo à utiliser pour des personae de plus de 60 ans : c’est absolument à prendre en compte pour être utilisable !

(Alsacréations) Quels sont tes désirs d’avenir ?

Un web à l’opposé de celui de Ségolène justement : plus ouvert, moins dépendants des GAFAM et avec moins d’impacts (consommation énergétique, poids des contenus, facile d’accès à tous, …)

(Alsacréations) Quel est ton outil web préféré ?

Ça dépend des moments, ça change souvent ! En ce moment où je suis sur des logiques d’organisation et de suivi projet, je parlerai de Coda ! Parce qu’on travaille à plusieurs sur différents projets à distance, ça fait un petit moment qu’on cherchait un outil adapté à nos besoins. Après avoir testé Asana, Fibery et Notion, le choix s’est porté sur Coda pour la modularité qu’il offre. On est encore en train de monter en compétences dessus, mais il répond à beaucoup de problématiques récurrentes pour nous.

La collaboration active

Diaporama expliquant la Collaboration Active

(Alsacréations) As-tu des livres à nous recommander ? (dans le domaine pro ou non)

Le grand méchant renard

Reinventing Organizations

« Reinventing Organizations » de Frédéric Laloux pour la philosophie d’entreprise et « Le Grand Méchant Renard » de Benjamin Renner pour le fun de voir le parcours d'un renard avec ses hypothèses, ses tests et ses prototypes face à des personnages totalement à l’opposé de ses attentes…

(Alsacréations) Quel.le est le langage ou la technologie qui t’attire le plus aujourd’hui ?

Nuxt.js oui, je sais c’est du dev, mais pour avoir fait joujou avec, je trouve ça bien foutu :)

(Alsacréations) Tu préfères voir Kim Kardashian gagner un oscar, ou être le sosie officiel de Mark Zuckerberg ?

À choisir, je pense que j’opterai pour le sosie officiel de Mark Zuckerberg... Cela me permettrait de faire des communications officielles pour Facebook pour ouvrir le code à tous, changer la stratégie du groupe et reverser 80% des bénéfices à des ONG !

Publié par Alsacreations.com

Tutoriel : Outils pour vérifier l’accessibilité de vos sites web

$
0
0

Dans ce dossier nous vous présentons les outils qui vont vous permettre de tester et vérifier l'accessibilité de vos pages web.

Petit point sur l’accessibilité en France :

La loi handicap de 2005 et son décret d’application exigent pour les organismes publics, les délégataires d’une mission de service public, et les entreprises de plus de 250 millions d'euros, de rendre les moyens de communications accessibles pour tous.

De ce fait, depuis 2009, le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) a été mis en place pour rassembler un certain nombre d’obligations à respecter, ainsi qu’un ensemble de critères pour évaluer la conformité d’une page web. Ces critères sont basés sur la norme internationale WCAG 2.1, éditée par le W3C.

W3C : normes internationales

Outils

Les outils présentés ici vérifient les critères du WCAG 2.1, selon les 3 niveaux d’exigence : simple A (A), double A (AA), et triple A (AAA).

Ils sont ceux que nous conseillons et utilisons. Bien sûr, des équivalents peuvent exister mais ils sont majoritairement rédigés en anglais et des notions sont donc recommandées.

C'est parti pour en savoir plus sur le premier outil : Axe.

Crédit photo : https://fr.freepik.com/pikisuperstar

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com

Article : Facilitez l'intégration d'e-mails HTML grâce à Maizzle

$
0
0

Maizzle est un outil dédié à la construction de gabarits HTML pour e-mails, alimenté par un (classique) moteur NodeJS et le framework CSS Tailwind.

Que va vous apporter Maizzle ?

Comme chacun le sait, le monde merveilleux de l'e-mailing se trouve à des années lumières de ce que l'on considère comme des Standards, voire des Bonnes Pratiques de conception web.

Les clients mails sont capricieux, ils interprètent à leur manière, ils redimensionnent s'ils le souhaitent, ils reconnaissent uniquement les styles qui leur conviennent, etc.

Maizzle est là pour nous faciliter grandement la tâche.

page d'accueil de Maizzle

Du HTML très classique…

Maizzle se définit comme un outil agnostique en terme de balisage, il s'auto-proclame BYOHTML ("Apportez votre propre HTML", en anglais).

Cela signifie que contrairement à d'autres frameworks spécialisés, vous n'utilisez pas d'abstractions telles que <container>, <grid>, <column> ou <row> pour contruire vos gabarits, mais de véritables tableaux HTML <table>.

Je vous vois venir. Si on est obligé d'écrire notre HTML "à l'ancienne", avec des tableaux imbriqués, à quoi peut bien servir un framework ?

… Mais totalement orienté e-mailing !

  • Moteur de template : gabarits réutilisables, inclusion de fichiers partiels, transmission de variables, ajout de conditions, de boucles, etc.
  • Basé sur TailwindCSS : logique "email" respectée, pas besoin de toucher aux fichiers CSS, fichiers de configuration et de variables, prise en compte native du Responsive Webdesign
  • Respect natif des (non)Standards de l'emailing : styles en ligne dans les balises, tableaux de mise en forme, ajout automatique d'attributs ou balises propriétaires, cellpadding, cellspacing, etc.
  • Nettoyage du code en phase de production : CSSpurge, minification, obfuscation, suppression d'attributs et classes inutiles, etc.
  • Pas mal d'autres petits coups de main sympas : doctype, langue, notation sur 6 digits au-lieu de 3 pour les couleurs hexa, ajout de rôles ARIA tel que role=presentation, etc.

Premiers pas

L'installation de Maizzle, très bien décrite sur son site web, ne nécessite qu'un environnement NodeJS - méthode courante actuellement - et se fait à l'aide de l'instruction suivante :

npm i -g @maizzle/cli

Si vous ne souhaitez pas débuter de zéro, le framework vous propose des Templates ou des Starters préfabriqués.

Les deux tâches qui deviendront vos meilleures amies sont à présent :

  • maizzle serve : compilation de votre projet en local (dossier build_local/), surveillance des fichiers modifiés et synchronisation sur une URL de type localhost
  • maizzle build production : compilation pour mise en production (dossier build_production/) avec fichiers allégés (purgeCSS), minifiés et styles en ligne (style="").

Côté styles et mise en forme, TailwindCSS est le framework utilisé pour les styles CSS de ce projet.

Les styles sont rédigés directement sous forme de classes dans les éléments HTML, tel que recommandé par Tailwind, par exemple <table class="w-448 bg-white border-2 border-solid border-moonrock">.

Tous les styles CSS nécessaires sont déjà existants et apportés par le Tailwind, il n'est donc pas nécessaire de créer de nouveaux styles.

Layout, Template et Component

Véritable moteur de template, Maizzle gère les entités suivantes :

  • Layout : fichier de construction commun à plusieurs Templates.
  • Template : Un Template est une variante de page, intégrée dans le moule du Layout.
  • Component : Un composant est un fichier HTML inclus au sein d'un Template grâce à une instruction de type <component src="src/components/header.html"></component>.

Variables

Une variable globale est déclarée en début de Template dans une Zone de Variables délimitée par trois traits d'union :

---
title: "Merci de confirmer votre adresse email"
---

Les variables sont transmises aux Layout, Template et Composant et peuvent être récupérées ainsi :

<p>{{ page.title }}</p>

Une variable globale est liée à l'environnement page et est précédée de son environnement.

Une variable locale permet de proposer des valeurs différentes par composant par exemple, grâce à une chaîne Json transmise via l'attribut locals (voir exemple ci-après).

Exemple concret, le composant Button

Le composant Button, pour notre exemple, pourrait désigner un lien d'action classique (<a>) menant vers une page web.

Voici comment nous pourrions mettre ceci en oeuvre dans Maizzle :

  • le contenu (affiché) du bouton est placé entre <component> et </component> au sein d'un Template
  • l'URL est transmise via la variable locale buttonLink renseignée via l'attribut locals
  • la couleur de fond est transmise via la variable buttonBg
  • la couleur de texte est transmise via la variable buttonColor
<component src="src/components/button.html"
locals='{
  "buttonLink": "https://www.alsacreations.com/",
  "buttonBg": "bg-azure",
  "buttonColor": "text-white"
}'>
Allez sur un super site
</component>

Les variables locales sont récupérées par le Composant button (fichier button.html):

<a href="{{ buttonLink }}" class="{{ buttonBg }} {{ buttonColor }}">
<content></content>
</a>

And… voilà!

Pour rappel, Maizzle propose également des fonctionnalités de templating plus élaborées, telles que des boucles ou des conditions diverses.

Un type de test utile pourrait être celui de vérifier si une variable existe afin de générer du HTML conditionnellement :

<if condition="page.buttonDetails">
<span>{{{ page.buttonDetails}}}</span>
</if>

Hey, mais il reste des bugs !

Alors oui, j'ai une mauvaise nouvelle : la magie n'existe pas dans le monde de l'e-mailing  !

Il reste des bugs. Pas mal de bugs.

Étant moi même grand débutant dans ce domaine très particulier de l'e-mailing, j'ai pu découvrir de mes yeux émerveillés tout plein de coquilles un peu partout : des images de fond disparues sous Outlook, de simples listes à puces non reconnues, des dates et numéros de téléphones soulignés, de multiples problèmes de largeurs ou d'espacements non respectés, etc.

Bref, les Internets (et je dois l'avouer Stackoverflow) furent mes amis jusque très tard dans la nuit jusqu'à ce que je ma fasse ma compilation de liens et ressources incontournables.

Tester (protéger, isoler) sur de véritables clients e-mail est une absolue nécessité. Pour ce faire, nous avons fait appel au service Email Previews de Email On Acid qui a parfaitement rempli sa tâche.

Tests d'emails via Email on Acid

Quelques ressources

Il existe un très grand nombre de ressources et d'outils sur la production d'e-mails HTML. Voici une sélection personnelle :

Guides et lectures

  • E-mail Guidelines : Recueil des bonnes pratiques d'intégration d'e-mail. Un must pour ne rien oublier d'essentiel (anglais, français, japonais)
  • Blog de Hteumeuleu : Celui là même qui a produit les guidelines sus-citées (anglais)
  • Blog de Litmus (anglais)

Frameworks

Support et compatibilité

Outils et templates

Conclusion

Les outils ne manquent pas pour nous faciliter le quotidien lors de nos missions d'intégrations. Mais le domaine de l'e-mailing demeure très particulier avec ses lois et adaptations spécifiques et trouver l'assistant parfait relève du miracle.

Maizzle fait le taf, en tout cas c'est ce que j'en ai ressenti. Mais peut-être connaissez-vous d'autres outils plus performants, plus ergonomiques ou tout simplement qui vous paraissent meilleurs à l'usage ? N'hésitez pas à m'en faire part !

Publié par Alsacreations.com

Article : Ressources et documentations pour l'accessibilité des pages web

$
0
0

Parce qu’il est parfois difficile de s'y retrouver parmi toutes les informations que nous fournit notre moteur de recherche préféré, cet article a pour objectif de présenter un ensemble de sites (avec présentation brève) dont vous aurez besoin pour mettre en place l'accessibilité numérique dans vos pages web. Bien sûr, n’hésitez pas à nous recommander vos références si ces dernières ne sont pas citées dans cet article !

Documentations officielles

On commence par une thématique évidente : les documentations officielles. Celle du W3C est le must read, même si elle peut paraître dense, cette documentation fourmille d’explications, d’exemples détaillés (avec démo) accompagnés de leur code source, et d'autres précisions comme l’importance du clavier.

W3C : Présentation de la fiche explicative fil d'ariane"

Le RGAA de numerique.gouv.fr est une autre documentation à absolument prendre en compte. Elle est moins fournie en termes d’exemples, mais a le mérite d’avoir un glossaire très riche. Chaque élément y est expliqué et détaillé pour comprendre au mieux les critères à valider. Et en plus, tout est en français !

Sur ce site, il est également mis à disposition des modèles à utiliser sur ses sites web, comme par exemple, un modèle de :

  • rapport d’audit
  • déclaration d’accessibilité
  • modèle de grille pour faire son audit.

→ Bref, des documents à garder sous le coude.

Petit hic du RGAA : les critères sont parfois rédigés de manière alambiquée et nécessiteraient plus d’exemples. Bonne transition pour parler des articles suivants qui serviront de documentations complémentaires.

Documentations complémentaires

Dans cette seconde thématique, nous mettons en lumière les documentations qui vont reprendre les critères du RGAA mais sous forme de plusieurs rubriques (liens, images, formulaires, etc.) afin de donner plus de clarté et retrouver en un coup d'œil des exemples. Et, bonus, ces sites sont rédigés en français !

Exemple de la rubrique
Exemple de la rubrique "Images" sur le site AcceDe Web et le guide de l'intégrateur

On commence par le site d’Atalan, AcceDe Web, qui met à disposition des "notices" explicatives, avec exemple(s) et codes source.

Accede Web : présentation de la liste des notices et d'un exemple de notice
Accede Web : présentation de la liste des notices et d'un exemple de notice

Dans la même lignée que le RGAA, des "guides" ont été rédigés par le gouvernement et plus précisément par la Direction Interministérielle du Numérique (DINUM). Il en existe plusieurs qui correspondent chacun à un métier (sauf exception pour le dernier) :

Et même si sur le papier ils ont été rédigés pour le RGAA 3, les différences ne sont pas colossales, et s'appliquent également à la version 4 (voir notes de révision sur les différences entre les deux versions).

Créer des composants accessibles

On continue avec une petite liste de sites qui vont vous permettre de développer des composants/éléments accessibles, que l'on a tendance à souvent retrouver dans un site web (menu de navigation, slider, modale, accordéon, formulaire, etc… ) :

Les deux premiers sites permettent de retrouver plusieurs exemples accompagnés de leurs codes sources, par nom de composant (table, formulaires, cards), et permettent, comme pour la thématique précédente, de trouver ce que l'on recherche en un coup d'œil.

Quant au dernier site, Nicolas Hoffmann propose des scripts JS qui permettent de générer des composants ARIA, des attributs, etc. en fonction de classes CSS que l'on ajoute directement dans son code. Une démarche qui peut être étonnante mais qui peut sauver du temps, à tester !

À gauche, présentation du site a11y-style-guide.com, et à droite du site van11y.net
À gauche, présentation du site a11y-style-guide.com, et à droite du site van11y.net

Pour suivre l’actualité :

Enfin, car le sujet est vaste, nous terminons cet article avec une liste de sites web très utiles pour se tenir informé :

Publié par Alsacreations.com

Actualité : Le RGPD, ce qu’il faut absolument savoir

$
0
0

RGPD, définition

RGPD définition Alsacréations

Le Règlement Général sur la Protection des Données (RGPD) s’inscrit dans la continuité de la Loi française « Informatique et Libertés » de 1978.

Les motivations qui ont mené à la mise en place d’un tel cadre légal étaient multiples :

  • S’adapter aux évolutions technologiques et sociétales impliquant toujours plus d’échange de données personnelles.

  • Assurer la sécurité et la traçabilité des données personnelles collectées ainsi que le respect de la vie privée de chacun.

  • Établir une relation consentie, responsable, transparente et de confiance entre chaque organisme et sa communauté/clientèle (fini la vente de vos données à votre insu).

  • Permettre aux internautes d’être gestionnaires de leurs propres données.

  • Mettre sur le même pied d’égalité l’ensemble des organismes établis sur le territoire européen ou ciblant des résidents européens. Ainsi, une société française qui exporte des produits à Bali doit respecter le RGPD au même titre qu’une société établie en Australie livrant des produits en Espagne.

Pour résumer très simplement, le RGPD a pour objectif de responsabiliser et d’encadrer tout organisme, public ou privé, collectant des données personnelles européennes.

Qu’est-ce qu’une donnée personnelle ?

donnée personnelle explication Alsacréations

Dès lors que vous collectez des informations permettant d'identifier une personne physique directement ou par croisement de données, vous collectez ce qu’on appelle des données personnelles.

On distingue deux catégories de données personnelles :

  • Les données directement rattachées à une personne physique comme par exemple : prénom, nom, n° de sécurité social, ADN...
  • Les données indirectement rattachées à une personne physique comme par exemple : n° de téléphone, adresse postale, date d’anniversaire, sexe, âge, n° client, n° de plaque d'immatriculation, une photo, un enregistrement vocal, une adresse e-mail, une adresse IP,...

Les données indirectes ne permettent pas d'identifier une personne physique lorsqu'elles sont isolées mais une fois associées, le jeu de piste n'est plus très compliqué :

  • Exemple : Une femme habitant à telle adresse, inscrite à tel club, née telle date = on vous reconnaît Mme Martine !

Voilà pourquoi ces données restent personnelles et sensibles lorsqu'elles sont collectées dans une même base.

Bon à savoir :

Les informations liées à une personne morale et connues de tous ne sont pas des données personnelles.

  • Exemple : Société ABC, adresse postale, numéro de téléphone du standard, adresse email générique de contact, XXX salariés, n° SIRET = rien de confidentiel - RAS.

En quoi consiste la collecte et le traitement de données personnelles ?

collecte et traitement de données selon Alsacréations

Il y a traitement de données dès lors que vous devez collecter, consulter, modifier, partager ou extraire des données, que ce soit pour votre compte ou celui d’un tiers.

Dans tous les cas, l’usage que vous allez faire de ces données doit être clairement indiqué et le but final doit être légal mais également légitime par rapport à votre activité.

Exemples d’objectifs impliquant une collecte et un traitement de données :

  • organiser la livraison un produit
  • permettre l'édition d'une facture
  • proposer une carte de fidélité
  • envoyer une newsletter
  • géolocaliser une personne pour lui fournir le service souhaité
  • tenir à jour un fichier fournisseur
  • etc.

Important : Au regard du RGPD, vous ne devez pas collecter d’informations “au cas où, pour plus tard, sait-on jamais” mais uniquement lorsque ces données sont vraiment nécessaires pour votre activité.

Le saviez-vous ? Les données collectées numériquement ne sont pas les seules concernées ! Les documents papier sont tout autant concernés et doivent également respecter ce cadre légal.

Mettre en conformité ses fichiers existants

conformité RGPD Alsacréations

Pas le choix, il faut bien se lancer un jour et autant en profiter pour faire le ménage et repartir sur de bonnes bases. Pour vous y aider (ou vous permettre de guider au mieux vos clients) voici donc quelques consignes à suivre :

  1. Il est essentiel de procéder à un recensement des traitements de données effectifs et de constituer un registre afin d’avoir une bonne vue d’ensemble sur votre situation actuelle, et de pouvoir assurer la mise en conformité et le contrôle de ces données déjà collectées.

  2. À l’aide de ce registre, il convient ensuite de s’assurer que chaque traitement respecte bien le RGPD et sinon, d’améliorer les pratiques quand c’est nécessaire.

  3. À tout moment, la personne dont les données ont été collectées doit pouvoir les consulter et demander leur modification voire leur suppression définitive.

  4. Dans tous les cas, les données collectées ne peuvent pas être conservées indéfiniment ! Pensez à vous renseigner sur les durées légales de conservation des données.

  5. Enfin, la sécurité des données collectées doit être garantie par des mesures adéquates. Pensez donc à vous renseigner également sur la cybersécurité.

À partir de maintenant, suivez les bonnes pratiques !

Bonnes pratiques RGPD par Alsacréations

Maintenant que vous êtes sensibilisé au RGPD et que vous souhaitez avoir une conformité automatique (pour vous éviter des efforts rétroactifs cf. le registre ci-dessus), anticipez et suivez ces quelques bonnes pratiques pour la mise en place de tout nouveau traitement de données :

  1. Gardez cela à l’esprit : toute collecte de données doit être acceptée au préalable.

  2. L’acceptation doit être expressément donnée ainsi les opt-in sont obligatoires. Pour rappel :

    • Un Opt-out c'est lorsque l’internaute ne s'est pas opposé. La case est alors pré-cochée et s'il ne dit pas "non" en décochant manuellement la case, le "oui" est induit par défaut (pas bien).
    • Un Opt-in, c’est tout l’inverse ! L’internaute doit dire “oui” en cochant manuellement la case, sinon c’est “non” par défaut. Son consentement est ainsi bien mieux respecté et il ne risque pas une acceptation par inattention (bien !).
  3. Un lien de renvoi vers la politique de confidentialité doit clairement être identifiable à côté de l’opt-in pour permettre à la personne concernée de se renseigner sur l’usage qui sera fait de ses données.

  4. Enfin, chaque traitement de données doit faire l’objet d’un accord distinct. Voici quelques exemples cumulables :

    • “Je veux m’abonner à la newsletter”
    • “J’ai pris connaissance et j’accepte les conditions générales…”
    • “Je reconnais avoir pris connaissance de la Politique de confidentialité.”
    • "J'accepte que mes informations soient partagées aux partenaires…”
    • “J’accepte de partager ces informations pour participer au jeu-concours”

Globalement, pensez à construire rigoureusement votre politique de confidentialité et à la transcrire clairement pour que chacun puisse la consulter facilement et à volonté !

Besoin d’aide pour rédiger votre Politique de confidentialité ?
Laissez-vous guider !

Quelques points de vigilance

points de vigilance RGPD par Alsacréations

  • La conformité étant évolutive, il convient de l’inscrire dans un contrôle régulier et continu. Le principe est de s’assurer que les traitements respectent toujours les règles mises en place et que toute l'équipe joue le jeu rigoureusement.

  • Selon la sensibilité des données personnelles que vous collectez (comme les données de santé par exemple), les règles sont bien plus rigoureuses. Nous vous invitons à vous faire accompagner par un partenaire spécialisé dans le domaine, comme un délégué à la protection des données (DPO) par exemple. Ce dernier est là pour conseiller et accompagner les organismes qui le missionnent pour leur conformité.

  • Enfin, en cas de manquements au RGPD ou à la loi Informatique et Libertés, sachez qu’il existe plusieurs niveaux de sanctions allant du simple rappel à l'ordre, à des amendes administratives voire des sanctions pénales. Sans oublier le déficit d’image encouru lorsque la CNIL oblige les organismes à communiquer sur leurs sanctions. De quoi motiver ceux qui seraient tentés de passer outre...

Pour résumer

Le Règlement Général sur la Protection des Données (RGPD) peut être perçu comme une contrainte logistique mais il faut plutôt le voir comme un allié. Il s'agit du cadre légal qui protège vos données et qui vous permet d'établir une réelle relation de confiance avec votre communauté / vos clients / vos partenaires...

Entamer une démarche de conformité peut sembler chronophage, fastidieux et intimidant mais il suffit de s'armer de patience et de procédures rigoureuses pour avancer pas à pas efficacement.

Dans l'ensemble, posez-vous simplement la question : "les personnes avec qui nous souhaitons interagir sont-elles correctement informées sur nos intentions, l'usage que nous ferons de leurs données personnelles et sont-elles consentantes ?" Si la réponse est oui : beau travail, et sinon : corrigez le tir !

Illustration by Freepik Storyset

Publié par Alsacreations.com

Actualité : Quels framework et méthodologie CSS choisir ?

$
0
0

Au début était la Pangée. Un magma informe, une soupe de balises où se noient des styles épars et obscurs. Tout cela dans un ensemble de code inextricable et bien difficile à comprendre et maintenir !

Et l'on se rendit compte que HTML et CSS étaient tout autant faciles à écrire qu'extrêmement complexes à maintenir, et que seuls certain•e•s sorcier•e•s étaient capable d'assurer une consistence à leurs incantations codes source.

Les premières méthodologies CSS "grand public" voient le jour dans les années 2008-2009 sous l'impulsion, entre autre, de Nicole Sullivan alors ingénieure chez Facebook qui évoque le terme de "CSS Orienté Objet" ou "OOCSS" notamment lors d'une conférence à Paris-Web.

Méthodologies, Frameworks, Preprocesseurs

À l'instar de véritables langages de programmation, CSS se voit s'articuler autour de lui différentes approches, méthodologies et frameworks.

  • Les Approches et méthodologies CSS définissent généralement des règles de nommage ou des bonnes pratiques à suivre.
    Les plus utilisées à ce jour sont : OOCSS (Nicole Sullivan), BEM (Yandex), SMACSS (Jonathan Snook), Atomic CSS (Yahoo!) et ITCSS (Harry Roberts)
  • Les Frameworks CSS : désignent des environnements d'intégration complets et généralement fondés sur l'une des méthodologies sus-citées.
    On y trouve par exemple : Bootstrap (historiquement Twitter), Foundation (Zurb), Materialize CSS (Google), Tailwind (Adam Wathan), Bulma (Jeremy Thomas), Tachyons (John Otander) et PureCSS (Yahoo!). Sans oublier KNACSS (Alsacréations) bien sûr !
  • Les Pré et post-processeurs : sont des outils permettant de générer ou d'améliorer du code CSS existant. Les plus célèbres étant postCSS (Evil Martians), Sass, LESS et Stylus.

Si l'ensemble de ces approches et outils existent et prospèrent de nos jours, c'est bien parce qu'ils se sont fait leur place dans la réalité des environnements de production.

Comme disaient les cssribes de l'antiquité : "il n'y a pas de bonne ou de mauvaise approche" car :

  1. Les méthodologies répondent à des besoins
  2. Les méthodologies évoluent (car les besoins évoluent)

"Être consistant au sein d'une grosse équipe", "Ne pas avoir besoin de toucher au CSS", "Ne pas avoir besoin de comprendre CSS"… sont tout autant de besoins qui peuvent être légitimes.

Certains frameworks, dont Bulma, se targuent d'ailleurs de ne nécessiter aucune compétence en CSS (si cela vous choque… c'est que vous n'en n'avez sans doute pas besoin).

On veut des chiffres !

Si vous aimez les graphiques et les chiffres, sachez que le site web "State of CSS" suit de près les tendances de ce langage :

L'évolution des frameworks CSS entre 2019 et 2020

L'histoire des approches CSS de IE4 la préhistoire à nos jours

Approche (pré)Historique

La belle époque des <font>, des <center>, des <b>, mais aussi des tableaux de mise en forme à grand renfort de rowspan, colspan et autres valign a longtemps bercé notre enfance d'intégratrice et intégrateur. Les supports navigateurs et les bugs en tout genre complétèrent le tableau (huhu) d'un pseudo-langage bancal qu'était CSS.

Exemple
<div class="center"></div>
<font>
  <center>
    <b> <!-- j'ai mal rien que d'écrire tout ça --></b>
  </center>
</font>
Avantages et inconvénients

Un avantage indéniable est que le terme "center" est parfaitement compréhensible pour un être humain, même un développeur web.

Par contre, un élément <center>, ou un <div class="center">, véhiculent des notions purement graphiques, or HTML ne devrait transmettre que des informations de contenu, être dénué de notions de style. En mélangeant allègrement les deux, on complique le rôle et diminue l'intérêt de chacun.

Si cet élément change de style selon le contexte (n'est plus centré sur un grand écran par exemple), le choix de classe devient totalement incohérent. C'est problématique.

le dinosaure du HTML


Approche Sémantique

Mettons vite le hola à ces pratiques barbares et revenons aux bases que sont :

  • le HTML c'est pour la structure et le contenu (le fond)
  • le CSS c'est pour la présentation (la forme)
Exemple de sémantique
<div class="container">
  <div class="author-info">
    <h2>Francis Lalanne</h2>
    <img src="" alt="" />
    <p class="author-desc">Un troubadour des temps anciens.</p>
  </div>
</div>
.author-bio {
  ...;
}
.author-bio > h2 {
  ...;
}
.author-bio > img {
  ...;
}
.author-bio > .author-desc {
  ...;
}
Avantages et inconvénients

Grâce à ces classes "sémantiques", mon code HTML est propre et pourvu de sens et de logique, et surtout je comprends bien quelle est la fonction de chaque élément (enfin, normalement).

Alors par contre c'est drôle mais cela devient assez vite compliqué de trouver des noms de classe cohérents (salut à toi .modal-wrapper > .inner-content > .warning-global!).

Avouez que "Nommer les choses en CSS est compliqué" et que depuis l'ère du Responsive et des CSS modernes ça ne va pas en s'arrangeant car il faut aujourd'hui non seulement trouver des noms de classes, mais aussi de variables CSS, de valeurs de Breakpoints, etc.

Fort heureusement, tout le monde utilise de solides Conventions de nommage CSS de nos jours, n'est-il pas ?

En creusant bien, je me heurte à une autre problématique : comme souhaité, mon HTML n'a plus de notions de styles… mais maintenant c'est CSS qui est devenu très dépendant de ma structure HTML car les noms de classes ne contiennent plus aucune information graphique. Je dois systématiquement vérifier mon CSS pour deviner à quoi va ressembler ma classe .warning. Au final, j'ai simplement retourné la situation, et je n'ai pas séparé HTML de CSS.

la sainte sémantique HTML et CSS


Méthodologie BEM

La méthodologie "BEM" (pour "Block Element Modifier") a été élaborée par le moteur de recherche russe Yandex. Elle trouve racine en 2010 mais s'est vraiment activement développée à partir de 2015. Son objectif est de faciliter la réutilisation de composants CSS et d'assurer une cohérence de nommage à travers les équipes et dans la durée.

BEM impose une règle de nommage différente que selon que l'élément soit un "Block" (entité autonome), un "Element" (dépendant d'un Block) ou un "Modifier" (variante de Block ou d'Element).

Trois règles distinguent BEM d'autres approches :

  1. Tous les éléments HTML doivent chacun avoir un nom sous forme de class CSS (pas de nommage via id)
  2. Les sélecteurs CSS ne doivent cibler que des classes (pas d'élément tel que nav, ni a, ni ul dans le nom d'un sélecteur par exemple)
  3. Les sélecteurs CSS composés / hiérarchiques sont à éviter (pas de .menu .list, ou de .navigation > a)
Exemple de BEM
<div class="container">
  <div class="author-info">
    <h2 class="author-info__title">Francis Lalanne</h2>
    <img class="author-info__image" src="" alt="" />
    <p class="author-info__desc">Un troubadour des temps anciens.</p>
  </div>
</div>
.author-bio {
  ...;
}
.author-bio__title {
  ...;
}
.author-bio__image {
  ...;
}
.author-bio__desc {
  ...;
}
Avantages et inconvénients

La méthodologie BEM évite toute surprise : sa convention de nommage très stricte permet à coup sûr de comprendre à quoi sert chaque élément mais aussi de choisir le bon nommage quand j'en crée un nouveau. Je comprends ce que mes collègues écrivent et je comprends ce que j'ai moi-même écrit il y a 6 mois dans mon projet.

En outre, la structure HTML peut changer sans aucun impact sur le style (car CSS ne cible que des classes et non des balises HTML).

Enfin, il devient extrêmement facile de maintenir, modifier voire écraser des styles existants puisqu'il n'y a qu'un seul niveau de poids : un sélecteur CSS = une classe unique.

Mais il y a forcément des contreparties…

Mon code HTML a subitement doublé de taille, car chacun des éléments de structure (même s'il n'est pas utilisé) doit avoir un nom de classe à lui, voire plusieurs s'il dispose de variantes.

Et surtout, comment gérer efficacement tous les composants très similaires graphiquement mais dont la fonction est différente (ex. un .article__preview qui serait quasi identique à un .author__info) ?

Au final, pour résoudre cette problématique, on ajoutera généralement un niveau d'abstraction plus vaste ("content-agnostic") tel que .card ou .btn ou .badge. Et forcément, la précision et la compréhension en prennent un sale coup.

la convention de nommage BEM


Approche Atomique

L'approche Atomique (ou "utilitaire") trouve ses origines en octobre 2013 au sein d'un article de Thierry Koblenz sur Smashingmagazine. Cet article donne naissance à ACSS qui est adopté par Yahoo! dès 2015.

Les principes essentiels de cette approche sont :

  1. À chaque classe CSS correspond une seule fonction (ex. .txt-left {text-align: left} ou .mr-2 {margin-right: 2rem} )
  2. Le styles CSS sont volontairement dénués de contexte (agnostiques) pour être totalement indépendants de la structure HTML
  3. Les sélecteurs CSS composés n’existent pas (pas de .menu .list, ou de .navigation > a)
  4. Il n'est plus nécessaire d'intervenir dans la feuille de styles CSS. Plus aucun CSS à écrire, modifier ou maintenir car le fichier CSS existe initialement ou est généré au fur et à mesure.
Exemple d'approche atomique
<div class="container md:grid grid-col-3 bg-hotpink p-10 mb-6">
  <div class="text-center md:text-left">
    <h2 class="text-lg bg-chocolate rounded-full">Francis Lalanne</h2>
    <img class="h-16 w-16 md:h-24:w-24" src="" alt="" />
    <p class="p-10 my-6 hover:bg-orange">Un troubadour des temps anciens.</p>
  </div>
</div>
.text-center {
  ...;
}
.text-left {
  ...;
}
.text-lg {
  ...;
}
.p-10 {
  ...;
}
Avantages et inconvénients

Atomic CSS, on l'adore ou on le déteste, mais quoi qu'il en soit il est impossible de se tromper dans le nommage ! Il n'y a aucune surprise ni de pièges, personne ne se torture l'esprit ni ne peut bifurquer puisque le nommage existe déjà. Toutes les classes CSS vous attendent, inutile d'en créer davantage.

De plus, je n'ai même plus besoin de fouiller dans mes fichiers CSS, tout se passe côté HTML et je peux me concentrer sur un seul langage lors de mon intégration.

Se fonder sur un nombre de classes existant et restreint m'impose une cohérence (difficile d'avoir 150 niveaux de gris différents par exemple, même si c'est possible.)

Enfin, les contextes d'affichage tels que le Responsive peuvent parfaitement être pris en charge.

Mais encore une fois il y a forcément des contreparties et elles sont de taille 

  • Ça pique carrément les yeux ! C'est moche. C'est un fait.
  • Mon HTML est alourdi, difficile à lire, et contient partout de multiples classes
  • Mon CSS, s'il doit prévoir toutes les classes utilitaires dans tous les contextes possibles, aura une taille gigantesque.
  • Contrairement aux apparences, j'ai besoin de très bien connaître CSS et toutes ses propriétés pour en déduire toutes les classes utilitaires (oh mais attendez, connaître les CSS n'est pas censé être un inconvénient n'est-ce pas ?)

l'approche Atomique avec le framework Tailwind


Mais alors c'est quoi la meilleure méthodologie ?

Pour la petite anecdote, je me souviens très bien du jour où j'ai découvert CSSLint et son incitation à "ne pas utiliser de sélecteur d'ID en CSS". Ma première réaction fut de vivement réfuter en block cet argument car la "Bonne Pratique" de l'époque était de cibler les éléments uniques de la page via des #id, et CSSLint allait clairement à l'encontre de toutes nos années d'apprentissage et d'usage de CSS.
J'ai mis quelques années à changer d'avis.

Cet exemple, parmi tant d'autres, démontre qu'une bonne pratique n'est pas figée dans le temps.

Des projets différents impliquent des besoins différents et une approche différente. Tout cela pour conclure qu'aucune approche n'est meilleure qu'une autre car certaines sont parfaitement adaptées à des typologies de projets particuliers, ou aux compétences de l'équipe. Et d'autres non.

Le mot de la fin revient à Thierry Koblenz, ancien chef des experts CSS chez Yahoo!, "inventeur" des CSS atomiques :

Pour Yahoo!, ACSS s’est révélé être un super outil mais si je devais refaire mon site perso demain ce serait certainement 80% sémantique et 20% atomique > (« utility classes »).
Et pour une page toute bête, je pense que ça frôlerait les 99.99% (sémantique ou atomique selon l’humeur du moment).

Source : Thierry Koblenz, 2016

Finalement, vous l'aurez compris, cet article n'avait pas pour but de vous imposer un choix de méthodologie mais plutôt de vous rendre attentif aux avantages et inconvénients de chacune.

N'hésitez pas à enrichir ce débat en avouant votre amour inconditionnel pour Atomic CSS ou votre haine sans fin pour BEM, nous faire découvrir d'autres approches modernes, ou simplement nous témoigner de celle(s) que vous adoptez dans vos projets.

Publié par Alsacreations.com

Actualité : Interview des gens du web : Sven Sauleau

$
0
0

(Alsacréations) Peux-tu te présenter en quelques mots ?

Je m'appelle Sven Sauleau, j'ai 25 ans et je travaille depuis deux ans, en tant que Systems Engineer, chez Cloudflare à Londres. Les langages que j’utilise le plus souvent sont JavaScript, Golang et Rust, mais je pense qu'il n'y a pas de mauvais langage.

Photo de Sven

(Alsacréations) Même le Malbolge ?

Non, ça c'est vraiment impossible à utiliser ! Je préfére écrire mon code en espace blanc https://en.wikipedia.org/wiki/Whitespace_(programming_language).

(Alsacréations) Quel est ton parcours ?

Suite à des études d'électricien, j'ai travaillé sur des chantiers pendant trois ans. Ce n'était pas forcément un choix mais plutôt une orientation par défaut.

Le travail était intéressant mais pas quelque chose que j'aurais fait toute ma vie.

A côté de mes études je m'intéressais de plus en plus à l'informatique... et jouer à Minecraft. Ça m'a amené à créer un service de vente de serveur Minecraft.

Minecraft

Pour créer et perfectionner mon service de vente et gestion de serveur Minecraft, j'ai commencé à apprendre à développer en PHP, JavaScript ou Java. Ce qui m’a permis d’apprendre beaucoup et rapidement le monde de l’informatique.

Éventuellement cela m'a aussi permis d'apprendre la réalité du business, mon affaire n'était pas assez rentable et j'ai mis fin à l'activité après une année.

Je me suis ensuite orienté vers du service et des sites internets; j'ai fait du freelance pendant plusieurs années.

(Alsacréations) Qu’utilisais-tu “à l’époque” comme outils/langages ?

A l’époque j’utilisais beaucoup Symfony (ou des frameworks PHP maison), MySQL ou jQuery.

J’ai commencé à écrire du code avec Notepad++ puis j’ai découvert Vim et je ne l’ai pas quitté depuis.

(Alsacréations) Tu es contributeur Babel, webpack, c’est un CV impressionnant, comment en es-tu venu jusqu’à ces références du monde JavaScript ?

Quand j'étais freelance je consacrais plusieurs jours par mois à de l'autoformation et à des contributions sur des projets open-source. Un jour, je me suis intéressé de plus près à une technologie que j'utilisais: Babel. L’outil est très intéressant.

Babel

J'ai commencé par fixer des incohérences dans la documentation, puis davantage au core de Babel (le compilateur). Après deux années (il me semble) j'ai été invité à rejoindre l'équipe core.

webpack est souvent utilisé avec Babel, certains bugs nécessitent la compréhension des deux outils. J'ai aussi eu la chance de travailler pour webpack sur l'intégration avec WebAssembly.

Finalement, une fois qu'on a une bonne connaissance d'outils principaux dans l'écosystème JavaScript, il est plus facile de naviguer dans l'écosystème.

(Alsacréations) Pour la majorité des développeurs, ces outils bien que répandus semblent complexes, est-il facile/possible d’y contribuer ? Avec quels langages sont-ils eux mêmes conçus ?

La plupart des outils comme Babel et webpack sont écrits en JavaScript ou plus récemment intègrent du TypeScript.

En général, les projets open-source utilisés par un grand nombre de personnes sont bien documentés et encouragent les contributions. Babel par exemple a un Slack très actif où l'on peut aider de nouveaux contributeurs.

Si vous ne savez pas par quoi commencer, les projets open-source marquent les issues faciles pour débuter avec un label “first good issue”. Vous pouvez filtrer par label dans l’onglet “issues” d’un projet.

(Alsacréations) WebAssembly a intensément fait parler de lui mais pour le moment semble réservé aux grosses structures de la Silicon Valley qui ont le plus de moyens, dans quelle mesure pourrait-il intervenir dans les projets web de tout un chacun ?

WebAssembly a beaucoup fait parler de lui au début mais des fois pas pour les bonnes raisons. Sur twitter beaucoup de personnes pensaient que c'était la fin de JavaScript. En réalité WebAssembly et JavaScript se complètent.

WebAssembly

Je suis persuadé que WebAssembly est une des technologies du futur, la majorité des plateformes vont en tirer parti d'une manière ou d'une autre. En revanche WebAssembly n'est pas encore tout à fait au point, pour le moment elle s'adresse à une niche de développeurs ou de cas d'usage.

Ceci dit, il est probable que vous utilisiez déjà WebAssembly sans que vous vous en rendiez compte, peut-être qu'une de vos dépendances a été compilée vers du WebAssembly. Des applications en ligne comme Figma ou Twitch utilisent déjà WebAssembly.

Des fonctionnalités en cours de développement permettent une meilleure intégration entre WebAssembly et JavaScript (ou le Web). Il sera bientôt facile de combiner du code compilé vers WebAssembly dans ses applications/sites Web pour par exemple optimiser des algorithmes ou réutiliser du code écrit dans un autre langage.

(Alsacréations) Tu as lancé récemment Mailway https://mailway.app/ peux-tu nous en dire plus sur son but, sa structure et indiquer ce qu’il faut pour le mettre en place, à destination des personnes intéressées ?

Mailway capture d'écran

Mailway est un service de routage, de filtrage, de transfert de mail et autres. Je l'ai initialement développé pour mon usage personnel, pour filtrer des mails de certains expéditeurs ou avec un certain sujet, transférer des messages à une ou plusieurs adresses(s) email(s) et pour avoir un nombre d'adresses mail illimité (aussi appelé alias) avec mon nom de domaine.

Capture d'écran de Mailway

Le service est maintenant ouvert à tout le monde et gratuitement en bêta.

J'ai aussi développé une extension Chrome qui permet de générer des adresses mail uniques et temporaires directement dans la barre du navigateur. Je l'utilise lorsque je n'ai pas envie de donner mon adresse email à un site web. Par défaut, après quatre heures les mails envoyés à cette adresse seront bloqués.

Je fais aussi partie des personnes qui achètent plein de noms de domaines sans raison particulière. Il est courant d'avoir des domaines chez plusieurs registrars.

Certains registrars offrent un moyen de transfert de mail mais souvent pas assez flexible. Mailway permet de recevoir des mails d'une manière unifiée et flexible pour n'importe quel domaine.

Il est important que le service soit facile à utiliser, la version en ligne https://mailway.app permet d'utiliser le service avec ses emails en quelques minutes. Il est possible d'héberger le service soi-même https://docs.mailway.app/self-host/getting-started/.

(Alsacréations) Pour utiliser le service il “suffit” donc de faire pointer le MX de sa zone DNS ?

Oui, pour commencer à recevoir des emails il suffit de créer le domaine sur votre compte Mailway et de diriger le champ MX vers Mailway. La configuration par défaut redirigera tous les mails vers votre adresse mail (celle que vous avez enregistrée sur GitHub si vous vous connectez via GitHub à Mailway).

(Alsacréations) Pourquoi as-tu choisi Go pour développer Mailway ?

Le langage Golang est adapté et agréable à utiliser pour des applications réseaux et concurrentes, il offre aussi une gestion d'erreur avancée. Ce qui permet de développer des services ou applications robustes.

Go

(Alsacréations) Quel est le langage ou le framework qui t’attire le plus aujourd’hui ?

Personnellement c'est difficile à dire, beaucoup de langages ou de framework m'attirent. Je consacre souvent du temps à m'intéresser aux dernières nouveautés.

En ce moment le langage APL m’attire mais c’est uniquement par curiosité ou le langage Zig qui semble un choix plus utile.

(Alsacréations) Quelle est la ressource que tu pourrais recommander aux personnes souhaitant redécouvrir JavaScript en profondeur ?

Le document https://babeljs.io/docs/en/learn offre une bonne vue d'ensemble de pas mal de dernières fonctionnalités JavaScript avec des exemples, mais la page n’a pas été mise à jour depuis un moment.

L'excellent MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript a du contenu plus avancé, disponible en français et surtout à jour.

(Alsacréations) Comment vois-tu la plateforme web / JavaScript d’ici 3 à 5 ans ? Pourrait-elle supplanter les OS et applications natives autant en desktop qu’en mobile ?

JavaScript a beaucoup évolué ces dernières années, c'est un langage qui devient plaisant à utiliser. Son écosystème est massif, complexe et malheureusement des fois toxique. JavaScript va continuer d'évoluer plus doucement.

En revanche, avec WebAssembly le Web va s'ouvrir à d'autres langages et technologies. Des nouveaux écosystèmes pourront utiliser le Web et la majorité des applications natives vont être portées sur le Web.

(Alsacréations) Penses-tu qu’il y a une limite (actuelle ou future) que l’on pourrait rencontrer dans ce mouvement de transition vers le web ? Par exemple au niveau des API, de la sécurité, de la performance, ou du langage lui-même ?

La plateforme Web continuera d’évoluer, des nouvelles fonctionnalités, des améliorations des performances, des corrections de bogues ou mesures de sécurité sont continuellement ajoutées.

Je dirais que du point de vue de WebAssembly, la transition vers le Web est seulement à ses débuts et en générale il y aura toujours des limites techniques mais jamais à ce qu’on peut faire à travers le Web.

(Alsacréations) Que changerais-tu dans l’écosystème actuel, que souhaiterais-tu voir amélioré ?

JavaScript est l’un des langages les plus accessibles pour débuter en informatique et pour le moment le seul généralement utilisé sur le web, ce qui a rendu le langage très populaire. En recherchant ou discutant sur internet on peut parfois ressentir ce manque d'expérience.

npm

Son gestionnaire de paquets (npm) contient presque 2 millions de paquets (il existe même un jeu à boire où il faut trouver des noms communs qui n'existeraient pas encore en tant que paquet sur npm). Ce que je rencontre sur npm c’est qu’un grand nombre de paquets font la même chose, que la qualité du code est défois discutable ou que la maintenance est inexistante.

Sur les réseaux sociaux beaucoup de hype est présente, malheureusement pas toujours justifiée et il pourrait s'avérer difficile pour une personne inexpérimentée d’y voir claire.

Le fait que le langage soit si accessible et populaire est une bonne chose mais influence certainement l’écosystème. Je ne pense pas que cela changera. Cependant avec WebAssembly d’autres ecosystems vont s’intégrer avec JavaScript, des technologies plus matures seront accessibles.

(Alsacréations) As-tu un cousin ou un frère qui se prénomme “Han” ?

C'est peut-être pas un bon moment pour dire que je ne regarde pas Star Wars…

(Alsacréations) Cela arrive même aux meilleurs ! Qu’as-tu découvert récemment sur petit ou grand écran ?

J’ai récemment découvert Rick and Morty sur Netflix, j’ai tellement aimé que j’ai regardé tous les épisodes à la suite.

Rick et Morty

Publié par Alsacreations.com


Tutoriel : Du pixel art en CSS avec box-shadow

$
0
0

Introduction

Dans cet article, nous allons détourner CSS de son usage initial, pour des raisons "éducatives". En général, le CSS est utilisé pour créer le style des pages, mais pour changer un peu, nous allons l’employer pour dessiner. Nous allons réaliser du Pixel Art en CSS.

Il y a plusieurs moyens de créer un pixel art en CSS, comme par exemple créer une multitude d’éléments en HTML puis les styliser avec CSS. On pourrait aussi utiliser du Javascript ou encore un SVG.

résultat du pixel art

Personnellement, je vais vous montrer comment détourner la propriété box-shadow. Cette propriété initialement prévue pour créer des ombres. Cependant ici, on va s'en servir pour créer du pixel art. C’est pour moi la technique la plus intéressante et c’est surtout un très bon moyen d’en apprendre plus sur la propriété.

Comment créer un pixel art en CSS avec box-shadow ?

Avant de créer notre premier pixel art, il est important de comprendre le fonctionnement même de box-shadow. Et comment il est possible d’en détourner son usage principal.

La propriété box-shadow

La propriété CSS box-shadow ajoute des ombres à la boîte d’un élément via une liste d’ombres séparées par des virgules lorsqu'il y en a plusieurs. C’est une propriété très largement utilisée et que vous avez déjà sûrement employée.

Une ombre peut prendre jusqu’à 5 valeurs :

  • un décalage horizontal,
  • un décalage vertical,
  • un rayon de flou,
  • un rayon d’étalement
  • et, pour finir, une couleur.

Les décalages peuvent recevoir une valeur négative ou positive, ce qui permet de placer précisément l’ombre. C’est grâce à ça que nous allons pouvoir créer nos pixels.

Démonstration des valeurs de box-shadow

Créer un pixel avec une ombre CSS

On va commencer par quelque chose de simple pour mieux comprendre où se situe l’astuce. Nous allons créer notre premier pixel.

Je commence donc par créer un élément en HTML et je le stylise en CSS.

.pixel {
    width: 40px;
    height: 40px;
    background-color: #333; 
}

Jusqu’ici rien de compliqué. De plus j’ai théoriquement mon premier pixel.

premier pixel art

Et maintenant je vais lui ajouter une ombre avec box-shadow.

.pixel {
  width: 40px;
  height: 40px;
  background-color: #333;
  box-shadow: 4px 4px 6px #777;
}

un pixel ombré

J’ai maintenant un pixel avec une ombre. On peut modifier cette ombre pour créer un nouveau pixel. Il suffit de supprimer son blur (rayon de flou) et d’augmenter son décalage. Ce qui donne le code suivant :

.pixel {
  width: 40px;
  height: 40px;
  background-color: #333;
  box-shadow: 40px 40px #777;
}

mon deuxième pixel

Pour les pixels supplémentaires, il suffit de rajouter une nouvelle ombre à la suite dans la déclaration de la propriété box-shadow.

.pixel {
  width: 40px;
  height: 40px;
  background-color: #333;
  box-shadow: 40px 40px #777, 80px 80px #777;
}

Et un pixel de plus !

J’ai résumé les étapes avec une petite illustration :

Création de pixels étape par étape

Mais comment ça marche ?

Pourquoi l’ombre se décale hors du parent et fait exactement la même taille que l’élément de base ?

Il faut savoir qu’en CSS les ombres héritent des dimensions du parent. C’est donc pour cela que dans notre exemple notre ombre crée un carré qui est identique au parent (sauf pour la couleur).

Pour le décalage, il suffit de lui donner au minimum la taille du parent sur les deux axes pour décaler l’ombre.

Pour finir, en CSS les ombres ne peuvent être visibles que en-dehors d’un élément, c’est pourquoi si on essaye de créer un pixel avec 10px de décalage alors celui-ci apparaîtra coupé.

Explication du décalage d'une ombre en CSS

Pixel art, box-shadow et animation

Le pixel art, c’est beau, mais animé, c’est encore mieux !

Le plus souvent dans les jeux rétro, une animation est composée de plusieurs images généralement appelées « sprites », qui s’affichent à la suite les unes des autres afin de créer une impression de mouvement et donc une animation. Ainsi plus il y a d’images, plus l’animation est fluide.

Cette technique d’animation est utilisée depuis très longtemps et il est très facile de trouver des exemples de sprites sur le net.

Pour animer notre pixel art, nous allons utiliser la même technique. En utilisant une keyframes nous pouvons définir chaque étape de notre animation et le sprite associé afin d’animer le pixel art.

// Une animation de 4 sprites
@keyframes fireball {
  0%,
  25% {
    box-shadow: /* ... */;
  }
  25.01%,
  50% {
    box-shadow: /* ... */;
  }
  50.01%,
  75% {
    box-shadow: /* ... */;
  }
  75.01%,
  100% {
    box-shadow: /* ... */;
  }
}

Ainsi en utilisant une keyframe et en définissant chaque sprite dans les étapes d’animation, il est possible de créer un pixel art animé. J’ai réalisé un exemple sur Codepen en 4 sprites :

Point sur les performances

Certains développeurs s’étaient rendu compte qu’une application complexe réalisée en Material design, qui est donc très dépendante de l’utilisation des ombres (et donc de box-shadow) aurait des moins bonnes performances que des designs qui se reposent moins sur l’utilisation d’ombre.

Cette théorie n’a pas été confirmée, cependant Ross Allen de chez AirBnb a prouvé que les ombres en CSS étaient très gourmandes en ressources et pouvaient impacter le scroll.

Et c’est encore pire quand on anime une box-shadow. L’animation de celle-ci provoque beaucoup de repaint et donc une consommation de données.

Faisons le test avec un pixel art en CSS que j’ai réalisé il y a quelque temps.

Si vous l’ouvrez de votre côté, vous pourrez voir que le pixel art met un certain temps à s’ouvrir. De mon côté, il m’aura fallu environ 3 secondes pour afficher le pixel art. J’ai enregistré (et ressenti) deux chutes brutales de FPS. Et on peut distinguer, en rouge, plusieurs demandes de ressources auprès de la carte graphique.

PS: j’ai effectué le rapport de performances avec la vue « debug » coté Codepen qui affiche uniquement mon code.

Capture des performances réalisé avec Firefox

On peut donc en conclure que faire du pixel art en CSS n’est pas forcement la meilleure idée pour une application en production…

Usage en production et conclusion

Le pixel art en CSS avec l’utilisation de box-shadow, est, comme on l’a vu, très gourmand en ressources. Vous vous doutez donc qu’il est plus avantageux de se servir d'une image (jpg, png, webp) ou même un SVG pour afficher un pixel art.

Mais alors quel est l’intérêt ? J’y vois deux raisons : apprendre et s’amuser en créant.

Je pense que juste en expliquant dans cet article et comment j’ai détourné box-shadow pour créer du pixel art, vous avez dû apprendre plus sur cette propriété ou sur ses performances.

Deuxièmement, c’est un bon moyen de créer et s’exprimer en utilisant uniquement CSS, de faire du pixel art d’une façon un peu originale et d’impressionner vos amis développeurs.

On peut aller plus loin dans la création de pixel art en utilisant par exemple SCSS pour créer plus facilement nos lignes de pixels et ainsi pratiquer SCSS.

Certaines personnes ont même créé des outils pour générer du pixel art en CSS :

Conclusion

Le but même de cet article était de vous montrer comment on pouvait détourner une propriété CSS pour en faire un autre usage.

Mais aussi de vous montrer, comment utiliser des propriétés CSS d’une autre façon, hors de leur cadre habituel, peut, dans certains cas, aider à mieux comprendre leurs fonctionnement même.

J’ai personnellement appris le CSS en l’utilisant pour dessiner des illustrations en flat design. Je continue encore aujourd’hui à créer des choses délirantes avec du CSS pour en apprendre plus sur certains concepts et vous le partager.

Que pensez-vous de tout ça ?

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com

Actualité : Safari 15 dévoilé lors de la WWDC Apple

$
0
0

Lors de sa traditionnelle conférence WWDC 2021 (WorldWide Developers Conference), Apple a présenté hier beaucoup de nouveautés, et quelques évolutions pour le navigateur Safari 15 qui sera livré avec iOS/iPadOS 15 et macOS 12.

Apple commence par se féliciter de la performance et de l'économie d'énergie de Safari sur macOS, ce qui est relativement cohérent et attendu car faisant partie du même écosystème. Cependant, un bon nombre de développeurs web signalent le retard actuel de Safari par rapport à ses confrères (Firefox, Chromium) quant à l'implémentation des nouveautés en général.

Safari présenté à la WWDC

Interface

Safari revoit globalement la disposition des menus, de la navigation, des onglets, pour laisser plus de place au contenu. La barre d'adresse et de recherche est désormais sur la même ligne que les onglets. Les différents boutons d'action (mode lecture, partage, signets...) ont été regroupés dans un classique et discret bouton "..." (more).

Interface Safari 15

Des groupes d'onglets permettront de sauver et organiser des contextes de navigation ou de les partager facilement par e-mail. Ils seront synchronisés sur les autres périphériques Apple (iMac, iPhone, iPad).

Safari onglets

La couleur de fond de la fenêtre sera déterminée d'après la couleur majeure d'un site, et se basera sur la balise meta theme-color désormais bien connue de tous, avec support CSS du dark mode via une media query prefers-color-scheme.

<meta name="theme-color" content="#abc737" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#008cba" media="(prefers-color-scheme: dark)">

En mobile sur iOS

Sur mobile, les changements vont donner du fil à retordre aux designers. La barre d'adresse et les onglets se retrouvent désormais au bas de l'écran, et pourraient malheureusement recouvrir du contenu, comme des boutons d'action.

Navigation sur Safari mobile

Des réactions sont déjà visibles et il faudra surveiller le comportement réel de ce mode d'affichage, probablement pour trouver de nouvelles astuces.

Pensons notamment aux bannières cookies qui sont fréquemment situées dans cette zone de l'écran.

Le support PWA (Progressive Web Apps) est toujours partiellement présent, plus restreint que d'autres plateformes par la volonté d'Apple de limiter l'accès à certaines API et fonctionnalités (pour des questions de sécurité ou respect de la vie privée, mais aussi certainement pour protéger son écosystème d'appstore/applications natives), par exemple en ne signalant pas à l'utilisateur que l'application peut être ajoutée à l'écran d'accueil. D'autres lectures à ce sujet :

On peut supposer toutefois que cela fera lentement et sûrement son chemin, après les premières étapes cruciales déjà accomplies.

Une grosse nouveautés sera le support des extensions navigateurs WebExtensions sur iOS et iPadOS, tandis que le WebExtensions Community Group a été récemment formé et que Chrome sur Android ne les exploite pas encore.

Safari et extensions

Quelques autres fonctionnalités à noter, parmi bien d'autres :

  • Support d'aspect-ratio en CSS
  • WebGL 2
  • Support des modules ES6 dans les Workers + ServiceWorkers
  • Changement d'apparence graphique pour les contrôles de formulaires (input, etc)
  • Codec audio Opus dans les conteneurs WebM
  • Meilleur support de WebAssembly
  • Nouvelles fonctionnalités pour les paiements en ligne
  • Inspecteur de CSS Grids avec overlay dans les devtools

Pour tout savoir des évolutions du moteur WebKit vous pouvez suivre le Blog WebKit qui publie régulièrement des Release Notes pour Safari Technology Preview

Publié par Alsacreations.com

Astuce : Corriger le problème de hauteur 100% (100vh) sur mobile

$
0
0

Vieux de plusieurs années mais toujours non réglé à ce jour, un "bug" concernant la hauteur 100% de la fenêtre sur Safari continue de perturber nos intégrations web sur mobile.

Concrètement, le phénomène concerne les hauteurs exprimées en valeur 100vh (100% de la hauteur de Viewport) mais qui débordent de la hauteur visible dès lors qu'une barre d'adresse (URL) est présente par exemple.
Ce comportement avait déjà été signalé en 2015 par Nicolas Hoizey.

100vh
Illustration du "bug" de hauteur 100vh sous Safari iOS

Toutefois, il faut savoir que ledit comportement n'est pas un bug mais une fonctionnalité intentionnelle au départ… ce qui ne nous arrange pas.

Correction via CSS

Il est possible de contourner le souci sur les navigateurs mobiles avec la valeur -webkit-fill-available, comme l'illustre le code ci-dessous :

html {
  height: -webkit-fill-available;
}
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    min-height: -webkit-fill-available;
  }
}

Voir une démo

Pour info, -webkit-fill-available est une version temporaire, non finalisée, de la future valeur fill.
Notez également que ce correctif CSS peut être automatisé grâce à PostCSS.

Correction via JavaScript

Si la solution "simple" en CSS ne suffit pas, il sera alors nécessaire de calculer la hauteur dynamiquement en JavaScript avec window.innerHeight :

:root {
  --vh: 100vh;
}

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}
const appHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
window.addEventListener('resize', appHeight)
appHeight()

Voir une démo

Le futur : Large, Small, et Dynamic Viewports

Afin de pouvoir maîtriser ces notions de tailles de fenêtres fluctuantes, les spécifications CSS sont actuellement en train de plancher sur de nouvelles unités de Viewport : Large, Small, et Dynamic Viewports.

Plus d'informations sur le site de Bram.us.

vh et svh
Les nouvelles unités de Viewport (vh, svh et dvh). Source : Bram.us

Publié par Alsacreations.com

Actualité : Interview des gens du Web : Marie Guillaumet

$
0
0

Marie Guillaumet, alias « kReEsTaL », se qualifie comme Designer UX/UI experte en accessibilité chez Access42, mais son panel de compétences s'étend à de nombreux autres domaines du Web. Elle est également oratrice de talent lors de nos conférences web préférées.

Découvrons ensemble le parcours et les coups de coeurs de Marie…

(Alsacréations) Bonjour Marie, peux-tu te présenter en quelques mots ?

Bonjour ! Je m’appelle Marie Guillaumet, j’ai 38 ans, je vis près de Rennes et je travaille au sein d’Access42 en tant que designer UX/UI experte en accessibilité numérique, formatrice et responsable communication et éditorial. Pendant mon temps libre, j’aime peindre et voir du pays.

Marie Guillaumet

(Alsacréations) Par quoi as-tu été amenée à te spécialiser dans l’Accessibilité Numérique ?

Ça s’est fait en plusieurs étapes. J’ai découvert l’accessibilité numérique pendant mes études à Sciences Po Grenoble. Lors d’une enquête de terrain, j’ai rencontré des personnes en situation de handicap qui militaient pour l’accessibilité du bâti et des transports, ainsi qu’une élue municipale et un architecte spécialisé en accessibilité. Dès le départ, ça m’a passionnée.

En parallèle, je créais déjà des sites web : les tutoriels et le forum d’Alsacréations m’ont d’ailleurs beaucoup aidée à apprendre les rudiments de l’intégration. Et comme l’accessibilité web faisait partie des sujets récurrents sur le forum, j’ai considéré que ça allait de soi d’en tenir compte.

J’ai écrit un mémoire de master sur l’accessibilité web, puis j’ai travaillé en tant qu’intégratrice dans plusieurs agences, au sein d’équipes souvent très motivées par l’accessibilité. J’ai aussi commencé à contribuer à différents blogs où il en était question, notamment Les Intégristes.

Ma montée en compétences a eu lieu par à-coups, grâce aux projets pour lesquels une exigence forte en matière d’accessibilité était demandée, ce qui était rare. En général, ça concernait des sites publics importants.

Malgré tout, je sais aujourd’hui que ma connaissance de l’accessibilité est longtemps restée en surface. C’est vraiment quand j’ai rejoint Access42, en 2017, que j’ai fait un bond de compétences inouï dans ce domaine. J’ai pu suivre une formation à l’audit de grande qualité, animée par mon éminent collègue Jean-Pierre Villain. Tout ce que je pensais bien faire, mais que je faisais mal, m’a soudain sauté à la tronche. J’ai aussi obtenu des réponses à des questions que je ne m’étais jamais posées. Bref, ça a été les 5 jours les plus importants de ma vie professionnelle. Depuis, je continue à consolider mes connaissances chaque jour.

(Alsacréations) Quel est le plus gros challenge/défi que tu considères avoir accompli dans ton parcours ?

Concevoir la formation sur le design d’interfaces accessibles d’Access42 en quelques mois. Le défi consistait à aider les designers à s’emparer de ce sujet, qui a longtemps été traité uniquement par un angle technique. Or, dans cette formation, on ne parle pas de code : on s’intéresse aux usages des personnes en situation de handicap, et aux conséquences que cela a sur le design UX (fonctionnel) et UI (graphique). Comment répondre aux besoins spécifiques des personnes handicapées vis-à-vis du numérique ? La première étape consiste à connaître ces besoins, et le rôle fondamental que jouent les technologies d’assistance dans leur expérience.

L'organisme de formation Access42

La formation aborde aussi tout l’éventail des exigences du RGAA (Référentiel général d’amélioration de l’accessibilité, le référentiel légal français dans le domaine) en matière de design. Les designers que nous formons font souvent face à des problématiques de conception complexes, qui dépassent les cas courants que l’on peut trouver sur un site web "classique". C’est très motivant de les aider à trouver des solutions pour que les personnes handicapées puissent profiter d’applis innovantes dès leur sortie sur le marché, par exemple.

(Alsacréations) Tu es Designer UI/UX, Formatrice, Responsable éditorial, Oratrice, Experte en accessibilité et en WordPress. Quelle corde manque encore à ton arc selon toi ?

J’aimerais avoir une connaissance plus approfondie des technologies d'assistance : outre les lecteurs d’écran, que je suis loin de tous maîtriser, il y a aussi des systèmes de contrôle à la voix, de nombreux types de contacteurs, des systèmes d’eye tracking, etc. que je connais moins. Je voudrais surtout observer des personnes concernées les utiliser, et contribuer à trouver des solutions pour améliorer leur expérience sur les interfaces numériques.

Le site web marieguillaumet.com

(Alsacréations) À travers les yeux d’Access42, comment vois-tu l’évolution de l’Accessibilité Numérique dans le monde professionnel ?

Nous assistons à un véritable boom de l’accessibilité numérique depuis que le décret a été publié, en 2019. Les demandes de formation et d’accompagnement abondent, et c’est une excellente nouvelle : des générations entières de professionnels/professionnelles sont en train de se former à l’accessibilité.

Ces savoirs ruissellent en interne dans leurs équipes, chez nos clients, ce qui fait qu’il y a de plus en plus de monde qui s’y met. Cela rentre progressivement dans les méthodes de travail, les outils se mettent à jour et incluent des options et vérificateurs d’accessibilité natifs, etc. Les obligations légales y sont pour beaucoup, évidemment, il ne faut pas se leurrer. Mais du moment que ça avance, c’est l’essentiel.

Ce qui manque maintenant, c’est une prise en compte plus universelle de l’accessibilité dans les programmes des formations initiales. À ma connaissance, c’est rarement le cas, et il y a très peu de cursus initiaux qui préparent aux métiers du numérique qui sont dédiés à l’accessibilité et à la prise en compte du handicap.

Les filières en design me semblent paradoxalement encore assez hermétiques à ces problématiques. Le fait qu’il n’y ait souvent qu’une ou deux heures de cours sur l’accessibilité sur toute une année de cours est révélateur.

À côté de ça, les applications, notamment mobiles, mais aussi la domotique et le mobilier urbain numérique continuent à poser de nouvelles problématiques d’accessibilité, en termes d’usages et donc de conception. Donc on va voir se développer de nouveaux métiers, de nouvelles méthodes, etc. C‘est un secteur où tout évolue très vite, et qui recrute de plus en plus.

Bref, je pense que sur l’échelle du temps, nous n’en sommes encore qu’à la préhistoire de l’accessibilité.

(Alsacréations) Quels sont ton navigateur et tes extensions préférées pour analyser l’Accessibilité des pages web ?

Je fais moins d’audits aujourd’hui, mais dans l’équipe nous utilisons beaucoup Firefox, équipé de plusieurs extensions dédiées :

  • Stylus, pour appliquer des feuilles de styles dédiées à l’audit ;
  • Web Developer, qui permet de désactiver les CSS du site, afficher le contenu des attributs alt ou title, etc.
  • WCAG Contrast Checker, pour vérifier rapidement les contrastes ;
  • HeadingsMap, pour s’assurer que la hiérarchie des titres est correcte.

Il y aussi l’extension Assistant RGAA, qui aide à mettre en œuvre les tests de conformité au RGAA.

(Alsacréations) Est-ce qu’il y a quelque chose de neuf dans ta vie professionnelle ou dans le web que tu aimerais nous partager/dont tu aimerais faire la promo parce que ça te tient à cœur ? Des initiatives ? Des projets ?

Il y a quelques mois, j’ai découvert Fable, une plateforme qui permet de faire de la recherche utilisateurs et de réaliser des tests avec des personnes en situation de handicap.

La plateforme Fable

Si la crise sanitaire a provoqué un bond dans les outils de tests à distance, ces outils sont dans 99,9% des cas inaccessibles… On exclut de facto les utilisateurs et utilisatrices handicapées de ces processus-là. Cela provoque forcément des biais dans la méthodologie de recherche, en plus d’être problématique d’un point de vue éthique et politique.

De manière plus générale, les personnes en situation de handicap sont très marginalisées, voire totalement absentes des cycles de conception. Aussi, toute initiative qui consiste à les recruter et à les inclure enfin au sein de nos processus métier doit à mon sens être soutenue.

(Alsacréations) Ah, sinon, d’où provient ton pseudo Twitter ?

Mon pseudo « kReEsTaL » (qui se prononce « cristal ») provient de l’époque des canaux de discussion IRC, où c’était le nec plus ultra de transformer les mots en changeant la casse des lettres. Toute une époque…

(Alsacréations) Est-ce que les événements/conférences tels que Paris-Web (ou la KiwiParty) te manquent ?

Oui, beaucoup ! D’autant que je télétravaille à 100%. Les événements de ce type sont des bulles d’oxygène : ils m’aident à sortir de la routine, me permettent de rencontrer d’autres personnes passionnées, et de (re)découvrir beaucoup de choses. J’en ressors toujours très motivée. Et quand je donne moi-même une conférence, c’est l’occasion de faire des recherches approfondies sur des sujets qui m’intéressent.

(Alsacréations) Préfères-tu commander tes chaussures sur Amazon ou bien porter des sandales-chaussettes tous les jours ? (spoiler : les sandales-chaussettes c’est cool)

Les sandales, ça peut être des Crocs ? émoticône d'ange

Publié par Alsacreations.com

Astuce : Le coup de pouce accessibilité de CSS :focus-visible

$
0
0

Les éléments interactifs d'un document web (liens, champs et boutons en général) affichent un contour de couleur lorsqu'ils réagissent à l'événement :focus, c'est à dire au clic, au touch et à la navigation clavier (via la touche Tab par exemple).

Contre toute attente, ce contour n'est ni une bordure (border) ni une ombre portée (box-shadow), mais correspond à la propriété CSS outline.

Oui mais... "c'est moche"

L'ensemble des navigateurs appliquent par défaut un outline visible lors de l'événement :focus, et ce mécanisme a été conçu pour rendre ces éléments accessibles à tous, afin de se repérer lors d'une navigation au clavier.

Durant de nombreuses années nous étions tiraillés entre :

  • Les têtes grimaçantes de nos clients (et graphistes) souhaitant supprimer ce contour "disgracieux" autour des éléments cliquables.
  • La volonté de conserver ces éléments accessibles à tout le monde en évitant à tout prix le désastreux outline: none et tentant de convaincre nos clients (et graphistes) du bienfait de ce contour.

Complément d'information : l'indicateur visuel de focus bénéficie aux personnes ayant des troubles de la vision ou cognitifs.

:focus-visible pour contenter tout le monde

Le sélecteur focus-visible est un ajout relativement récent aux brouillons de spécifications CSS, mais qui n'en demeure pas moins compatible sur la majorité des navigateurs modernes.

Grâce à la pseudo-classe :focus-visible il est dorénavant possible de masquer le contour (focus) uniquement lors du clic ou d'un touch et tout en le préservant lors d'un focus au clavier.

  • .element:focus : sélecteur actif au clic, touch et navigation clavier
  • .element:focus-visible : sélecteur actif uniquement lors de la navigation clavier
  • .element:focus:not(:focus-visible) : sélecteur actif uniquement lors du clic et touch

L'exemple de code CSS ci-dessous permet de distinguer les types de contours selon les interactions possibles.

Notez que les anciens navigateurs (Internet Explorer) ainsi que Safari, qui ne reconnaissent pas :focus-visible se contenteront d'afficher leur :focus naturel :

@supports selector(div:focus-visible) {
  /* uniquement au clic/tap focus */
  .custom-button:focus:not(:focus-visible) {
    outline: 0;
  }
  /* uniquement au focus clavier */
  .custom-button:focus-visible {
    outline: 6px dashed hotpink;
  }
}

Voir et tester en ligne

illustration de :focus-visible lors d'un clic et d'une navigation clavier (tabulation)

Publié par Alsacreations.com

Tutoriel : Docker : découverte et environnement LAMP pour WordPress

$
0
0

Vous avez sûrement déjà entendu parler de Docker, si ce n'est déjà utilisé.

Docker peut considérablement vous simplifier la vie, sécuriser, harmoniser votre environnement de développement ou de production, ainsi que faciliter le travail en équipe... après l'avoir apprivoisé.

Docker Moby

Le plan de ce tutoriel :

  1. construire un environnement LAMP (Linux-Apache-Mysql-PHP) complet, identique ou proche de celui qui se retrouvera en production chez un hébergeur web
  2. comprendre le fonctionnement de Docker grâce à ce prétexte pour le perfectionner ou l'utiliser dans d'autres conditions

Docker meme I know kung fu

À la fin de cette page vous serez comme ça.

Contexte

Docker n'est pas une machine virtuelle ; c'est une technologie qui orchestre des applications en conteneurs (containerisées), embarquant chacune leurs dépendances, en fonctionnant de manière isolée tout en pouvant partager des ressources et communiquer.

Même si on peut le percevoir comme une autre recette accroissant la hauteur du burger full-stack, s'y intéresser vaut le détour.

🥝 Chez Alsacréations nous avons, après de multiples expérimentations, structuré notre propre environnement pour les projets WordPress autour de WordPlate + MySQL/MariaDB dans Docker. Cela nous permet d'avoir un modèle propre, organisé, testé, éprouvé, documenté, pour tout nouveau projet de site. #pub Si vous avez besoin d'une équipe à la pointe pour votre nouveau site ou votre refonte, contactez-nous ;) (PS : on aime aussi Vue et Nuxt).

Docker community

(Illustration : Docker.com)

Étapes

Lorsqu'on découvre Docker, le plus mystérieux n'est pas son fonctionnement interne. Il faut avant tout cerner la logique des quelques opérations de base :

  1. choisir une image (par exemple le serveur web Apache)
  2. compiler l'image (bonus : ajouter une petite configuration personnelle)
  3. exécuter le conteneur correspondant à cette image
  4. s'y connecter

Cette introduction est destinée à en présenter les concepts pour une prise en main rapide pour un cas simple : développer un site web (avec WordPress en option) sans avoir à installer et configurer Apache, PHP, MySQL sur sa machine ou une solution qui les regroupe telle que WAMP, MAMP, XAMPP, etc. et que l'on n'ose plus toucher ultérieurement "tant que ça marche".

Schéma Docker architecture

Le même principe est applicable à d'autres configurations et langages (Java, Python, Node, Redis, PostgreSQL, Nginx, MongoDB...)

Avantages

Identifions tout de suite les avantages majeurs de Docker :

  • la configuration étant définie par un fichier, elle peut être versionnée dans un projet et partagée entre toutes les personnes y participant
  • la configuration étant définie très précisément et de manière compacte, elle permet à toutes et tous d'obtenir exactement le même environnement, ce qui évite le fameux "chezmoicamarche.org"
  • cela permet de faire cohabiter plusieurs environnements radicalement différents et indépendants, à la demande, pour chaque projet (ex : on utilise LAMP, puis on éteint et on allume MEAN, puis on rallume LAMP)
  • on peut facilement changer d'application ou de version d'application (ex: de version de PHP, remplacer Mysql par MariaDB) sans avoir à tout réinstaller
  • toutes les personnes participant à un projet n'ont pas besoin de connaître Docker
  • c'est propre, c'est multi-plateforme, c'est le 21e siècle et quart

Meme Docker

Performance

Sans entrer dans les détails techniques, il ne s'agit pas d'émulation et il n'y a pas de comparaison possible avec VirtualBox ou VmWare. La performance de Docker selon le système utilisé est :

  • Optimale sur Linux car quasi-native en utilisant le kernel (noyau) et les ressources directes : performances extrêmement proches voire identiques à du natif (bare metal). C'est son usage principal pour un hébergement en production.
  • Moins optimale sur Windows et macOS car il y a invocation nécessaire d'un sous-système Linux, mais c'est amplement suffisant pour développer.

Si le poids des images (des applications) varie selon leur complexité, on reste loin d'une machine virtuelle complète : à partir de quelques Mo car pouvant être construites grâce à Alpine Linux, une distribution très légère (~5 Mo)... jusqu'à quelques centaines de Mo.

Fonctionnement

Docker est articulé autour de plusieurs concepts, qu'il n'est pas nécessaire de maîtriser pleinement pour commencer à s'en servir :

  • Docker Daemon : le chef d'orchestre de l'ombre
  • L'interface en ligne de commande (CLI) : pour piloter l'ensemble
  • L'interface graphique Docker Desktop : pour piloter de manière plus agréable visuellement (optionnel pour les puristes)
  • Les conteneurs (containers en VO) : vos applications (dans notre cas : un container Apache, un container PHP, un container MySQL, un container phpmyadmin)
  • Les images Docker : les modèles pour construire les conteneurs
  • Une API REST

Si vous installez Docker sur votre machine, vous retrouverez la commande docker dans votre Terminal (CLI) quoiqu'il arrive.

Toutes les opérations sont décrites en ligne de commande mais une fois vos containers en place vous pouvez les démarrer/arrêter en un clic avec l'interface graphique ou l'extension Visual Studio Code.

Qu'est-ce qu'une image Docker ?

Une image est un modèle d'application, préconfigurée, embarquée dans un mini-système Linux. Docker Hub liste toutes les images disponibles publiquement au téléchargement https://hub.docker.com/search?q=&type=image ; chacune étant nommée image:tag, avec tag représentant une version, ou une déclinaison particulière.

Schéma : étapes build et run

Exemples :

  • alpine:latest (dernière version disponible d'Alpine Linux)
  • alpine:3.13 (une version précise)
  • php:7.4-apache (PHP 7.4 tournant avec Apache)
  • php:8-fpm-alpine (PHP 8 en mode FPM au-dessus d'Alpine Linux)

L'image hello-world est une petite image de démonstration qui ne fait qu'afficher un message de bienvenue, pratique pour les premiers tests :

  • Récupérer une image existante se fait avec la commande pull, par exemple : docker pull hello-world:latest

  • Exécuter cette image dans un conteneur se fait avec run : docker run hello-world

Si on tente un run directement sans avoir pull ou sans avoir déjà une image en stock, le pull est déclenché automatiquement. On en profite.

Capture d'écran Docker run

Si on possède Docker Desktop (Windows, Mac) ou Dockstation (Linux), l'image apparaît dans le "stock" disponible en local.

Capture d'écran Docker : liste des images

L'image est notée comme étant in use (utilisée) par un un conteneur qui a aussi été créé pour l'occasion (avec un nom aléatoire) :

Capture d'écran Docker : container hello world

On peut aussi se renseigner en ligne de commande avec docker image ls

$ docker image ls
REPOSITORY    TAG       IMAGE ID       CREATED       SIZE
hello-world   latest    feb5d9fea6a5   2 weeks ago   13.3kB

À noter : lorsqu'une image a été téléchargée pour être exécutée, elle reste disponible en local. On peut nettoyer cette liste par la suite en se débarrassant des conteneurs associés : docker container prune (supprime les conteneurs inactifs) puis docker image rm hello-world.

Il y a toujours cette dualité : un conteneur ne peut exister l'image qui lui a donné naissance.

Qu'est-ce qu'un conteneur ?

Cette première étape est déjà bien motivante : on peut rapidement télécharger-exécuter une application avec les avantages de base de Docker. Lançons notre premier serveur web Apache avec PHP : docker run -p 80:80 php:7.4-apache (les noms disponibles peuvent être trouvés dans la section tags du hub Docker).

L'option -p 80:80 signifie que l'on fait correspondre le port http local à celui exposé par le conteneur (sinon on ne pourra s'y connecter, tout étant bloqué par défaut).

Capture d'écran Docker : run apache

Et maintenant ? En se rendant à l'adresse http://localhost/ il y a une réponse du serveur... avec une erreur du type 403 Forbidden car aucun fichier n'est encore prêt à être servi. Mais nous avons bien un serveur web Apache qui tourne, équipé de PHP (croyons-le sur parole) après une seule ligne de commande. 🎊

Il reste maintenant à peaufiner la configuration, déterminer l'accès aux bons fichiers (du site web) et compléter par MySQL dans le cadre de cette introduction.

Dockerfile ?

Il est possible de créer ses propres images, à partir de briques déjà existantes (telles que celle utilisée précédemment php:7.4-apache), complétées par des instructions de configuration.

Un Dockerfile est un fichier texte qui va dans un premier temps invoquer une image de base, avec l'instruction FROM puis dérouler d'autres commandes propres à Docker dont la liste est présentée ci-dessous. En voici un exemple relativement parlant (surtout si vous êtes familier de la ligne de commande Linux).

# Image de base
FROM php:7.4-apache
# Port ouvert (web = 80)
EXPOSE 80
# Dossier de travail pour les commandes suivantes
WORKDIR /var/www/html

# Installation initiale de modules apache et php
RUN a2enmod headers deflate expires rewrite
RUN docker-php-ext-install mysqli

# Redémarrage d'Apache pour prendre en compte ces modifications
RUN apachectl restart

L'image obtenue nous permettra d'avoir désormais en plus : des modules Apache (headers, deflate, expires, rewrite) et un module mysqli pour PHP.

Une dizaine d'instructions existent : https://docs.docker.com/engine/reference/builder/ entre autres :

  • FROM Définit l'image source (FROM php:7.4-cli).
  • ENV Définit une variable d'environnement à la compilation et à l'exécution (ENV MY_VAR=kiwi).
  • LABEL Ajoute une métadonnée à l'image.
  • WORKDIR Définit le dossier de travail pour les commandes suivantes (WORKDIR /var/www/html).
  • RUN Exécute une commande à la compilation (RUN echo Hello).
  • CMD Exécute une commande dans le conteneur (CMD [ "php", "./your-script.php" ]).
  • EXPOSE Informe Docker que le conteneur écoute sur un port (EXPOSE 80 ou EXPOSE 80/tcp).
  • COPY Copie des fichiers/répertoires depuis une source vers le filesystem de l'image. --chown modifie les droits à la volée.
  • ADD Ajoute des fichiers/répertoires (y compris depuis une URL ou une extraction tar) dans le filesystem de l'image (ADD test.txt dir/). --chown modifie les droits à la volée.
  • VOLUME Crée un point de montage (VOLUME /myvol).
  • ENTRYPOINT Configure un conteneur comme un exécutable.
  • USER Définit l'id utilisateur (UID) et groupe (GID) à utiliser lorsque l'image s'exécute et pour toute instruction suivante (RUN, CMD, ENTRYPOINT).
  • ARG Définit une variable que l'on peut passer au moment de la compilation avec --build-arg <varname>=<value>.

Compiler sa propre image Docker (apache/php)

Schéma Docker : build

La commande build compile une nouvelle image à partir de paramètres (et dans la plupart des cas d’une autre image racine) décrits par la “recette” Dockerfile : docker build -t monserveurweb . Le point final signifie que le fichier Dockerfile se trouve dans le dossier courant.

Capture d'écran Docker : build

L'image apparaît ensuite dans la liste des images disponibles, que ce soit en ligne de commande avec docker image list ou dans le client graphique Docker.

Capture d'écran Docker liste des images

Lancer le conteneur avec docker run

Schéma Docker : run

Pour lancer le conteneur correspondant, on utilisera docker run (ou l'interface graphique) à partir d’un nom d'image, par exemple docker run monserveurweb.

Capture d'écran Docker run container

(Il ne faut pas faire attention ici aux warnings, c'est logique et propre à Apache car on ne lui a pas indiqué de configuration particulière)

Pour éviter d'avoir un nom généré aléatoirement, on pourra le nommer docker run --name mon-serveur-web monserveurweb. et relancer cette commande autant de fois que nécessaire.

Capture d'écran Docker run name

On constate alors que ce nouveau couple image/conteneur :

  • sera facile à “installer” et opérationnel quelques secondes après le téléchargement
  • sera “isolé” des autres applications
  • pourra tout de même accéder au système de fichiers de l’hôte (= volumes), au réseau (exposer un port par exemple 80 pour le web, 3306 pour mysql, ou communiquer avec l’extérieur)
  • peut être achevé avec docker container stop mon-serveur-web et supprimé avec docker container rm mon-serveur-web lorsqu'on n'en a plus besoin, puis invoqué à nouveau plus tard, etc.

La commande docker run peut comporter un certain nombre de paramètres pour indiquer dans quelles conditions exécuter l’application (volumes de données, ports, droits, etc).

Ports

Chaque conteneur peut exposer (EXPOSE) des ports du conteneur vers l’extérieur (l’hôte) : -p 8000:80 signifie que le conteneur "publie" son port 80 "natif" vers le port 8000 et que le navigateur s'y connecter sur http://localhost:8000 s'il est sur la même machine. Dans notre exemple initial nous avions 80:80, si votre port 80 est déjà occupé par une autre application rien ne vous empêchera d'en choisir librement un autre. Chaque conteneur Apache invoqué pourra donc vivre sur son port 80 naturellement sans avoir besoin d'être configuré autrement.

Link (lien)

Un lien permet de lier, ou plutôt de rendre visibles des conteneurs entre eux, par des noms choisis, sur leurs réseaux respectifs : --link db:mysql (plus de détails à venir dans la partie compose).

Volumes

Un volume est un "partage" d’un dossier local (machine hôte = votre système Linux/Windows/Mac) avec le conteneur. Il peut aussi provenir d’un service distant (ssh, s3…). Ce n’est pas une copie, c’est une synchronisation réelle sur le disque. Conteneur et hôte peuvent lire et écrire dans cet emplacement : pratique pour conserver les données utiles hors du conteneur lorsqu'il est arrêté/détruit.

Exemples : -v C:\www\mysql:/var/lib/mysql (car dans un conteneur mysql ou mariadb, les données des bases sont par défaut dans /var/lib/mysql) ou -v /var/www/wordpress/public:/var/www/html (car dans un conteneur apache, les fichiers sont cherchés par défaut dans /var/www/html)

On place le chemin local à gauche du séparateur : et le chemin dans le conteneur à droite local:conteneur

Pour finir, une commande plus complète pourrait donner ceci :

docker run
-v c:\www\docker\wordpress:/var/www/html
-p 80:80
# -p 8000:80 (si on a besoin de changer le port)
# --link mysqlserver:db (on ne peut pas encore faire ça, voir ci-dessous)
monserveurweb
# ou php:7.4-apache

Cela signifie que les fichiers de votre site web (WordPress ou autre, en HTML statique ou PHP) devront être placés dans le chemin mentionné (ici c:\www\docker\wordpress) pour qu'Apache puisse les trouver et afficher la page d'installation.

WordPress dans Docker

Ajouter un container MySQL (ou MariaDB)

Nous avons le serveur web, il nous faut ajouter la base de données MySQL (ou MariaDB).

Meme Docker : we need to go deeper

On peut là aussi démarrer rapidement un serveur à partir de docker run et nous n'aurons pas besoin de Dockerfile car l'image de base fournie mysql/mysql-server par https://hub.docker.com/r/mysql/mysql-server/ ne sera pas modifiée.

Une petite différence avec l'image d'Apache : nous aurons tout de même besoin d'une variable d'environnement car MySQL nécessite d'être initialisé avec un mot de passe ; au choix :

  • -e MYSQL_ROOT_PASSWORD=azertybaïdjan (explicite, mot de passe "en dur")
  • -e MYSQL_RANDOM_ROOT_PASSWORD=yes (mot de passe aléatoirement généré la première fois : retrouvez-le dans les logs du container, attention il faut le noter car il disparaît ensuite)

Voici la commande complète :

docker run
--name mysqlserver
# --restart always (si on veut le redémarrer automatiquement)
-p 3306:3306
-v $PWD/mysql:/var/lib/mysql
-e MYSQL_ROOT_PASSWORD=azertybaïdjan
mysql/mysql-server

Ici le port 3306 standard est exposé vers l'extérieur, et $PWD signifie "dossier courant" : ce n'est pas forcément disponible sous Windows où il faudra spécifier le chemin complet (c:...)

Si on oublie le volume (option -v) alors les données seront stockées dans le conteneur et effacées avec lui. Attention Dino Danger.

Variables d'environnement

L'option -e passe une variable d’environnement (existe déjà nativement sous Windows, macOS, Linux) au conteneur, souvent pour le pré-configurer.

  • Pour le serveur MySQL : -e MYSQL_ROOT_PASSWORD=****** -e MYSQL_DATABASE=db -e MYSQL_USER=user

  • Pour phpmyadmin : -e UPLOAD_LIMIT=128M -e PMA_HOST=db

Ces variables sont données par la documentation officielle, exemple pour PhpMyAdmin : https://hub.docker.com/r/phpmyadmin/phpmyadmin/

Nous devons adapter la commande run du conteneur apache pour qu'il puisse utiliser un lien vers le conteneur de la base.

docker run --name mon-serveur-web -v c:\www\docker\wordpress:/var/www/html -p 80:80 --link mysqlserver:db monserveurweb

Le nom du serveur (host, hostname) à indiquer pour un script PHP souhaitant se connecter à MySQL, ou pour l'installation de WordPress, deviendra "db".

Ajouter un container phpmyadmin

Tout cela est bien beau, avec phpmyadmin pour administrer le serveur c'est encore mieux.

Lançons docker run --name pma --link mysqlserver:db -p 8080:80 -e PMA_HOST=db -e UPLOAD_LIMIT=128M phpmyadmin

Toutes les options ont déjà été décrites précédemment, la nouveauté est l'usage de --link qui va indiquer que lorsque phpmyadmin tentera de se connecter au serveur nommé "db" (précisé par PMA_HOST), cela pointera en réalité vers l'IP interne du conteneur nommé "mysqlserver".

Nous pouvons nous y connecter via http://localhost:8080/ comme on peut le deviner avec l'option -p utilisée.

Capture d'écran PhpMyAdmin

Bilan, aller plus loin avec docker-compose

Après cette mise en place, un constat : tous ces conteneurs sont bien pratiques, il nous a suffi de quelques d'instructions pour aboutir à un environnement complet, modulaire :

Capture d'écran Docker Desktop

Tous les ports ouverts sont indiqués, ainsi que par la commande docker container ls.

Une fois qu'on maîtrise ce principe, toutes les autres images Docker sont à portée de pull + run.

il nous faudrait ~~un anneau~~ une magie supplémentaire pour tous les gouverner... plutôt que de manipuler la ligne de commande pour chacun d'entre eux : cela fera l'objet d'un prochain tutoriel.

Volumes et principes à respecter

Un conteneur est surtout le code d’application, ne devrait pas détenir les données du projet (ex : la base SQL, les uploads).

Tant qu'on utilise les volumes qui partagent les fichiers du système hôte (votre machine) dans un dossier précis, on conservera les données utiles “en dehors” du conteneur s'il est détruit.

Un conteneur détruit pourra être remplacé par un autre (ex : une nouvelle version de l'application) tout en accédant au volume des données qui a été préservé. C'est une philosophie : séparer proprement, et se préparer au pire, permettent d'aborder les risques plus sereinement.

Vous pourrez par exemple

  • passer d'une version de gitlab à l'autre (gitlab-ee édition payante vers gitlab-ce édition gratuite)
  • remplacer mysql-server par mariadb, son "équivalent" beaucoup plus libre
  • tester vos fichiers web avec différentes versions de PHP et upgrader progressivement un vieux développement de PHP5 vers PHP7 puis PHP8

Alpine Linux

Un mot rapide sur Alpine Linux : c'est une distribution Linux minimaliste qui a été choisie pour la plupart des images Docker en raison de son poids. Si les quelques Mo qui servent de socle sont orientés pour des utilisateurs expérimentés, rien n'empêche de les étoffer par d'autres paquets.

Alpine Linux

Il n'y a aucune obligation à maîtriser Linux (ou Alpine Linux) pour se servir de Docker. Néanmoins pouvoir exécuter des commandes en accédant au shell du conteneur est pratique pour bien des opérations.

Attach shell

Il y a plusieurs façons d'exécuter un conteneur, la méthode classique est de le laisser tourner en permanence en tâche de fond et de s'y connecter sur un port, par exemple avec un navigateur web pour Apache, mais on peut aussi :

  • ouvrir un terminal interactif qui attend les commandes (ici on ouvre accès à un shell dans un container Linux avec -it)
docker run -it alpine /bin/sh
  • lui confier une commande précise : le conteneur se lance, exécute la commande et prend fin immédiatement (ici cela liste les fichiers du dossier courant avec la commande ls)
docker run alpine ls -l
  • exécuter un cron depuis la machine hôte pour lancer une tâche du conteneur (exemple : export MySQL pour backup)
docker exec -i mysqlserver mysqldump mabase -ulogin -ppassword | gzip >export.sql.gz

Ici mysqlserver est le nom du conteneur et mysqldump mabase -ulogin -ppassword est la commande qui s'exécute dans ce conteneur.

Visual Studio Code

L'extension Docker est fortement recommandée pour se connecter au service Docker (Engine) de la machine et administrer les images et conteneurs, mais aussi, entre autres :

  • attacher un shell : ouvre un nouvel onglet de Terminal
  • attacher un shell dans Visual Studio Code : ouvre une nouvelle fenêtre permettant de développer “dans” le conteneur, c'est-à-dire accéder à l'arborescence du système de fichiers interne. C'est bien pratique quand on l'utilise régulièrement et cela peut même changer totalement la façon de travailler.
  • voir les logs : permet notamment de voir les requêtes HTTP d'un serveur web, ou la procédure de lancement de MySQL

À défaut d'utiliser Docker Desktop, cette extension accomplit les tâches les plus courantes, sans quitter l'éditeur de code.

Capture d'écran Docker dans Visual Studio Code

Astuces

Sous Linux, pour synchroniser l’heure/fuseau horaire de l’hôte à celui du conteneur (sinon il peut y avoir un décalage de 2h en Europe), on peut ajouter un volume -v /etc/localtime:/etc/localtime:ro (ici ro signifie read-only c'est-à-dire lecture seule)

Si le shell par défaut est trop limité, tenter d’exécuter bash s'il est déjà inclus dans l'image, ou on peut l'installer avec un petit apt update && apt install bash etc. Même chose pour l'éditeur vim si vous savez comment en sortir.

Commandes Docker utiles

  • Compiler un Dockerfile dans le dossier courant pour créer une image docker build -t <nomimage:tag> .
  • Compiler une image en conteneur et l'exécuter docker run --name <nomducontainer> <nomimage:tag> (+ voir autres options)
  • Démarrer ou arrêter un container s'il est déjà existant : docker start <nomducontainer> (ou stop)
  • Exécuter une commande dans le container : docker container exec -it <nomducontainer> <lacommande> (par exemple bash pour ouvrir un shell)
  • Lister tous les containers : docker container ls ou docker ps -a
  • Lister toutes les images : docker image ls
  • Supprimer un container : docker container rm <nomducontainer>
  • Supprimer une image : docker image rm <nomdelimage>
  • Utiliser le chemin courant dans une commande docker : $PWD
  • Créer un network : docker network create my-custom-net et l'utiliser au run : --network=my-custom-net

Inspection

  • Statistiques : docker stats
  • Logs : docker logs <nomducontainer>
  • Ports ouverts : docker port <nomducontainer>
  • Processus : docker top <nomducontainer>
  • Différences appliquées : docker diff <nomducontainer>

Options pour Docker run

  • -d : permet de détacher l'exécution du container du terminal courant
  • -p : permet de lier un port (local:container -p 8080:80)
  • -u : permet de spécifier l'utilisateur+groupe d'exécution
  • -v : permet de déclarer un volume (local:container -v /var/path/to/mydata/mysql:/var/lib/mysql)
  • -e : permet de passer/spécifier une variable d'environnement
  • -i : permet d'avoir un terminal interactif (stdin), par exemple pour entrer un mot de passe au prompt (souvent combiné avec t)
  • -t : alloue un pseudo-tty
  • --link : permet de "lier" un hostname d'un container à un autre (par exemple un serveur mysql dans un 1er container mysqlserver devient --link mysqlserver:db dans le 2e, on utilise alors db)
  • --restart always : indique au service Docker de redémarrer le container au boot et de le maintenir actif si Docker est lui-même relancé

Astuces :

  • ajouter -m 256m pour limiter la mémoire à 256 Mo
  • ajouter--read-only pour que le système de fichiers soit en lecture seule
  • suffixer un volume par:ro pour qu'il soit en lecture seule

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com

Article : Préparer un thème WordPress pour l'internationalisation

$
0
0

Que vous prévoyiez une dimension internationale dès la conception de votre site web ou que vous rencontriez ce besoin plus tard dans son cycle de vie, il est toujours bon de faire le nécessaire à l'internationalisation (couramment abrégée i18n) dès le départ.

Croyez-en mon expérience, personne ne veut être pris de court et repasser sur l'intégralité des fichiers d'un site, plusieurs semaines ou années après sa création, pour ajouter le support d'autres langues.

Nous n'aborderons ici que la méthode officielle pour un thème WordPress et ne parlerons pas d'extensions dédiées à ce besoin, comme Loco Translate.

Trève de digressions, c'est parti !

Bien concevoir son thème

Partons du principe que vous n'achetez pas votre thème sur une boutique en ligne, mais que vous le développiez vous-même (les thèmes premium sont très souvent "translation-ready" et s'ils ne le sont pas, fuyez !).

Voici un morceau de code très sommaire permettant d'afficher une liste d'articles et que l'on peut retrouver dans beaucoup de thèmes.

<h2>Actualités</h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">Voir l'article</a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">Voir toutes les actualités</a>

Ici, tous les textes statiques sont écrits directement dans le fichier. Résultat, impossible de les traduire.

Voyons maintenant ce que ça donne si notre thème est correctement développé.

<h2><?php echo __( 'Actualités', 'textdomain' ); ?></h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">
        <?php echo __( 'Voir l\'article', 'textdomain' ); ?>
      </a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">
  <?php echo __( 'Voir toutes les actualités', 'textdomain' ); ?>
</a>

Et voilà ! Avec seulement quelques octets de plus, cette partie du site est maintenant prête pour la traduction ! 😃

Et ça change quoi ? 🤔

Pas grand chose, si ce n'est que l'on utilise désormais les fonctions de gettext, la bibliothèque de fonctions de traduction intégrée à WordPress et originaire du système d'exploitation GNU.

On notera l'utilisation de la fonction __() pour afficher les textes, mais c'est loin d'être la seule ! Gestion des pluriels, échappement des textes pour affichage dans des attributs HTML ou encore _e() pour économiser les appels à echo. À chaque usage peut correspondre une fonction, mais il est aussi possible de n'utiliser que la fonction de base __() et de la combiner avec d'autres fonctions PHP comme on peut le faire habituellement.

Notez également le second paramètre ici appelé textdomain.
Il est très important et doit être unique pour votre thème, car il définit le domaine de nos traductions à venir. Ainsi, __( 'Mon texte à traduire', 'domaine1' ) et __( 'Mon texte à traduire', 'domaine2' ) sont 2 chaînes de caractères complètement différentes, même si on ne dirait pas au premier abord.
Choisissez un nom de domaine suffisamment unique pour votre thème sous peine de rencontrer de potentiels conflits avec des extensions installées sur votre site.

Et maintenant, comment je fais pour afficher une autre langue ?

C'est là que la marche à suivre se complique un peu et sort du cadre confortable de WordPress.

Il existe 3 types de fichiers dédiés à la traduction : .pot, .po et .mo et chacun à son rôle.

L'appel à un ami : .pot

Tout d'abord, il faut extraire toutes les chaines de caractères dans un catalogue qui servira de base à toutes les futures traductions, peu importe la langue cible. Ça tombe bien, c'est exactement le rôle des fichiers .pot !

Plusieurs outils existent pour le faire, dont le plus connu est PoEdit. Cependant, la génération de catalogue est, de mon point de vue, plus facile et directe avec un autre logiciel, EazyPo, que nous utiliserons dans la suite de ce tutoriel.

Une fois EazyPo téléchargé (pas besoin d'installation, c'est un logiciel portable), lancez-le pour vous retrouver face à une interface des plus conviviales.

le logiciel EazyPo
Pas de panique, ce n'est pas si compliqué

Cliquez ensuite sur "Extract from source code" ou "File" puis "New from source code files" et sélectionnez le dossier de votre thème. Assurez-vous que la liste des fichiers est correcte si besoin.

L'outil d'extraction de chaînes de caractères

Enfin, cliquez sur "Build" pour pouvoir choisir la destination et le nom du fichier qui sera généré.

Note : Une convention commune dans l'écosystème WordPress et d'utiliser le nom du thème à la fois pour le domaine et pour le nom des fichiers de traduction.

Une fois ceci fait, il ne vous reste plus qu'à cliquer sur le gros bouton rouge "Execute command" pour créer le fichier.

Le générateur de fichier .pot

🎉TADA !🎉

La génération terminée, le logiciel ouvre votre catalogue de traductions.

Un catalogue de traductions

Vous pouvez maintenant fermer ce fichier, nous n'avons plus besoin de le toucher.

Solution alternative : si vous êtes un utilisateur avancé, vous connaissez peut-être WP-CLI, l'interface en ligne de commande de WordPress. La commande make-pot permet de générer un fichier .pot en se positionnant dans le dossier de votre thème ou de votre extension (voir la documentation de make-pot).

Les fichiers .po et .mo

Maintenant que votre fichier .pot est prêt, vous allez pouvoir générer les fichiers nécessaires pour chaque langue que vous souhaitez ajouter à votre site.

Sans rentrer dans les détails :

  • les fichiers .po pour les traducteurs/traductrices humains
  • les fichiers binaires .mo à destination de la machine.

Pour servir d'exemple, nous allons créer un nouveau fichier pour traduire notre thème dans la langue de Shakespeare.

Pour cela, cliquez sur "File" puis "New from file".

Fenêtre de création de nouveau catalogue

Sélectionnez votre catalogue fraichement créé puis à l'étape suivante, choisissez de créer un fichier .po. Enfin, choisissez l'emplacement de création de votre fichier et son nom.

Notez que le nommage de vos fichiers est important. En plus d'avoir le même nom que votre fichier .pot, les fichiers .po doivent être suffixés de la locale de traduction. Ainsi, le fichier dédié à la langue anglaise doit être nommé nom-de-mon-theme-en_GB.po (ou nom-de-mon-theme-en_US.po si vous préférez l'anglais américain).

Une fois votre fichier créé, il ne vous reste plus qu'à le remplir ! 😉

Pour mener à bien cette partie fastidieuse, sélectionnez les chaînes de caractères une par une et cliquez dans le cadre en bas à droite pour saisir votre traduction. En fonction de la complexité de votre thème, on ne va pas se mentir, cela peut prendre plus ou moins de temps (pensez à sauvegarder régulièrement !).

Charger un fichier de traduction

Nous y voilà, toutes vos traductions sont prêtes et il ne vous reste plus qu'à faire en sorte que WordPress charge le bon fichier.

Heureusement, le CMS dispose de plusieurs fonctions pour cette tâche et celle qui nous intéresse ici est load_theme_textdomain (voir la documentation).

Ajoutez ce morceau de code dans le fichier functions.php de votre thème.

/**
 * Chargement des fichiers de traduction
 */
function load_theme_translations(){
  load_theme_textdomain( 'textdomain', get_template_directory() . '/lang' );
}
add_action( 'after_setup_theme', 'load_theme_translations' );

Le premier paramètre est le domaine que vous avez choisi. Le second est l'URL vers le dossier qui contient vos fichiers de traduction (ici, on suppose que votre thème contient un dossier /lang).

Note : Les différentes fonctions de chargement de fichiers de traductions tenteront d'abord de localiser vos fichiers dans le dossier /languages de WordPress, donc si vous le voulez, vous pouvez les y mettre directement.

Conclusion

Si préparer son thème ne demande que quelques efforts supplémentaires lors du développement, la création des fichiers de traductions peut s'avérer assez laborieuse surtout si c'est quelque chose que l'on rencontre peu dans son quotidien.

Toujours est-il que l'on ne saurait que trop vous recommander de penser à l'internationalisation de vos développements de thèmes ou d'extensions WordPress dès leur conception, sans quoi vous pourriez perdre un temps non négligeable en le faisant a posteriori, si c'est un besoin qui n'apparait que tardivement dans un projet.

Pour approfondir le sujet et connaitre, par exemple, la marche à suivre pour proposer des traductions pour des thèmes ou extensions, l'équipe de traduction de WordPress met à disposition ce guide.

C'est bien pour les thèmes, mais je développe des extensions, moi ! Comment on fait ?

Le processus reste relativement similaire, mais pour éviter d'allonger un article déjà bien complet, nous ne rentrerons pas dans les détails ici. Toutefois, si vous souhaitez un nouveau tutoriel dédié, faites-le nous savoir !

En attendant, vous pouvez visiter la documentation officielle proposée par WordPress.

Illustration par vectorjuice

Publié par Alsacreations.com


Outil : Octopus

$
0
0

Octopus est un outil en ligne permettant de créer très simplement l'arborescence de vos projets web… mais pas que !

Pour optimiser les phases de définition et de conception de projets web, et après avoir testé de nombreux outils équivalents, nous avons jeté notre dévolu sur Octopus pour bien des raisons :

  • Le rendu est très visuel et attractif
  • La prise en main est aisée
  • Les fonctionnalités proposées sont diverses :
    • couleurs illimitées et légendes personnalisées (attention cependant de ne pas en abuser),
    • bibliothèque de zonings pour les sections de pages les plus courantes, et construction en quelques clics seulement,
    • liaison entre des sections et leurs pages de destination,
    • partage rapide sans nécessité de créer un compte, avec plusieurs droits possibles (lecture ou écriture),
    • extraction du fichier dans plusieurs formats courants ,
    • placement libre de post-it pour inclure des penses-bêtes rapides.

Et bien plus encore ! Découvrez toutes les fonctionnalités proposées sur le site d'Octopus.

Octopus vous aide à y voir plus clair

Octopus propose une version gratuite satisfaisante pour tester l'outil globalement et rapidement ceci dit, pour un usage professionnel et quotidien, les versions payantes apportent leur lot d'évolutions supplémentaires et indispensables (selon nous). À vous de voir, selon vos besoins et objectifs.

Et le cahier des charges dans tout ça ?

Octopus est un très bon outil pour guider la phase de définition d'un projet web ceci dit, un projet ne se résume pas uniquement à ses besoins fonctionnels.

Il est également primordial de consigner dans un document de référence (coucou le cahier des charges) :

  • le contexte du projet,
  • les objectifs qu'il doit servir,
  • les utilisateurs qu'il doit satisfaire,
  • les contraintes qu'il doit respecter...

...et bien d'autres choses, que nous aborderons dans un prochain article consacré ;)

Besoin d'aide pour concevoir votre projet web ?

Et si malgré tout, vous préférez nous confier la réalisation de votre projet web, de A à Z ou pour une étape en particulier comme la définition et la conception (tiens donc) : contactez-nous sans hésiter ! Notre équipe de choc sera plus que ravie de vous guider vers la réussite de votre projet web, quelqu'il soit !

Publié par Alsacreations.com

Tutoriel : Docker compose

$
0
0

Ce tuto est une suite à la première prise en main de Docker, qui met en place les notions d'image, de conteneur ainsi que les paramètres pour lancer un conteneur avec docker run...

Docker compose est une syntaxe plus évoluée qui va associer plusieurs conteneurs, ainsi que les paramètres déjà vus dans l'introduction à Docker, pour composer tout un système. Cela apporte cohérence et confort, modularité. Il sera aisé de manipuler plusieurs petits conteneurs plutôt qu'un seul grand "monolithique". L'invocation de tous les conteneurs se fera en une seule commande : docker compose up.

C'est le niveau pro-gamer qui demande d'avoir déjà compris les notions précédentes (ce qu'est une image, un conteneur, quels sont les paramètres principaux).

Docker compose

Comme bien souvent le plus simple pour cerner rapidement le sujet est de se baser sur un exemple concret, et de poursuivre sur notre environnement "LAMP" pour faire tourner WordPress en conservant les paramètres étudiés dans le tutoriel précédent.

Les ingrédients de la recette :

  • Un fichier docker-compose.yml qui va faire appel à
    • Des images prêtes à l'emploi
      • mariadb (ou mysql)
      • phpmyadmin
    • Un fichier Dockerfile pour construire une image sur-mesure
      • php-apache
      • Avec copie d'un fichier Docker-vhost.conf pour injection dans la configuration d'Apache

Visuellement, les conteneurs vont communiquer entre eux par le port 3306 pour accéder à mysql, et nous pourrons nous connecter directement en http sur le port 8080 pour phpmyadmin et 80 pour Apache. Chaque conteneur a son port d'écoute pour éviter les conflits.

Docker compose architecture

Docker-compose.yml

Le fichier docker-compose.yml au format YAML “décrit” tous les docker run possibles avec images, noms, volumes, liens, ports, variables d’environnements, réseaux... Il n'est dès lors plus nécessaire de mémoriser et introduire tous ces paramètres en ligne de commande : ils sont tous inventoriés en liste dans ce fichier unique. Si vous maîtrisez vos images, conteneurs et paramètres d'exécution, vous pouvez facilement rédiger ce fichier.

En reprenant les conteneurs abordés dans le tutoriel précédent, le fichier docker compose équivalent serait alors :

version: '3'

services:
  web:
    image: php7.4-apache:projet
    container_name: projet-php-apache
    ports:
      # local:container
      - 1337:80
    environment: 
      - APACHE_DOCUMENT_ROOT=/var/www/html
      - COMPOSER_ALLOW_SUPERUSER=1
    volumes:
      # Volume stockant les fichiers web du projet
      - ./:/var/www/html
    build:
      context: .
      dockerfile: Dockerfile
    depends_on:
      - db
    links:
      # Lien vers le conteneur "db" (déclaré ci-après)
      - db:db

  pma:
    image: phpmyadmin
    container_name: projet-phpmyadmin
    environment:
      # https://docs.phpmyadmin.net/en/latest/setup.html#docker-environment-variables
      PMA_HOST: db
      PMA_PORT: 3306
      UPLOAD_LIMIT: 1024M
    ports:
      - 8080:80
    links:
      - db:db

  db:
    image: mariadb:latest
    container_name: projet-mysql
    ports:
      - 3306:3306
    volumes:
      # Volume de la base de données
      - ./db-data:/var/lib/mysql
    environment:
      MYSQL_DATABASE: wordpress
      # MYSQL_ROOT_PASSWORD: XXXXXXXXX
      MYSQL_RANDOM_ROOT_PASSWORD: "yes"
      # MARIADB_RANDOM_ROOT_PASSWORD: "yes"

La nomenclature est extrêmement proche de ce qu'on utilise déjà dans les commandes docker run et très parlante.

  • image : image Docker à utiliser
  • container_name : nom du conteneur qui va apparaître dans la liste (plutôt que de générer un nom au hasard)
  • environment : variables d'environnement à passer au conteneur
  • ports : correspondance des ports ouverts
  • volumes : volumes à créer entre la machine hôte et le conteneur
  • build : si l'image doit être construite à partir d'un fichier Dockerfile
  • depends_on : si le conteneur dépend d'un autre pour son exécution (ex : une base de données)
  • links : liens entre services (l'un "verra" l'autre dans son réseau avec son nom propre), on peut utiliser service:alias (ici db:db) ou juste service (ici db) puisqu'il s'agit du même nom

La variable d'environnement MYSQL_RANDOM_ROOT_PASSWORD à yes est très importante à noter ici : elle signifie que le serveur MySQL ou MariaDB ne sera pas configuré avec un mot de passe root spécifié dans le fichier, mais avec un mot de passe généré aléatoirement. Il va falloir aller le chercher dans les logs à la ligne GENERATED ROOT PASSWORD: XXXXXX. Notez-le précieusement, car il ne sera plus dévoilé par la suite.

Notez aussi le volume db-data qui fera correspondre les contenus de la base à un dossier local. Cela permettra - sans obligation - de "préserver" les tables sur la machine hôte plutôt que de les "perdre" dans le conteneur s'il se voit détruit.


Dockerfile

Il nous faut également le fichier Dockerfile associé (dans le même dossier) - voir le tutoriel précédent sur Docker pour les explications.

# PHP
FROM php:7.4-apache

# Modules apache
RUN a2enmod headers deflate expires rewrite
EXPOSE 80

# Composer
ENV COMPOSER_ALLOW_SUPERUSER=1
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
# RUN composer --version

# Paquets nécessaires à l'installation de WordPress/WordPlate + utiles
RUN apt-get update && apt-get install -y zip unzip vim

# Extensions MySQL pour PHP/WordPress
RUN docker-php-ext-install mysqli pdo pdo_mysql

# Imagick pour WordPress (https://webapplicationconsultant.com/docker/how-to-install-imagick-in-php-docker/)
RUN apt-get install -y libmagickwand-dev --no-install-recommends && rm -rf /var/lib/apt/lists/*
RUN printf "\n" | pecl install imagick
RUN docker-php-ext-enable imagick

# Virtualhost
COPY Docker-vhost.conf /etc/apache2/sites-enabled/docker-vhost-wp.conf

# Redémarrage de Apache pour tenir compte des modifications + modules installés
RUN service apache2 restart

# Dossier de travail
WORKDIR /var/www/html/app

Docker-vhost.conf

Et pour finir, il nous faut le fichier Docker-vhost.conf pour Apache qui sera copié par la commande COPY du fichier Dockerfile. Celui-ci nous permet d'injecter dans la configuration du serveur web un Virtual Host faisant pointer le fameux "localhost" vers le dossier de travail /app de notre projet. Cela évite d'avoir à modifier la configuration d'Apache fournie qui pointe par défaut à la racine /var/www/html/.

<VirtualHost *:80>
  ServerName localhost
  ServerAdmin webmaster@localhost
  # Astuce permettant de lier n'importe quelle IP locale (ex : 127.0.0.1, 172.25.0.1 à ce vhost)
  # Pour que browsersync/webpack puissent fonctionner en proxy depuis l'hôte et qu'Apache y réponde
  ServerAlias *
  # Dossier racine web (à adapter selon les besoins, ajouter /public pour WordPlate)
  DocumentRoot /var/www/html/app
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  <Directory "/var/www/html/app">
    # Permet l'usage de htaccess
    AllowOverride All
  </Directory>
</VirtualHost>

Docker compose up

👉 Une fois ces 3 fichiers prêts dans le même dossier, il suffira d'une seule commande pour construire le tout :

docker compose up -p monsuperprojet

En ajoutant -d on reprend la main dans le shell. Si le nom n'est pas spécifié avec -p, alors le nom du dossier parent sera utilisé.

Résultat dans la liste des containers de Docker Desktop :

Docker compose up

Simple n'est-ce pas (après tout le reste...).

La structure de fichiers générée ressemblera à celle-ci :

Docker arborescence des fichiers

(Le fichier index.html n'est pas présent par défaut, vous pouvez en ajouter un vide pour faire des tests dans ce qui correspond à la racine du serveur web - DocumentRoot)

En profiter

Vous pouvez dès lors adopter 2 méthodes pour installer le CMS : classique et via composer.

WordPress classique

1️⃣ Soit télécharger WordPress, décompresser et copier les fichiers dans le volume établi (à savoir le dossier /app ici).

WordPlate via composer

2️⃣ Soit laisser composer opérer, car il a été prévu dans le fichier Dockerfile. En ouvrant un shell (CLI) dans le conteneur php-apache cela devrait vous mener directement dans /var/www/html/app puis il suffira d'exécuter :

composer create-project --prefer-dist wordplate/wordplate .

⚠ Attention : ne pas oublier le . final pour préciser que l'installation doit se faire dans le dossier courant.

Dans ce cas de figure avec WordPlate, il faudra :

  • modifier le chemin dans Docker-vhost.conf qui deviendra DocumentRoot /var/www/html/app/public et détruire (delete) + relancer (docker compose up) car la racine du site devient alors le dossier "public".
  • modifier le fichier d'environnement app/.env avec les bons paramètres :
DB_HOST=db
DB_NAME=wordplate
DB_USER=root
DB_PASSWORD=XXXXXXXXX
DB_TABLE_PREFIX=wp_

En passant, WordPlate est un wrapper construit autour de WordPress qui permet de le structurer plus proprement et d'utiliser un fichier .env, Laravel Mix pour compiler des fichiers CSS/JS avec webpack, WordPress Packagist pour gérer thèmes et plugins, etc.

Pour finir :

  • Vous connecter au conteneur du serveur web avec le navigateur (ici ce sera http://localhost:1337/) pour exécuter WordPress et les étapes d'installation, en spécifiant les mêmes identifiants de base de données.
  • Vous connecter à phpmyadmin s'il y a besoin (ici ce sera http://localhost:8080/) avec les identifiants root/le mot de passe root généré que vous avez noté à avec soin bien sûr.

WordPress installation

✅ Le tour est joué. On peut réutiliser cette recette pour d'autres projets, ou déployer la même en production pour reproduire le même environnement. C'est très agréable plutôt que d'avoir à configurer manuellement ces serveurs et outils sur multiples environnements, avec des versions figées.

Docker Desktop

Avec Docker Desktop, les manipulations sont facilitées, pour chaque conteneur un ensemble d'actions est proposé (start, stop, restart, delete) mais aussi...

L'ouverture dans le navigateur (protocole http) ; on peut également s'en sortir tout seul en observant le port qui est indiqué (visible avec docker container list)

Docker open in browser

L'ouverture d'un shell attaché au conteneur avec CLI, ce qui peut se révéler fort utile pour examiner ce qui s'y passe, changer temporairement la configuration, effectuer des manipulations variées en ligne de commande, lancer des tâches npm, composer, etc.

Docker CLI

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com

Article : Traduire vos extensions WordPress

$
0
0

Pour ce dernier article de 2021 (et pour ne pas vous prendre trop de temps pendant les préparatifs des fêtes de fin d'année 😉), voici un complément au sujet précédent, qui portera cette fois sur l'internationalisation des extensions dans l'écosystème de WordPress.

⚠ Si vous ne l'avez pas déjà fait, nous vous invitons vraiment à lire l'article Préparer un thème WordPress pour l'internationalisation. Les outils et concepts sont les mêmes pour les thèmes et les extensions et nous ne les réexpliquerons pas ici.

Les extensions indispensables

On commence directement avec un petit cas particulier.

Utilisez-vous les mu-plugins (Must-Use plugins) ?

Ces extensions un peu spéciales sont toujours activées et ne peuvent pas être désactivées autrement qu'en supprimant leurs fichiers sources (vous pouvez les retrouver dans la section "Indispensables" de l'administration des extensions). Pratique pour éviter les erreurs humaines, comme une suppression maladroite par exemple... 🤫

Sans rentrer dans les détails, il est tout à fait possible d'y inclure des textes et il faut donc penser à les rendre traduisibles. Pour se faire, utilisez la fonction load_muplugin_textdomain de la manière suivante :

/**
 * Chargement des fichiers de traductions dans le dossier /lang
 */
function load_translations() {
  load_muplugin_textdomain( 'textdomain', 'lang' );
}
add_action( 'muplugins_loaded', 'load_translations' );

Ici, on part du principe qu'un dossier /lang a été rajouté au dossier mu-plugins de WordPress.

On utilise le hook muplugins_loaded pour que les traductions soient chargées le plus tard possible, de la même manière que l'on utilise after_setup_theme pour charger les fichiers de traductions d'un thème.

Si vous voulez en apprendre davantage sur les mu-plugins, consultez l'article Connaissez-vous les MU Plugins de WordPress ? qui explique les bases et donne des exemples concrets de cas d'utilisation.

Et pour les extensions plus classiques ?

Avant de nous lancer dans le coeur du sujet, commençons par quelques rappels de conventions et conseils de base.

1/ Toutes les chaines de caractères doivent être accompagnées d'un domaine de traductions.

Seul le coeur de WordPress utilise des traductions du type __( 'Settings' ) et même s'il peut être tentant de réutiliser ces chaines si votre extension les partage, il n'est pas impossible qu'une une mise à jour les change, rendant ainsi votre chaîne intraduisble.

2/ Les textes à traduire doivent avoir un sens et un contexte.

Évitez de faire de la concaténation de mots et préférez des phrases entières.

3/ N'utilisez pas de variables directement dans des appels à __().

Si besoin d'insérer du HTML ou des données, entourez vos fonctions de printf ou sprintf pour pouvoir utiliser des placeholders selon ce genre de modèle

sprintf(
  __( 'Bonjour %s', 'textdomain' ),
  $username
);

4/ N'oubliez pas de renseigner les commentaires d'entêtes de votre extension !

/*
 * Plugin Name: Mon extension à moi !
 * Author: (La loi) C'est moi !
 * Text Domain: text-domain
 * Domain Path: /lang
 */

Les 2 informations qui nous intéressent ici sont Text Domain et Domain Path (notez bien les majuscules, elles sont importantes).
Elles permettent respectivement d'indiquer à WordPress votre domaine de traduction ainsi que l'emplacement de vos fichiers de traductions et ce, même si votre extension est désactivée !

Ce ne sont évidemment pas les seuls points de vigilance, mais s'attarder davantage ici ne ferait que paraphraser la documentation officielle, qui est déjà bien assez complète.

Maintenant que ces quelques détails ont été abordés, nous pouvons enfin passer au chargement de vos précieuses traductions ! 😉 L'avantage est que la procédure reste exactement la même. Seule la fonction utilisée change.

/**
 * Chargement des fichiers de traductions dans le dossier /lang
 */
function load_translations() {
  load_plugin_textdomain( 'textdomain', false, dirname( plugin_basename( __FILE__ ) ) . '/lang' );
}
add_action( 'init', 'load_translations' );

On évitera d'utiliser le hook plugins_loaded, qui arrive trop tôt dans le cycle de vie de WordPress et pourrait créer des conflits avec les traitements appliqués par d'autres scripts.

Note : Depuis WordPress 4.6, load_muplugin_textdomain et load_plugin_textdomain tenteront d'abord de charger les fichiers de traductions depuis le dossier /languages de WordPress, donc si vous le voulez, vous pouvez les y mettre directement.

Utiliser des traductions dans des fichiers JavaScript

Vous savez dorénavant comment utiliser vos fichiers .po et .mo dans vos extensions. Il ne nous reste donc qu'un dernier sujet à couvrir : comment utiliser vos traductions dans vos fichiers JS.

Fort heureusement, WordPress met à disposition une fonction à cet effet répondant au doux nom de wp_localize_script et dont les 3 paramètres (tous requis) sont les suivants :

  1. $handle, qui correspond au nom donné au script auquel vous souhaitez transmettre des chaines de caractères (le "nom" du script fait référence au premier paramètre des fonctions wp_register_script ou wp_enqueue_script).
  2. $object_name. Tout simplement le nom de la variable JS qui sera injectée par WordPress.
  3. $l10n, un tableau clé/valeur des traductions que vous voulez rendre disponibles dans votre fichier JS.

Voici un exemple de code pour un script nommé script-kiwi auquel on voudrait passer plusieurs traductions.

/**
 * Chargement des scripts de l'extension
 */
function plugin_scripts() {
  wp_enqueue_script( 'script-kiwi', ... );
  wp_localize_script( 'script-kiwi', 'mon_super_objet',
    array( 
      'chaine_1' => __( 'Ma super traduction', 'textdomain' ),
      'chaine_2' => __( 'Mon autre super traduction', 'textdomain' ),
      'chaine_3' => __( 'Une traduction encore mieux que les autres', 'textdomain' ),
    )
  );
}
add_action( 'wp_enqueue_scripts', 'plugin_scripts' );

Et voilà ! 🎉

Dorénavant, WordPress mettra à disposition une variable globale mon_super_objet que l'on peut utiliser comme un objet JavaScript standard pour en extraire les propriétés. Ainsi, mon_super_objet.chaine_1 affichera la chaine "Ma super traduction" dans la langue souhaitée.

Cette fonction ne peut être utilisée que si votre script a déjà été ajouté via wp_register_script ou wp_enqueue_script.

Un dernier pour la route

Le dernier point de vigilance auquel prêter attention est la mise à jour de vos propres extensions.

Il est assez fréquent de faire évoluer ses extensions pour y inclure de nouvelles fonctionnalités, refactoriser du code qui commence à se faire vieux ou plus simplement rajouter des commentaires pour expliquer à quoi sert la fonction doEverything() de votre extension maison.

Tous ces exemples ont en commun que l'emplacement physique de vos chaines de traductions (les lignes dans votre fichier) peut ne plus être le même en passant de la version X à la version Y et si vous ne régénérez pas vos fichiers .pot, .po et .mo, vous courrez droit à la catastrophe !

Un exemple bien senti venant directement du fichier .po de Polylang.

#: modules/wizard/view-wizard-step-last.php:26
#: modules/wizard/view-wizard-step-last.php:44
msgid "Read documentation"
msgstr "Lire la documentation"

Les nombres en fin de ligne correspondent à la ligne du fichier dans lequel on retrouve la chaine en question. A partir de là, il est facile de comprendre que si une chaine bouge, elle ne sera plus reconnue, ce qui serait dommage après tous ces efforts.

Pour cela, une règle simple : si une chaine change de ligne, il faut le refléter dans vos fichiers de traductions.

Conclusion

Comme promis, rien de bien méchant si vous avez survécu à la lecture du premier article.

Maintenant, vous n'avez plus aucune excuse pour ne pas internationaliser tout ce qui bouge dans vos développements WordPress !

Bonnes fêtes de fin d'année à toutes et tous ! 🎅🎄

Publié par Alsacreations.com

Actualité : Alsacréations désormais organisme de formation certifié Qualiopi

$
0
0

Depuis ce début d’année 2022, Alsacréations est un organisme de formation certifié Qualiopi et nous avons envie de vous en parler.

Qualiopi : Kesako ?

Bien que ce nom rime agréablement avec Kiwi, il n’a rien à voir avec une salade de fruits !

Tandis que le marché des formations est devenu florissant ces dernières années, il est devenu essentiel de trouver le moyen de protéger les apprenants en leur permettant de contourner les propositions douteuses…c’est là que Qualiopi intervient !

Qualiopi est une certification nationale visant à contrôler la qualité des prestations de formations (tout domaine confondu).

Qualiopi, un référentiel national

Elle agit comme une garantie pour les apprenants, leur permettant de faire le tri dans l'immense catalogue de formations disponibles de nos jours.

Elle est dans tous les cas obligatoire pour les organismes souhaitant proposer des formations pouvant bénéficier de fonds publics ou mutualisés en 2022.

Dans le détail, ce référentiel qualité est organisé autour de 7 critères qualité :

  • Critère 1 : Les conditions d’information du public sur les prestations proposées, les délais pour y accéder et les résultats obtenus
  • Critère 2 : L’identification précise des objectifs des prestations proposées et l’adaptation de ces prestations aux publics bénéficiaires lors de la conception des prestations
  • Critère 3 : L’adaptation aux publics bénéficiaires des prestations et des modalités d’accueil, d’accompagnement, de suivi et d’évaluation mises en œuvre
  • Critère 4 : L’adéquation des moyens pédagogiques, techniques et d’encadrement aux prestations mises en œuvre .
  • Critère 5 : La qualification et le développement des connaissances et compétences des personnels chargés de mettre en œuvre les prestations
  • Critère 6 : L’inscription et l’investissement du prestataire dans son environnement professionnel
  • Critère 7 : Le recueil et la prise en compte des appréciations et des réclamations formulées par les parties prenantes aux prestations délivrées

Au total, ce ne sont pas moins de 32 indicateurs qui sont à respecter ! Vous pouvez consulter le guide officiel du référentiel Qualiopi pour en prendre connaissance.

Certains dépendent du domaine d’activité de l’organisme de formations (action de formation, bilan de compétence, VAE, formation par apprentissage) et ne concernent donc pas tout le monde.

Pour nos formations Alsacréations par exemple, nous avons été concernés par 23 critères sur les 32 existants.

Qualiopi et Alsacréations

Si vous ne le savez pas encore, Alsacréations s’articule autour de 3 activités :

C’est bien évidemment dans le cadre de notre troisième activité, et parce qu'il à toujours été primordial pour nous d’assurer des prestations utiles et de qualité pour tous, que nous nous sommes lancés dans l’aventure Qualiopi, avec tous les efforts qu'il a fallu fournir.

Alsacreations-organisme-de-formation

Notre méthodologie pour préparer l’audit

Pour satisfaire 7 critères et plus de 20 indicateurs (nous concernant), il nous a semblé fortement recommandé de mettre en place les clés d’une gestion de projet efficace (et ça tombe bien, on s’y connaît un peu…).

Voici comment nous avons procédé :

1. Faire le bilan de l’existant

Pour mettre en place un plan d’action efficace et atteindre les objectifs visés, il nous a semblé nécessaire de faire le bilan de la situation actuelle dans un premier temps.

  • Quelle est la méthode suivie actuellement pour gérer les formations, avant, pendant et après ?
  • Quels sont les éléments manquants pour respecter la certification Qualiopi ?
  • Quelles sont les difficultés éventuelles à résoudre ?

bilan-qualiopi-alsacreations

2. Clarifier la destination (pas celle de vos vacances)

Une fois que l’on sait où on en est, il convient de regarder plus précisément où l’on souhaite aller.

  • Quelles évolutions doivent être mises en place pour satisfaire à la certification Qualiopi ?

objectifs-qualiopi-alsacreations

C’est seulement à partir de là que l’on peut visualiser très clairement le delta qui peut exister entre le point de départ et la destination. Il est temps de passer à l’action !

3. Elaborer un plan d’actions concrètes

Concrètement, au vu de la situation actuelle, que faut-il faire pour satisfaire à la certification ?

Les actions correctives peuvent être diverses et variées, comme par exemple :

  • Mettre à jour les informations du site web (informations pratiques détaillées au maximum, date de mise à jour des pages, désignation du référent handicap,...)
  • Revoir les e-mails envoyés automatiquement aux personnes inscrites
  • Définir un planning de veille efficace
  • Coordonner les méthodes et le suivi des personnes dispensant des formations pour l’organisme
  • Élaborer des questionnaires d’évaluation menés avant et après les sessions de formation

Tout dépend de votre situation.

Dans tous les cas, Qualiopi donne des exemples d’outils à mettre en place pour chaque indicateur qui seront, in fine, vos preuves lors de l’audit.

Tous ne sont imposés et la liste fournie n’est ni exhaustive ni limitative.

À partir de là, c’est à vous de vous approprier le sujet et de l’intégrer dans un processus qui vous convient, par rapport à vos procédés internes, moyens humains et financiers, outils d’ores et déjà à votre disposition dans le cadre de votre activité, ...

workflow-alsacreations-qualiopi

Dans le cadre de notre agence web Alsacréations et de notre organisme de formations par exemple, nous travaillons quotidiennement avec un progiciel de gestion créé sur mesure par notre équipe et pour nos besoins spécifiques. Nous avons alors adapté cet outil “maison” aux nouvelles recommandations à respecter.

En plus de cela, nous avons revu nos documents de suivi et les avons formalisés (documents rédigés, workflows…).

De nombreuses joyeusetés pour être plus efficaces, et conformes : c’est tout bénef !

4. Répartir la charge de travail

Quand tout est clair et que le plan d’attaque est défini, vient le temps de la répartition des tâches pour l’appliquer.

Préparer la certification Qualiopi prend du temps et demande des compétences diverses : communication, ressources humaines, web si vous avez votre propre progiciel de gestion,…

Chez Alsacréations, nous avons fait le choix de travailler à trois sur le projet.

Nous avons par ailleurs divisé les indicateurs nous concernant en trois parts égales (on est sympa entre nous) et chacun devait préparer sa réponse pour l’audit et adapter les méthodes/outils lorsque c’était nécessaire.

Si un sujet devait être discuté, on en parlait tous ensemble pour continuer à avancer efficacement.

methodologie-alsacreations-qualiopi

5. Elaborer un planning

Pour traiter ces tâches chronophages nous avons mis en place un planning précis et avons opté pour un créneau bloqué chaque semaine (coucou les mercredis matins).

Nous avions également défini un objectif de productivité (traiter au moins un critère par demi-journée chacun).

De quoi nous laisser le temps de :

  • traiter les imprévus (on sait qu’il y en a toujours),
  • garder plus de temps pour les sujets complexes,
  • prévoir une phase de tests et de mise en place de correctifs nécessaires pour soigner l’ensemble.

planning-qualiopi-alsacreations

6. Ne pas oublier les tests et finitions

Et oui : tester, corriger, adapter, peaufiner : aucun projet ne déroge à cette étape !

Il faut savoir que les indicateurs de Qualiopi se croisent et s'entremêlent.

Il est tout à fait possible de convenir d’une procédure et/ou d’un outil qui sera le moyen de satisfaire plusieurs obligations de la certification mais cela demande d’avoir une bonne connaissance des différents sujets ainsi qu'une bonne vision d’ensemble.

process-alsacreations-qualiopi

Il est donc essentiel de prévoir des moments de discussion et d’échanges.

L’occasion de prendre du recul et de s’assurer que l’on pense bien à tout (on prépare quand même un examen, il faut bien réviser et compléter ses notes !)

7. Préparer l’audit

Aucune disposition n’est imposée par la certification Qualiopi et vous pouvez vous préparer à l’audit comme bon vous semble.

Vous pouvez être très préparés (oui, nous aimons être organisés) ou y aller les mains dans les poches (on ne juge pas), ceci dit, nous sommes heureux de vous partager notre retour d’expérience si cela peut vous aider à y voir plus clair :)

Et même si j’aborde cette étape à la fin car il s’agit de la préparation du jour J basée sur l’ensemble du travail préparatoire abordé jusqu'à présent, chez Alsacréations, la préparation de l’audit a été notre point de départ. Et oui, je vous explique !

Pour formaliser la charge de travail et uniformiser notre préparation, nous avons dès les premiers jours de préparation, créé un document de présentation par indicateur (oui, oui, plus de 20!).

nos-fiches-qualiopi-alsacreations

L’objectif était de pouvoir ensuite compléter tout simplement chaque indicateur avec le récapitulatif de nos éléments de preuve en vue d’animer l’audit efficacement le jour J, sans devoir les chercher à droite et à gauche, dans la joie et .. le stress de l’examen !

exemple-fiche-qualiopi-alsacreations-indicateur-1

Préparer plutôt que réagir.

(mon mantra préféré de cheffe de projets)

Choisir son organisme certificateur

Vous êtes fins prêts et vous souhaitez programmer votre audit mais à qui faire appel ?

Il existe une liste officielle d’organismes certificateurs Qualiopi.

Votre choix n’a pas à être limité à une zone géographique car certaines zones ne bénéficient pas d’organismes locaux.

Dans ce cas, ce n’est pas grave, les organismes éloignés vous indiqueront s’ils travaillent avec des certificateurs intervenants dans votre région.

Si oui, ils organiseront une visite dans vos locaux. Sinon, ils pourront soit vous proposer une intervention à distance (bien que cela ne permette pas de vérifier la qualité des locaux…) sinon vous rediriger vers un organisme qui saura s’occuper de votre audit là où vous êtes.

De notre côté, nous avons fait appel à I.Cert et notre intervenante a fait le déplacement (merci à elle).

Un pré-audit en option s’il vous plaît !

Sachez que vous pouvez demander un pré-audit à n’importe quel moment.

Ce dernier vous permettra de vous familiariser avec la démarche Qualiopi et d’identifier vos possibles faiblesses ou de mieux comprendre la formulation parfois obscure des critères.

Bien que ce pré-audit ne soit pas une phase de conseil sur mesure, vous pourrez poser vos questions éventuelles et obtenir des indices pour mieux comprendre et préparer votre certification.

preaudit-alsacreations-qualiopi

Déroulé de l’audit

Lors de l’audit Qualiopi, chaque indicateur est passé en revue.

C’est là qu’une bonne préparation en amont permet de gagner du temps et en efficacité le jour J.

Cela permet d’être plus actif lors de l’audit et de ménager votre stress potentiel.

Ensuite, il s’agit d’un simple entretien :

  • Lecture de l’indicateur
  • Ce que cela implique concrètement
  • Montrer ce qu’il en est au sein de votre organisme : faites vos preuves !

L’auditeur / l’auditrice évalue enfin pour chaque indicateur si vous êtes conforme ou non.

audit-qualiopi-alsacreations

Vous êtes conforme : bravo, tout va bien !

Vous n’êtes pas conforme ? pas de panique, il y a un plan B :

  • Pour une non conformité mineure (c’est précisé dans la bible le guide Qualiopi) : vous pouvez convenir des actions correctives nécessaires lors de l’audit et vous aurez ensuite trois mois pour prouver leur mise en place.
  • Pour une non conformité majeure : c’est pareil que précédemment, mais vous avez deux mois et non trois pour présenter vos éléments de preuves conformes.

Finalement ça donne quoi ?

La certification Qualiopi s’inscrit sur le long terme.

Un audit de surveillance aux alentours de 18 mois après l’audit initial est organisé, afin de vérifier que les procédures correctives qui devaient encore être traitées l’ont été (oups les petites non conformités).

Il s’agit de faire le ménage entre les fausses promesses et les réels moyens mis en place pour satisfaire la certification et surtout, les apprenants, ne les oublions pas !

Enfin, un audit de renouvellement est organisé tous les 3 ans.

Vous l’aurez compris, ce n’est pas une mince affaire et l’obtention de cette certification demande beaucoup d’investissement et de suivi. C’est chronophage et chargé MAIS, c’est une garantie qui tient la route et cela devrait rassurer tous les organismes de formations (honnêtes et qualitatifs) ainsi que les apprenants bénéficiaires.

Dans notre cas, nous sommes fiers d’avoir obtenu notre certification à 100% du premier coup et de nous inscrire dans cette démarche qualité rigoureuse.

Cela s’inscrit dans nos valeurs de transparence et de qualité dans tout ce que nous entreprenons et c’est bien heureux que nous avons finalisé l’année 2021, sur cette note positive. 🎉

Publié par Alsacreations.com

Tutoriel : Préparer un thème WordPress pour l'internationalisation

$
0
0

Que vous prévoyiez une dimension internationale dès la conception de votre site web ou que vous rencontriez ce besoin plus tard dans son cycle de vie, il est toujours bon de faire le nécessaire à l'internationalisation (couramment abrégée i18n) dès le départ.

Croyez-en mon expérience, personne ne veut être pris de court et repasser sur l'intégralité des fichiers d'un site, plusieurs semaines ou années après sa création, pour ajouter le support d'autres langues.

Nous n'aborderons ici que la méthode officielle pour un thème WordPress et ne parlerons pas d'extensions dédiées à ce besoin, comme Loco Translate.

Trève de digressions, c'est parti !

Bien concevoir son thème

Partons du principe que vous n'achetez pas votre thème sur une boutique en ligne, mais que vous le développiez vous-même (les thèmes premium sont très souvent "translation-ready" et s'ils ne le sont pas, fuyez !).

Voici un morceau de code très sommaire permettant d'afficher une liste d'articles et que l'on peut retrouver dans beaucoup de thèmes.

<h2>Actualités</h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">Voir l'article</a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">Voir toutes les actualités</a>

Ici, tous les textes statiques sont écrits directement dans le fichier. Résultat, impossible de les traduire.

Voyons maintenant ce que ça donne si notre thème est correctement développé.

<h2><?php echo __( 'Actualités', 'textdomain' ); ?></h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">
        <?php echo __( 'Voir l\'article', 'textdomain' ); ?>
      </a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">
  <?php echo __( 'Voir toutes les actualités', 'textdomain' ); ?>
</a>

Et voilà ! Avec seulement quelques octets de plus, cette partie du site est maintenant prête pour la traduction ! 😃

Et ça change quoi ? 🤔

Pas grand chose, si ce n'est que l'on utilise désormais les fonctions de gettext, la bibliothèque de fonctions de traduction intégrée à WordPress et originaire du système d'exploitation GNU.

On notera l'utilisation de la fonction __() pour afficher les textes, mais c'est loin d'être la seule ! Gestion des pluriels, échappement des textes pour affichage dans des attributs HTML ou encore _e() pour économiser les appels à echo. À chaque usage peut correspondre une fonction, mais il est aussi possible de n'utiliser que la fonction de base __() et de la combiner avec d'autres fonctions PHP comme on peut le faire habituellement.

Notez également le second paramètre ici appelé textdomain.
Il est très important et doit être unique pour votre thème, car il définit le domaine de nos traductions à venir. Ainsi, __( 'Mon texte à traduire', 'domaine1' ) et __( 'Mon texte à traduire', 'domaine2' ) sont 2 chaînes de caractères complètement différentes, même si on ne dirait pas au premier abord.
Choisissez un nom de domaine suffisamment unique pour votre thème sous peine de rencontrer de potentiels conflits avec des extensions installées sur votre site.

Et maintenant, comment je fais pour afficher une autre langue ?

C'est là que la marche à suivre se complique un peu et sort du cadre confortable de WordPress.

Il existe 3 types de fichiers dédiés à la traduction : .pot, .po et .mo et chacun à son rôle.

L'appel à un ami : .pot

Tout d'abord, il faut extraire toutes les chaines de caractères dans un catalogue qui servira de base à toutes les futures traductions, peu importe la langue cible. Ça tombe bien, c'est exactement le rôle des fichiers .pot !

Plusieurs outils existent pour le faire, dont le plus connu est PoEdit. Cependant, la génération de catalogue est, de mon point de vue, plus facile et directe avec un autre logiciel, EazyPo, que nous utiliserons dans la suite de ce tutoriel.

Une fois EazyPo téléchargé (pas besoin d'installation, c'est un logiciel portable), lancez-le pour vous retrouver face à une interface des plus conviviales.

le logiciel EazyPo
Pas de panique, ce n'est pas si compliqué

Cliquez ensuite sur "Extract from source code" ou "File" puis "New from source code files" et sélectionnez le dossier de votre thème. Assurez-vous que la liste des fichiers est correcte si besoin.

L'outil d'extraction de chaînes de caractères

Enfin, cliquez sur "Build" pour pouvoir choisir la destination et le nom du fichier qui sera généré.

Note : Une convention commune dans l'écosystème WordPress et d'utiliser le nom du thème à la fois pour le domaine et pour le nom des fichiers de traduction.

Une fois ceci fait, il ne vous reste plus qu'à cliquer sur le gros bouton rouge "Execute command" pour créer le fichier.

Le générateur de fichier .pot

🎉TADA !🎉

La génération terminée, le logiciel ouvre votre catalogue de traductions.

Un catalogue de traductions

Vous pouvez maintenant fermer ce fichier, nous n'avons plus besoin de le toucher.

Solution alternative : si vous êtes un utilisateur avancé, vous connaissez peut-être WP-CLI, l'interface en ligne de commande de WordPress. La commande make-pot permet de générer un fichier .pot en se positionnant dans le dossier de votre thème ou de votre extension (voir la documentation de make-pot).

Les fichiers .po et .mo

Maintenant que votre fichier .pot est prêt, vous allez pouvoir générer les fichiers nécessaires pour chaque langue que vous souhaitez ajouter à votre site.

Sans rentrer dans les détails :

  • les fichiers .po pour les traducteurs/traductrices humains
  • les fichiers binaires .mo à destination de la machine.

Pour servir d'exemple, nous allons créer un nouveau fichier pour traduire notre thème dans la langue de Shakespeare.

Pour cela, cliquez sur "File" puis "New from file".

Fenêtre de création de nouveau catalogue

Sélectionnez votre catalogue fraichement créé puis à l'étape suivante, choisissez de créer un fichier .po. Enfin, choisissez l'emplacement de création de votre fichier et son nom.

Notez que le nommage de vos fichiers est important. En plus d'avoir le même nom que votre fichier .pot, les fichiers .po doivent être suffixés de la locale de traduction. Ainsi, le fichier dédié à la langue anglaise doit être nommé nom-de-mon-theme-en_GB.po (ou nom-de-mon-theme-en_US.po si vous préférez l'anglais américain).

Une fois votre fichier créé, il ne vous reste plus qu'à le remplir ! 😉

Pour mener à bien cette partie fastidieuse, sélectionnez les chaînes de caractères une par une et cliquez dans le cadre en bas à droite pour saisir votre traduction. En fonction de la complexité de votre thème, on ne va pas se mentir, cela peut prendre plus ou moins de temps (pensez à sauvegarder régulièrement !).

Charger un fichier de traduction

Nous y voilà, toutes vos traductions sont prêtes et il ne vous reste plus qu'à faire en sorte que WordPress charge le bon fichier.

Heureusement, le CMS dispose de plusieurs fonctions pour cette tâche et celle qui nous intéresse ici est load_theme_textdomain (voir la documentation).

Ajoutez ce morceau de code dans le fichier functions.php de votre thème.

/**
 * Chargement des fichiers de traduction
 */
function load_theme_translations(){
  load_theme_textdomain( 'textdomain', get_template_directory() . '/lang' );
}
add_action( 'after_setup_theme', 'load_theme_translations' );

Le premier paramètre est le domaine que vous avez choisi. Le second est l'URL vers le dossier qui contient vos fichiers de traduction (ici, on suppose que votre thème contient un dossier /lang).

Note : Les différentes fonctions de chargement de fichiers de traductions tenteront d'abord de localiser vos fichiers dans le dossier /languages de WordPress, donc si vous le voulez, vous pouvez les y mettre directement.

Conclusion

Si préparer son thème ne demande que quelques efforts supplémentaires lors du développement, la création des fichiers de traductions peut s'avérer assez laborieuse surtout si c'est quelque chose que l'on rencontre peu dans son quotidien.

Toujours est-il que l'on ne saurait que trop vous recommander de penser à l'internationalisation de vos développements de thèmes ou d'extensions WordPress dès leur conception, sans quoi vous pourriez perdre un temps non négligeable en le faisant a posteriori, si c'est un besoin qui n'apparait que tardivement dans un projet.

Pour approfondir le sujet et connaitre, par exemple, la marche à suivre pour proposer des traductions pour des thèmes ou extensions, l'équipe de traduction de WordPress met à disposition ce guide.

C'est bien pour les thèmes, mais je développe des extensions, moi ! Comment on fait ?

Le processus reste relativement similaire, mais pour éviter d'allonger un article déjà bien complet, nous ne rentrerons pas dans les détails ici. Toutefois, si vous souhaitez un nouveau tutoriel dédié, faites-le nous savoir !

En attendant, vous pouvez visiter la documentation officielle proposée par WordPress.

Illustration par vectorjuice

Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com

Viewing all 405 articles
Browse latest View live