Si vous avez raté le début : Mozilla Webmaker est un ensemble d’outils ludo-éducatifs qui permettent à chacun de comprendre et de modeler le Web. la semaine dernière nous vous avons présenté les lunettes à rayons X pour voir sous les jupes de la page Web. Cette semaine, un deuxième outil de Webmaker appelé Thimble, le dé à coudre magique.

Thimble, le HTML comme si vous y étiez

Code ou wysiwyg ? — les deux !

Il existe une longue histoire des éditeurs HTML open source qui permettent de travailler directement avec la visualisation finale (wysiwyg, acronyme de what you see is what you get, signifie littéralement : « ce que vous voyez est ce que vous obtiendrez »). Depuis le déjà ancien Amaya jusqu’au plus récent KompoZer conçu naguère par Fabien Cazenave qui forkait Nvu, on a cherché à mettre à la portée de tous la création de pages web en laissant dans les coulisses le code HTML. Encore était-il généralement accessible d’un clic dans un onglet par exemple. On pouvait donc créer et maintenir sa page web sans trop se soucier des balises, des attributs et autres CSS.

Cependant la généralisation des blogs dans les années 2000 a poussé à la mise à disposition de systèmes de publication qui ont simplifié la publication « grand public ». N’importe qui aujourd’hui peut publier avec une instance installée de Dotclear ou Wordpress sans se préoccuper du HTML.

Cette facilité a un revers, c’est l’ignorance qui nous éloigne du Web tel qu’il est et donc tend à nous en occulter la plasticité. Fallait-il pour renouer avec la créativité du Web en revenir à la sècheresse d’un éditeur de texte comme les vrais développeurs le pratiquent ?

Thimble, le dé à coudre de Webmaker, permet de ne pas choisir. Il vous propose à la fois de travailler dans le code et de voir ce qu’il produit, tout en contrôlant sa validité.

Un éditeur interactif

1. Il me présente en temps réel et en vis-à-vis le rendu de la page HTML que je suis en train de saisir, le délai de rafraîchissement est d’une fraction de seconde :

2. Il me signale instantanément par la couleur rouge et un avertissement écrit en toutes lettres que je commets une erreur de syntaxe. Un petit pointeur mobile vient même m’indiquer l’endroit précis que je devrais modifier :
3. Il peut aussi m’apprendre davantage : en cliquant sur un élément HTML je dispose d’une définition et d’un lien « plus… » qui conduit à un article plus détaillé du Mozilla Developer Network, le site de documentation pour développeurs. J’ai ainsi la possibilité de passer de la découverte à un niveau plus avancé.

Un éditeur infiniment ouvert

1. À peine ma page ébauchée, je peux la publier, elle sera hébergée sur un serveur de Webmaker


2. Je pourrai dès lors la modifier moi-même aussi souvent que je le souhaite, mais de plus n’importe qui pourra en faire une version (d’aucuns diront un fork) en cliquant sur le bouton « Remixer »

Offrez sa page web à un proche !

Vous connaissez certainement quelqu’un, enfant, adolescent ou… bien plus âgé, qui va trouver amusant et intéressant de se fabriquer une ou des dizaines de pages. Alors hop, indiquez-lui l’adresse https://thimble.webmaker.org/. Mais pour se mettre en appétit, pourquoi ne pas commencer par remixer des pages existantes, écrire sa légende d’un lolcat, personnaliser texte et image d’une carte postale, et bien d’autres projets. Au fait, certains projets comme cette BD à faire soi-même sont littéralement des tutoriels de leur propre conception, mais sont pour l’instant en anglais. Rien ne vous empêche de les remixer pour les traduire et en faire un nouvel outil francophone.

À suivre ! -> la semaine prochaine : Popcorn, pour exploser vos vidéos sur le Web.

Source :

