Archives de catégorie : Javascript

Cette catégorie regroupe les articles dédiés au langage Javascript

De bons bouquins pour s’initier à la programmation

J’ai mis à profit la période estivale pour lire pas mal de bouquins, et j’ai découvert quelques pépites dont j’ai envie de vous parler aujourd’hui. Je ne parlerai pas ici des quelques bouquins que j’ai lus pour mes besoins professionnels (ça fera peut être l’objet d’un autre article), mais plutôt des bouquins destinés aux personnes – jeunes ou moins jeunes – qui souhaitent s’initier à la programmation. Oui je sais, c’est une vieille marotte chez moi (j’ai déjà parlé de ce sujet dans de précédents articles), mais en plus de mes activités de développeur, j’enseigne aussi la programmation (essentiellement à des adultes). Je considère que cela fait partie de mon travail d’étudier comment mes confrères abordent cette discipline particulière qu’est l’enseignement de la programmation, cela me permet de m’améliorer en tant que prof.

Je vais donc vous parler de 3 livres, un en français et deux en anglais.

Commençons par le livre en français :

« Apprendre à programmer en Python (pour jeunes débutants de 7 à 97 ans) », de Frédéric Laroche (publié aux éditions Ellipses en 2015).

Je dois dire que j’ai été séduit par certains aspects de ce livre, aux illustrations sympas (de Gilles Macagno), et qui fourmille d’anecdotes. L’auteur a souhaité privilégier un style de programmation procédurale (plutôt qu’objet) pour que les exemples restent accessibles au plus grand nombre. C’est un choix qui se tient, mais j’avoue que j’ai été décontenancé par le premier chapitre, destiné à planter les bases du langage Python. Je trouve que l’auteur va souvent trop vite, et je me disais en lisant ce chapitre qu’un lecteur complètement néophyte pourrait se retrouver assez vite largué. En revanche, une personne ayant déjà quelques bases de programmation, en Python ou sur un autre langage, devrait pouvoir s’en sortir. Attention, le reste du livre est carrément génial. Au travers de jeux connus et moins connus, l’auteur livre un beau travail de pédagogue et j’ai pris un grand plaisir à le lire. C’est vraiment un bouquin généreux et sympa, et malgré le chapitre d’intro que je trouve un peu bancal, je vous le recommande.

Un autre livre, qui m’a procuré un grand plaisir de lecture, c’est celui-ci :

« Get Programming with Javascript« , de John R. Larsen, aux éditions Manning. Il est paru cet été, et j’ai sauté sur l’ebook dès sa parution. Pour le coup, d’un point de vue pédagogique, c’est un sans faute. Je trouve la présentation des fondamentaux de Javascript très progressive et cette progression est très réfléchie. Chapitre après chapitre, l’auteur construit un jeu de rôle au sein d’une page web, et l’enrichit de nouvelles fonctionnalités tout en présentant de nouveaux concepts de programmation. J’ai vraiment pris un grand plaisir à le lire, et je me prends à rêver que ce livre soit traduit en français, pour qu’il puisse toucher un lectorat plus large chez nous.

Le troisième livre que j’ai bien apprécié, c’est celui de Syed Omar et Faruk Towaha, paru chez Packt en janvier 2016 :

« Javascript Projects for Kids »

Le livre propose tout d’abord une intro à Javascript qui est sympa, mais de construction assez classique. Vous y trouverez aussi une introduction à jQuery qui est intéressante, mais les différents projets présentés ensuite ne s’appuient pas nécessairement sur jQuery, ce qui n’est d’ailleurs pas dérangeant. Il faut souligner que les chapitres sont quasiment tous indépendants, et présentent des projets écrits dans des styles souvent très différents. En fait, ce livre c’est un peu « l’auberge espagnole » du Javascript, mais il est généreux, fourmille de bonnes idées et les projets présentés sont sympas à réaliser. Je donnerais une mention spéciale au chapitre 9.3 (Dissecting Hangman) dans lequel les auteurs ont utilisé un graphique SVG pour dessiner leur pendu, et AngularJS pour masquer ou faire apparaître les différentes parties du pendu en fonction des mauvaises réponses (via la directive Angular « ng-show »). J’avoue que je n’avais jamais envisagé jusqu’ici de combiner Angular avec du SVG, et je me mets l’idée « de côté » car je la trouve sacrément futée. Attention, ce livre ne fournit pas d’introduction à Angular, du coup si vous ne connaissez pas ce framework, vous aurez peut être du mal à comprendre le code présenté dans ce chapitre du « pendu », mais ça peut être aussi un bon moyen de découvrir Angular, après tout…

