Forem: Patrice Kalwira

Trois mois à Kali Academy : Une Immersion dans l'Open Source.

Patrice Kalwira — Fri, 14 Jun 2024 20:23:14 +0000

Je m'appelle Patrice Kalwira et je suis un développeur web fullstack.
Cet article est un condensé sur mon parcours en tant que stagiaire au sein de l'organisation Open Source Kali Academy, basée à Goma, à l'Est de la République Démocratique du Congo.
Durant trois mois, j'ai eu l'opportunité exceptionnelle de participer à un stage intensif au sein de Kali Academy, une organisation dynamique spécialisée dans l'open. Cette expérience enrichissante m'a permis de plonger dans les profondeurs de l'open source, de découvrir Kali Academy, ses différents projets et programmes. Plus encore, c'était une immersion totale dans le monde de la Wikimedia Foundation et ses projets mais aussi y apporter ma modeste contribution.

C'est quoi Kali Academy ?
Kali Academy est une académie qui vise à promouvoir les valeurs de l'open source dans les régions les moins représentées notament en Afrique. Les valeurs clés de l'open source sont le partage, la collaboration et bien sûr aussi la contribution. Son cible majeur est les étudiants ainsi que les récents diplômés. Mais il n'oublie pas aussi toute la communauté qui doit être aussi sensibilisée sur l'open source.

Programme de stage
Notre stage a duré trois mois et pour chaque mois nous avions une concentration pricipale particulière

1. Premier mois : Hacking, Linux et projets de Kali Academy

Comment devenir un bon hacker
Comme on aspirait de dévenir tous des hachers, notre voyage a commencé par la formation sur comment devenir un hacker (bien que la plupart des gens confondent hacker et cracker). Nous avons appris les attitudes à adopter.
Introduction au système Linux
La plupart des vrais hackers utilisent Linux comme système d'exploitation. D'où même si on ne va pas forcement utiliser Linux quotidiennement on est sensé avoir en tête quelques commandes.
Présentation des projets de Kali Academy
Nous avons eu des séances sur comment trouver un projet open source passionnant et comment faire pour y contribuer. Notre premier exercice en ce terme était d'aller sur le github de Kali Academy et y choisir quelques issues à travailler.

2. Deuxième mois : Hacking avec MediaWiki
Ce mois visait prémièrement à familiariser les stagiaires au moteur Mediawiki qui propulse la quasi totalité des applications de Wikimedia.
Cette partie a été très capitale car elle nous a permis de commencer à faire des contributions techniques (écriture des codes) directement sur les projets de Wikimedia.
Les projets sur lesquels nous avons passé trop de temps sont Wikipédia et Wikidata. Il y en a eu plusieurs mais ces deux méritent d'être mentionnés ici.
Durant ce mois, nous avons créé un petit moteur de recherche qui récupère des données à partir de Wikidata en utilisant l'API de Wikidata. Ce projet nous a permis de mettre en pratique c'est que nous avons appris dans un événement en ligne qui parlait de Wikidata.

3. Troisième mois : Projet final
Après ces deux mois d'apprentissage, le dernier mois visait à concrétiser tout ce qu'on avait déjà appris en créant des applications.
Pour notre projet final, dans un groupe de 4, nous avons développeé une application qui utilise l'intelligence artificielle pour générer les requêtes SPARQL en utilisant le langage humain.
Le projet est évidemment open source et si ça vous tente, contribuez sans modération.

L'un des points forts de ce stage a été notre participation active à divers hackathons et ateliers organisés par la Wikimedia Foundation, Kiwix, ... Ces événements étaient des occasions idéales pour appliquer les compétences acquises dans des contextes pratiques et collaboratifs. Nous avons travaillé sur des projets divers, allant de l'amélioration des outils existants de Wikimedia à la création de nouvelles applications innovantes. Ces hackathons nous ont également permis de réseauter avec des professionnels de l'industrie et de recevoir des conseils précieux pour notre développement personnel et professionnel.

Voici une liste non exhaustive d'activités dans lequelles nous avons eu l'honneur de participer :

Wishaton March 2024
Wikidata Leveling Up 2024
WMA-MediaWiki 101:Becoming a MediaWiki Hacker
Beacoup d'activités organisées par Wikimedia RDC

Conclusion
Ce stage à Kali Academy a été une expérience transformative, offrant une immersion profonde dans le monde de l'open source, des compétences techniques solides, et l'opportunité de travailler sur des projets innovants avec des applications réelles. Les connaissances et les compétences acquises pendant ces trois mois sont inestimables et ouvrent de nombreuses portes pour des opportunités futures. Kali Academy a fourni un environnement d'apprentissage exceptionnel qui nous a préparés à devenir des contributeurs actifs et innovants dans le domaine de l'open source.
Il y avait beacoup de choses à écrire mais j'ai fait juste un bref résumé. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires
Je remercie toute l'administration de Kali Academy, tous mes collègues stagiaires et tous les contributeurs à l'open source en général quel que soit le projet.

