CSS : des notes de bas de page sous forme de popup

27 September 202408 mars 2022 by Matt Biscay · Lecture: 3 minutes

Lorsque nous écrivons de longs articles, nous avons souvent besoin d’ajouter des notes de bas de pages – footnotes en anglais – pour donner une référence ou apporter un complément d’informations.

Il existe un moyen d’ajouter une note de bas de page en CSS, avec un effet popup.

Survolez le numéro qui s’affiche ici à pour voir la démo: ¹Voici un example de note de bas de page qui apparaît dans une popup, grâce à CSS :)

Une popup CSS pour vos notes de bas de page

Code HTML

Commençons par le code HTML. Nous avons besoin principalement d’un lien HTML et d’une balise span qui contiendra le contenu de notre footnote :

   <p>Voici un premier paragraphe avec une note de bas de page. <a class="footnote">&sup1<span>Coucou, je suis la note de bas de page numéro 1</span></a>
   </p>

   <p>Voici un deuxième paragraphe avec une note de bas de page. <a class="footnote">&sup1<span>Coucou, je suis la note de bas de page numéro 2 :)</span></a>
   </p>Code language: HTML, XML (xml)

Code CSS

Et voici notre code CSS pour créer la popup et afficher le contenu de nos notes de bas de page à l’intérieur, au survol de la souris:

a.footnote {
   text-decoration:none;
   background-color: #FEF6BB;
   padding-left: 2px;
   padding-right: 2px;
   margin-right: 2px;
   transition: all 2s ease;
} 

a.footnote span {
   z-index: -1;
   opacity: 0;
   position: fixed;
   left: 15px; 
   bottom: 20px;
   margin-left: 0px;
   margin-right: 18px;
   padding:14px 20px;
   border-radius:4px; box-shadow: 5px 5px 8px #CCC;
   border:1px solid #DCA;
   background-color: #FEF6BB;
   transition: all 2s ease;
}

a.footnote:hover span {
   z-index: 9;
   opacity: 1;
   transition: all 2s ease;
}Code language: CSS (css)

Dès que la souris n’est plus au-dessus du numéro de la note de bas de page, cette dernière disparaît avec un effet de fondu.

Résultat

Voilà ce que le code nous donne:

Voici un premier paragraphe avec une note de bas de page. ¹Coucou, je suis la note de bas de page numéro 1
Voici un deuxième paragraphe avec une note de bas de page. ²Hello World, je suis la note de bas de page numéro 2 :)
Matt

Et voilà, c’est très simple, en CSS pur mais c’est efficace et ne prend pas de ressources externes (pas de JS) – cela peut toujours servir!

Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais

20 December 202307 mars 2022 by Matt Biscay · Lecture: 56 minutes

Voici mon mémoire professionnel accompli à l’IUFM des Pays de la Loire.

La problématique soulevée – comment créer et soutenir la motivation des élèves du cycle central en classe d’Anglais – découle d’une situation de classe que j’ai connue dès mes débuts en PLC2.

There are three things to remember about education.
The first one is motivation. The second one is motivation. The third one is motivation.
Terrell H. Bell

Il n’existe pas de langue où rien ne soit motivé.
Ferdinand de Saussure

Introduction

Une classe est une entité. Chaque fois que l’enseignant se trouve face à elle, il sait que le défi sera de susciter chez ses élèves le désir d’acquérir des savoirs et des savoir-faire et, surtout en classe de langues, d’avoir envie de comprendre, de s’exprimer, de réussir et d’être libre d’agir par eux-mêmes.

Or toute “aide technique serait inopérante si le professeur n’avait constamment le souci de susciter chez les élèves l’envie, le désir de parler” [Instruction Officielles de 2001, p.57]. Donc, sous-jacents à ces paramètres, entre en jeu l’autonomie de l’élève car celui-ci a un rôle déterminant à jouer dans son apprentissage.

Quelque soit le contexte, citadin ou rural, l’enseignant des classes du cycle central se trouve de plus en plus confronté à un public multiculturel riche dans sa diversité, certes, mais qui, en tant que génération ‘zapping’, pose des problèmes d’assiduité, de concentration, de désintérêt, d’instabilité. Nous interpellant à plus d’un titre, ce phénomène nous amène à nous pencher sur le concept de la motivation et de son soutien en classe.