• Le code source de MS-DOS à télécharger (attention aux conditions d'utilisation ;) )

Crédit : Simon Gee Giraudot (Creative Commons By-Sa)

« Plutôt que je crée, je vends, nous avons choisi je crée et je partage… »

Regroupés au sein de la mini entreprise « TimberWolf Créativ’ », des élèves en 1ère Bac Pro du lycée professionnel Camille Schneider de Molsheim nous proposent un projet tout à fait intéressant autour de la création d’un livre numérique sur le loup en Alsace.

Il s’intitule « Libre comme le loup » (cf cette vidéo). Comme vous pourrez le constater en lisant l’entretien ci-dessous, il n’y a pas que le loup qui est libre ici. Et quand on demande aux élèves ce qu’ils ont déjà retenu de leur expérience à ce stade du projet, le HTML5+CSS3, les logiciels libres et les licences libres font partie des réponses.

Un projet à soutenir, d’autant qu’ils sont en campagne de financement sur Ulule pour couvrir les frais.

Remarque : Framasoft est impliqué dans le projet en accompagnant les élèves dans la création de leur ePub sur des outils et des formats libres. Nous les avons également invités à l’événement Vosges Opération Libre à Gérardmer en mai prochain, que vous pouvez d’ores et déjà noter sur vos tablettes si vous êtes de la région.

Interview des élèves porteurs du projet

Bonjour, pouvez-vous présentez succinctement en indiquant quelle fonction vous occupez au sein du projet ?

Je m’appelle Elisabeth, j’ai 16 ans, je suis en 1er Bac Pro Gestion-Administration au LP Camille Schneider de Molsheim et PDG de la mini-entreprise TimberWolf Créativ’. Et voici les responsables des différents services qui sont tous avec moi au lycée :

• Auriane, DG
• Arzu, Responsable Technique.
• Sylvie, Responsable Artistique.
• Pauline, Responsable Administrative.
• Mélanie, Responsable Financière.
• Mélissa, Responsable Marketing au sein de TimberWolf Créativ’

Alors le projet « Libre comme le loup », c’est quoi exactement ?

C’est mettre en place un E-pub sur les légendes alsaciennes en rapport avec le loup afin de faciliter son retour dans nos contrées. Pour faire parler du loup dans nos contrées alsaciennes, nous avons pour projet de réaliser un E-Pub libre écrit sous licence Creative Commons by-SA.

Dans notre E-Pub vous trouverez des légendes alsaciennes oubliées et inconnues sur le loup ainsi que des musiques composées spécialement par notre partenaire La Poupée du Loup, nos dessins et nos énigmes. Une magnifique image de couverture réalisée par l’artiste Jean Linnhoff.

Quelle est la situation actuelle du loup en Alsace ?

Après avoir été éradiqué au début du XXe siècle, il revient chez nous tout doucement. On l’a aperçu à Still et au col du Donon très récemment. Les réactions sont diverses entre les pros-loup et les anti-loup.

Qu’est-ce qu’une « mini entreprise » ? Est-ce ouvert à tous les lycéens ?

C’est une entreprise comme une autre, sauf qu’elle est sous couvert de l’Education nationale, via Entreprendre Pour Apprendre. D’une durée d’un an elle est dirigée par des élèves. Ce type de formation est ouvert à tous mais ne fonctionne vraiment qu’avec une classe solidaire, motivée et qui n’a pas peur de faire des heures sup !

Pourquoi uniquement un ePub et pas également une impression papier ? Est-ce parce que l’ePub propose une autre expérience au lecteur avec de l’interactivité, de la musique, etc. ? Parce que le papier, c’est trop cher ?

Notre E-pub est basé sur un livre papier déjà existant, lui-même créé par la mini-entreprise de l’an passé. L’E-pub apporte une dimension interactive, musicale et visuelle et touche un autre public. Ici le coût n’entre pas en compte, c’est plutôt un choix en rapport avec l’air du temps, l’enseignement des nouvelles technologies en classe de Gestion Administration.

Votre projet s’inscrit sous le signe de la liberté. D’abord pour le loup mais également dans le choix des technologies utilisées (HTML5, CSS3…) et des licences adoptées (CC By-SA). En quoi le « choix du Libre » est-il ici important pour vous ?

La liberté est le maître mot de notre projet : un loup libre, une culture libre pour que chacun puisse apporter sa pierre à l’édifice. Nous souhaitions développer un autre aspect économique, plutôt que je crée, je vends, nous avons choisi je crée et je partage !

La musique, du groupe La Poupée du Loup, est aussi sous licence libre CC By-SA. Ont-ils été faciles à convaincre ?

Nous n’avons eu aucun besoin de les convaincre, ils étaient partants dès le départ et se sont beaucoup investis dans notre E-pub mais également dans l’événementiel au Molodoï.

Vous organisez un week-end à Strasbourg et vous participez à Vosges Opération Libre à Gérardmer. Pouvez-vous nous en dire plus ?

Nous organisons un concert avec La Poupée du Loup, Dirty Deep, Les Poches Vides, le samedi 19 avril à partir de 21h avec une entrée à 5€ et un débat le dimanche 20 avril à partir de 14h avec entrée libre sur le thème du retour du loup en Alsace et l’artiste Jean Linnhoff pour un graff.

Mais nous n’en restons pas là. Nous serons également présents à Vosges Opération Libre avec notre partenaire Framasoft, qui se déroulera le 17 et 18 mai à Gérardmer, pour présenter notre travail. Effectivement ce dernier nous a invité à participer à cet événement pour nous permettre de mettre en avant notre projet et en même temps pouvoir mieux connaître et naviguer dans « le Libre ». Jusqu’à ce jour, nous avions uniquement travaillé avec des logiciels bureautiques sous licence propriétaire et ce projet nous a permis de découvrir une autre facette informatique.

En quoi ce projet s’inscrit bien dans le programme pédagogique de votre classe de 1ère BAC Pro Gestion Administration ?

Nous quittons le virtuel et le théorique pour entrer dans la réalité avec des actions concrètes. Nous devons tout maîtriser aussi bien l’outil informatique avec HTML5 et CSS3, qui ne font pas partis de notre programme mais que nous avons dû apprendre à maîtriser en toute autonomie. Il a aussi toute la partie économique et de gestion d’une entreprise, à savoir : le management, le marketing, la comptabilité, les tâches administratives et, petit plus, le côté artistique avec Sylvie qui a fait tous les dessins.

Qu’est-ce que vous avez déjà appris à ce stade du projet ?

Le HTML + CSS3, les logiciels libres, les droits d’auteurs… En plus des spécificités de chaque service, nous avons appris que pour être performant, il faut travailler ensemble.

Vous proposez une campagne de financement participatif sur la plateforme Ulule. Quels sont vos besoins ? Et que se passera-t-il si la somme n’est pas atteinte ?

Nous avons besoin de 2 500 € pour financer :

• Notre week-end loup au Molodoï de Strasbourg
  • Cachet des artistes
  • Défraiement
  • Communication sur l’événement (flyer, affiche, carte postale…)
  • La location du Molodoï
  • La gestion du week-end
  • Les repas pour les intervenants
• La conception de l’E-Pub qui sera téléchargeable gratuitement mais également vendu sous forme de clé USB :
  • L’achat du support soit la clé USB de 4 Go sur laquelle figurera notre E-Pub + les 3 musiques de la Poupée du Loup + des logiciels Libres de Droit
• L’enregistrement en studio des musiques (3 jours)
• Les produits dérivés (Tee-Shirts, Casquettes)
• Frais de déplacement et d’hébergement :
  • Week-end Vosges Opération Libre, à Gérardmer
  • Déplacements sur Strasbourg (24 élèves)

Et si en fin d’année nous avons réussi à avoir un solde positif, nous reverserons une part de nos bénéfices à une association de défense du loup. Si nous ne les atteignons pas,… nous ne voulons pas y penser… gloups !

Un dernier mot ? Un message à faire passer ?

Soyez libre comme le loup ! Et… aidez-nous ;)

