Teddy Kishi, auteur/autrice sur Teddy Kishi

10 projets simples pour débuter en code dans n’importe quel langage

31 mars 2023 Par Teddy Kishi

Si vous êtes débutant en programmation et que vous cherchez des projets simples pour vous initier, vous êtes au bon endroit ! Dans cet article, je vous présentes 10 idées de petits projets que vous pouvez réaliser dans n’importe quel langage de programmation. Ces projets vous permettront d’acquérir les bases du codage tout en créant des applications utiles et amusantes. Alors, sortez votre éditeur de code et préparez-vous à commencer votre voyage dans le monde fascinant de la programmation.

1. ToDo List

Créez une application de gestion de tâches où vous pourrez ajouter, modifier et supprimer des tâches. C’est un excellent moyen d’apprendre les concepts de base tels que les variables, les tableaux et les fonctions.

2. Calculatrice

Développez une calculatrice simple qui peut effectuer les opérations de base telles que l’addition, la soustraction, la multiplication et la division. Vous pouvez même ajouter des fonctionnalités supplémentaires comme le calcul des pourcentages.

3. Jeu du Pendu

Programmez le célèbre jeu du Pendu où les joueurs doivent deviner un mot en proposant des lettres.

Cela vous permettra de vous familiariser avec les boucles, les conditions et la gestion des chaînes de caractères.

Décomposition du problème : Divisez le jeu en petites étapes plus gérables. Par exemple, commencez par la logique de sélection d’un mot aléatoire, puis passez à l’affichage des tirets pour les lettres non devinées, et ainsi de suite. Cela rendra le développement plus gérable.
Utilisez des fonctions : Découpez votre code en fonctions réutilisables. Par exemple, une fonction pour vérifier si une lettre est dans le mot, une autre pour gérer l’affichage des tirets, etc. Cela rendra votre code plus propre et plus facile à déboguer.

4. Convertisseur d’unités

Créez un programme qui convertit différentes unités de mesure, comme les températures (de Celsius à Fahrenheit) ou les distances (de kilomètres à miles).

Cela vous aidera à comprendre les opérations mathématiques et les conversions.

5. Mini-blog

Concevez un mini-blog où vous pouvez ajouter des articles, les afficher et les modifier. Cela vous permettra de manipuler des bases de données simples et de comprendre les opérations de création, de lecture, de mise à jour et de suppression (CRUD).

6. Générateur de mots aléatoires

Créez un programme qui génère des mots aléatoires à partir d’une liste prédéfinie. Vous pouvez même ajouter des contraintes pour générer des mots spécifiques comme des mots de passe forts.

7. Jeu du Morpion

Programmez le jeu du Morpion où deux joueurs s’affrontent pour aligner trois symboles identiques sur une grille. Cela vous permettra de travailler avec des tableaux multidimensionnels et de mettre en pratique les concepts de la logique de jeu.

8. Calculatrice de pourboire

Développez une calculatrice qui calcule le montant du pourboire en fonction du total de la facture et du pourcentage de pourboire choisi. C’est une bonne occasion de pratiquer les opérations mathématiques et les interactions avec l’utilisateur.

9. Liste de courses

Créez une application qui permet aux utilisateurs de créer une liste de courses en ajoutant des articles et en les marquant comme étant achetés. Vous pouvez également ajouter des fonctionnalités telles que le calcul du total des achats.

10. Système de réservation de places

Concevez un système de réservation de places pour un cinéma ou un événement. Les utilisateurs devraient pouvoir sélectionner les places disponibles et les réserver. Cela vous permettra de travailler avec des tableaux, des boucles et des conditions.

Conclusion

En vous lançant dans ces 10 projets simples, vous pourrez acquérir de solides bases en programmation tout en créant des applications pratiques et amusantes. N’hésitez pas à choisir le langage de programmation qui vous intéresse le plus et à adapter ces projets à vos besoins. Que vous optiez pour une ToDo List, une calculatrice ou un jeu du Pendu, chaque projet vous apportera une expérience précieuse et vous aidera à progresser dans votre parcours de développeur.

Alors, prenez votre clavier et commencez dès maintenant à coder votre premier projet !

Foire aux questions

Quel langage de programmation convient le mieux aux projets débutants ?
Où puis-je trouver des ressources pour apprendre à programmer en ligne ?
Comment puis-je tester mes projets de programmation ?
Quels autres projets simples pouvez-vous recommander pour les débutants ?
Comment puis-je améliorer mes compétences en programmation au-delà de ces projets simples ?

Comment évaluer si son site web est bien fait : Guide complet pour l’audit technique, la vitesse de chargement et l’optimisation SEO