Les premiers pas dans le monde du Web : Guide de programmation pour débutants

Patrice Kalwira — Sun, 05 May 2024 18:59:27 +0000

Difficile de vire dans cette époque sans pour autant avoir recours aux nouvelles technologies. A notre mort, nous aurons passé beaucoup d'années de notre vie à parcourir le web que ce soit sur smarthone, tablette, ordinateur ou tout autre support.
Mais qu'est-ce qui se passe derrière nos écrans ? Voilà une belle question que la plupart des consommateurs ne se posent même pas.
Vous avez envie de savoir ce qui se passe et peut-être aller un peu plus loin en voulant contribuer à sa manière dans ce monde fantastique ?
Ce guide est une petite introduction pour vous.

La programmation Web est une compétence essentielle dans le monde numérique d'aujourd'hui. Que vous souhaitiez créer votre propre blog, développer une application dynamique ou simplement comprendre comment fonctionnent les sites Web, cet article est votre point de départ. Nous allons explorer ensemble les bases de la programmation Web, des langages de balisage aux frameworks modernes.

1. Introduction à la programmation Web

La programmation Web consiste à écrire des instructions pour créer des pages et des applications accessibles via un navigateur. Elle se divise en deux grandes catégories : le front-end, qui est la partie visible par l'utilisateur, l'interface utilisateur et le back-end, qui traite la logique côté serveur, toutes les requêtes que vous faites sont gérées pas le back-end. Par exemple, à chaque fois que vous recherchez une personne sur Facebook, il y a un traitement qui se passe dans le back-end et qui vous permet de retrouver la personne dans quelques secondes. Cet affichage se faira sur le front-end, la partie visible par l'utilisateur.

Pour ce faire, il y a deux langages basiques et incontournables pour le web : HTML et CSS. Bien qu'ils ne soient pas des langages de programmation, ils ont tout leur mérite.

2. Comprendre le HTML/CSS

HTML (HyperText Markup Language) est le squelette de toute page Web. Il définit la structure et le contenu, c'est bien lui qui nous permet d'ajouter du texte, des images, des liens, ... à notre page. HTML utilise des balises et est très facile à apprendre. C'est la base du web pour un programmeur débutant.
De son côté le CSS (Cascading Style Sheets) détermine l'apparence, défini tout ce qui est couleur, animation, ...
Ensemble, ils permettent de créer des pages Web statiques et esthétiquement agréables.
Voici un exemple du code HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Pour accompagner ces deux lagages, il y a un langage de programmation qui avec ces deux précédants constituent le trio du Web : le Javascript

3. Fondamentaux du JavaScript

JavaScript est le langage de programmation qui anime les pages Web. Il permet d'ajouter de l'interactivité, de manipuler les éléments du DOM (Document Object Model) et de répondre aux actions des utilisateurs. En complément du HTML et du CSS, le Javascript élargit nos possibilités comme par exemple la personnalisation de l'interface qu'on soit connecté ou pas, qu'on soit abonné ou pas, ...
Au début le JS (Javascript) fonctionnait seulement du côté client (front-end) mais aujourd'hui grâce Node.js nous avons la possibilité d'utiliser le Javascript en back-end.
Le Javascript est aujourd'hui l'un des langages de programmation les plus utilisés et les plus populaires. Avec son évolution, on a aujourd'hui plusieurs frameworks et bibliothèques (comprenez par ces deux termes, une facilitation des tâches côté développeur) qui sont très populaires et appréciés comme React, Vue et Angular.
Choisir le bon framework dépend de vos besoins spécifiques et de la communauté qui l'entoure.
Voici un petit bout de code JS qui affiche à l'écran Hello world!

console.log('Hello World');

4. Outils de développement

C'est un sujet crucial qui se dira ici. Pour faire un petit truc basique en web, on a besoin qu'un d'un éditeur de texte et un navigateur web, et bam, la magie fait son effet!
Pour l'éditeur, il vaut mieux choisir un éditeur de code plutôt qu'un éditeur de texte parce qu'avec l'éditeur de code vous aurez plus de souplesse et de confort parce qu'il y a un arsenal des fonctionnalités qui a été développé pour faire se sentir le programmeur à son aise.
Des éditeurs de code tels que Visual Studio Code offrent un environnement de développement riche en fonctionnalités. Cest un éditeur gratuit et qui a une partie de son code en open source que je conseillerais au programmeur débutant et même aux développeurs expérimentés.
Pour le navigateur web, Google Chrome est aujourd'hui le plus utilisé mais il est conseillé de toujours tester sur les autres navigateurs pour voir si vous avez le même rendu et les mêmes fonctionnalités que sur votre navigateur principal parce que vous ne savez pas depuis quel navigateur votre client voudra intéragir avec votre site ou votre application web.

