Tous les articles par Fred T

Prof de culture numérique dans une vénérable université... Polyvalent mais spécialiste de rien.

MARP l’outil de présentation rapide évolue

MARP est un logiciel libre multi plate-formes qui permet la création rapide de présentations exportées en PDF et donc publiables très facilement en ligne ou exposée avec le mode idoine d’ evince ou autre d’Acrobat Reader. Personnellement j’ai définitivement abandonné Impress autant pour mon usage perso dans les TD de PréAO. Ainsi, je peux aborder les bases Markdown, langage de formatage  mis en œuvre par Marp. Un bon début pour faire découvrir à des littéraires le monde obscur de la « programmation ».

Après une période de sommeil, Marp évolue enfin, la dernière préversion 0.0.12 vient de sortir, elle apporte les corrections suivantes :

  • Upgrade Electron and dependent packages
  • Sanitize HTML import to avoid leak local resource
  • fix(slide): add @at-root directive to :root selector (#207)
  • Use yarn for packaging

La première version définitive est programmée pour peu, un nouveau dépôt Github a été créé pour l’occasion.

Démarrer avec MARP :

MARP est un outil à découvrir d’urgence !

Publicités

Comment animer une image PNG pour une bannière

Le PNG est juste génial, c’est un format d’image libre proposant des fonctionnalités intéressantes comme la transparence, la translucidité, tout ce que propose GIF et même en mieux.

Dans ce tutoriel, je vais aborder les animations des images PNG dans le but de préparer la bannière animée d’un site Web.

Préparation : toutes vos images doivent logiquement disposer de la même dimension pour cela il faut les redimensionner ou les recadrer.

Lorsque c’est fait, rendez-vous sur le site AnimatedPNGs.com cliquez sur Parcourir et transférez vos images. Le delay est fixé à 64ms, il s’agit du temps d’affichage de chaque image. Ce délai est réservé au mini-animation, pour une bannière chaque image doit être affichée quelques secondes, on indiquera un multiple de 1000 par exemple 4000.

2018-03-09_10h18_21

Le délai peut être paramétré différemment pour chaque image :

2018-03-09_10h20_46

Enfin cliquez sur Create Generated Image puis sur Download.

Animatedpng propose d’autres services, la conversion de flash en PNG, de GIF en PNG.

Le code source est visible sur Github : https://github.com/GraFlic/GraFlic

 

 

 

Monétiser votre site avec Snipcart

Snipcart est un gestionnaire de panier prenant en charge le paiement par carte bancaire. L’inscription est gratuite, une commission de 2% est retenue sur chaque opération ce qui est modeste.

C’est une solution est idéale pour monétiser un contenu en ligne tout en évitant les grosses usines comme Prestashop.

Pour ce tutoriel, le CMS support sera l’excellent Zwii en version 8.2.5.  J’irai un peu vite sur certains aspects, le tutoriel ne s’adresse donc pas à de grands débutants.

Lire la suite Monétiser votre site avec Snipcart

Comment ajouter un effet popup à une miniature dans Zwii CMS

Zwii un CMS maintenu par Rémi Jean son auteur, c’est un CMS en français très simple d’emploi destiné à une gamme d’utilisateur variée, de débutants à chevronnés. Les dernières versions sorties début mars 2018 apportent un lot important d’améliorations.  Une série d’articles regroupant ces astuces seront publiés sous cette catégorie.

Pour débuter, les images avec un effet popup, l’idée est de créer  un effet d’affichage lors du clic sur une miniature.

Pour les besoins de la démonstration, j’ai utilisé deux images, une taille réelle (200 pixels de large est un maximum) et une autre en miniature.

Cette démo est basée sur la version 8.2.5 dont l’éditeur de texte par défaut est TINYmce.

Une fois le CMS installé, en FTP, éditez  init.js dans core/vendor/tinymce, recherchez

templates: [
que vous remplacez par :
templates: [
        {
          title:"Image Lightbox",
          url:baseUrl+"core/vendor/tinymce/templates/lightbox.html",
          description:"Une image qui s'ouvre dans une lightbox."
        },

Sauvegardez le fichier.

Dans le dossier Templates, y copiez les fichiers lightbox.html et image_vide.png contenus dans cette archive.

C’est prêt, il n’y a plus qu’à utiliser le plugin, une vidéo valant mieux qu’une longue explication :

Il est aussi possible de se passer de la miniature en réduisant la taille de l’image servant de miniature…

 

 

 

 

 

 

La synchro facile sous Ubuntu avec Syncany

Sous Ubuntu, la synchronisation de dossiers s’effectue la plupart du temps avec des utilitaires en ligne de commande, lorsque le dossier est en ligne, FTP ou Webdav, tout ça devient très compliqué voire impossible. Mais ça c’était avant SyncAny.

Lire la suite La synchro facile sous Ubuntu avec Syncany

J’ai testé HUGO le CMS statique sans vraiment apprécier

Il existe sur le Net des pépites, de petits outils méconnus qui facilitent la vie et qui permettent de sortir des sentiers battus en variant un usage, c’est par exemple le cas de MARP qui génère des présentations très rapidement. Dans le monde des CMS, j’ai testé HUGO, un CMS statique hyper léger.

Lire la suite J’ai testé HUGO le CMS statique sans vraiment apprécier

Comment modifier le thème dans MARP

Créer un nouveau thème sous MARP, est en réalité très compliqué et parfaitement inaccessible au commun des mortels, en aucun cas je ne peux imaginer demander à mes étudiants de suivre la procédure décrite dans ce slide.

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 !