Voilà… trois livres très différents, mais tous passionnants, car tous écrits par des auteurs passionnés, j’espère qu’ils vous procureront autant de plaisir qu’ils m’en ont procuré.

A noter que j’ai découvert un autre bouquin chez Manning qui s’intitule « Hello AppInventor!« , de Paula Beer et Carl Simmons (livre paru en 2014).  Je ne l’ai pas encore lu, faute de temps, mas il est sur le haut de ma pile, j’espère que je vais réussi à le lire rapidement. Pour ceux qui ne connaissant pas, AppInventor est un projet initié par Google et maintenu par le MIT. Cette application reprend les principes de Scratch, mais elle est destinée à développer des applications pour les tablettes et smartphones Androïd. Ca a l’air vraiment cool.

Allez, bonne rentrée à tous !!  😉

 

Pour les followers : mon Tweet

 

 

A tribute to Mary Everest Boole

Dans les années 80, j’ai eu la chance d’avoir entre les mains quelques bons bouquins d’initiation à la programmation. Dans certains de ces bouquins je découvrais de temps à autre des algorithmes produisant des formes géométriques complexes et fascinantes. Ma passion pour l’image numérique et l’algorithmique remonte à cette époque là. Mais les bouquins évoqués précédemment étaient pauvres en information quant à l’origine de ces algorithmes.

Il m’aura fallu pas loin d’une trentaine d’années pour découvrir que les principes fondateurs de ces techniques graphiques – désignées sous le terme de « curve stitching » ou encore « string art » – ont été posés aux alentours de 1900-1906, par une mathématicienne britannique du nom de Mary Everest Boole. Oui, vous avez bien lu, « Boole », car elle était en fait l’épouse du célèbre mathématicien et logicien George Boole. Féministe engagée, passionnée par l’enseignement des mathématiques et des sciences en général, elle a mené des travaux précurseurs dans ce domaine, travaux qui n’ont probablement jamais été diffusés en France (de son vivant, et même après) et qui semblent être tombés dans l’oubli aujourd’hui.

Je m’amuse depuis quelques temps à exhumer certains de ces vieux algorithmes et à les tester avec l’API Canvas du HTML5. J’ai commencé ce travail d’abord en Javascript natif, mais depuis peu je poursuis cette recherche personnelle avec P5.js, qui m’offre plus de souplesse pour triturer ces algos et les images résultantes.

Je vous invite à vous connecter dans mon labo sur la page suivante: Curve Stitching. Vous pourrez tester ces algorithmes en live, et vous trouverez sur la page d’introduction quelques références bibliographiques intéressantes.

A bientôt 🙂

Apprendre la programmation aux enfants (again…)

Eh oui, en cette rentrée de septembre ensoleillée, je reviens sur un sujet qui me tient particulièrement à coeur, à savoir : enseigner la programmation aux enfants.

Je me demandais notamment s’il existait dans la littérature contemporaine de bons bouquins susceptibles de permettre à des enfants ou à des adolescents de s’initier à la programmation. J’emploie le terme « contemporain » sciemment car dans les années 80, et même au début des années 90, on trouvait de bons livres d’initiation, s’appuyant sur les langages BASIC ou Pascal. Et c’est d’ailleurs avec des ouvrages de ce genre que je me suis formé à la programmation, comme beaucoup de développeurs de ma génération.

