JavaScript : Comment trier une liste et l’afficher sur une page web ?

Lors d’un précédent billet, je vous avais présenté une méthode pour trier une liste en JavaScript. A l’époque, la sortie se faisait via la console. Dans la vraie vie du développeur Front, on affiche rarement le résultat sur la console (sauf pour débuguer).

Aussi, avec ce nouvel article je vais vous montrer comment effectuer les mêmes tris mais avec un affichage sur une page web.

Pour que ce soit joli, je vais utiliser Bootstrap pour donner un aspect sympathique à l’affichage.

Structure HTML de la page

Coté structure de la page en HTML, on reprend la base du dernier exemple avec les deux boutons permettant d’afficher le trie par âge et le trie par nom des personnages de notre jeu (reprise de l’exemple).

Puis on prépare l’espace où on affichera le résultat après chaque clic sur l’un ou l’autre bouton de choix. L’id utilisé pour cette sortie se nomme  » résultat  » :

Trier en javaScript

Par Prénom Par Age

Résultat

Voici le résultat sur notre page web :

Côté JavaScript

On retrouve notre fière équipe avec ses caractéristiques. C’est juste un prétexte pour disposer de chaînes de caractères (String) et de nombres à trier pour notre exemple de trie avec JavaScript :

var warrior = [
    { name: "Kraken", age: 21, weapon: "arc" },
    { name: "Améria", age: 27, weapon: "fusil" },
    { name: "Narfy", age: 25, weapon: "couteau" },
    { name: "Golïm", age: 17, weapon: "poignard" },
    { name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
    { name: "Nolülf", age: 23, weapon: "hache" },
    { name: "Joliett", age: 22, weapon: "bazooka" }
];

Fonction affichage tableau

En JavaScript, on va passer par une fonction qui a pour mission de générer l’affichage du résultat du trie sous forme de tableau à l’emplacement repéré par l’id défini nommé  » resultat  » (vu au-dessus).

Vous repérez facilement les balises HTML mentionnées dans cette fonction pour constituer le tableau de données triées :

function display(i) {
    console.log(i);
    var html = document.getElementById('resultat').innerHTML;
    html = html + "";
    html = html + "";
    html = html + "";
    html = html + "";
    html = html + "";
    warrior.forEach(function (warrior) {
        html = html + "";
        html = html + "";
        html = html + "";
        })
    html = html + "";
    html = html + "
NomAgeArme
" + warrior.name + "" + warrior.age + "" + warrior.weapon + "
"; document.getElementById('resultat').innerHTML = html; }

Trier des nombres

Ici rien de nouveau sous le soleil car on reprend tout simplement la fonction de la dernière fois pour trier par âge :

function sortAge() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par age croissant";
    warrior.sort(function (a, b) {
        return a.age - b.age;
    });
    display(intro);
}

Voici le résultat sur notre page web :

Trier des String (chaînes de caractères)

De la même manière, on reprend tout simplement la fonction de la dernière fois pour trier par nom en utilisant la fonction sortName() :

function sortName() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par nom croissant";
    warrior.sort(function (a, b) {
        return a.name.localeCompare(b.name);
    });
    display(intro);
}

Voici le résultat sur notre page web :

Et voilà le tour est joué !
Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.

Retrouvez le code sur mon GitLab :

Publicités

Comparaison de la notion de besoin : Maslow, Murray et Schütz

Besoin et comportement d’achat

Les expériences émotionnelles nous indiquent quel besoin est le plus important dans l’immédiat, nous signalent dans quelle mesure il est comblé ou insatisfait et nous permettent de déceler à quel moment il est temps de passer à autre chose.

Il est donc important de bien comprendre les besoins ainsi que les mécanismes de leur satisfaction.

Par extension, l’entreprise doit comprendre ce que sont les besoins humains de leurs prospects ou clients pour définir les offres commerciales qui pourront satisfaire ces besoins ou désirs latents ou existants.

Le besoin selon Henry Murray

Henry Alexander Murray, né le 13 mai 1893 à New-York et mort le 23 juin 1988 à Cambridge, est un psychologue américain et un professeur de psychologie de l’université Harvard [Wikipédia].