Avec un peu plus d'expérience vous aurez besoin d'utiliser un système de contrôle de version comme Git qui est également essentielle pour gérer les changements dans le code et son versionnement. Dans ce cas vous pouvez utiliser Github mais pour l'intant on ne va pas trop parler de ça. Peut-être que dans un futur proche je vais y consacrer un article complet.

Quand on est programmeur, on doit beaucoup lire et apprendre sans cesse car la technologie évolue à chaque seconde qui passe. Pour cela, vous aurez besoin de lire de bonnes documentations et/ou suivre des tutoriels sur Youtube.

5. Ressources et communauté

Il existe une multitude de ressources en ligne pour apprendre la programmation Web, des documentations officielles aux tutoriels vidéo. Rejoindre des communautés en ligne peut également fournir un soutien et des conseils précieux.

Voici une liste non exhaustive de quelques ressources précieuses pour débutants mais aussi la doc exhaustive de JS.

Conclusion et prochaines étapes

La pratique est la clé de l'apprentissage de la programmation Web. Commencez par de petits projets et n'hésitez pas à expérimenter. Restez curieux et à jour avec les dernières tendances et technologies comme mentionné précédement et surtout ne vous sentez pas complexés ou en retard par rapport à ceux qui ont déjà une grande expérience, ils avaient aussi commencé comme vous. Il faut des étapes, du temps, de la pratique et surtout du courage.

Cet article est une introduction générale et ne couvre pas tous les détails techniques. Cependant, il fournit un cadre solide pour les débutants qui souhaitent se lancer dans la programmation Web. Bonne chance dans votre voyage de développement Web !

Les premiers pas dans le monde du Web : Guide de programmation pour débutants

Patrice Kalwira — Sun, 05 May 2024 18:59:26 +0000

1. Introduction à la programmation Web

Pour ce faire, il y a deux langages basiques et incontournables pour le web : HTML et CSS. Bien qu'ils ne soient pas des langages de programmation, ils ont tout leur mérite.

2. Comprendre le HTML/CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Pour accompagner ces deux lagages, il y a un langage de programmation qui avec ces deux précédants constituent le trio du Web : le Javascript

3. Fondamentaux du JavaScript

4. Outils de développement

Ressources et communauté

Voici une liste non exhaustive de quelques ressources précieuses pour débutants mais aussi la doc exhaustive de JS.

Conclusion et prochaines étapes

Comprendre l'open source : faire sa contribution

Patrice Kalwira — Sun, 14 Apr 2024 13:39:19 +0000

Dans l'article précédent nous avons parlé de la généralité, de l'historique et de l'importance de l'open. Si vous n'avez pas encore consulté cet article cliquez ici.
Dans cet article nous allons parlé de la contribution dans l'open source. Que ce soit une contribution technique ou non technique, qu'on soit développeur ou non, tout le monde y trouvera son compte.
Nous allons tout voir dans les lignes suivantes, du choix du projet à la proposition de sa contribution en passant par les types de contributions et autres.
Dans notre petit récit, nous allons plus nous appuyer sur la façon dont on peut contribuer en utilisant Github qui est beaucoup plus utilisé dans les projets collaboratifs. Aujourd'hui c'est quasi impossible de se passer de Github si on est développeur.
L'idée derrière l'open source est de vous amusez en travaillant!

1. Types de Contributions

Les contributions à un projet open source peuvent prendre de nombreuses formes. Voici quelques-unes des principales :

Code Source : Contribuer du code est l'une des formes les plus courantes de participation à un projet open source mais encore faut-il savoir programmer. Cela peut inclure l'ajout de nouvelles fonctionnalités, la résolution de bogues, l'optimisation des performances, etc.
Documentation : La documentation claire et concise est essentielle pour aider les utilisateurs et les autres contributeurs à comprendre le fonctionnement d'un projet. Vous pouvez contribuer en rédigeant de nouvelles sections de documentation, en corrigeant les erreurs ou en améliorant la structure existante.
Tests : Après la modification du code, on aura besoin de faire des tests pour avoir la garantie du bon fonctionnement du logiciel. Pour le faire on a pas besoin seulement des développeurs mais de tout le monde qui peut savoir utiliser le logiciel. Les tests sont cruciaux pour garantir la qualité et la stabilité d'un projet open source. Vous pouvez contribuer en écrivant de nouveaux tests, en améliorant les tests existants ou en corrigeant les tests cassés ou encore en suggérant un ou plusieurs tests.
Conception et UX : Si vous avez des compétences en design et en expérience utilisateur (UX), vous pouvez contribuer en proposant de nouveaux designs, en améliorant l'interface utilisateur ou en résolvant des problèmes d'accessibilité.
Traduction : Contribuer à la traduction d'un projet open source permet d'élargir sa portée et d'aider les utilisateurs qui ne parlent pas la langue utilisée par le logiciel à en bénéficier. Vous pouvez traduire la documentation, l'interface utilisateur ou les messages d'erreur dans différentes langues.

2. Choix d'un projet