Mais aujourd’hui, les langages BASIC et Pascal ne sont plus d’actualité. On peut d’ailleurs le regretter, car il s’agissait de langages particulièrement bien adaptés à l’enseignement. Mais bon, c’est comme ça… Les langages qui ont le vent en poupe aujourd’hui, ce sont des langages comme PHP, Javascript, Python ou Ruby. Et ma foi, ils sont aussi très bien, à condition de savoir adapter l’apprentissage aux capacités des enfants que l’on souhaite initier.

Pour en revenir à mon sujet du jour, j’ai déniché 3 bons bouquins en anglais, chez le même éditeur (NoStarch.com), dont un a été traduit en français et est disponible chez Eyrolles (il s’agit de « Python for Kids« ).

Les 3 ouvrages en question sont les suivants :

J’ai commencé par lire le livre de Bryson Payne, après avoir assisté à l’un de ses webinars. J’ai apprécié les idées proposées dans son livre, notamment son utilisation de la « tortue », une petite librairie Python qui permet de tracer des graphiques très simplement, un peu à la manière d’une ardoise magique (vous savez ce jeu indémodable qui consiste à tracer des formes au moyen de 2 roulettes). Pour la petite histoire, cette « tortue » était à l’origine un des composants d’un langage de programmation de plus haut niveau, le LOGO (cf. Wikipédia pour plus d’infos sur ce sujet).

Ce qui m’a dérangé dans le livre de Bryson Payne, c’est qu’il va très vite (trop vite à mon goût) vers des exemples assez complexes, qui pourraient décourager le lecteur si sa connaissance du langage Python est trop superficielle. En revanche ses exemples sont assez emballants, et il y a beaucoup de bonnes idées à puiser dans ce livre. Comme son sous-titre l’indique, ce livre est destiné à aider des parents qui voudraient enseigner la programmation à leurs enfants. Mais pour tirer pleinement parti de ce livre, les parents ont intérêt à bien maîtriser le langage Python, sinon ils risquent d’être perdus face à certains raccourcis pris par l’auteur.

A l’inverse, le livre de Jason R. Briggs, Python for Kids (livre qui est disponible chez Eyrolles en français), démarre de manière plus progressive. La première partie de son livre est peut être plus rébarbative, du fait qu’il prend le temps de présenter les bases du langage Python (il manquerait peut être de temps en temps un exemple amusant pour casser la monotonie de l’ensemble). En revanche, dès que Jason R. Briggs s’attaque à l’utilisation de la tortue, il m’emballe vraiment car ses explications progressives sont très accessibles, et très pertinentes, et c’est un plaisir de le suivre. Un adulte pourra aider un enfant à piocher dans ce livre les éléments intéressants adaptés à son niveau de compréhension. Un adolescent pourra sans aucun doute se débrouiller seul avec ce livre, s’il se forme en autodidacte.

Voici un exemple de programme Python exploitant la fameuse tortue graphique, pour générer des formes géométriques amusantes (exemple emprunté au livre « Teach your kids to code »).

import turtle
t = turtle.Pen()
for x in range(100):
	t.circle(x)
	t.left(90)

Et voici une prise de cliché de l’environnement Python, avec l’image en cours de réalisation :

turtle_python_exemple

Ces deux livres (« Python for Kids » et « Teach your kids to code ») me semblent très complémentaires. Mais je recommanderais le premier pour les bases solides qu’il apporte au lecteur, et le second comme complément pour le réservoir d’idées amusantes qu’il propose.

Le livre « Javascript for Kids », de Nick Morgan, est lui aussi très emballant. Je suis en train de le lire, mais comme je manque de temps, je risque de mettre encore quelques semaines avant de le terminer. J’aime beaucoup son approche très progressive, ses exemples simples et pertinents, son effort aussi pour – dans certains cas – prendre du recul par rapport au programme à implémenter (en proposant par exemple un pseudo-code en langage naturel décrivant l’objectif à atteindre, avant de le coder réellement en Javascript). Bref c’est un livre qui mérite qu’on s’y attarde, et qui mériterait lui aussi d’être traduit en français (peut être que les éditions Eyrolles sont déjà sur le coup, en tout cas je le souhaite).