En 1938, Henry Murray a défini une liste de 30 besoins fondamentaux dont les plus utilisés sont au nombre de 11 :

  • Besoin d’acquérir : posséder, avoir de la propriété, saisir, voler des objets, marchander, travailler pour de l’argent ou des biens en nature.
  • Besoin d’accomplissement : surmonter des obstacles, exercer une responsabilité, lutter pour obtenir quelque chose dans les meilleurs délais et de la meilleure façon possible.
  • Besoin d’exhibition : attirer l’attention d’autrui, amuser, émouvoir, choquer, faire peur.
  • Besoin de dominance : influencer ou contrôler autrui, persuader, interdire, dicter sa loi, guider et diriger, organiser la vie d’un groupe.
  • Besoin d’affiliation : nouer des amitiés et appartenir à des associations, vivre avec d’autres, apporter sa collaboration et sa conversation, aimer.
  • Besoin de jeu : se détendre, s’amuser, rechercher le divertissement, prendre du bon temps, rire, plaisanter, éviter toute tension.
  • Besoin d’ordre : arranger, organiser, ranger, être précis et scrupuleux.
  • Besoin de reconnaissance : susciter des faveurs et des compliments, mettre en valeur ses actes, rechercher la distinction, le prestige social, les honneurs.
  • Besoin de déférence : admirer et suivre de son plein gré un supérieur, coopérer, servir.
  • Besoin d’autonomie : résister à l’influence ou à la coercition, défier l’autorité, rechercher la liberté, lutter pour son indépendance.
  • Besoin d’agression : injurier, tuer, faire mal, accuser, blâmer ou ridiculiser autrui, punir.

Le besoin selon Abraham Maslow

Abraham Harold Maslow, né le 1er avril 1908 à New York et mort le 8 juin 1970 à Menlo Park en Californie, est un psychologue américain considéré comme le père de l’approche humaniste [Wikipédia].

En 1952, Abraham Maslow présente une théorie de hiérarchie des besoins partant du précepte qu’un bien supérieur ne peut pas apparaître tant que la satisfaction de celui qui le précède.

Pyramide de Maslow

Les besoins sont présentés sous forme d’une pyramide composée des :

  • Besoins physiologiques (manger, boire, respirer, etc.) sont prioritaires et sont directement liés à la survie ;
  • Besoin de sécurité (stabilité, ordre, limites, protection, etc.) sont très directement reliés à la survie mais ne correspondent pas à des besoins physiologiques ;
  • Besoin d’appartenance (amour, amitié, relations affectueuses et faire partie d’un groupe) ;
  • Besoin d’estime (respect, attention, appréciation des autres, estime de soi, compétence, liberté, etc.) ;
  • Besoin d’épanouissement (accomplissement, santé psychique).

Le besoin selon William Schütz

William Schütz, né le 13 décembre 1925 à Chicago et mort le 9 novembre 2002 à New York, est un psychologue américain qui s’est intéressé aux relations entre les personnes et la psychologie des comportements.
William Schütz développe la théorie des besoins interpersonnels qui repose sur trois besoins fondamentaux :

  • Le besoin d’inclusion (recherche de la reconnaissance par les autres) pousse l’individu à faire partie d’un groupe, à s’associer à d’autres membres d’une communauté ;
  • Le besoin de contrôle (recherche de responsabilités et de contrôle) pousse l’individu à influencer et piloter les personnes avec qui il est en contact ;
  • Le besoin d’affection (recherche ou non d’une distance sociale) pousse l’individu à rechercher une distance sociale ou de l’intimité dans leur relation.

Il existe une hiérarchie entre ces trois besoins : le besoin d’inclusion précédant le besoin de contrôle puis le besoin d’affection viendrait en dernier dans la relation avec les autres individus.

Comparaison des points de vue

Points convergents

Identification au groupe

Le besoin d’affiliation pour Murray, le besoin d’appartenance pour Maslow et le besoin d’inclusion pour Schütz montrent que l’individu a une propension à s’identifier au groupe qui va générer ou créer des besoins spécifiques au groupe.