Lorsque vous choisissez un projet open source auquel contribuer, voici quelques facteurs à prendre en compte :

Intérêt personnel : Choisissez un projet qui vous passionne et qui correspond à vos centres d'intérêt. Vous serez plus motivé à contribuer si vous êtes enthousiaste à propos du projet. Vous pouvez choisir une tâche plus simple pour vous ou une plus complexe pour votre challenge.
Taille de la communauté : Recherchez des projets avec une communauté active et accueillante. Une grande communauté offre plus d'opportunités de collaboration et de soutien. Il y a des projets qui ont de grandes communautés comme par exemple Linux, Wikipédia, ... Ne vous sentez pas intimidés par la grandeur du projet, il y a des tâches plus simples non résolues qui n'attendent que vous peut-être.
Fréquence des contributions : Vérifiez la fréquence des contributions au projet pour vous assurer qu'il est toujours actif et en développement. Parce qu'on peut parfois sur un projet où il n'y a pas des contributions récentes et qui peuvent avoir des technologies déjà obsolètes. C'est qui constitue un véritable casse-tête.

3. Configuration de l'environnement de développement

Avant de commencer à contribuer à un projet open source, vous devez configurer votre environnement de développement. Cela peut inclure :

Installation des Outils : Installez les outils de développement nécessaires, tels que l'éditeur de code, le gestionnaire de version (comme Git) et les dépendances du projet.
Clonage du Répertoire : Clonez le répertoire du projet depuis le dépôt Git afin de pouvoir travailler localement sur votre machine.
Configuration des Paramètres : Configurez les paramètres du projet selon les instructions fournies dans la documentation, comme les clés d'API ou les variables d'environnement.

Il est vrai que ces explications sont beaucoup oriéntées développeurs mais pour les contributions non techniques il y a aussi une préparation nécessaire selon son type de contribution.

4. Trouver des tâches à accomplir

Les projets open source sont subdivisés en tâches, ce qui facilite la maintenance et l'évolution du logiciel. Pour trouver des tâches à accomplir dans un projet open source, vous pouvez explorer différentes ressources :

Tableaux de Bord des Problèmes : Consultez les tableaux de bord des problèmes (issues) sur la plateforme de gestion des problèmes (comme GitHub) pour trouver des problèmes ouverts qui nécessitent une résolution.
Forums de Discussion : Pour de grands projets il y a souvent des groupes de discussion pour l'échange d'idées concernant les tâches. Rejoignez les forums de discussion ou les listes de diffusion du projet pour suivre les discussions et les demandes d'aide de la communauté.
Étiquettes "Bonne Première Contribution" : Cherchez les étiquettes "bonne première contribution" ou "easy fix" qui sont souvent utilisées pour marquer les problèmes simples et accessibles aux nouveaux contributeurs. Cela permet aux débutants de travailler sur une tâche moins complexe ; ce qui donnera confiance pour continuer de contribuer.

5. Faire une contribution

Après avoir bien ciblé sa tâche, il faudra passer à l'étape suivante qui consiste à faire sa contribution. Lorsque vous êtes prêt à faire une contribution, suivez ces étapes :

Cloner le projet : Cette étape consiste à copier le projet localement sur son ordinateur pour qu'on soit en mesure de faire des modifications sans abimer le code source du projet. Ainsi, toutes les modifications faites n'impacteront pas encore le projet mais fonctionneront seulement en local (suu son ordinateur).
Modifier le code : Faites les modifications nécessaires localeent en suivant les instructions fournies dans la tâche que vous avez choisie.
Tester les modifications : Testez vos modifications toujours localement pour vous assurer qu'elles fonctionnent correctement et qu'elles ne cassent pas d'autres fonctionnalités. Parce que ça ne servirait à rien de résoudre un problème en créant beaucoup d'autres.
Créer une demande d'extraction (Pull Request) : Une fois que vous êtes satisfait de vos modifications, créez une demande d'extraction pour soumettre vos changements au projet.

6. Collaboration et communication

La collaboration et la communication sont essentielles pour travailler avec succès sur un projet et surtout sur un projet open source car c'est plus décentralisé :

Poser des questions : N'hésitez pas à poser des questions si vous rencontrez des difficultés ou si vous avez besoin d'aide pour comprendre une partie du code. Soyez courtois, précis et concis et surtout posez une question quand vous jugez que c'est nécessaire (après avoir fait des recherches sans qu'on ne trouve de réponse).
Fournir des commentaires : Si vous passez en revue les contributions des autres, assurez-vous de fournir des commentaires constructifs et utiles pour aider les autres contributeurs à améliorer leur travail.
Participer aux discussions : Participez aux discussions sur les forums de discussion ou les canaux de communication du projet pour partager des idées, discuter des problèmes et contribuer à la prise de décision.
La communication reviendra toujours tout au long du processus de contribution.

7. Étiquette et Bonnes Pratiques