A cet effet, la classe de quatrième angliciste qui m’a été confiée au collège répond à cette problématique à divers niveaux : psychologique, sociologique et pédagogique.

En effet, quel constat pouvons-nous dresser pendant les cours d’anglais ? Qui se cache donc derrière les élèves que nous accueillons ? Quels leviers suffisamment puissants pourraient agir sur la volonté, l’intérêt et l’enthousiasme des élèves, en d’autres termes comment susciter et maintenir la leur motivation ? Comment les étonner pour faire naître une curiosité, moteur indispensable à l’autonomie et les mener sur les chemins de la réussite dans le respect d’eux-mêmes et d’autrui ? La motivation ne consiste-t-elle pas à inscrire l’élève dans une dynamique de projet utile et de résolution de défis ?

C’est au fil de nos réflexions et de nos lectures sur le sujet que nous essaierons de tracer un bilan des mises en œuvre qui confirmeront ou non nos hypothèses de départ et d’envisager d’autres pistes à explorer peut-être mieux adaptées au monde dans lequel ces jeunes vivent, plus ajustées à leur vécu quotidien et qui favoriseraient une appétence, une appropriation active des apprentissages, un plaisir à participer et à s’exprimer, en un mot un mieux-être au sein de la microsociété qu’est une classe.

WordPress : rediriger la page d'attachement vers l'article auquel les fichiers médias appartiennent photo

WordPress : rediriger la page d’attachement vers l’article parent

20 December 202304 mars 2022 by Matt Biscay · Lecture: 3 minutes

WordPress publie par défaut une page d’attachement pour chaque fichier média que vous publiez sur votre site.

En règle générale, un fichier média (image, vidéo, autre) appartient à un article: on attache souvent ce type de fichier lors de la rédaction des articles, pour les insérer dans le corps des billets.

Le problème est donc que WordPress crée gentiment une page dédiée à chaque média publié. Cette page ne contient aucun contenu, à part afficher le média en question, ce qui n’est pas vraiment idéal au point de vue SEO puisque l’on se retrouve avec énormément de pages mais qui ne seront jamais indexées au vu du contenu inexistant. S’il est donc superflu d’avoir ces pages, autant s’en séparer!

C’est là que nous allons tenter d’être malin : pourquoi ne pas rediriger ces pages d’attachement vers l’article auquel ces fichiers media appartiennent?

Jusqu’à très récemment, j’utilisais le module Origin de The SEO Framework, qui fonctionne très bien si le média a été uploadé sur un article. La page d’attachement est alors automatiquement redirigée vers l’article.

Le hic, c’est que si le fichier média a été uploadé directement depuis la page WP Admin > Média, alors nous sommes redirigé vers /wp-admin, ce qui ne fait aucun sens.

Voici donc la solution que j’utilise sur le site:

<?php
/*
Script Name: Redirect attachment page to parent post.
Script URI: https://www.skyminds.net/?p=32314
Description: Redirects attachment to parent post (if it exists), or redirects to the homepage otherwise.
Version: 2.6.0
Author: Matt Biscay
Author URI: https://mattbiscay.com
*/
add_action( 'template_redirect', 'sky_redirect_attachment_to_post' );
function sky_redirect_attachment_to_post(){
  // if not an attchment, bail out early
  if( !is_attachment() ) {
    return;
  }
  // check if parent post is defined
  if( isset( $post ) && isset( $post->post_parent ) && is_numeric( $post->post_parent ) && ( $post->post_parent != 0 ) ) :
    // redirect to parent post
    wp_redirect( esc_url( get_permalink( $post->post_parent ) ) ); exit;
  else: // media has been uploaded through the Media page or is unattached to a specific post
    // redirect to homepage
    wp_redirect( esc_url( home_url( '/' ) ) ); exit;
    // or redirect to the media itself
    // wp_redirect( esc_url( wp_get_attachment_url() ) ); exit;
  endif;
}Code language: HTML, XML (xml)

Ce code est à copier-coller dans le fichier functions.php de votre thème enfant. Vous pouvez également l’enregistrer en tant que plugin.

Une fois activé, si vous visionnez l’adresse d’une page d’attachement, vous devriez être redirigé sur l’article parent.

Notez que je vous ai mis 2 possibilités pour la redirection lorsque le media n’a pas été attaché à un article: une redirection vers la page d’accueil ou alors vers le fichier média directement.

A vous de choisir ce qui vous correspond le mieux :)

← Précédent Suivant →