Exemple : les utilisateurs des produits Apple se regroupent au sein d’une communauté de partage d’information permettant à la marque de capter les retours d’information sur l’usage de leurs produits.

Répondre à tous les besoins

Pour l’approches de la pyramide des besoins de Maslow, il est tout à fait possible de répondre à tous les besoins par l’acquisition de produits de luxe. Il en va de même si on compare avec les trois besoins de Schutz.

Exemple : devenir propriétaire d’une luxueuse villa sur le Port de St Tropez répond aux besoins de sécurité, d’acquisition, d’inclusion, d’estime, d’exhibition, de dominance, d’accomplissement, …

Points divergents

Approche humaniste

L’approche humaniste est un courant de pensée basée sur la volonté de l’humain d’être acteur de son développement personnel en le poussant à accomplir des actions et à s’accomplir par l’engagement et la responsabilité.
Cette approche se retrouve chez Maslow et la pyramide des besoins représentant le cheminement des étapes partant des besoins physiologiques pour atteindre le but le plus haut (besoin d’épanouissement).

Approche béhaviorisme

Contrairement à l’approche humaniste centrée sur l’individu, l’approche béhaviorisme étudie les interactions avec les éléments extérieurs (stimuli qui vont déterminer le comportement humain).
Pour Murray et Schütz, l’approche béhaviorisme met l’accent sur l’étude du comportement observable. Cette approche souligne l’importance et l’influence primordial de l’environnement et de la relation aux autres.

Exemple : la répétition d’un message publicitaire va provoquer l’acte de renseignement et d’achat du produit ou service présenté.

Hiérarchie des besoins

Selon Maslow, on ne peut satisfaire un besoin que si le besoin précédent est déjà satisfait alors que pour Murray et Schutz, les besoins ne sont pas reliés et il n’y a pas de hiérarchie des besoins à satisfaire. Certains besoins peuvent être comblés en même temps que d’autres commencent à occuper le centre de l’attention de la personne.

Exemple : conduire une voiture de luxe permet à la fois de répondre au besoin de possession mais également de répondre au besoin d’attirer l’attention.

Conclusion

Un besoin humain nait du sentiment de manque par rapport à une satisfaction à obtenir.

Les classifications des besoins par Murray, Maslow et Schütz permettent de définir une première étape, mais non suffisante, de la compréhension du comportement des clients.

La comparaison des points de vue a mis en lumière une majorité de points de convergence et de divergence liés à la propre nature humaine de l’individu (besoins physiologiques, de sécurité ou d’estime de soi) et de son interaction avec les autres (besoins d’appartenance, d’affection ou de reconnaissance).

Comment trier une liste en JavaScript ?

Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier les éléments d’un tableau. Ceci étant dit, trier des nombres fonctionne très bien avec cette méthode. Mais trier des chaînes de caractères peut vous apporter quelques surprises.

Je vous propose dans ce billet de vous présenter les deux possibilités : trier des nombres (facile) puis trier des chaînes de caractère.

On plante le décor

Avant de pouvoir s’amuser follement à trier en JavaScript, on besoin d’un peu de matière à manipuler. Imaginons un jeux de rôle avec de fiers guerriers caractérisés par un nom, un age et une arme :