Lors de la contribution à un projet open source, il est important de suivre les directives de contribution et de respecter l'étiquette du projet :

Lire les directives de contribution : Avant de commencer à contribuer, assurez-vous de lire les directives de contribution du projet pour comprendre les attentes et les normes de la communauté.
Utiliser les conventions de codage : Respectez les conventions de codage et de style du projet pour maintenir la cohérence et la lisibilité du code. Il y a des projets où on ne spécifie pas les conventions de codage mais en lisant le code des autres vous pouvez vite avoir une idée de la façon de coder sur le projet.
Identifier les problèmes existants : Avant de soumettre une nouvelle demande d'extraction, vérifiez qu'il n'existe pas déjà de problèmes ou de demandes similaires ouverts dans le projet. Il ne sert à rien de résoudre un problème déjà résolu. D'où quand vous commencez à travailler sur un projet, notifiez que vous travaillez sur la tâche choisie pour que les autres se concentrent sur d'autres tâches

8. Gérer les retours et les contributions

Une fois que vous avez soumis votre contribution, vous pouvez recevoir des retours et des contributions de la part d'autres membres de la communauté :

Répondre aux commentaires : Soyez prêt à répondre aux commentaires et aux suggestions des autres membres de la communauté et à apporter des modifications à votre contribution en conséquence.
Réviser les contributions : Si vous passez en revue les contributions des autres, assurez-vous de les examiner attentivement et de fournir des commentaires constructifs pour aider les contributeurs à améliorer leur travail.

9. Avantages de la contribution

La contribution à des projets open source présente de nombreux avantages, tant sur le plan personnel que professionnel. Voici quelques uns :

Acquisition de nouvelles compétences : Contribuer à des projets open source vous permet d'acquérir de nouvelles compétences techniques et professionnelles en travaillant sur des problèmes concrets parce que vous allez travailler sûrement avec les personnes avec une grande expérience.
Visibilité professionnelle : Les contributions à des projets open source peuvent vous aider à établir votre réputation et à accroître votre visibilité dans la communauté, ce qui peut être bénéfique pour votre carrière. C'est très conseillé surtout pour le débutant en programmation
Satisfaction Personnelle : La contribution à des projets open source peut être une expérience gratifiante sur le plan personnel, car vous contribuez à des projets qui ont un impact réel sur les utilisateurs et la communauté. Cela faira croître votre estime.

10. Ressources Supplémentaires

En plus des conseils fournis dans cet article, voici quelques ressources supplémentaires pour vous aider dans votre parcours de contribution :

Guides de Contribution : Consultez les guides de contribution spécifiques fournis par le projet pour obtenir des instructions détaillées sur la façon de contribuer efficacement.
Forums de Discussion : Rejoignez les forums de discussion ou les canaux de communication du projet pour poser des questions, discuter des problèmes et interagir avec la communauté.
Événements Communautaires : Participez à des événements communautaires tels que des hackathons, des conférences et des rencontres locales pour rencontrer d'autres contributeurs et apprendre de nouvelles compétences.

En conclusion, la contribution à des projets open source est une expérience enrichissante qui peut avoir un impact significatif sur vous et sur la communauté dans son ensemble. Que vous soyez un développeur expérimenté ou un novice, il existe des moyens pour chacun de contribuer et de faire une différence. Alors n'hésitez pas à vous lancer et à contribuer à un projet open source dès aujourd'hui !

Comprendre l'open source : historique et importance

Patrice Kalwira — Mon, 01 Apr 2024 20:05:02 +0000

Il est difficile pour un contemporain de notre époque de ne jamais avoir entendu parler du terme open source.
Aujourd'hui il est impensable et presqu'impossible à l'humain de vivre sans ses logiciels parce qu'ils ont déjà envahi tous nos secteurs d'activité. Vous venez de trouver un nouvel emploi ? Vous aurez probablement besoin de la suite Microsoft Office ou son équivalent ; vous vous ennuyez ? Facile dites-vous, vous ouvrez TikTok avec ses millions de vidéos prêtes à vous détendre. Tiens, hier j'ai vu quelqu'un qui avait un pacemaker, ...
Avec tous ses exemples, nous voyons la force de la technologie et les logiciels qui la font fonctionner.
Revenons à notre terme open source, et essayons d'en savoir un peu plus.

1. Historique

