Apprendre à programmer aux jeunes – 2


HTML5 de Erick Dimas

Sans être à proprement parlé un langage de programmation, le « html » peut être un bon support à l’apprentissage d’un premier langage informatique. De plus, Il est facile si on le souhaite d’aborder réellement la programmation en lui adjoignant le langage javascript.

Le simple développement d’une page web est porteur d’un ensemble de connaissances qui renforcera sensiblement la culture numérique de celui ou celle qui s’y confrontera : maitrise de la notion d’hypertexte, de la taille et de la résolution d’une image, de la notion de chemin d’un fichier, etc.

Il faut ici considérer que la maitrise technique de certains aspects du monde numérique contribue à une meilleure compréhension de celui-ci et donc à une utilisation plus éclairée et distanciées des outils et services numériques qui le composent.

Enfin on pourra aborder à la faveur d’un tel travail, les notions de responsabilités inhérentes à la publication sur le web : respect du droit d’auteur, protection de ses données personnelles, nécessité d’autorisations parentales lors de la création de comptes sur certaines plateformes (âge légal) ou de la publication de certaines photos (droits à l’image).

 

Intérêts à cultiver, facteurs de motivation

  • Décoder un langage revêt une dimension un peu magique.
  • Se démarquer de la masse qui maitrise l’usage de certains réseaux sociaux mais dont les usages numériques sont finalement assez pauvres.
  • Le lancement d’un projet sous forme de défi.
  • l’enrichissement d’une page par la manipulation des fragments de code d’exportation de vidéos, de sons ou de « badges réseaux sociaux ».
  • Une valorisation du travail réalisé par sa publication.
  • L’obtention d’un badge, d’une récompense.

Quelques pistes et outils

On peut bien évidemment aborder le développement web à l’aide d’un éditeur html « wysiwyg ». Cette approche mobilise sensiblement les mêmes compétences que l’utilisation d’un traitement de texte et favorisera certainement l’efficacité, mais elle occultera un certain nombre de notions qu’il peut être important de comprendre.

Il est également possible d’utiliser des outils de création visuels gratuits de sites web comprenant un hébergement du travail réalisé. Cette approche est assez similaire à celle évoquée ci-dessus. Malheureusement, la publicité s’invitera souvent lors de la publication de son travail.

A l’inverse, on peut aborder le sujet en appréhendant directement le code « html » frontalement mais de manière graduée : le principe de balisage, le principe d’imbrication, les informations destinées aux machines ou les informations à afficher destinées à l’homme, la connaissance des balises de base, le rôle du « html » et celui du css, etc. Par ailleurs, il est possible de proposer par exemple, une page « type » à modifier tant dans sa structure (html) que dans sa forme (css).

Conception d’une maquette fonctionnelle

Après une étape de réflexion et de réalisation d’une maquette fonctionnelle sur papier, cette étape dite de « zoning » peut être réalisée numériquement en utilisant un grand nombre d’outils. Nous nous limiterons ici à des services en ligne gratuits simples d’utilisation.

Frame box

Frame_Box_-_Lightweight_online_tool_for_creating_mockups_-_2014-10-22_15.48.47

Frame box est un service en ligne gratuit qui ne nécessite pas forcément d’inscription pour pouvoir sauvegarder son travail. Il permet de réaliser des maquettes graphiques numériques basiques et peut être suffisant pour le type de projet évoqué dans ce billet.

wireframe|cc

wireframe.cc_-_minimal_wireframing_tool_-_for_free_-_2014-10-22_15.31.32

Wireframe|cc est également un service en ligne gratuit qui ne nécessite pas non plus d’inscription. Il est un peu plus souple d’utilisation que « Frame box » au niveau des zones de texte et propose un rendu un peu plus moderne que ce dernier.

Édition du code « html » et « css »

Les éditeurs permettant d’éditer du code informatique sont très nombreux. Ils permettent une édition basique du code jusqu’à la gestion de projets très complets. L’idée est ici de proposer quelques outils simples et accessibles à des jeunes, sous forme de services en ligne mais aussi de logiciels portables ou à installer sur son poste de travail.

notepad++

notepad++
C’est l’éditeur léger et performant par excellence. Il est capable d’éditer un grand nombre de langages en proposant une coloration syntaxique qui facilite la lecture et la modification. Il est à noter que notepad++ est disponible en version portable qui ne nécessite donc pas d’installation.

Mozilla Thimble

Mozilla_Thimble_-_2014-10-22_17.02.10

« Mozilla Thimble » fait partie des outils proposés par la fondation mozilla qui permettent de remixer le web. Thimble est un éditeur de « html » avec rendu visuel immédiat utilisable au sein d’un navigateur web avec ou sans inscription.

Instant html

HTML_Instant_Real-Time_HTML_Editor_-_2014-10-22_17.36.11

« html instant » est également un éditeur « html » en ligne. Il semble un peu plus limité que « Thimble » (on ne maîtrise que le <body> de la page) mais est utilisable lors d’un premier contact ou une initiation.

Codecademy

HTML_&_CSS_Codecademy_-_2014-10-25_17.23.15

Codecademy propose des cours dans divers langages (html & css,  jquery, Python, Ruby et php) avec une progression proposant de modifier du code existant. L’effet des modifications sont visualisables directement dans un cadre. Le site est initialement en Anglais mais une grosse partie a été traduite en Français et est donc utilisable par des jeunes non-anglophones.

Fragments de code

p1-chap1-4.mp4 from OpenClassrooms on Vimeo.

Une des façons d’enrichir facilement une page web consiste à récupérer du contenu provenant des différentes plateformes de vidéos, de musiques ou de réseaux sociaux. En effet, celles-ci proposent la possibilité d’exporter le contenu sous forme de fragments de code à copier / coller : vidéos, musiques, images, icônes et autres badges issus des réseaux sociaux.

Publication et valorisation du travail

Ultime étape possible et dans la plupart des cas souhaitable comme facteur de motivation : la publication du travail réalisé. Il faudra pour cela disposer d’un hébergement et d’un logiciel de transfert ftp. On pourra également inciter les apprenants à exploiter l’hébergement fourni par la plupart des F.A.I. (Fournisseurs d’Accès à Internet)

Badge(12)

Enfin, il est possible de valoriser le travail effectué par la délivrance d’un badge faisant foi de l’accession à un certain niveau de maitrise. Se pose alors le problème du choix du système de badge utilisé, du dispositif technique de délivrance, de l’identité et la reconnaissance de la structure émettrice , ainsi que de la pérennité de la preuve. Ce sujet fera prochainement l’objet d’un billet.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*