var warriors= [
	{ name: "Kraken", age: 21, weapon: "arc" },
	{ name: "Améria", age: 27, weapon: "fusil" },
	{ name: "Narfy", age: 25, weapon: "couteau" },
	{ name: "Golïm", age: 17, weapon: "poignard" },
	{ name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
	{ name: "Joliett", age: 22, weapon: "bazooka" }
];

Nous allons utiliser un affichage du résultat directement sur la console : je vous entends déjà vous esclaffer : « il ne se foule pas trop le gars 😉 ».
Et bien oui, et j’en suis fière.

De toute façon, une fois la méthode comprise, vous pouvez adapter ce script pour répondre à vos souhaits les plus fous…

Bref, revenons à nos lignes de codes : je vous propose d’utiliser une fonction qui aura pour mission d’afficher le résultat du trie.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :

function display(i) {
   console.log(i);
   for (i = 0; i < warriors.length; i++) {
   console.log(warriors[i].name + " a " + warriors[i].age + " ans et est équipé d'un " + warriors[i].weapon);
   }
}

Dans le corps de votre page HTML, on va ajouter deux boutons qui permettrons de lancer le trie par age et le trie par nom. A chaque bouton on associe une action qui lance la fonction ad hoc.
Jusque là tout va bien…

Trier en javaScript

Par Prénom Par Age

Voyons de plus près ces jolies fonctions :

Trier des nombres

Comme annoncé en début de billet, la méthode sort() fait très bien le boulot et trier l’age de nos valeureux guerriers est un jeux d’enfants :

function sortAge() {
   warriors.sort(function (a, b) {
   return a.age - b.age;
   });
   display(intro);
}

Tada ! Voilà ce que nous retourne la console lorsqu’on lance le trie par age :

Trier des chaînes de caractères (String)

Trier des chaînes de caractères (String) pose des soucis car le tri s’effectue par défaut selon les points de code Unicode de la chaine de caractères.
Oui mais encore…

Typiquement, cela veut dire que chaque caractère est converti en son code Unicode qui sert à faire le trie.
On peut se retrouver devant un résultat retourner par la machine qui peut laisser perplexe l’être humain que nous sommes : « Cian » sera trié avant « bleu ». Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, « 80 » arrive avant « 9 » selon l’ordre Unicode.

Notre fonction qui trie par nom les courageux guerriers se traduit comme suit :

function sortName() {
   warriors.sort(function (a, b) {
   var nameA = a.name.toUpperCase();
   var nameB = b.name.toUpperCase();
	if (nameA  nameB) {
	return 1;
	}
	// noms identiques
	return 0;
	});
	display(intro);
}

Pour donner un coup de main à la fonction de trie, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau trie par nom, n’est-ce pas ?

Trier des chaînes de caractère (String) avec JavaScript

Et voilà le tour est joué !
Alors sautez sur votre éditeur de code préféré pour mettre en application le trie de données en JavaScript.

Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.

Retrouvez le code sur mon GitLab :

Comment créer votre première application mobile avec Cordova ?

Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Android ou iOS.

Présentation de Cordova

Pour coder une application mobile, on peut le faire de deux manières :

  • Soit développer en langage natif du mobile,
  • Soit créer une application hybride qui sera ensuite portée sur chaque plateforme.

Dans le premier cas, cela oblige à connaître le langage des différentes plateformes (Android, iOS et Windows Mobile).

C’est pour le second cas de figure qu’intervient Cordova/PhoneGap.

Cordova et PhoneGap

Apache Cordova est un framework de développement mobile open-source. Il permet d’utiliser les technologies Web courantes telles que HTML5, CSS3 et JavaScript pour développer des applications multiplateformes, évitant ainsi l’utilisation des langages natifs. Les applications s’exécutent dans des wrappers ciblés pour chaque plate-forme.
PhoneGap permet de développer des applications hybrides, d’utiliser des émulateurs (Desktop et Mobile), d’utiliser des API permettant l’accès aux capteurs du mobile, aux données ainsi qu’à l’état du réseau et de les porter sur chaque plateforme mobile grâce à PhoneGap Build.

Installer l’environnement

SDK Android et iOS

L’installation des SDK pour Android et iOS s’est grandement facilité depuis quelques mois car il suffit d’installer un environnement de développement intégré (EDI) contenant tout le nécessaire pour développer une application pour mobile. Ces EDI mis à disposition gratuitement se nomment :

  • Android Studio pour Android (élémentaire mon cher) ;
  • xCode pour iOS (téléchargeable gratuitement depuis le store Apple).

Node.js

Node.js permet de disposer de la commande npm permettant d’installer des paquets ou des applications en ligne de commande.
Pour installer node.js, rendez-vous à cette adresse : https://nodejs.org/en/

installer-nodejs-1

installer-nodejs-2

installer-nodejs-3

installer-nodejs-4

Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :

$ node -v

Ici, j’obtiens la version de node.js que je viens d’installer : 5.7.0

Cordova

Ouvrir un terminal et utiliser la ligne de commande :

$ sudo npm install –g cordova

Remarque : sur OS X et Linux, sudo permet de lancer une commande avec les droits maximum (root). Sur Windows, vous n’avez pas besoin de faire précéder la commande npm de sudo.

Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :

$ cordova -v

Ici, j’obtiens la version de node.js que je viens d’installer : 6.1.1

PhoneGap Desktop

Ouvrir un terminal et utiliser la ligne de commande

$ sudo npm install –g phongap@latest

Pour vérifier que l’installation s’est bien déroulée, lancer dans un Terminal la commande :

$ phonegap -v

Ici, j’obtiens la version de node.js que je viens d’installer : 6.2.0

PhoneGap Developer

Installer PhoneGap sur votre mobile. Il existe une version pour chaque plateforme. Vous la trouverez dans votre AppStore favoris.

Créer l’application

Création d’un projet vide

Nous allons créer un projet vide toujours dans l’invite de commande.
Déplacez-vous à l’endroit où vous souhaitez créer le projet de votre application.
Par exemple si vous voulez travailler sur le bureau, utilisez :

$ cd Desktop

Puis

$ cordova create MyApp

Dans le Finder, je visualise bien tous les fichiers du projet :

cordova-MyApp-contenu

MyApp étant le nom de l’application que vous souhaitez créer.

Ajouter des plateformes

Ajouter des plates-formes signifie que vous aller ajouter la possibilité de construire une application pour le système d’exploitation mobile de votre choix (Android, iOS, BlackBerry ou Windows phone). Mais avant cela vous devez vous assurer de disposer de chaque SDK associé à la plate-forme cible. Par exemple pour iOS, vous devez disposer du SDK iOS.

Toutes les commandes suivantes doivent être exécutées dans le répertoire du projet.
Comme je dispose du SDK Android sur mon Mac, je vais ajouter la plateforme Android. Voici une capture de mon Terminal :

Mac-mini-de-Claude:Desktop claude$ cd MyApp
Mac-mini-de-Claude:MyApp claude$ cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: io.cordova.hellocordova
	Name: HelloCordova
	Activity: MainActivity
	Android target: android-23
Android project created with cordova-android@5.1.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Dans le Finder, je visualise bien tous les fichiers qui ont été créé pour Android :

cordova-MyApp-android

Voici les commandes à lancer suivant la plateforme de votre choix :

$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

Démarrer PhoneGap Desktop

PhoneGap est un emulateur qui vous permet de dialoguer avec votre mobile et de visualiser en temps réel l’application que vous êtes en train de concevoir. Vous pouvez télécharger PhoneGap Desktop depuis cette adresse :
http://phonegap.com/products/#desktop-app-section

Installer l’application comme d’habitude :

installer-phonegap-osx

Lancer l’application PhoneGap et ouvrez votre projet d’application mobile :

1-phonegap-sur-mac

Démarrer PhoneGap Mobile

Lancer PhoneGap sur votre mobile et connectez l’application à l’adresse communiquée par l’application de votre ordinateur.

2-phonegap-sur-mac

Si besoin saisir http://192.168.0.16:3000 puis Connect pour lancer l’émulateur.

3-phonegap-sur-mac

Voici l’application. Vous pouvez maintenant apporter les modifications dans votre code et voir en direct le résultat sur votre mobile.
Tout se passe dans le dossier nommé « www » où vous trouverez les fichiers HTML, CSS et Javascript :

modifier-html-css-javascript

Générer l’application pour les plateformes

Une fois que votre application est développée et prête à être diffusée, vous devez transformer votre application hybride en application utilisable sur Android, iOS et Windows Mobile. Là aussi deux solutions s’offrent à vous pour une application Android :

  • Importer le projet dans Android Studio ;
  • Utiliser les services PhoneGap Build.

Importer le projet dans Android Studio

Lancer Android Studio et importer le projet créer via Cordova :

importer-projet-cordova-android-studio

importer-projet-cordova-android-studio-detail

importer-projet-cordova-android-studio-gradle

Depuis Android Studio, vous allez pouvoir générer votre application que vous pourrez distribuer par la suite via Google Play.

Utiliser les services PhoneGap Build

Pour ce faire rendez-vous sur le site PhoneGap Build pour générer le format de chaque plateforme mobile. Évidemment, vous pouvez très bien ne vouloir que l’application Android mais pas iOS. Aucun, problème c’est vous qui décidez 😉

Aller plus loin

J’espère que ce billet avec les étapes pour développer votre application mobile avec PhoneGap vous sera utile. N’hésitez-pas à commenter cet article…

Sources :

Comment gérer son code avec Git et GitHub ?

Collègue développeur, je viens te parler d’un moyen efficace de suivre l’évolution de ton code sans rien perdre des modifications que tu as pu faire tout au long de la vie de ton projet. Le parcours de formation Développeur de OpenClassrooms m’a permis de faire mes premiers pas avec Git et Github. Aussi, je voulais partager avec toi cette pépite.

Git est un logiciel développé par Linus Torvalds, le créateur de Linux. Il permet de garder en mémoire toutes les versions d’un fichier. Évidemment ce système de versioning ne se limite pas à l’informatique. Par exemple, cet article est disponible sur Github, le site de partage utilisant le système Git (https://github.com/claudebueno/Document-Git).

Un dépôt Git s’articule sur une branche « master » qui est en quelque sorte la colonne vertébrale du projet. Puis, pour des raisons que j’aborderai plus bas, peuvent se rattacher d’autres branches pour répondre à un besoin temporaire ou pour ajouter des fonctionnalités au projet.

Pour y voir plus clair, je vais aborder quelques questions :

Qu’est-ce qu’un commit ?

Au fur et à mesure que le projet évolue, tu va pousser les mises à jour des fichiers vers le « dépôt » Git. C’est ce qu’on appelle faire un commit.

Le commit est une étape dans l’histoire du projet. Il se matérialise par un titre et une description de la mise à jour. Ainsi, il te sera plus facile de revenir en arrière ou de consulter une version antérieure de ton code (où celui d’un autre développeur si tu travailles sur un projet partagé).

À quoi sert la commande git log ?

A force de faire des commits, tu peux avoir besoin de retracer les différents événements du projet. C’est à ce moment-là que tu vas faire appel au git log.
Comme son nom l’indique, le git log permet d’obtenir les informations des différents commit de ton projet. D’ou l’importance de nommer et commenter chaque commit de manière claire.

Qu’est-ce qu’une branche ?

Au début du projet, tu utilises la branche par défaut, également appelé « master », pour créer un dépôt.

Lorsque le projet commencera à prendre de l’ampleur, Tu seras amené à créer de nouvelles branches pour développer une fonctionnalité particulière sans interférer sur la branche master. Ensuite, tu pourras fusionner cette branche temporaire avec la branche principale.

L’utilisation de branches sera très utile si tu veux conserver la trace des différentes versions du projet et des fonctionnalités.

Séquences et commandes Git

Séquences et commandes Git – source

Cet article a été rédigé dans le cadre d’un atelier pour la formation « Gérer son code avec Git et GitHub » d’OpenClassrooms.

Liens : https://github.com/

Définir DuckDuckGo moteur de recherche par défaut sur Google Chrome

Ce n’est plus un secret : nos échanges sur la grande toile du Net sont à la merci des grandes oreilles des services secrets et des entreprises du Net.
La NSA a mis sur pied PRISM, un programme de surveillance électronique des individus résidant en dehors des États-Unis.
Edward Snowden, un ancien de la CIA et de la NSA a dénoncé ces pratiques et le sujet de l’exposition de nos vies privées à été relancé.

Pourquoi utiliser un moteur de recherche alternatif ?

Comme la grande majorité des internautes du monde entier (hors Chine je crois…) vous utilisez Google pour faire les recherches sur le Net. Les résultats semblent être pertinents. Mais il faut savoir que c’est Google qui décide ce qu’il faut afficher en privilégiant ce qui lui rapporte le plus. Mais surtout, ce cher moteur de recherche garde dans son (énorme) mémoire toutes les traces de vos recherches pour mieux cibler vos goûts (si, si, c’est pour votre bien…).

Pourquoi utiliser DuckDuckGo ?

DuckDuckGo est un moteur de recherche qui s’engage à respecter votre vie privée en ne conservant aucune trace de vos recherches. Il fonctionne sur le principe d’un meta-moteur puisqu’il intègre les résultats d’autres moteurs : Youtube, Amazon, Google Image ou encore Wikipedia. DuckDuckGo propose également des réglages pour le personnaliser.

Définir DuckDuckGo comme moteur par défaut sur Google Chrome

Google Chrome permet de lancer une recherche depuis la barre d’adresse du navigateur (“l’omnibox”). C’est très pratique mais par défaut le moteur utilisé est Google (ce qui est logique puisque c’est le moteur maison).

Si vous ne souhaitez pas être pisté grâce à vos recherches sur Google vous pouvez utiliser par défaut un autre moteur de recherche.
C’est ce que je vous propose en vous présentant les actions pour mettre DuckDuckGo comme moteur de recherche par défaut dans Chrome.

Pour cela, vous allez modifier les paramètres de Google Chrome :

  • Cliquez sur le menu paramètres (en haut à droite) ;
  • Sélectionnez le menu Préférences dans le menu de gauche ;
  • Dans l’option Rechercher, cliquez sur “Gérer les moteurs de recherche…” ;
  • Puis, en bas de la liste ajouter dans la dernière ligne :
  • Nom : duckduckgo
    Mot clé : duckduckgo.com
    URL : http://duckduckgo.com/?q=%s

  • Cliquez ensuite sur “Utiliser par défaut”.

Et la configuration est terminée.

Il ne vous reste plus qu’à tapez votre recherche dans la barre d’adresse de Chrome et c’est DuckDuckGo qui se charge de votre recherche sur le Net.

Remarque : cette procédure s’adresse aux utilisateurs de Google Chrome, mais vous pouvez facilement trouver la procédure pour les autres navigateurs (Firefox, Safari, Opera, Internet Explorer…). Il vous suffit de lancer une recherche sur DuckDuckGo 😉


Article mis à jour du 4 novembre 2016

Comment mettre en place le thème Dark dans NetBeans ?

Vous êtes nombreux à vouloir mettre en place le thème Dark dans votre éditeur de code préféré, à savoir NetBeans. Vous trouverez de nombreuses discussions à ce sujet. Sujet qui revient à chaque fois que NetBeans arrive dans une version majeure.

Aussi, pour que vous ne perdiez pas de temps à fouiller le Net en quête de la réponse, je partage avec vous, amis développeurs, ce mini tuto pour que vous puissiez enfin voir NetBeans habillé de noir.

Tout se passe dans la gestion des Plugins

netbeans-dark-theme-1

Dans l’onglet « Plugins disponibles« , faites une recherche sur le mot clé « dark » :

netbeans-dark-theme-2

La recherche retourne « Dark Look and Feel Themes » : Cool ! C’est justement ce qu’on cherche…

Sélectionnez l’extension à installer et cliquez sur « Install » :

netbeans-dark-theme-3

Un écran d’accueil vous présente l’extension qui va être installée :

netbeans-dark-theme-4

Acceptez les termes de la licence d’utilisation en cochant la case prévue à cet effet puis cliquez sur « Install » :

netbeans-dark-theme-5

Une fois l’installation terminée, rendez-vous dans les Options puis l’onglet Apparence.
Dans l’onglet « Look and Feel », vous pouvez choisir le thème Dark que vous venez d’installer :

netbeans-dark-theme-7

Validez avec le bouton OK en bas à droite de la fenêtre.

TADA ! Et voici NetBeans habillé de noir :

netbeans-dark-theme-8

Personnellement, j’ai un petit faible pour Dark Metal que j’agrémente avec le look Sublime Text pour la zone d’édition du code.

J’ai publié un petit tuto pour donner un look Sublime Text à l’éditeur Netbeans.

Quel est votre thème Netbeans préféré ?

J’espère que ce tuto vous ara été utile, n’hésitez pas à participer en commentant ce billet. Merci et à très bientôt 😉