Le côté texte du format svg

SVG, c’est un format d’images vectorielles léger et utilisé un peu partout sur le net. En plus de ses qualités pour le web, c’est un format accepté par beaucoup de découpeuses laser.

C’est justement en travaillant avec un collègue sur la préparation des fichiers pour la découpe que j’ai compris qu’il s’agissait d’un format textuel. A vrai dire je n’avais jamais creusé le sujet auparavant. Je prenais pour évident que si tout le monde travaillait le svg avec des interfaces graphiques, c’est que c’était la bonne façon de faire.

Travailler en  interface graphique  sur des fichiers qui sont nativement dans un format de texte pose problème car on ne garde pas la main sur tout ce que le fichier contient. A force de faire du WYSIWYG (what you see is what you get), on peut se leurrer et penser WYSIWAG (what you see is all you get).

SVG n’est pas un format WYSIWAG. Par exemple le texte des trois fichiers SVG suivants qui seront affichés exactement de la même façon laisse voir que l’un de ces trois exemples est très différent des autres.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d="M   0,  0 
C   0,0     0,100   0,100 C   0,100  30,100  30,100 
C  30,100  30,200  30,200 C  30,200  30,230  30,230 
C  30,230 130,230 130,230 C 130,230 130,200 130,200 
C 130,200 230,200 230,200 C 230,200 260,200 260,200 
C 260,200 260,100 260,100 C 260,100 230,100 230,100 
C 230,100 230, 0 230, 0 z"/></svg>

Chemin absolu en SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "h
ttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d=  "M   0,  0 
c 0,0   0, 100   0, 100 c 0,0  30,  0  30,  0 
c 0,0   0, 100   0, 100 c 0,0   0, 30   0, 30 
c 0,0 100,   0 100,   0 c 0,0   0,-30   0,-30 
c 0,0 100,   0 100,   0 c 0,0  30,  0  30,  0 
c 0,0   0,-100   0,-100 c 0,0 -30,  0 -30,  0 
c 0,0   0,-100   0,-100 z" />
</svg>

Chemin relatif en SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "h
ttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
  <polyline fill="none" stroke="red"
            points="  0,  0 
                      0,100  30,100 
                     30,200  30,230 
                    130,230 130,200 
                    230,200 260,200 
                    260,100 230,100 
                    230,  0   0,  0" />
</svg>

Polyligne au format SVG

En effet la figure dans polyline.svg est faite de « vrais » segments de droite, alors que dans les deux autres exemples les pièces dont la figure est construite sont des splines. On a tout fait pour que ces splines aillent tout droit, du coup l’image obtenu a la même tête dans les trois exemples. Mais moralement ce n’EST pas la même image.

Proof of concept : exemple de coloration syntaxique

J’ai donné en devoir de mon cours de WordPress de rajouter la coloration syntaxique en utilisant le fichier
style.css
d’un thème et non pas un plug-in. Je viens de le faire sur mon propre blog – dont voici un exemple d’utilisation. Je mettrai en ligne une explication plus complète quand mes étudiants m’auront rendu leurs mini-projets.

Exemple de code Java coloré et commenté :

Plutôt que d’utiliser des branchements if-else imbriqués, je préfère utiliser un switch.

switch(choixDuProgramme)
{
    case 0: 
        //instructions du premier programme
        break;
    case 1: 
        //instructions du deuxième programme
        break;
    case 2:
        //instructions du troisième programme 
}

Remarque : Dans ce code il n’y a pas de cas default car on s’assure de façon anticipé que la variable choixDuProgramme ne prenne que les valeurs 0, 1 ou 2.
Normalement il faudrait capturer une exception et la traiter mais nous n’avons pas encore travaillé cela en cours.

Khan Academy

Ça y est, j’ai franchi le pas. Je me suis inscrite sur Khan Academy.

Vous ne connaissiez pas la Khan Academy? Pas d’inquiétude, bien que cela existe depuis un bon moment, je n’ai découvert son existence qu’en mai 2015, et par des voies assez détournées. D’abord, je suis allée au FabLab Festival à Toulouse. Puis, une fois sur place, j’ai papoté avec la Fondation Orange pour découvrir leurs actions. J’y ai découvert que, outre le fablab que je fréquentais à l’époque, cette fondation soutenait Bibliothèques sans Frontières dans son effort pour traduire l’intégralité de la Khan Academy en français. J’ignorais tout de la Khan Academy, on m’a alors gentiment introduit un des plus grands succès du web.

Pour faire courte une histoire longue, Salman Khan était loin des siens alors que sa cousine demandait de l’aide en mathématiques. Pour la soutenir, il enregistrait des vidéos qu’il partageait avec elle sur Youtube. Mais en même temps, n’importe quel internaute pouvait y avoir accès et ses vidéos sont vite  devenues très populaires. On peut dire que Khan était devenu l’enseignant le plus prisé du web. Il a profité de cette notoriété pour fonder une ONG, la Khan Academy où en plus des vidéos il y a aussi des exercices interactifs. Et il n’y a pas que des maths, c’est une plate-forme où l’on peut apprendre vraiment une grande diversité de choses.

Les leçons sont données en vidéo mais ce n’est pas la seule façon d’apprendre. En fait, pour des sujets qu’on a déjà commencé à apprendre un peu ailleurs, on peu directement se lancer dans la résolution d’exercices regroupées en missions. Si on tombe sur un exercice qu’on ne sait pas résoudre, on peu demander une résolution pas à pas (ce qui à mon avis est bien plus pédagogique qu’une vidéo). Donc au moins en maths il n’est pas très difficile de se passer de la vidéo.

Je n’ai testé pour l’instant que le parcours en mathématiques. Mais il y a plein de parcours différents dans plein de disciplines différentes. La devise de la Khan Academy c’est

#YouCanLearnAnything

[EDIT JANV. 2016 Ma mémoire m’a failli, il ne s’agissait pas de ses neveux mais de sa cousine Nade. Erreur corrigée.]

Historique de (mon) blogging.

Je me suis inscrite sur FUN au MOOC Soyez acteurs du web! Un des projets qu’on doit développer pendant le MOOC est la création d’un blog. Et devinez quelle est la plateforme de blogging conseillée? … wordpress.com !

Ceci n’est pas mon premier blog, j’en suis au deuxième. Comme j´ai déjà testé quelques plateformes de publication de blogs, je profite de l’occasion pour faire un petit recueil d’avantages et inconvénients sur Blogger, Tumblr, WordPress.com et Gandi blog à partir de mon expérience. Poursuivre la lecture « Historique de (mon) blogging. »