S’il existe de nombreux sites pour tester en ligne des codes écrits en HTML et CSS (voire en JavaScript), peu d’entre eux permettent d’embarquer sur une page Web ce code à la manière de l’excellent CodeAcademy qui avec ce système d’apprentissage met en ligne d’excellents tutoriels d’initiation pour créer et tester en live des morceaux de codes sans quitter le site.
Le novice en programmation modifie son code HTML et CSS dans une fenêtre pour voir immédiatement le résultat s’afficher dans une autre fenêtre. La progression dans la connaissance de ces langages essentiels du Web est ainsi accélérée par la pratique immédiate des notions théoriques expliquées dans le texte qui accompagne le code à modifier et à triturer pour mieux comprendre son fonctionnement.
Cela facilite grandement la vie des débutants en programmation Web leur évitant d’installer un environnement de test.
Après quelques recherches, j’ai fini par trouver deux applications Web qui outre la programmation en live de code HTML, CSS et JavaScript ont l’option d’incorporer le résultat et le code sur une page Web avec des possibilités de modifications.

html-css

Les personnes souhaitant écrire des tutoriels expliquant les arcanes des langages HTML et CSS plus vivants qu’un texte statique avec des copies d’écran et des lignes de codes à recopier pourront envisager d’inclure un tel système sur leurs pages Web. En pratique cela donne un affichage de ce type :

Test  Le site que j’ai utilisé pour incorporer ce petit morceau de code s’appelle JSBin. Il a le gros avantage d’être Open Source. De nombreuses options permettent d’afficher à l’écran les onglets voulus dans l’ordre souhaité. La taille de la fenêtre s’adapte en fonction de la place disponible. Un clic sur le code embarqué sur la page Web renvoie vers la page où l’étudiant pourra voir le code en plein écran pour l’étudier et l’éditer comme bon lui semble.   Un autre site similaire, à mon avis un peu plus complet, mais pas Open Source, peut aussi être envisagé pour créer ce type de tutoriels. Il s’agit de JSFiddle.   Outre l’ajout d’une fenêtre live, ces deux sites donnent aussi accès aux pages de programmation via une URL classique à partager sur un site Web, sur Twitter, par mail ou ailleurs.   J’ajouterai à fur et à mesure de mes découvertes des outils similaires sur cette page.   La prochaine étape pour être complètement indépendant consisterait d’ailleurs à pouvoir mettre en ligne son propre système d’apprentissage sur un serveur dédié.

Sources : JSBInJSFiddle

Boutons de partage :
Twitter Facebook Google Plus Linkedin email
Article rédigé par Eric Weyland