28 février 2023 Par Teddy Kishi

Avoir un site web bien conçu et optimisé est essentiel pour attirer et retenir les visiteurs. Mais comment pouvez-vous évaluer si votre site web est réellement bien fait ? Dans cet article complet, je vais vous présenter des outils d’audit et des techniques pour analyser les erreurs techniques, la vitesse de chargement et l’optimisation SEO de votre site web. Grâce à ces évaluations approfondies, vous pourrez identifier les domaines à améliorer et prendre des mesures concrètes pour optimiser votre site web. Préparez-vous à évaluer la qualité de votre site web et à le rendre encore meilleur !

Audit technique pour une base solide

Un audit technique approfondi vous permet de vérifier l’état de santé de votre site web et d’identifier les erreurs qui pourraient affecter son fonctionnement et son référencement. Voici quelques outils et techniques essentiels pour réaliser un audit technique efficace

1. Google Search Console

Cet outil gratuit fourni par Google est un incontournable pour les webmasters. Il vous permet de vérifier l’état technique de votre site web en identifiant les erreurs d’exploration, les problèmes d’indexation et les suggestions d’améliorations. Connectez votre site à Google Search Console pour surveiller régulièrement les rapports d’erreurs et les messages importants.

2. Screaming Frog

Screaming Frog est un outil d’audit SEO puissant qui analyse votre site web en parcourant ses pages et en identifiant les problèmes techniques tels que les liens cassés, les balises manquantes, les redirections incorrectes, etc. Il vous fournit un rapport détaillé qui facilite la correction des erreurs et l’amélioration de la structure de votre site.

3. Test de compatibilité mobile :

La compatibilité mobile est essentielle de nos jours, car de plus en plus de personnes utilisent des appareils mobiles pour naviguer sur le web. Utilisez l’outil de test de compatibilité mobile de Google pour vous assurer que votre site est optimisé pour les appareils mobiles et qu’il offre une expérience utilisateur fluide.

4. Vérification de la validité du code :

Un code bien structuré et valide est important pour garantir un bon fonctionnement de votre site web. Utilisez des validateurs HTML et CSS pour vérifier si votre code respecte les normes et corrigez les erreurs signalées. Un code propre facilite également la maintenance et les futures mises à jour de votre site.

Vitesse de chargement : L’importance de l’optimisation

La vitesse de chargement d’un site web est un facteur crucial pour l’expérience utilisateur et le référencement. Des temps de chargement lents peuvent entraîner une baisse du taux de conversion et une perte de trafic. Voici quelques outils et techniques pour évaluer et améliorer la vitesse de chargement de votre site :

PageSpeed Insights

PageSpeed Insights, fourni par Google, évalue la vitesse de chargement de votre site web sur mobile et sur ordinateur. Il vous fournit des scores et des suggestions d’amélioration spécifiques pour rendre votre site plus rapide et convivial pour les utilisateurs. Suivez les recommandations fournies pour résoudre les problèmes et optimiser la performance de votre site.

Optimisation des images

Les images volumineuses peuvent ralentir considérablement le chargement de votre site. Utilisez des outils de compression d’images tels que TinyPNG ou Compressor.io pour réduire la taille de vos images sans compromettre leur qualité. N’oubliez pas d’utiliser les formats d’image appropriés (JPEG, PNG, etc.) en fonction du contenu et des besoins de votre site.

Mise en cache

L’utilisation de la mise en cache permet de stocker certaines ressources de votre site sur l’appareil de l’utilisateur, ce qui accélère le chargement des pages lors de visites ultérieures. Configurez correctement les en-têtes de cache sur votre serveur et utilisez des plugins de mise en cache tels que WP Rocket (pour WordPress) pour tirer parti de cette fonctionnalité.

Minification des fichiers

La minification consiste à réduire la taille des fichiers CSS, JavaScript et HTML en supprimant les espaces, les sauts de ligne et les commentaires inutiles. Cela réduit le temps de téléchargement et améliore la vitesse de chargement globale de votre site. Utilisez des outils de minification tels que UglifyJS et CSSNano pour optimiser vos fichiers.

Optimisation SEO pour une visibilité maximale

L’optimisation SEO est cruciale pour permettre à votre site web d’être bien positionné dans les résultats de recherche. Voici quelques aspects clés à évaluer et à optimiser pour améliorer la visibilité de votre site :

Recherche de mots clés :

Effectuez une recherche approfondie des mots clés pertinents pour votre site web et votre niche. Utilisez des outils de recherche de mots clés tels que SEMrush, Google Keyword Planner ou Ubersuggest pour identifier les mots clés populaires et à fort potentiel. Intégrez ces mots clés stratégiquement dans vos contenus et balises pour améliorer votre classement dans les moteurs de recherche.