Une question vous taraude peut être à l’issue de cet article : « alors… Python ou Javascript ? »

Franchement, j’adore Javascript, mais il me semble que Python a quelques atouts dans sa manche pour l’enseignement de la programmation aux enfants. Avec en premier lieu un shell complet incluant un éditeur avec coloration syntaxique, une librairie graphique intégrée (tkinter) qui permet de générer des graphiques très simplement (animés ou non), une librairie « turtle » intégrée dans la version standard de Python pour jouer avec la tortue… Bref, tout est fait dans Python pour faciliter l’apprentissage.

Avec Javascript, c’est un peu plus compliqué. On peut jouer avec de différentes manières, et en premier lieu on peut commencer par l’utiliser dans la console de son navigateur préféré, mais dès que l’on souhaite développer des choses sophistiquées, il faut ajouter des connaissances sur le HTML, le DOM, l’API Canvas du HTML5 (pour la génération de graphiques), choisir un éditeur de code, etc… Bref, l’écosystème de Javascript est un peu hétéroclite, et du coup un peu plus complexe que celui de Python. Du coup, je recommanderais l’apprentissage de Javascript plutôt à des adolescents (peut être à partir de 12 ans), alors qu’avec Python, il me semble que l’on peut démarrer plus jeune, plus facilement (peut être à partir de 8 ans).

J’ajoute que ces 3 livres me semblent également très bien pour initier des adultes à la programmation.

Voilà, j’espère que ce petit article vous aura intéressé, et surtout qu’il vous donnera envie de découvrir ces livres, ces auteurs, et peut être d’initier des enfants à la programmation au travers de ces très bons langages que sont Python et Javascript.

Sur ces bonnes paroles, je vous souhaite une très bonne rentrée. 🙂

Apprendre la programmation aux enfants

Cela faisait déjà quelques mois, que le plus grand de mes 2 garçons (qui a 7 ans et demi), me demandait de lui apprendre à programmer des jeux sur ordinateur. J’ai eu tout de suite envie de répondre positivement à sa demande, mais en même temps j’étais hésitant quant à l’approche à adopter (je souhaitais l’initier en douceur, sans risquer de l’effrayer avec trop de code…).

Mon fils avait déjà été initié à Scratch par sa maîtresse, et nous avions aussi expérimenté cette solution ensemble à la maison. Scratch me semblait pas mal pour découvrir les premiers rudiments de la programmation, mais faute de temps, je n’avais pas réellement exploré toutes les possibilités de l’outil. Plus récemment, nous avions testé ensemble CodeCombat, un logiciel d’apprentissage en ligne destiné à s’initier à la programmation dans différents langages (nous avions testé cette solution avec l’apprentissage de Javascript). La solution me plaisait assez, et mon fils avait semblé « accrocher », mais après réflexion, son verdict fut sans appel : « c’est déjà tout fait, moi je veux créer mes propres jeux ».

Par ailleurs, j’avais parcouru plusieurs livres (en anglais) sur la programmation de jeux en Javascript (exploitant notamment l’API Canvas de la norme HTML5). Mais chacun de ces livres présentait différents moteurs Javascript de création de jeux, et je n’arrivais pas à me décider sur l’utilisation de l’un ou l’autre de ces moteurs pour initier un enfant de 7 ans à la programmation.

A la veille des congés scolaires de ce Noël 2014, je tombe sur un article publié par le magazine WebDesign (numéro 36) qui s’intitule : « Créer des jeux HTML5 ». En parcourant l’article, je me suis dit que le jeu proposé (un petit jeu de plateforme très classique), pourrait plaire à mon garçon.