Sources sur Numerama :

• La DGSE a aidé les Britanniques à accéder à Orange
• Twitter réfléchit à la disparition des hashtags et des mentions
• Neutralité du net : le vote de la commission ITRE vivement critiqué

Crédit : Simon Gee Giraudot (Creative Commons By-Sa)

Vite fait, vite lu : ce qui fait la force du Web ouvert, c’est que n’importe qui peut en être un maillon et le construire. Mozilla Webmaker est un ensemble d’outils ludo-éducatifs qui permettent à chacun de comprendre et de modeler le Web.

Le Web permet à chacun d’entre nous d’essayer de nouvelles idées et de les offrir au monde entier, sans avoir à demander la permission à une quelconque autorité. Le rythme rapide de l’innovation nous montre de quoi l’humanité est capable quand de puissants outils sont offerts également à tous.

Mitchell Baker, présidente de la Mozilla Foundation

Chacun doit avoir la possibilité de façonner Internet et son utilisation d’Internet.

principe N°5 du Manifeste de Mozilla

Tout à fait en phase avec ces principes nobles mais certes un peu nébuleux, Mozilla a pris depuis plusieurs années des initiatives concrètes pour amener le plus grand nombre de ses utilisateurs à une meilleure connaissance de ce qu’est le Web. Voici des outils pour apprendre et enseigner.

Utilisez-les, bidouillez-les, inventez-en d’autres !

Pourquoi éduquer au Web

Une génération sans autre proposition que la consommation ?

