Ressources Pédagogiques – Tic & Net https://blog.datacargo.fr Le blog notes de Fred Tue, 23 Jun 2020 10:36:45 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.4.7 https://blog.datacargo.fr/wp-content/uploads/2019/05/cropped-bannière-ticnet-3-32x32.png Ressources Pédagogiques – Tic & Net https://blog.datacargo.fr 32 32 Monétiser votre site avec Snipcart https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/ https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/#comments Tue, 04 Feb 2020 08:00:00 +0000 http://tic-et-net.org/?p=6372 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 9.  J’irai un peu vite sur certains aspects, le tutoriel ne s’adresse donc pas à de grands débutants.

Rendez-vous chez Snipcart  et ouvrez un compte, validez le mail reçu et complétez l’écran de profil.

Votre tableau de bord est en mode test, nous activerons le mode live une fois la configuration terminée.

Configuration de Snipcart :

Rendez-vous dans les paramètres du compte
Dans Domain & URLs / Protocol : indiquez https:
Dans Domain & URLs / Regional Settings : réglez la devise, sa position et son symbole ainsi que le fuseau horaire. Enfin la liste des continents/pays où vous vendrez.

Dans Account / Api key sont listées les lignes à inclure dans l’en-tête <head> de votre page. La mention du jquery est inutile  pour Zwii.

Configuration du CMS :

Dans Zwii, accédez à la gestion du site et dans le champ Insérer un script dans header, collez les 3 lignes contenants les clés d’API.

Vérification de la liaison avec Snipcart : dans le tableau de bord Snipcart, cliquez sur le message en forme de panneau d’avertissement, puis sur validation, c’est le moyen de vérifier que votre installation est conforme. Tapez l’adresse de votre site et cliquez sur Check My Website. Un message confirme la prise en compte des scripts.

Inclure les boutons d’achat dans le CMS :

Ce bouton permet d’ajouter un article au panier. Pour cela, il faut inclure dans la page en mode code source :

<button
class="snipcart-add-item"
data-item-id="référence"
data-item-name="Nom du produit"
data-item-price="100.00"
data-item-weight="dimension"
data-item-url="/"
data-item-description="Description du produit">
Ajouter au panier
</button>

Évidemment, il faut insérer et paramétrer ce bouton sous un descriptif avec une image, etc..

Pour afficher un bouton vers le panier :

<a href="#" class="snipcart-checkout">Payer</a>

Malheureusement la dernière version de Zwii ne propose pas une configuration de l’éditeur correcte et les balises <span> seront effacées même si saisies en mode code source. Pour y remédier, il faut éditer /core/vendor/tinymce/init.js et remplacer  :

extended_valid_elements: "script[language|type|src]",

par

extended_valid_elements: "script[language|type|src],span[!class]",

Automatisation de l’insertion d’un bouton :

Pour ce faire, on utilise le module Template de l’éditeur TinyMCE déjà installé.

Dans /core/vendor/tinymce/templates, créez un fichier html avec le code du bouton, nommez le snipcart.html

Ensuite ouvrez à nouveau /core/vendor/tinymce/init.js et ajoutez dans le bloc Templates :

{
     title: "Bouton Snipcart",
     url: baseUrl + "core/vendor/tinymce/templates/snipcart.html",
     description: "Ajoute un bouton de paiement."
},

Une fois le site prêt, il ne reste plus qu’à passer le tableau de bord en mode live et à engranger des commandes…

]]>
https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/feed/ 2
Paramètres de la messagerie ac-lille.fr https://blog.datacargo.fr/2019/06/13/parametres-de-la-messagerie-ac-lille-fr/ https://blog.datacargo.fr/2019/06/13/parametres-de-la-messagerie-ac-lille-fr/#comments Thu, 13 Jun 2019 15:12:22 +0000 https://blog.datacargo.fr/?p=6501 Cet article ne concerne que les personnels de l’académie de Lille, qui par obligation ou par simple usage doivent consulter leur messagerie professionnelle.

Mise à jour le 22 juin 2020

Attention, cet article ne traite pas des messages d’iprof, mais du webmail ac-lille que chaque personnel peut consulter aisément sur un ordinateur mais pas sur un smartphone, le webmail n’étant pas du tout responsive (adapté aux petits écrans).

Un peu fatigué de cette limitation, je me suis fendu d’un message à l’assistance qui m’a gentiment répondu où trouver l’aide en ligne sur le portail Eduline. J’avoue avoir cherché sans succès… et bien ce n’était pas étonnant, il fallait naviguer dans Thémasite, Outils collaboratifs (en bas de page après des tonnes d’infos syndicales) pour enfin tomber sur ceci :