Optimisation des balises méta :

Assurez-vous que vos balises de titre, balises de description et balises d’en-tête (H1, H2, H3, etc.) sont optimisées pour les mots clés ciblés. Les balises méta bien rédigées aident les moteurs de recherche à comprendre le contenu de votre site et à afficher des extraits pertinents dans les résultats de recherche.

Amélioration de l’expérience utilisateur :

Google accorde une importance croissante à l’expérience utilisateur dans ses algorithmes de classement. Assurez-vous que votre site offre une expérience utilisateur fluide et conviviale en termes de navigation, de temps de chargement, de structure de contenu et de lisibilité. Une bonne expérience utilisateur contribue à réduire le taux de rebond et à améliorer le classement de votre site.

Création de contenu de qualité :

Le contenu de qualité est essentiel pour attirer et engager les visiteurs, ainsi que pour renforcer votre positionnement dans les moteurs de recherche. Créez un contenu informatif, utile et bien structuré qui répond aux besoins de votre public cible. Utilisez des mots clés pertinents de manière naturelle et évitez le contenu dupliqué. Ajoutez également des liens internes et externes pertinents pour renforcer l’autorité de votre site.

Conclusion : Votre site web vers l’excellence

Évaluer la qualité de votre site web est une étape cruciale pour assurer son succès. En réalisant un audit technique approfondi, en optimisant la vitesse de chargement et en améliorant l’optimisation SEO, vous pouvez améliorer la performance, l’expérience utilisateur et la visibilité de votre site. Utilisez les outils et techniques mentionnés dans cet article pour évaluer, corriger et optimiser votre site web. N’oubliez pas de surveiller régulièrement les performances de votre site et de mettre en œuvre des améliorations continues pour rester compétitif dans l’environnement en ligne en constante évolution.

FAQ (Foire aux questions) :

Quels sont les principaux facteurs à prendre en compte lors de l’évaluation d’un site web ?
Quelle est l’importance de la vitesse de chargement d’un site web ?
Comment puis-je améliorer la vitesse de chargement de mon site web ?
Quels sont les éléments clés de l’optimisation SEO d’un site web ?
Quels sont les autres outils d’évaluation de site web recommandés ?

Comment écrire un code Arduino qui ouvre et ferme un relais ?

31 janvier 2023 Par Teddy Kishi

Tu viens d’acquérir un module relais mais tu ne sais pas comment le faire fonctionner ?

Attention au branchement ! Surtout ne mets pas tes doigts sous le module. En effet il n’est pas protégé ! Si tu le tiens en main ou si tu le pose sur une surface conductrice, tu es en danger !

Voici le code Arduino qui va te permettre de le faire fonctionner.

const int relayPin = 8; // le relais est connecté au pin 8

void setup() {
  pinMode(relayPin, OUTPUT); // définir le pin 8 comme sortie
}

void loop() {
  digitalWrite(relayPin, HIGH); // ouvrir le relais
  delay(1000); // attendre 1 seconde
  digitalWrite(relayPin, LOW); // fermer le relais
  delay(1000); // attendre 1 seconde
}

Ce code fait clignoter le relais toutes les secondes en ouvrant et en fermant le circuit électrique.

Voici comment ça fonctionne :

Dans la fonction setup(), on définit le pin 8 comme une sortie en utilisant la fonction pinMode(). Cela signifie que le Arduino peut envoyer du courant électrique à travers ce pin.
Dans la fonction loop(), on utilise la fonction digitalWrite() pour envoyer du courant électrique à travers le pin 8. Si on envoie du courant (HIGH), le relais s’ouvre et le circuit électrique est complété.

Si on n’envoie pas de courant (LOW), le relais se ferme et le circuit électrique est interrompu.

J’espère que ça t’a aidé !

Comment réparer son cuiseur de riz ?

22 septembre 2019 Par Teddy Kishi

Réparer un autocuiseur peut sembler compliqué, mais avec un peu de curiosité et d’adresse manuelle, c’est une aventure tout à fait à notre portée. Je vais partager avec vous mon expérience personnelle de réparation d’un autocuiseur, une démarche qui m’a permis non seulement de sauver mon appareil mais également d’acquérir de nouvelles compétences en bricolage.

Tout a commencé par l’ouverture de l’autocuiseur, une opération simple qui nécessitait de retourner l’appareil et de retirer trois vis à l’arrière. Armé de mon fidèle multimètre en mode continuité, j’ai ensuite procédé à l’exploration des circuits internes de l’appareil. Cette étape cruciale m’a permis d’identifier un segment défectueux où la continuité était interrompue, signe évident d’un composant en panne.