Avec l'avenement des orinateurs dans le années 1970, les développeurs étaient obligeaient d'écrire le code qui sera propre à un seul ordinateur, sans standardisation, et sans que cela soit vraiment rentable.
C'est en 1981 que le géant de l'informatique IBM présente le premier ordinateur grand public et année après année, d'autres fabriquants ont adoptés le modèle de l'ordianteur grand public en délaissant l'ordinateur fait sur mesure.
C'était une aubaine pour les développeurs qui avaient alors la possibilité de créer des logiciels qui pouvaient fonctionner sur plusieurs ordinateurs plus ou moins de la même façon.
C'est dans cette optique que le géant bleu (IBM) engagea Microsoft, une jeune société, pour écrire le système d'exploitation pour son nouvel ordinateur. De ce contrat nacquit le système MS-DOS, lancêtre de Microsoft. Ce logiciel avait une licence propriétaire, cela veut dire que personne n'avait le droit de copier, de modifier ou encore de restribuer ce logiciel.
D'autres entreprises, à cette même époque, fabriquaient aussi leurs logiciels avec une licence propriétaire. Même jusqu'aujourd'hui il existe plusieurs logiciels propriétaires très chers et pas accessibles à tous à cause du prix.
Les voix commencèrent alors à s'entendre dans la communauté des développeurs, où certains voulaient qu'il y ait des logiciels tout aussi performants mais accessibles à tous.
C'est dans ce contexte qu'au début des années 80, Richard Stallman, un grand nom de l'informatique, crée GNU, un système d’exploitation libre, et de cela est né un mouvement dit « mouvement du logiciel libre ». Plus tard, en 1985, Stallman crée la Free Software Foundation dans le but de soutenir GNU ainsi que d’autres projets de logiciels libres.
La Free Software Foundation définit libre un logiciel « qui donne à l’utilisateur la liberté de le partager, de l’étudier
et de le modifier »
Peu de temps après, Eric Raymond et Bruce Perens créerent le mouvement de l'open source en s'inspirant du terme open source proposé par Christine Peterson.
Sur le site de Redhat, on peut lire ce qui suit par rapport à l'open source : À l'origine, l'expression « Open Source » faisait référence aux logiciels Open Source. Un logiciel Open Source est un code conçu pour être accessible au public : n'importe qui peut voir, modifier et distribuer le code à sa convenance.

Ce type de logiciel est développé de manière collaborative et décentralisée, par une communauté, et repose sur l'examen par les pairs. Un logiciel Open Source est souvent moins cher, plus flexible et profite d'une longévité supérieure par rapport à ses équivalents propriétaires, car il est développé par des communautés et non par une entreprise ou un auteur.
Nous voyons que les mêmes concepts reviennent en parlant d'un logiciel libre et d'un logiciel open source au point où aujourd'hui on ne sait plus trop la différence.
On va noter que le Mouvement du logiciel libre insiste plus sur la notion de liberté d'utilisation du logiciel tandis que le Mouvement open source insiste beaucoup plus sur le travail en communauté du logiciel.

2. Utilisation

Aujourd'hui beaucoup des technologies dans le numérique fonctionnent avec du code open source. Que ce soit dans les entreprises privées que publiques, tout le monde se sert aujourd'hui de l'open source.
Dans le livre "Sur quoi réposent nos infrastructures numériques" l'auteur compare le logiciel open source aux routes et aux ponts que tout le monde opeut emprunter sans que cela ne lui appartienne. Et donc le logiciel open source est un bien public que nous devons chérir et entretenir.
Aujourd'hui, même les grandes entreprises du secteur numérique ont beaucoup de leurs technologies qui reposent sur du open source.
Citons par exemple Apache Hadoop qui facilite la création d'applications distribuées. Hadhoop est une collection des logiciels open source et est utilisé par des entreprises comme Google, Facebook, Amazon, eBay, ...
Ou encore TLS anciennement SSL qui est une technologie standard de sécurisation des connexions Internet par le chiffrement des données transitant entre un navigateur et un site web (ou entre serveurs). Cette technologie est largement utilisée par les sites qui impliquent un paiement en ligne.
Pour les petites et moyennes entreprises, les entreprises publiques ou encore des startups, il est plus facile de s'appuyer sur des solutions open source que celles qui sont payantes à cause de leur grand coût. Mais aussi parce que ces structures peuvent s'approprier un projet open source et l'adapter selon leurs besoins.
Presque tous les logiciels open source sont aussi gratuits.

Voici quelques projets open source célèbres, classés par catégorie :

Systèmes d'exploitation :

Linux : système d'exploitation libre et open source utilisé par des millions de personnes et d'entreprises.
Android : c'est un système d'exploitation mobile basé sur Linux, utilisé par la majorité des smartphones dans le monde.

Serveurs web :

Apache : serveur web le plus populaire au monde, utilisé par des sites web comme Wikipedia et Google.
Nginx : serveur web connu pour sa légèreté et sa performance, utilisé par des sites web comme Netflix et Airbnb.

Bases de données :

MySQL : base de données open source largement utilisée pour le web et les applications mobiles.
PostgreSQL : base de données open source puissante et flexible, utilisée par des entreprises comme Spotify et Instagram.

Langages de programmation :

Python : langage de programmation polyvalent et facile à apprendre, utilisé pour le développement web, l'analyse de données et surtout l'intelligence artificielle.
JavaScript : langage de programmation côté client essentiel pour le développement web moderne.
Java : langage de programmation robuste et portable utilisé pour une grande variété d'applications.

Outils de développement :