Pour vous éviter cette navigation pénible, voici les paramètres essentiels.

Réception des mails, serveur IMAP:

  • Nom du serveur : webmail.ac-lille.fr imap.ac-lille.fr
  • Port : 993
  • Sécurité : SSL
  • Mot de passe : normal
  • Identifiant de messagerie : initiale prenom et nom (ex jdupont)

Réception des mails, serveur POP :

  • Nom du serveur : pop.ac-lille.fr
  • Port : 995
  • Sécurité : SSL
  • Mot de passe : normal
  • Identifiant de messagerie : initiale prenom et nom (ex jdupont)

Pour l’envoi de mails, paramètres SMTP (les SMTP tiers ne sont plus acceptés) :

  • Nom du serveur : webmail.ac-lille.fr smtp.ac-lille.fr
  • Port : 465
  • Sécurité : SSL
  • Mot de passe : normal
  • Identifiant de messagerie : initiale prenom et nom (ex jdupont)

Ces paramètres fonctionnent parfaitement avec Thunderbird et sous IOS.

Vous n’avez plus d’excuse pour ne pas lire les courriers de votre ministre…

 

]]> https://blog.datacargo.fr/2019/06/13/parametres-de-la-messagerie-ac-lille-fr/feed/ 3 Imposer à Firefox et Thunderbird d'ouvrir les documents en lecture et en écriture https://blog.datacargo.fr/2019/02/21/imposer-a-firefox-et-thunderbird-douvrir-les-documents-en-lecture-et-en-ecriture/ https://blog.datacargo.fr/2019/02/21/imposer-a-firefox-et-thunderbird-douvrir-les-documents-en-lecture-et-en-ecriture/#respond Thu, 21 Feb 2019 21:09:55 +0000 http://tic-et-net.org/?p=6440 Par défaut, au téléchargement d’un document bureautique quelconque sur Firefox ou en pièce jointe sur Thunderbird, celui-ci s’ouvre systématiquement en lecture seule.

Cela semble assez logique puisque le document est stocké dans les fichiers temporaires, une fois sauvegardé, bon courage à l’utilisateur de base pour le retrouver.

Malgré tout ce comportement me casse les pieds, ayant à corriger des travaux d’étudiants, j’ai besoin de disposer des méta-données intactes (auteurs, durée d’édition, etc..). L’ouverture en lecture seule oblige alors à enregistrer-sous le document (que je ne veux pas conserver), sinon il y a le bouton édition.. qui lui réinitialise les méta-données.

Avec Firefox

Facile, dans la barre d’adresse, tapez la séquence about:config

Cliquez sur le bouton : Je prends le risque

Puis tapez dans la barre de recherche, tapez cette commande :

browser.helperApps.deleteTempFileOnExit

Sur la ligne affichée, clic droit puis Inverser :

C’est tout !

Thunderbird

C’est exactement la même manipulation sauf qu’il n’y a pas de barre d’adresse. L’éditeur de configuration est accessible dans les options :

]]>
https://blog.datacargo.fr/2019/02/21/imposer-a-firefox-et-thunderbird-douvrir-les-documents-en-lecture-et-en-ecriture/feed/ 0
Ajouter le plugin CodeMirror à l’éditeur de texte TinyMCE https://blog.datacargo.fr/2019/01/25/ajouter-le-plugin-codemirror-lditeur-de-texte-tinymce/ https://blog.datacargo.fr/2019/01/25/ajouter-le-plugin-codemirror-lditeur-de-texte-tinymce/#respond Fri, 25 Jan 2019 12:55:39 +0000 https://ftempez.wordpress.com/?p=6433 Ce plugin gratuit permet d’éditer le code des contenus affichés pas TinyMCE, de nombreux langages sont supportés. Il remplace avantageusement le plugin Code de TinyMCE tout à fait limité, dont la version Advanced est payante.
Ce tutoriel a été testé avec succès sur le CMS Zwii en prévision de la sortie imminente de la version 9.
Etape 1 : Récupérer CodeMirror
Cela se passe sur le Git officiel ce qui permet de télécharger la version la plus fraîche.
https://github.com/christiaan/tinymce-codemirror
puis décompactez et naviguez jusque dans le dossier plugins
2019-01-25_14h06_24
Pas de problème, le français fait bien partie des langues proposées.
Etape 2 :
Renommez le dossier codemirror-4.n en codemirror
Etape 3 :
Copiez le premier dossier codemirror celui qui contient les dossiers codemirror et langs (ainsi que 2 fichiers JS) dans le dossier plugins de TinyMCE
image
Etape 4 :
Configuration de TinyMCE.
Editez le fichier configuration tinymce.inc.js et dans la section plugins remplacez code par codemirror.
image
Pour le paramétrage, on peut partir de cette configuration à coller dans le même fichier :
image
Etape 5 :
Sauvegardez le fichier et rechargez la page web avec l’éditeur.
Pour fignoler, j’ai de mon coté amélioré la traduction française qui ne me convenait pas (fichier fr_FR.js dans le dossier langs) :

