Archives de catégorie Techniques du Web

ParThibault HEINRICH

Typologie d’une adresse Web

Lien hypertexte, hyperlien, adresse Web ou URL (pour Uniform Resource Locator, littéralement « localisateur uniforme de ressource » –Wikipedia) désignent la même chose : l’adresse d’une ressource sur le Web.

Une telle adresse se compose de plusieurs éléments. Pour en expliquer la typologie, prenons un exemple précis. Prenons par exemple le lien suivant :

https://fr.wikipedia.org/wiki/Hyperlien

Il s’agit d’un lien vers la page de Wikipédia associée au terme « hyperlien ». On peut identifier trois parties pour cette adresse :

• Le préfixe https:// informe le navigateur que l’élément demandé est une page Web. Le « S » de HTTPS précise que l’on demande une page « sécurisée ». C’est à dire qu’on réclame l’identité du site Web.
• La partie suivante fr.wikipedia.org précise le domaine sous lequel est diffusée la page Web ciblée par le lien.
• Le reste du lien /wiki/Hyperlien Correspond à l’adresse de la page ciblée par le lien, à partir du domaine précédent. Cette dernière partie peut parfois présenter des terminaisons comme .html , .php ou encore .scp . La plupart du temps, ces terminaisons précisent le langage informatique qui a été utilisé pour rédiger la page.

Lien vers une partie / section d’une page

Une partie ou section d’une page peut être la cible d’un lien. Typiquement, ce procédé est exploité sur les pages de « wiki » au niveau du sommaire : Lorsque vous cliquez un titre du sommaire, vous êtes renvoyez plus bas dans la page.

https://fr.wikipedia.org/wiki/Hyperlien#World_Wide_Web

Cet autre lien correspond au lien précédent préfixé d’un code. Le lien renvoi en fait vers la même page que l’exemple précédent, mais à une section spécifique. Le code #World_Wide_Web  identifie la section de la page ciblée par le lien. Il s’agit d’une référence à l’identifiant unique de ladite section. Cet identifiant est attribué à une balise HTML correspondant à cette section.

Donc pour « cibler » une section spécifique dans une page, il faut trouver une balise associée à cette section et en relever l’identifiant.

L’outil Page Builder de SiteOrigin permet de générer de tels liens. Cet autre article décrit comment.

ParThibault HEINRICH

Une extension pour toutes les questions

L’extension Ultimate FAQ offre une bonne solution pour la publication de vos FAQ.

Pour en avoir un aperçu, rendez-vous à la page suivante :

Foire Aux Questions

ParThibault HEINRICH

Proposition de mise en forme pour le thème Executive Pro (StudioPress / Genesis)

La plupart des thèmes WordPress de StudioPress offrent des zones de widget associés à la page d’accueil. Voici une proposition de mise en page pour le thème Executive Pro.

Pour les différentes sections (rubrique [Apparence >> Widget]) :

• Home – Top : 3 widgets de type « Genesis – Featured Page » associés à trois pages de présentation de prestations.
• Home – Call To Action : 1 widget de type « mise en page Builder », avec une seule rangée de 3 colonnes, et une image de fond (cf. Comment ajuster le style de ma mise en forme « Page Builder » ?).
  • 1ère colonne : un widget de type « Image » présentant le logo de la structure.
  • 2ème colonne : un widget de type « Texte » invitant à cliquer le bouton suivant.
  • 3ème colonne : un widget de type « SiteOrigin bouton » associé à l’objectif de votre site (page de contact ?).
• Home – Middle : 3 widgets de type « Genesis – Featured Page » associés à trois pages de projets réalisés.
• Footer 1 : un widget de type « Texte » présentant la structure.
• Footer 2 : un widget de type « Pages »listant vos réalisations.
• Footer 3 : un widget de type « Texte » présentant vos coordonnées.

ParThibault HEINRICH

Rappels sur l’extension SiteOrigin CSS

Rendez-vous à la rubrique [Apparence >> CSS personnalisé]

• Visionnez la vidéo de tutoriel. C’est en anglais, mais avec ce qui suit vous devriez vous en sortir. Vous pouvez commencer à la 32ème seconde.
• Basculez en mode visuel
• Dans la zone de prévisualisation (à droite, en haut), essayez de sélectionner l’élément dont vous souhaitez modifier le style.
• Avec l’inspecteur (en bas) :
  • Ajustez votre sélection en remontant éventuellement la hiérarchie des blocs.
  • En bas à gauche, sélectionnez le sélecteur correspondant à votre élément.
• Réglez les paramètres de style (à gauche)
• Validez les changements (au-dessus des paramètres, à droite)
• Dans la fenêtre d’accueil, cliquez « Enregistrer CSS »