À ma grande surprise, le coupable était un fusible thermique, un petit composant dont je n’avais jamais entendu parler auparavant. Sa fonction? Protéger l’appareil en cas de surchauffe en interrompant le circuit. Un test rapide avec le multimètre a confirmé mes soupçons : le fusible était bien la cause du problème.

La solution s’est dessinée clairement : remplacer le fusible défectueux. Grâce à une recherche rapide sur Amazon, j’ai trouvé le fusible correspondant aux spécifications inscrites sur l’ancien. Quelques jours plus tard, je tenais le précieux sésame dans mes mains, prêt à redonner vie à mon autocuiseur.

Le remplacement du fusible a été un peu délicat. Étant donné la difficulté à dessouder l’ancien fusible, j’ai opté pour le couper puis souder le nouveau en place, veillant à respecter les dimensions originales pour un ajustement parfait. Avant de tout remonter, un dernier test a confirmé le succès de l’opération.

Le remontage final a été une étape minutieuse, surtout pour insérer le nouveau fusible dans sa gaine protectrice, un peu récalcitrante. Mais avec un peu de patience et de dextérité, j’ai réussi à tout remettre en place, prêt pour le test ultime.

Et voilà, en actionnant l’interrupteur, j’ai été accueilli par le doux bourdonnement de mon autocuiseur, prêt à reprendre du service pour de nombreuses années. Cette expérience m’a non seulement permis de réparer mon appareil mais aussi de comprendre une des causes principales de défaillance dans les autocuiseurs.

J’espère que mon aventure bricolage vous inspirera à tenter vos propres réparations. C’est une manière efficace d’économiser, de réduire les déchets et, qui sait, de découvrir un nouveau hobby passionnant.

Comment créer des graphiques avec Chartist.js ?

27 février 2015 Par Teddy Kishi

Il existe une petite librairie qui permet de générer des graphiques sans connaissances particulières en SVG. Il s’agit de Chartist.js.

La force de Chartist.js est sa simplicité qui est en même temps sa faiblesse. En effet le code est très simple mais il n’y a pas beaucoup de diversité dans les types de graphique. Nous n’avons droit que à trois types de graphique : en ligne, en barre et en tarte. Il est possible d’en ajouter un quatrième en faisant un trou au milieu du graphique pour en faire un donut ou une jauge.

Mise en place

Chartist est simple à mettre en place il suffit d’insérer la feuille de style CSS et le fichier JavaScript.

1	<script src= »//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js »></script>

Dans le BODY, on ajoute une DIV où le code SVG généré par Chartist sera inséré. Et on ouvre une balise script dans laquelle on insérera un code d’exemple de Chartist figurant sur le site.

12	<div id= »bar-chart » class= »ct-chart »></div><script type= »text/javascript »></script>

Dans la variable data, un tableau labels peut contenir toute sorte de valeurs. Notre tableau contient des séries de données. Comme options, nous pouvons définir une taille de 300×200 px pour un graphique statique. Nous pouvons également omettre ces paramètres pour avoir un graphique responsive. Nous allons créer un nouvel objet Chartist de type Bar. Nous passons comme premier paramètre un sélecteur qui est celui qui va sélectionner notre DIV. Le second paramètre est l’objet des données. En troisième paramètre nous passons dans nos options personnalisées.

123456789101112

var data = { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [ [5, 2, 4, 2, 0] ]};var options = { width: 300, height: 200};new Chartist.Bar(‘.ct-chart’, data, options);

Très bien ça marche ! Maintenant on va essayer de présenter les données venant d’un fichier JSON. On va générer un fichier JSON grâce a generatedata.com. Dans la ligne : Colonne “title” mettre “name” et dans “data type” choisissez “Names”. Ensuite choisissez le genre de votre choix. Dans la ligne 2 : Colonne “title” mettre “age” et dans “data type” choisissez “Number Range”. Ensuite dans “options” on entre between 18 and 25. Cliquez sur le tab JSON dans “Export type”, cliquez sur “Simple”. Prenons l’option “Prompt to download” et enfin on clique sur “Generate”. Le navigateur va nous proposer de télécharger un fichier, on va le nommer : data.json Il ne nous reste plus qu’à inclure jQuery dans nos scripts et nous sommes prêt.

1	<script src= »//code.jquery.com/jquery-1.11.2.min.js »></script>