image
 
 
]]>
https://blog.datacargo.fr/2019/01/25/ajouter-le-plugin-codemirror-lditeur-de-texte-tinymce/feed/ 0
Comment installer GKSU sur Ubuntu Bionic 18.04 LTS ? https://blog.datacargo.fr/2018/05/10/comment-installer-gksu-sur-ubuntu-bionic-18-04-lts/ https://blog.datacargo.fr/2018/05/10/comment-installer-gksu-sur-ubuntu-bionic-18-04-lts/#comments Thu, 10 May 2018 17:57:40 +0000 http://tic-et-net.org/?p=6390 GKSU est un utilitaire permettant de démarrer une application en mode fenêtre avec les droit administrateurs. Je l’utilise notamment avec un lanceur Xampp qui demande les droits root pour démarrer.
Après une installation fraîche de Bionic dont la mise à jour a été un peu compliquée, impossible de réinstaller cet utilitaire qui n’est désormais plus dans les dépôts. Dans les forums, on explique avec éloquence que les dépendances interdisent son installation.
Morte-couille ! Tout cela ne serait que faribole ? C’est bien ce que semble indiquer cette réponse sur Askubuntu. Évidemment, j’ai testé et la manip a parfaitement fonctionné, c’est sale j’assume, mais je partage quand même.

Comment procéder :
Tout d’abord on ajoute les dépôts d’Artful, dernière version à proposer GKSU, dans un terminal :

cat <<EOF | sudo tee /etc/apt/sources.list.d/artful.list
deb http://archive.ubuntu.com/ubuntu/ artful universe
EOF

On actualise :

sudo apt-get update

Et on installe :

sudo apt-get install gksu

On teste

gksu-properties # check that it has "Authentication mode" to "sudo"
gksu date
gksudo date

Et on nettoie :

sudo rm /etc/apt/sources.list.d/artful.list
sudo apt-get update

Les packages gksu, libgksu2-0 risquent d’être notés comme obsolètes… mais ce n’est pas grave du tout..

]]>
https://blog.datacargo.fr/2018/05/10/comment-installer-gksu-sur-ubuntu-bionic-18-04-lts/feed/ 2
Comment animer une image PNG pour une bannière https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/ https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/#respond Mon, 12 Mar 2018 10:31:46 +0000 http://tic-et-net.org/?p=6366 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
 
 
 

]]>
https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/feed/ 0
La synchro facile sous Ubuntu avec Syncany https://blog.datacargo.fr/2018/02/22/la-syncro-facile-sous-ubuntu-avec-syncany/ https://blog.datacargo.fr/2018/02/22/la-syncro-facile-sous-ubuntu-avec-syncany/#comments Thu, 22 Feb 2018 10:03:41 +0000 http://tic-et-net.org/?p=6348 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.

Migrer de Windows à Linux, présente de nombreux avantages, il est parfaitement possible de profiter d’un environnement de travail plus performant sans sacrifier aux fonctionnalités. C’est mon cas et j’invite mes contacts à migrer, mais là n’est pas le propos.

Récemment, j’ai cherché à remplacer Microsoft OneDrive par une solution auto-hébergée (chez Obambu en fait, histoire de rentabiliser mon stockage), je me suis donc tourné naturellement vers  NextCloud, fork plus actif d’Owncloud.

Je n’épiloguerai pas, mais cette solution ne m’a pas satisfait, synchronisation très lente, et surcharge du CPU coté serveur. J’ai donc testé un service découvert lors d’une recherche: Syncany.

Sur le papier, Syncany sait tout faire, synchroniser des dossiers locaux et en ligne, FTP, Webdav, Dropbox, etc..

Pour mon besoin, je suis donc passé par un compte ftp créé chez mon hébergeur associé à un espace dédié. Ensuite, je suis passé à l’installation et  la configuration de Syncany, étapes que je vais détailler ici.

Installation :

sudo apt install curl
curl -sL https://get.syncany.org/debian/ | sh

