Bésoin d'aligner des imagettes au plus près pour utiliser toute la largeur d'affichage disponible ? "diapoXXX" est fait pour ça !

À partir d'une partition écrite avec Harmony Assistant, enregistrement en ".myr" et export en ".myrweb.html"

On a parfois besoin de regarder en détail une image ...

Affichage des images sphériques (photo-sphères) dans un article spip, à l'aide de la bibliothèque de scripts "Photo Sphere Viewer" sans recourir aux services en ligne de Google

Sous ce titre simple se cache une problèmatique complexe visant à protéger un site web de tous échanges malveillants. Pour assurer sa sécurité maximale un site web devrait théoriquement interdire tout échange autre qu’avec des ressources internes ... ce qui est en pratique impossible : des vidéos youtube, des polices spécifiques, des scripts, sont couramment appelés depuis des sites externes ... même spip en a besoin pour ses ménus déroulants dans son interface d’administration. On peut librement (...)

Les prévisions météo de windy.com

Comment insérer une page html en fond de page d'un article spip

Comment insérer un caroussel d'images en fond de page d'un article spip

Comment insérer une vidéo (en boucle et sans son) en fond de page d'un article spip

L’application gratuite "mobirise" (Mac et Pc) permet de construire facilement des pages html5 responsives, en empilant des modules "prêts à l’emploi" : en-tête, titres, galeries d’images, carrousels d’images, etc., basés sur des scripts.js fournis. Mais une fois crées, ces pages sont figées et pour en changer le contenu, texte ou images, il faut modifier leur code html/css : pas terrible ... D’où l’idée de récupérer séparément les parties de code html de chaque fonctionnalité "mobirise" et d’en faire des (...)

En html5, la balise "object" permet d’insérer agréablement une page html, tout en permettant d’utiliser les attributs de style css3. Exemple ci-contre, l’insertion de la feuille de musique html (générée par Harmony Assistant) à l’aide du code : Avec ce codage html, la fenêtre "object" se redimensionne suivant les dimensions de la fenêtre du navigateur ... magique ! Mais aussi des documents pdf peuvent être affichés grâce à cette balise, en déclarant data="...pdf" et type="application/pdf" ... (...)

Il est parfois nécessaire d’insérer, dans une page, un média issu de YouTube. Une fois choisi sur YouTube l’objet souhaité, il faut en récupérer son code qui est fourni par YouTube dans les liens de partage. Il ne faut pas récupérer la totalité du lien (dans l’exemple, c’est https://youtu.be/I05MIoZRCYY) mais juste le code du média choisi, que dans cet exemple est I05MIoZRCYY J’ai donc développé un modèle "youtube" qui permet d’insérer dans un article le média diffusé par YouTube, en ajoutant à l’appel du (...)

Des liens spip s'ouvrant dans une nouvelle page du navigateur

Des feuilles de musique qui défilent ... l'idéal pour apprendre à jouer d'un instrument.

Le format csv, généré par tous les logiciels de tableur (openoffice, excel, etc.) transforme le tableau en un fichier texte avec des séparateurs pour les cellules et les lignes du tableau. Ce format est directement reconnu par spip.

Les images (d'un article) disposées sous forme de planche-contact

Ben ... oui ! On peut tracer des graphiques assez simplement, moyennant une installation un peu complexe.

En-dessous d'une certaine largeur d'écran, le menu de navigation tend à remplir l'écran au détriment du contenu : pour restituer la visibilité au site, réalisons un menu sous forme de volet vertical caché commandé par le bouton ≡

Peut-on afficher, dans une fenêtre, presque tout type de documents informatique ? Pas directement ... Alors j’ai mis en place un modèle "docu" qui comporte les paramètres nécessaire pour contrôler l’affichage du document. Il suffit d’insérer dans le corps de l’article la balise ou XX est l’identifiant du document téléchargé. Ce modèle affiche par défaut une fenêtre 100% de large ( = la largeur du conteneur, limitée par défaut entre 300px mini et 800px maxi), de 40vmax de haut, parfaitement "responsive" (...)

Pour satisfaire au standard html5 du web (bien respecté et reconnu par tous les navigateurs web sur ordinateurs, tablettes et smartphones), il faut placer les fichiers vidéo (mp4, m4v, webm) dans une balise "video" html5 ... simple, mais fastidieux à la longue de répéter l’écriture de ce code html pour chaque vidéo à insérer. Tant qu’on n’a qu’une ou deux petites vidéos à mettre dans une page web la balise "video" peut suffire mais dès qu’il y a plusieurs vidéos les navigateurs internet bloquent le (...)

Pour satisfaire au standard html5 du web (bien respecté et reconnu par tous les navigateurs web sur ordinateurs, tablettes et smartphones), il faut placer les fichiers audio (mp3 et ogg) dans une balise "audio" html5 ... simple, mais fastidieux à la longue de répéter l’écriture de ce code html pour chaque son à insérer. Alors j’ai développé un modèle "music" qui fait ce travail et apporte quelques paramètres complémentaires. Au préalable, le fichier de musique "mamusique" qu’on veut utiliser doit être (...)

Après avoir installé le plugin "anythingslider" (version 1xx pour spip2.1), la documentation explique comment intégrer dans mes squelettes une partie de code constitué par : une boucle spip de recherche des éléments à afficher un javascript qui réalise le diaporama des éléments fournis par la boucle Donc, rien n’empêche d’écrire un modèle "anythingslider.html" dans lequel je mets ce code, agrémenté de variables d’environnement #ENV permettant de passer au diaporama tous les paramètres possibles ... (...)

Mon diaporama préféré "sjcycle" n’est pas "responsive" ? Après un bon bricolage dans le code html du plugin (en remplaçant toutes les valeurs de hauteur et largeur en pixels par des valeurs en %) ... le voici devenu "responsive" ! NorthCapeWebcam - 15/12/2023 - Aurore Boréale var audio = document.getElementById("myaudio") ; audio.volume = 0.2 ; Avec quelques contraintes : dans les réglages du plugin il faut mettre 100% comme valeurs par défaut des largeurs et (...)

Puisque dans mon squelette "responsive" j’ai supprimé les filtres "|image_reduire", voici ce qui se passe si on insère, dans le texte de l’article, les images de la façon habituelle : avec le raccourci <docN> on obtient la vignette (cliquable) à taille fixe avec le raccourci <embN> on obtient l’image en taille réelle Ce qui n’est pas du tout "responsive" ! Pour y remédier, on pourrait insérer les images en les plaçant dans un conteneur html dont on définira la largeur voulue en (...)

Adapter Spip2.1 au "Responsive Web Design"

Ce site est utilisable sur tous les appareils. La largeur de ses colonnes s'adapte automatiquement à la largeur de l'écran qui l'affiche. En dessous de 800 pixels de large, le menu horizontal des sous-rubriques disparait et est remplacé par un volet escamotable commandé par le bouton ≡ En dessous de 400 pixels de large, la présentation du contenu commute automatiquement de deux colonnes en une colonne.