Dans notre code nous allons attendre que le document soit chargé avec « document ready ». Nous allons crée la fonction onJsonReady qui servira de callback quand le fichier JSON sera chargé. Il y a plusieurs manières de faire un appel Ajax en jQuery et dans notre cas getJSON fera bien le travail. Nous lui passons comme premier argument l’URL du fichier json, ici « data.json ». En deuxième argument onJsonReady.

Nous voulons dessiner le graphique quand nos données sont chargées. Alors il va falloir mettre tout notre code de Chartist dans la fonction onJsonReady.

$(document).ready(function() { function onJsonReady(json) { console.log(json) var data = { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [ [5, 2, 4, 2, 0] ] }; var options = { width: 300, height: 200 }; } new Chartist.Bar(‘.ct-chart’, data, options); } $.getJSON(« data.json », onJsonReady);});

A cette étape, il n’y a pas grand chose qui change. Sauf lorsqu’on fait console.log de json on obtient le contenu du fichier JSON dans un tableau.

2. Préparation des données

Nous allons commencer par ranger toutes les personnes par leurs ordre d’âge. Et pour ranger en ordre croissant nous utiliserons sort.

123	json.sort(function(a,b){ return a.age – b.age;})

On va créer un tableau labelsData pour stocker les étiquettes de notre graphique.
Nous allons aussi devoir regarder si chaque élément du tableau existe déjà dans labelsData.
Pour ce faire, on va utiliser IndexOf. Si il trouve la valeur dans le tableau, il va retourner la clé de la valeur sinon il va retourner -1 pour dire qu’il ne trouve pas.
Donc si la valeur age est déjà dans le tableau, il ne la rajoute pas.

123456

var labelsData = [];json.forEach(function(person, key){ if(labelsData.indexOf(person.age) == -1){ labelsData.push(person.age); }});

On va préparer un tableau serieData. 0n va y mettre les comptes des personnes de chaque âge. Nous allons compter les occurrences de chaque nombre dans les âges dans une boucle.

Nos âges se trouvent dans le tableau labelsData. Donc pour chaque âge, on prépare une variable pour compter qui commence à zero.
Et dans une autre boucle cette fois-ci, on va passer en revue toutes les personnes dans le JSON et on va comparer si leurs âges correspondent au label courant dans la boucle.
Si les deux âges ont la même valeur, on incrémente. Sinon on ne fait rien.
On sauve la valeur dans le tableau serieData en faisant push dans le tableau.

12345678910

var serieData = [];for(var i = 0; i < labelsData.length; i++) { var count = 0; for(var j = 0; j < json.length; j++) { if(labelsData[i] == json[j].age) { count++; } }; serieData.push(count);};

3. Configurer Chartist

Pour finir, il suffit de remplacer le tableau labels dans notre objet data par celui que nous avon préparé labelsData.
Et ensuite de faire de même avec serieData que l’on va mettre dans le tableau qui se trouve déjà dans series.

1234567891011

var data = { labels: labelsData, series: [serieData]};var options = { width: 300, height: 200};new Chartist.Bar(‘#bar-chart’, data, options);

Le graphique serait beaucoup mieux en horizontal. Je vais alors aller dans l’objet option et y ajouter les paramètres suivants :

123456789101112131415

var options = { width: 300, height: 200 horizontalBars: true, axisX :{ showGrid: true, offset: 60, // décalage labelInterpolationFnc: function(value) { return Math.round(value) ; } }, axisY : { showGrid: false }};

La clé labelInterpolationFnc permet d’exécuter une fonction pour chaque valeur des étiquettes. Ici, on va retourner la valeur arrondie grâce a Math.round.

4. Animation

Pour le rendre plus sympa, nous allons animer notre graphique. Pour cela on doit assigner l’objet Chartist à une variable pour pouvoir la manipuler plus tard.

1	var myBarChart = new Chartist.Bar(‘#bar-chart’, data, options);

L’événement draw va être exécuté lorsque Chartist va vouloir dessiner le graphique. Pour chaque élément SVG dessiné par Chartist, nous allons déclencher des animations SMIL si celui-ci est de type bar.

JavaScript

123456789101112131415

myBarChart.on(‘draw’, function(data) {if(data.type === « bar ») { console.log(data) data.element.animate({ x2: { begin: data.index * 1000, dur: 1000, from: data.x1, to: data.x2, easing: Chartist.Svg.Easing.easeOutQuart }});}});

Je vous conseille de faire un console.log de data dans la fonction pour voir les propriétés animables.

Vous pouvez bien sûr inspecter l’élément SVG généré et faire vos propres animations avec du CSS3.

Pour plus d’exemples, je vous recommande fortement d’aller voir sur le site de Chartist.js. Les exemples sont très bien faits.Cette article a été publiée dans librairie. Bookmarquez ce permalien.