L’utilitaire en ligne de commande est installé (la doc très complète est ici), je souhaite maintenant disposer d’une interface graphique et du plugin ftp :

sudo apt install syncany-plugin-ftp syncany-plugin-gui

Lancez l’interface, puis Add Folder, un assistant se déroule, choix du dossier local :

Capture d’écran_2018-02-22_09-25-47.png

Connexion au dossier FTP distant :
Capture d’écran_2018-02-22_09-26-26.png
Saisie des paramètres du compte FTP :
Capture d_écran_2018-02-22_09-26-46
Saisie d’un mot de passe, il s’agit ici de l’installation d’un second poste, le mot de passe a déjà été créé.
Capture d_écran_2018-02-22_09-28-04
Si tout est correct, vous devriez disposer d’une nouvelle icône qui indique le statut de la synchro :
Capture d’écran_2018-02-22_10-42-20.png
Un petit check Vert apparaîtra une fois la synchronisation achevée.
L’interface graphique donne accès à quelques paramètres, limitation du débit, et ici l’ajout de plugins.
Capture d_écran_2018-02-22_09-34-53
Syncany est certes en version Alpha -parfaitement utilisable – et distribué sous licence GPLv3.

]]>
https://blog.datacargo.fr/2018/02/22/la-syncro-facile-sous-ubuntu-avec-syncany/feed/ 5
Comment modifier le thème dans MARP https://blog.datacargo.fr/2017/12/01/comment-modifier-le-theme-dans-marp/ https://blog.datacargo.fr/2017/12/01/comment-modifier-le-theme-dans-marp/#comments Fri, 01 Dec 2017 11:35:59 +0000 http://tic-et-net.org/?p=6298 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 !

]]>
https://blog.datacargo.fr/2017/12/01/comment-modifier-le-theme-dans-marp/feed/ 3
How to change the theme in MARP https://blog.datacargo.fr/2017/11/30/how-to-change-the-theme-in-marp/ https://blog.datacargo.fr/2017/11/30/how-to-change-the-theme-in-marp/#respond Thu, 30 Nov 2017 19:40:27 +0000 http://tic-et-net.org/?p=6292 In reality it is very complicated, in any case inaccessible to ordinary people, do not I see myself explaining to students the procedure described in this link.
Quite simply because they are not computer scientists and secondly, the interest of using MARP is precisely to be efficient, effective and fast.
On the other hand, as the description indicates, you can easily add styles at the beginning of the slideshow. And then it becomes accessible…
Here is a very short example of what can be done :

<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 !

]]>
https://blog.datacargo.fr/2017/11/30/how-to-change-the-theme-in-marp/feed/ 0
How to install Exelearning on Solus https://blog.datacargo.fr/2017/11/24/how-to-install-exelearning-on-solus-os/ https://blog.datacargo.fr/2017/11/24/how-to-install-exelearning-on-solus-os/#comments Fri, 24 Nov 2017 11:42:55 +0000 http://tic-et-net.org/?p=6247 Exelearning is an online content design tool developed by a Spanish team and available under free license in many languages. On numerous occasions this software has been the subject of articles in this blog.

This tool is perfect for posting training contents, documentation, e. g. technical manuals, etc. online. Despite all Exelearning is not really an editorial channel, it is rather web-based and training platform oriented.

Moreover, my training contents, some of which are online on the Datacargo. fr website, are made with this tool.

Rather than a long description, I refer you to this presentation video:
[youtube https://www.youtube.com/watch?v=9gcs_Lgm0AI&w=560&h=315]

Exelearning is available for Windows, Macos and Linux, in installable or portable version (to be copied on a USB stick and used on a machine without root rights).

What about Solus? Another geek thing? Well in fact, no, Solus is a very efficient Linux distribution, and perfectly operational on a small laptop with a double heart. Compared to Ubuntu (17. n), the occupancy of the 4GB of RAM is simply half, i. e. 2GB on Ubuntu and 1GB on Solus… Interesting performance.

How to install Exelearning on Solus OS? Turning to this article…

First, download the portable version for Linux:

2017-11-24_12h07_32
Next, unpack the archive:

tar xvf portable-intef-exe-2.1.3-linux. tar. gz

Copy the contents of the folder into /opt with root rights:

sudo cp -r portable-intef-exe-2.1.3-linux /opt

Then, all that remains is to add an entry in the menu, to do this I used Free Menu:

sudo eopkg install menulibre

For the app works, it is necessary to specify the working directory, the Exelearning icon is in the exelib folder.
Links:

]]>
https://blog.datacargo.fr/2017/11/24/how-to-install-exelearning-on-solus-os/feed/ 2