Le jeu proposé dans l’article s’appuie sur le moteur de jeu Crafty.js, complété d’un moteur de génération d’effets physiques, Box2DWeb.js, pour le mouvement des personnages. Le code Javascript du jeu lui-même est relativement simple. J’y vais donc par étapes, montrant à mon garçon comment constituer une page HTML. En ajoutant progressivement différents éléments à la page (un titre, puis une balise « div » avec un peu de texte dedans), et en rafraîchissant périodiquement la page dans le navigateur, j’ai pu lui montrer les premiers rudiments d’un site internet. Puis j’ai ajouté les premiers éléments du code Javascript. Au fur et à mesure de l’avancement, je lui ai montré les erreurs que je faisais (signalées par la console du navigateur) et comment les corriger. Il ne semblait pas du tout s’ennuyer et me posait plein de questions.

Quand nous sommes arrivés à la phase de création des personnages, j’ai proposé à mon fils de les dessiner sur une feuille, ce qu’il a fait avec grand plaisir. J’ai ensuite scanné ses dessins, et il les a retravaillés sur le logiciel Gimp, en ajoutant de la couleur via le pinceau et le pot de peinture. Nous avons redimensionné les dessins, en les mettant aux dimensions requises pour le jeu et nous avons vu les personnages apparaître sur l’écran, les uns après les autres, au fur et à mesure de notre progression. J’ai ensuite montré à mon garçon le principe de la couleur de transparence (pour le contour des personnages), et il a vu immédiatement la différence de rendu sur l’écran.

C’est mon plus jeune fils, qui a 3 ans et demi, qui s’est attelé à la tâche de dessiner le fond d’écran du jeu. Il faut dire qu’il venait périodiquement voir où nous en étions, et il a finalement eu envie de participer lui aussi, à sa façon. Pour dessiner le fond d’écran, il a utilisé Pixia, un petit logiciel de dessin, plus convivial pour les enfants que Gimp, dont l’interface est un peu austère, il faut bien le reconnaître. Comme mon fils a beaucoup usé de la gomme, on voit plus le fond d’écran rose (par transparence) que les couleurs qu’il avait placées dans un premier temps. Mais le rendu final est finalement très sympa.

Le jeu fonctionne, même si, bien évidemment, il n’est pas complètement fini (les garçons ont repéré quelques petits bugs en jouant avec, mais rien de grave). On va donc le retravailler, l’améliorer, sans doute lui ajouter de nouveaux tableaux (il n’en contient qu’un pour l’instant). Vous trouverez la toute première version du jeu (conforme à l’article du magazine Webdesign, hormis le design des personnages et du décor) en cliquant sur ce lien. Je l’ai mis en ligne pour que mes enfants puissent le montrer à la famille et aux amis.

Je me suis régalé à créer ce premier jeu avec mes enfants. Cela m’a rappelé l’époque, fort lointaine, où je créais des jeux sur mon Commodore64, à partir de listings trouvés dans divers magazines d’informatique. Mais surtout cela m’a permis de vérifier que Javascript était un langage qui pouvait être tout à fait adapté à l’apprentissage de la programmation, pour de jeunes enfants. Bien évidemment, c’est moi qui ai saisi la majeure partie du code, mais en y allant par étapes, en expliquant ce que je faisais, et pourquoi je le faisais, j’ai vu dans le regard de mon grand garçon qu’il n’en perdait pas une miette. De plus, le moteur Crafty.js me semble une bonne solution pour le développement de jeux adaptés à de jeunes enfants, du coup je vais étudier plus avant sa documentation, qui me semble plutôt bien faite. Et je vais étudier aussi, pour comparaison, la documentation de Phaser, un autre moteur de jeu, qui semble également très puissant et très polyvalent. Je vous tiendrai au courant de mes découvertes, et des prochains développements réalisés avec mon grand garçon, qui semble avoir plein d’idées, suite à cette première expérience.

Sur ce, bonnes fêtes de fin d’année à tous, et à l’année prochaine !!!