Vader[FR] : ce n'est pas un blog, c'est un Sith

JavaScript

Vader[FR] — 2023-10-11T17:07:25Z

JavaScript

JavaScript est un langage interprété, exécuté côté client par le navigateur. Il n'y a aucun lien avec le langage compilé Java.

S'exécutant dans le navigateur, les droits du javaScript sont limités. Il ne peut par exemple pas lire ou écrire sur le disque dur.

Les scripts et fonctions en JavaScript permettent de modifier la page en temps réel, sans avoir à recharger toutes les informations depuis le serveur.

Contrairement à de nombreux sites, le site "Vader-fr" ne fait appel à aucun domaine tiers (voir onglet suivant).

Mais le site utilise néanmoins du JavaScript afin de fournir quelques fonctionnalités très pratiques :

Système d'onglets et de pages sur les articles, permettant de séparer les "chapitres" en onglets différents, d'avoir un article moins long et plus lisible.
Blocs dépliants
Protection des adresses courriel dans les articles et descriptif des rubriques.
Tri des tableaux

Serveur tiers ou Domaine tiers ou Site tiers : Serveur n'étant pas l'hébergeur de la page Web visitée mais un autre serveur, d'un autre domaine, auquel la page visitée fait un appel pour une raison quelconque (publicité, script, image, PDF, composants de la page visitée, calculs, etc.)

Sous Firefox, le plugin LightBeam permet de visualiser les relations entre les différents sites.

Toujours sur Firefox, des plugins permettent de gérer l'exécution des scripts de domaines tiers, par exemple :

Voici par exemple les serveurs tiers signalés sur le site Ouest-France :


Domaines Tiers site Ouest-France - NoScript


Domaines Tiers site Ouest-France - Ghostery


Domaines Tiers site Ouest-France - uBlock Origin

Affichage d'une rubrique par vignettes

Vader[FR] — 2014-06-17T16:23:20Z

La rubrique de mes Thèmes Zengarden affiche les sous-rubriques et articles par vignettes, et non sous forme de liste comme dans les autres rubriques.

Comment mettre en place ce format d'affichage ?

1) la boucle SPIP

Pour éviter d'avoir ce format d'affichage dans toutes les rubriques, il ne faudra le mettre que dans des squelettes de rubriques dédiés.

Ne faire ce format d'affichage que pour des rubriques avec relativement peu d'articles car il n'y a pas de système de pagination.

à l'intérieur de la , il faudra créer 2 boucles, une pour les rubriques, auxquelles on ajoute une petite icône style "répertoire", et une pour les articles.

Je ne vais pas expliquer le fonctionnement complet de la boucle SPIP ici, simplement le code HTML généré.

On sélectionne dans la table des rubriques, selon l'identifiant de la rubrique parent (la rubrique affichée) et on trie de manière alphanumérique par le titre au lieu de la date de publication.
Ainsi, les vignettes seront dans l'ordre alphabétique, ce qui est plus simple pour les visiteurs.

On génère un bloc div, dont la classe de style permettra un traitement adéquat.

Dans ce bloc, on affiche le logo de l'article (ou de la rubrique), en le réduisant aux bonnes dimensions, grâce au filtre |image_reduire{250,150}.

En dessous de l'image (en raison de l'utilisation d'un bloc paragraphe), mais toujours dans le même cadre, on affiche le titre de l'article (ou de la rubrique).

 [(#LOGO_RUBRIQUE|image_reduire{150,70})][(#TITRE)]

Articles et rubriques auraient pu avoir une classe CSS identique, mais il est préférable de faire une différence afin que celle-ci soit visible pour les visiteurs.

la boucle pour les articles :

	   [(#LOGO_ARTICLE|image_reduire{150,70})]
#TITRE

2) le style CSS

Toutes les vignettes s'alignent dans le même cadre, grâce à la propriété de style float:left.

Comme il n'y a pas de pagination, il faudra permettre au cadre conteneur de défiler, avec la propriété de style overflow-y:auto, qui affichera donc un "ascenseur" vertical si le contenu dépasse la taille du cadre.
Sauf si le cadre n'est pas "fixé" en taille fixe ou à distance fixe des bords en position:absolute (ou position:relative), auquel cas il pourra s'agrandir à volonté... et la page avec.

Tout d'abord, la taille et le positionnement, communs aux deux classes de vignettes.
La taille doit être cohérente avec celle du filtre de la boucle SPIP, et prévoir la hauteur du texte sous l'image.

La propriété de style float:left permet de faire "flotter" les blocs, qui vont s'aligner les uns à côtés des autres, puis "couler" à la ligne suivante.

.vignettes_rubrique, .vignettes_article { width:150px; height:100px; float:left; margin: 10px; text-align: center;
}

De même, les images (éléments HTML correspondants à la balise HTML img) contenus dans un bloc de classe vignettes, auront une taille limitée par le style CSS.

Dans la mesure où la taille des images est limitée par le filtre de la boucle SPIP, cette précaution n'est pas nécessaire.

.vignettes_rubrique img, .vignettes_article img { max-width:150px;
}

Pour les blocs des vignettes de rubriques, on ajoute une image d'arrière plan, en forme d'icône de répertoire, qui sera positionnée en bas à droite, et non répétée.
Cette image est située dans le même répertoire que le CSS, même si le CSS est question est invoqué par un CSS de thème situé dans un sous-répertoire, dans le cas d'une feuille de style commune (ce qui est le cas pour ce site).

.vignettes_rubrique { background-image:url("icon_rep.png"); background-position:bottom right; background-repeat:no-repeat;
}

En raison de la présence de cette vignette, il faut, afin que le texte (titre) des blocs vignettes de rubriques reste lisible et ne passe pas devant, ajouter une marge à droite, ici de 32px.

.vignettes_rubrique .texte { margin: 0 32px 0 0;
}

Présentation générale du site Vader[FR]

Vader[FR] — 2013-01-08T20:32:10Z

Ce site personnel (ce n'est pas un blog !) traite de développement web (scoop !), de logiciels libres, de Linux et de diverses autre choses...

Étant un site informatique et non artistique, ce site a besoin d'afficher beaucoup d'informations, son design est donc assez "chargé" contrairement à un site d'artiste ou de design qui, simple vitrine, serait plus épuré.
Le design reste donc très classique, un entête, un menu de navigation (avec champ de recherche) sur la gauche, pied de page et cadre contenu au centre, lequel reste fixe dans la page et a son propre scrolling.
Petite "innovation" personnelle [1] que l'on retrouve également sur le site graindimage.org et harrypotterencyclopedia.net, un cadre dépliant sur la droite liste les articles de la même rubrique.

Ce site sous SPIP a été créé à partir du squelette zpip, "customisé" pour le site Vader-fr.fr.

Le fonctionnement technique du site (squelette, style et scripts JavaScript) sera détaillé dans cette rubrique.

[1] Je n'ai pas vu de tel design sur un autre site, mais il est possible que cela existe.