Git : c'est un système de contrôle de version distribué largement utilisé pour le développement logiciel.
GitHub : c'est une plateforme d'hébergement de code source et de collaboration pour les projets open source.

Logiciels bureautiques :

LibreOffice : c'est une suite bureautique open source compatible avec Microsoft Office.
OpenOffice : c'est une suite bureautique open source gratuite et multi-plateforme.

La liste est tellement longue, nous n'avons donner comme exemples qu'une infime partie.

3. Avantages de l'open source

Comme tous les autres biens publics, les logiciels ont plusieurs avantages que nous allons essayer d'énumérer dans les lignes suivantes :

a. Pour les développeurs

Pour un développeur, le code open source a plusieurs avantages :

Facilité d'apprentissage et de développement : Imaginons un programmeur qui veut concevoir son site web sans recourir aux langages de programmation, frameworks, gestionnaires de base de données, ... qui sont open source. Il serait obligé chaque fois à payer des licences d'exploitation coûteuses ou commencer par développer lui-même tout ce dont il aura besoin, ce qui n'est pas facile et il y perdrait trop de temps. Avec l'open source ce problème est résolu et pour quelqu'un qui est en apprentissage la formation sera facilitée car il aura déjà beaucoup de ressources qui lui seront déjà données.
Facilité de partager son idée : C'est plus facile de partager son code quand il est open source que s'il est publié sous une licence propriétaire. Une communauté peut se créer autour du projet et faire de lui un grand projet.
Amémioration des compétences : Pour un développeur contribuer au code open source est une opportunité d'améliorer ses compétences et de participer à un travail collaboratif. C'est aussi un bon point pour son C.V.
Il existe beaucoup d'autres avantages mais on ne peut pas tout citer.

b. Pour les entreprises

Réduction des coûts : Nous avons vu dans les lignes précédentes que développer ses propres logiciels pour toutes les tâches de l'entreprise implique un grand coût, ce qui n'est pas trop pratique. autant mieux utiliser ce qui existe déjà sous une licence open source.
Innovation : Il est plus facile avec du code open source d'adapter le logiciel à ses fins en y ajoutant plus ou moins d'élements. Ce qui n'est pas facile avec un code sous licence propriétaire.
Agilité : C'est plus facile de travailler quand on a la main mise sur le code qui compose les logiciels utilisés au sein d'une entreprise.

c. Pour tous les utilisateurs

Accessibilité : Comme nous l'avons souligné un peu plus haut, la quasi totalité des logiciels open source sont gratuits, quoi de mieux pour les utilisateurs ? Avec le open source, l'utilisateur profite des mêmes possibilités, voir plus dans certains cas qu'avec celui qui utilise les logiciels propriétaires.
Education : C'est plus facile pour les écoles et les universités de s'appuyer sur des logiciels open source.

4. Avenir de l'open source

Depuis l'avénement de l'open source, le mouvement ne cesse de grandir en attirant de plus en plus de développeurs et en suscitant l'attention des grandes entreprises quant à l'avancement de l'open source mais aussi en leur mettant devant leur responsabilité quant à leur utilisation du code open source.
Le monde de l'open source est aussi complexe par sa gestion car c'est une entité très décentralisée que par son financement. Certains projets open source bénéficient aujourd'hui des importants financements par des levées de fonds ou des financements venant des grandes entreprises comme Linux qui reçoit le financement de nombreuses entreprises.
L'open source ne s'est jamais porté mieux qu'aujourd'hui et c'est difficile de concevoir un monde sans open source.
C'est une affaire publique et cela devrait nous concerner tous, utilisateurs de la technologie car notre présent et notre avenir en dépendent. Que notre contribution soit technique ou non technique, tout le monde y gagnerait.
Dans le prochain article je vais parler de la contribution dans l'open source.

Comment améliorer l’interactivité de son site web grâce à l’animation et à la transition ?

Patrice Kalwira — Sat, 29 Jul 2023 21:47:04 +0000

Depuis l’apparition de l’internet tous les webmasters essaient de trouver de nouvelles solutions pour améliorer l’expérience des utilisateurs afin de les retenir le plus longtemps possible sur leurs sites web.
C’est pour cela qu’ils sont à l’affût de la moindre évolution technologique afin d’améliorer l’expérience utilisateur.
C’est dans ce cadre que nous allons présenter l’une des propriétés CSS qui aident à améliorer l’interactivité entre le système et l’utilisateur.

Alors comment pouvons-nous comprendre l’animation en CSS ?

L’animation en CSS consiste à donner de la réactivité à un élément inerte dans son site web, c'est un peu comme lui donner une vie, passant d'un état statique à un état dynamique.
C’est là que les transitions interviennent pour contrôler la vitesse et le temps d’exécution d’une animation appliquée à une ou plusieurs propriétés de son site web.

Et c'est quoi une transition?

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. (Source : MDN)