Il y a presque 30 ans le plan informatique pour tous, malgré tous les défauts et limites matérielles qui devaient conduire à son abandon, a eu le mérite de mettre une génération d’enfants devant des ordinateurs sur lesquels ils s’initiaient à la programmation : dès l’école primaire on apprenait à piloter une « tortue » en logo, puis au collège on s’initiait aux rudiments du BASIC.

On peut penser raisonnablement qu’un petit nombre des enfants d’alors y ont pris goût et sont devenus depuis des acteurs de l’industrie numérique. Et que dire des gamins pour lesquels les portes du Centre international de l’informatique étaient ouvertes dès 1981 ?

Aujourd’hui, quelle occasion ont les enfants et adolescents de mettre les doigts dans le code, de concevoir un contenu pour le Web, d’être autonomes dans leurs usages d’Internet ? Ce n’est maintenant pas avant la classe de terminale scientifique qu’il s’agit d’apprendre à programmer, encore est-ce très clairement lié aux activités mathématiques et scientifiques.

Rien ne leur est proposé pour créer sur le Web, rien ne leur est proposé d’autre que de consommer des contenus dès l’âge tendre. Comment pourraient-ils devenir de utilisateurs conscients et compétents du Web ?

…et tous les autres utilisateurs ?

Aujourd’hui les jeunes ne sont pas les seuls à être privés d’éducation au Web. Que dire de tous ceux qui en maîtrisent à peine l’usage minimum ? De tous les milieux et de tous les âges, y compris dans les métiers dits intellectuels qu’on pourrait croire mieux informés, nombreux sont ceux autour de nous qui confondent un navigateur et un moteur de recherche, qui pensent être protégés de tout par un antivirus et qui ignorent jusqu’à l’existence d’un truc qu’on appelle les logiciels libres.

L’enjeu ?

— C’est la plasticité d’un Web libre et ouvert et sa maîtrise par des utilisateurs conscients. C’est la possibilité pour chacun de comprendre ce qui se passe dans les coulisses d’un site ou d’un service en ligne, d’être conscient des risques de la surveillance généralisée et de la marchandisation de nos profils. C’est la possibilité pour chacun d’être un acteur du Web et d’en tirer le meilleur parti sur tous les plans.

Oui d’accord, j’arrête avec les idéaux, voyons un peu ce que propose Mozilla.

Des outils ludiques pour apprendre

Les lunettes déshabillantes du HTML

Quand j’étais gosse (c’était au millénaire précédent), on pouvait voir dans les magazines des publicités pour un gadget qui ne manquait pas de nous faire fantasmer : des lunettes à rayons X, qui étaient supposées dévoiler des silhouettes sous les vêtements. Je n’ai jamais su si ces promesses alléchantes avaient un quelconque fondement. En revanche, la supervision de Superman, qui ne me faisait guère fantasmer, semble s’être réalisée avec les X-Ray Goggles de Webmaker. Il s’agit ni plus ni moins que de révéler le code source et donc d’apprendre le nom des éléments, attributs et autres balises HTML en se promenant sur la page web, une fois activées les « lunettes ».

Il s’agit d’un script qu’on dépose sur la barre d’outils comme un simple bookmarklet (tiens, pourquoi avait-on perdu de vue les bien pratiques bookmarklets ?). Pour l’utilisateur c’est simplissime et presque amusant. Pour moi le vieux pervers c’est comme si je pouvais regarder sous les jupes… de la page. Mais voici quelques captures d’écran qui vaudront mieux qu’une trop longue description :

Première étape : faire glisser le bookmarklet sur la barre d’outils de son choix

Sur une page qu’on aime bien (celle de connard.pro par exemple) il suffit de survoler et les éléments ou attributs HTML se mettent en couleurs et sont identifiés.

TOUT est désormais modifiable sur la page : textes, images, balises… ici j’augmente l’interligne et j’ajoute des italiques.

…et le plus chouette (mot qui voulait dire trop cool autrefois) c’est que je peux publier le résultat remixé par mes soins et communiquer fièrement l’adresse aux victimes du bidouillage.

Allez vous aussi vous amuser avec les lunettes à rayons X, c’est ici https://goggles.webmaker.org/fr et c’est en français grâce aux contributeurs de MozFr (oui c’est imprononçable, et alors ?)

— Au fait, si vous voulez passer à l’étape supérieure, vu que vous êtes « pro » et que vous regardez tout cela avec un sourire condescendant, essayez donc l’inspecteur (Ctrl+Maj+C) parmi les nombreux outils de développement web inclus dans Firefox (what else ?)

À suivre ! -> la semaine prochaine : Thimble, l’éditeur HTML interactif qui poutre.