Aujourd’hui, retour dans le monde des CSS.
Ce dont j’ai décidé de parler cette semaine est une manière de créer un interrupteur comme ci-dessous :
Concernant le HTML derrière cet interrupteur, c’est un input de type checkbox qui se cache dessous.
Cet input, caché en CSS, est englobé dans un label, avec un span à ses côtés. C’est le clic sur le label qui permettra de cocher/décocher la checkbox.
Aujourd’hui, j’ai décidé de parler d’un outil que j’utilise au quotidien dans ma vie professionnelle, le système de gestion de version git.
Avec cet outil j’utilise certaines commandes très utiles. Mais je n’avais pas d’idée de comment contextualiser ces commandes pour vous en parler. Cet alors que je me suis souvenu d’un projet grace auquel j’avais pu un peu monter en compétence : gitstery.
Ce dépot est disponible à cette adresse : https://github.com/nivbend/gitstery.
Le fichier README du projet, visible sur la racine du projet présente déjà deux commandes git.
La première, est la commande de base si vous voulez récupérer un projet sur votre machine, git clone.
Cette commande, sous sa forme la plus basique, se présente comme ceci : git clone <url_du_projet>. Par défaut, le contenu sera placé dans un dossier portant comme nom la dernière partie de l’URL dans notre cas gitstery.
git clone https://github.com/nivbend/gitstery
Après s’être déplacé dans ce nouveau dossier, il faut lire le contenu du fichier instructions.txt présent dans ce dossier. Pour cela, on pourrait utiliser la commande Unix de base cat. Mais, comme indiqué dans le README, git dispose de sa propre commande : git cat-file.
Cette commande se décompose comme suit : git cat-file <type_objet> <hash>:chemin/vers/objet.
Dans notre cas, ce que nous voulons, c’est le contenu du fichier instructions.txt, à l’endroit où nous nous trouvons (HEAD).
git cat-file blob HEAD:instructions.txt
Comme indiqué à la fin de ce fichier, je vais par la suite vous présenter des commandes permettant de faire notre enquête sans quitter la branche actuelle (avec la commande git checkout).
Continuer la lectureAujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.
La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.
Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.
c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";
Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.
Dernièrement, je me suis posé la question de quel est le plus vieux navigateur web toujours en cours de développement.
J’ai donc fait quelques recherches que je vais essayer de vous synthétiser au mieux ici.
J’ai orienté mes recherches autour des 5 navigateurs les plus utilisés actuellement, en début 2023 (voir Statcounter) :
Selon les critères utilisés, l’ordre peut changer et être plus ou moins précis.
Si on utilise comme critère la date de sortie de la première version du navigateur, le classement est très facile.
Parmis les 5 candidats, le plus ancien est clairement Opera, dont la première version est sortie en 1995.
Des autres navigateurs, le plus ancien est sorti 8 ans plus tard, et il s’agit de Safari, dont la première version est sortie le 23 juin 2003, pour être ensuite inclus par défaut dans Mac OS X 10.3 « Panther », sorti le 24 octobre de la même année.
Vient ensuite Firefox, dont la première version est sortie le 9 novembre 2004.
Puis Chrome est arrivé en septembre 2008. Quant-au petit dernier, Edge, il a été dévoilé au monde en avril 2015.
Continuer la lectureJ’ai décidé cette semaine de me pencher sur le script de tooltip présenté sur le site de gloubiweb.
Dans une première partie je présenterai rapidement le fonctionnement du script actuel, et dans une deuxième, je vous indiquerai comment recréer (quasi) à l’identique cet ancien script.
Le script actuel se compose de plusieurs fonctions et classes assurant les différents traitements nécessaires, et comme pour d’autres gloubi scripts déjà présentés, les textes à faire apparaître sont renseignés directement dans le JavaScript.
La première fonction, DetecteNavigateur(), est là, comme son nom l’indique, pour détecter le navigateur du visiteur de la page et renseigner automatiquement des variables qui seront utilisées plus tard pour faire quelques ajustement selon le type du navigateur détecté. Ce genre de fonction n’est plus nécessaire de nos jours, car tous (ou presque) les navigateurs modernes fonctionnent de la même façon (ou de façon très proche) au niveau du JS.
Ensuite viens la classe CreationFenetre, qui possède 4 méthodes :
– measureIt() : permet de mesurer la taille exacte du tooltip (utile pour son positionnement par rapport aux bords de la fenêtre de navigation)
– writeIt() : permet de changer le texte à l’intérieur du tooltip
– blendIn() et fadeIn() : ces deux fonctions permettaient de faire apparaître le tooltip de manière progressive, mais aucune des deux n’est encore fonctionnelle, car elles utilisent des propriétés et méthodes n’existant plus dans les navigateurs modernes
Il y a ensuite d’autres fonctions dont les plus importantes sont :
– DetecteMouvementSouris() (le nom de cette fonction est suffisamment explicite pour que je n’ai pas à préciser sa tache)
– PositionneFenetre() (la même)
– AfficheTexte(), cette fonction a pour rôle de changer le contenu du tooltip.
Aujourd’hui, nouveau sujet de SEO. Cette fois-ci, j’ai décidé de parler de sitemap.
Comme sa traduction quasi littérale l’indique, il s’agit d’une « carte de site ». En lisant cela, je pense que beaucoup d’entre vous penserons aux pages Web indiquant les différentes rubriques et sous-rubriques d’un site, dont le lien est souvent mis dans le pied de page. Mais là, la carte de site dont je souhaite parler est destinée aux robots des moteurs de recherche.
Le plus souvent, le fichier de sitemap est au format XML, et présente les URLs de toutes les pages de votre site (c’est à dire aussi bien des pages de catégories que des articles).
L’élément racine d’un sitemap XML est un élément <urlset>. Ensuite, chaque page est représentée par un élément <url>, enfant de la racine. Cet élément <url> doit avoir au moins un élément <loc> comme enfant, cet élément indiquant l’URL de la ressource.
Pour la présentation plus en détail des différentes balises, je vous invite à consulter la section correspondante sur le site sitemaps.org.
Continuer la lectureAujourd’hui, nous allons nous attaquer à un script présenté chez notre gloubi rival qui pourra vous être très utile pour mettre en avant n’importe quel contenu sur, par exemple, la magnifique page d’accueil de votre tout aussi sublime site : le cadre clignotant.
Comme pour d’autres gloubi scripts déjà présentés, il est possible maintenant d’obtenir le même effet seulement avec du CSS. Dans cet article je présenterait la solution JavaScript actuelle (avec une légère correction) puis une solution utilisant uniquement CSS.
Le code utilisé (visible ici) est très simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui vérifie la couleur de bordure de notre élément cible (via son attribut style), et selon sa valeur, cette couleur est changé (par exemple, si la bordure est bleue, elle est changée en rouge, et inversement).
Continuer la lecturePour un peu changer du JavaScript et autres technologies j’ai décidé de parler un peu d’optimisation pour les moteurs de recherche, « Search Engine Optimization » dans la langue de notre cher Shakespeare.
Si j’ai décidé de parler de SEO, c’est d’une part que cela me permettra de diversifier mes sujets, et deuxièmement ayant déjà été confronté à cette problématique, j’ai quelques trucs à partager.
Ma première expérience avec l’optimisation pour les moteurs de recherche fût pendant ma formation au sein de l’école Sup de Pub. Pendant une des deux années dans cette école, j’ai eu l’occasion de participer à une « SEO war ». C’est à dire une compétition entre deux classes, pour voir qui arrivera à placer à la meilleure place un site, créé pour l’occasion, sur une requête/mot clé, également créée pour l’occasion.
Ma deuxième aventure dans le monde de la SEO fût pendant mes deux ans d’alternance. Au cours de ces deux années j’ai été amené à faire plusieurs audits de référencement et optimisation « on page » pour différents clients, ainsi que la création de sites optimisés.
Continuer la lectureVoici venu le temps d’un nouveau gloubi tuto sur un autre script de menu. Aujourd’hui, nous allons nous attaquer au menu interactif avec description du lien.
Le menu est mis en forme avec un simple tableau à une seule colonne, avec un case vide en pied de colonne permettant d’afficher la description du lien survolé.
Le script actuel utilise 2 fonctions : un fonction pour gérer l’arrivée de la souris sur un élément de notre menu (événement mouseover) et une autre pour gérer la sortie de la souris (événement mouseout). Ces deux fonctions sont appelées via les attributs onmouseover/out des éléments du tableau.
La première fonction, movein(), prend deux paramètres : l’id de l’élément et sa description. La deuxième fonction, moveout(), prend un seul paramètre, l’id de l’élément.
Les deux fonctions marchent de la manière suivante :
Aujourd’hui, nouveau retour sur un de mes anciens tutoriels qui a rencontré un certain succès, mon tutoriel sur comment faire une fenêtre modale avec jQuery.
Depuis maintenant à peu près un an, tous les navigateurs majeurs supportent la balise <dialog> qui permet de créer des fenêtres modales (ça ça tombe bien).
Un des avantages de cette solution plus moderne est qu’il n’y a plus besoin d’insérer manuellement un élément de masquage de la page, maintenant il y a le pseudo-élément ::backdrop pour ça.