Il y a deux moyens de créer des animations en CSS : les transitions et les keyframes.
Les transitions sont le moyen le plus simple et le plus facile à mettre en place pour créer des animations mais elles sont limitées, contrairement aux keyframes qui sont complexes mais qui permettent des animations beaucoup plus fun et bien plus élaborées.
Pour que ça ne soit pas très complexe, dans ce post nous allons d’abord utiliser seulement la transition et peut-être les keyframes dans le post suivant.

Pour créer une animation à l'aide d'une transition, on aura besoin de plusieurs informations comme :

Une propriété CSS à modifier ;
Une valeur initiale de cette propriété ;
Une valeur finale que prendra cette propriété ;
Une durée d’animation exprimée en unité de temps ;
Un évènement pour déclencher votre transition.

On va y aller par un exemple pour illustrer la petite théorie ci-haut :

Créons d'abord deux boutons en HTML.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Animations et transitions</title>
</head>
<body>
  <h2>Exemples avec les boutons</h2>
  <div class="buttons-exercise">
    <button class="btn1">Bouton</button>
    <button class="btn2">Bouton</button>
    <button class="btn1">Bouton</button>
  </div>
</body>
</html>

Appliquons ensuite du style à ces boutons avec CSS.

.btn1{
  padding: 15px;
  border: none;
  width: 200px;
  background: #48D1CC;
  color: #242424;
  border-radius: 30px;
}

.btn2{
  padding: 15px;
  border: none;
  width: 200px;
  background: #e67e22;
  color: #242424;
  border-radius: 30px;
}

Regardons un peu l'affichage.

Vous remarquerez que le bouton central est en orange comme défini en CSS, il a été défini avec une couleur différente des autres car c'est le bouton qui va nous aider dans notre série des transitions.

Vous vous souvenez que nous avons expliqué que pour créer une animation il fallait avoir plusieurs informations?
Dans notre cas nous avons déjà un élément à modifier (notre bouton central avec comme valeur btn2) et nous connaissons déjà sa valeur initiale avec tous les styles que nous lui avons appliqués avec CSS.
Maintenant nous allons mettre en application d'autres éléments pour qu'on puisse regarder l'effet de l'animation.

cursor: pointer;
  transition-property: transform;
  transition-duration: 200ms;
  &:hover {
        background: blue;
        transform: scale(1.15);
    }

Nous avons défini la durée de notre transition par rapport au survol de la souris au dessus du bouton par l'utilisateur. Le bouton va changer de couleur en rouge avec notre code background: blue, le bouton va grossir de quelques millimètres avec le code transform: scale(1.15) car par défaut le scale est défini à 1 et enfin, après le survol de la souris, le bouton va mettre 200 millisecondes avant de revenir à son état initial.

Résultat après avoir appliquer la transformation à notre bouton

Nous avons utilisé toutes nos cinq méthodes en utilisant pour le deuxième exemple un évènement qui déclenche notre animation. Dans notre cas c'était avec l'évènement du survol de la souris avec le mot clé :hover qui est une pseudoclasse (Les pseudoclasses? Mais ce n'est pas ça notre sujet😉). Finalement l'état initial était différent de l'état final, au survol le bouton est devenu plus grand que les autres et a changé de couleur.

Parlons un peu des pseudoclasses car c'est elle qui nous permettrons dans la plus part des cas d'appliquer une animation à un élément de notre page web.

C'est quoi une pseudoclasse?

Une pseudoclasse peut être définie comme une condition qui sera lis par le navigateur pour produire, déclencher ou encore cesser un événement sur notre site. C'est un peu comme le if/else.
Comme pour notre cas nous avons donné une condition de transformer un élément à l'aide de la pseudoclasse :hover.

Il y a plusieurs pseudoclasses autres que :hover. Nous pouvons citer par exemple:

:active : activé quand l'utilisateur clique sur un élément. Souvent appliqué aux boutons et aux liens
:focus : quand un élément est sélectionné ;
:cheked : quand un élément est sélectionné dans un checkbox ou à l'aide d'un bouton radio ;
:valid : quand le input de l'utilisateur correspond au type de données voulu ;
:invalid : quand le input de l'utilisateur ne correspond pas au type de données voulu ;

Comme on vient de le voir avec les pseudoclasses, il y a plusieurs cas dans lesquels ou peut utiliser l'animation sur un site web et cela de plusieurs manières. Dans un formulaire, sur un bouton, sur un questionnaire, ...

L'animation est un outil très puissant pour créer une réactivité sur son site et ainsi améliorer l'expérience utilisateur.

Nous n'avons parler que d'une petite partie de cet outil puissant, mais il y a encore d'autres moyens qui nous permettent de créer des animations uniques, jolies et complexes, qui ressemblent parfois à des œuvres d'art.

Il ne faut pas aussi abuser avec plus d'animations sur son site, il faut seulement le faire quand c'est nécessaire.

Pour apprendre plus sur la transformation et l'animation, il y a une grande documentation sur le web :