A coté des solutions massives comme Github Pages et Netlify qui s’adressent en tout premier lieu à des développeurs, il manquait une solution permettant à un utilisateur de base de publier en ligne un contenu Web pour une courte durée. Personnellement, je l’utilise pour la publication en ligne de diaporamas réalisés avec Marpit.

Tiiny.host est une solution simple et élégante. Tout d’abord il faut créer une archive contenant l’arborescence des fichiers à publier dont un fichier index.html qui est obligatoire. Déposez ensuite cette archive en la glissant. Sélectionnez un nom de sous-domaine et cliquez sur Launch.

Une fois les fichiers réceptionnés et désarchivés, une confirmation s’affiche :

Indiquez votre mail afin de protéger la publication puis cliquez Lock. Une confirmation vous sera adressée avec l’adresse du sous-domaine.

La modification d’un site publié est très simple, cliquez sur Update puis tapez le nom du sous-domaine ainsi que le mail, un code de vérification est envoyé afin d’ouvrir un nouveau transfert.

A ce jour, Elston évalue la manière dont les utilisateurs s’approprient cet outil, des modifications et des améliorations sont prévues. Il n’existe pas encore de dépôt Github, le code n’est donc pas encore libéré.

Pour un usage plus régulier, il est possible de s’abonner, deux offres sont proposées :

– 39$ l’année, soit un peu plus de 35€, pour 4 sites en lignes publiés pour durée variable de 7 jours à illimité.
– 9$ le mois, soit un peu plus de 8€, pour 10 sites publiés pour une durée variable de 7 jours à illimité.

Un service à découvrir sans tarder : https://tiiny.host

La première raison est que ce ne sont pas des informaticiens, enfin cela irait à l’encontre de l’intérêt principal de cet outil, à savoir la rapidité et l’efficacité.

Fort heureusement, il existe une solution qui n’est pas vraiment développée dans le guide technique du logiciel et qui passe par l’insertion de styles dans la zone d’édition.

Voici un exemple de ce qui peut être fait :

<style>
.slide {
 background-color: black;
 font: 40px arial, sans-serif;
 }
.slide a {
 color: indigo;
 }
.slide h1 {
 color: fuchsia !important;
 text-align: center;
 }
.slide h2 {
 color: darkviolet;
 }
.slide p {
 color: darkorchid;
 }
</style>

Quelques explications :
. slide s’applique aux paramètres des diapositives, ici on a appliqué une police Arial de taille 40px et un arrière plan noir.
. slide a modifie la couleur des liens.
. slide h1 modifie les titres de niveau 1 (#)  !important  permet de passer outre le style défini par le thème.
.slide p applique une couleur aux paragraphes.
Pour mettre en œuvre ces styles, il  faut utiliser le style par défaut et non Gaïa.
Ces commandes s’insèrent en haut de la zone d’édition, cependant il est possible de créer un fichier externe appelé par cette commande :

<link rel="stylesheet" type="text/css" href="style.css">

Enjoy !

<style>
.slide {
 background-color: black;
 font: 40px arial, sans-serif;
 }
.slide a {
 color: indigo;
 }
.slide h1 {
 color: fuchsia !important;
 text-align: center;
 }
.slide h2 {
 color: darkviolet;
 }
.slide p {
 color: darkorchid;
 }
</style>

A few explanations:
. slide is about slide related settings
. slide a modifies the links
. slide h1 the titles of level 1 (#)! important clears the parameter setting set by the theme
You need to  use default theme and not Gaia to make it work.
There are two ways to do this, either integrate an external file with a link:

<link rel="stylesheet" type="text/css" href="style.css">

or include the style at the top of the page but it’s less clean.
Enjoy !

On oublie parfois que dans Moodle  les étiquettes sont encodées en html, il est donc possible d’utiliser des balises permettant un affichage exotique du texte, notamment un texte qui se déplace. Idéal pour attirer l’attention d’un étudiant un peu endormi :

Imaginez que le texte en rouge se déplace très lentement vers la droite.

Pour réaliser cette prouesse technique, rien de bien compliqué, on utilise ce code :

<marquee behavior="scroll" direction="right" scrollamount="1" scrolldelay="4" style="height: 40px; width: 100%; border: 1px solid rgb(255, 0, 0); background-color: rgb(255, 255, 255); padding: 5px;" height="40" width="100%">
<font color="#ff0000"><b>Attention :</b><br />Modification des consignes de l'exercice &quot;Les connecteurs&quot;</font>
</marquee>

La partie animation est gérée par  la balise MARQUE, ce code html doit être inséré dans l’éditeur en mode HTML  :

En modifiant les valeurs des arguments on change le comportement de la balise :  direction du texte, vitesse. Cette page très complète vous donnera la syntaxe avec des exemples visuels.

Si vous avez aimé cet article, même un petit peu, merci de bien vouloir le partager.