° Google Blockly, LA page de référence pour apprendre à programmer avec blockly.

° Custom Blocks: Best Practices, les bonnes pratiques selon l'expérience des développeurs de Blockly

° Blockly-games.
Une suite d'exemples pour apprendre la programmation avec Blockly.

° Blockly > Demos.
Les exemples des développeurs de Blockly.

° Blockly > Demos > Blockly Developer Tools.
"Blockly factory", outils d'aide de création de blocs de programme.
Blockly Developer Tools. Explications et une vidéo.
Define Blocks. Tous les paramètres des blocs. Exemple le paramètre "data".

° Le forum de google sur Blockly. En anglais.

° Blockly Developer Registration.

° Blockly Playground.
Vidéo explicant Blockly Playground.

° Blockly Generator Tests.

° ex0010, exemple minimaliste de génération de code javascript.
- La taille de la région réservé à Blockly est fixe.
- Les blocs sont visibles et en nombre limité.
- On peut voir le code javascript généré.
- On peut exécuter le code javascript généré.

° ex0020, évolution du code précédent.
- Les blocs se trouvent dans des menus.

° ex0030, évolution du code de ex0010.
Il n'est pas agréable d'avoir les résultats dans des "alert(...)".
- Le code et les résultats de l'exécution sont affichés dans la fenêtre.
  Pour cela un nouveau bloc a été créé en javascript.

° ex0040, évolution du code de ex0030.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  Pour cela un nouveau bloc a été créé en javascript.

° ex0050, très similaire au code de ex0040.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  C'est juste un autre exemple.

° ex0060, similaire au code de ex0040.
- Des blocs sont présents dès le départ dans la fenêtre de Blockly.
  On a placé le programme lié au problème de Syracuse.   C'est un autre exemple.
- On a défini un nouveau bloc d'affichage, sans retour à la ligne.
- On change le texte de ce bloc.

° ex0100, augmentation de l'espace pour introduire les blocs.
- Les blocs peuvent êtres mis dans toute la fenêtre.
  On repart de l'ex0010, avec l'espace pour placer les blocs prenant toute la fenêtre.
- On régresse un peut, mais pour aller plus loin ensuite.

° ex0110, très similaire à ex0100, avec des bordures.
- Des cadres ont été ajouté à l'exemple ex0100. Peu intéressant.
  C'est utile pour des développements.

° ex0120, extension de l'ex0100.
- Les blocs ne sont pas visible au départs.
- Il y a beaucoup plus de blocs disponibles, dont des variables et des fonctions.

° ex0130, belle extension de l'ex0120.
En plus des fonctionnalité de l'ex0120 :
- L'affichage se fait dans des fenêtres.
- Un code est présent dès le départ.
Le code devient trop long, une partie sera mise dans une librairie par la suite.

° ex0140, comme l'ex0130, rangé dans des fichiers.
Le code de l'ex0130 permet déjà d'écrire un vrai programme. Il fait plus de 700 lignes, il faut donc séparer diverses parties dans divers fichiers. C'est ce qui est fait dans cet exemple.
Il y a maintenant 4 fichiers :
1) le code HTML (130 lignes)
2) le code javascript (220 lignes)
3) la définition des blocks désirés dans la toolbox (310 lignes)
4) la définition des blocks initialement présents (startBlocks) (130 lignes)

° ex0144, mise de blockly dans une fenêtre.
Ce code a été écrit après l'ex1605, il a pour but de tester la mise des blocks dans une sous-fenêtre.
Chaque sous-fenêtre peut être déplacée et redimensionnée.
Il part du code de l'ex0140.
Adjonction d'un bloque qui bloc qui permet d'effacer l'affichage.
On peut aussi éditer et exécuter le code javascript.

° ex0145, suite de ex0144, exécution de code Python.
Ce code est la suite du code ex0144.html.
En plus des fonctionnalités de ex0144.html, il permet d'éditer et d'exécuter du code Python, en utilisant le développement "Brython", expliqué plus en détail dans la page suivante.

° Brython, exécution de code Python dans un navigateur.
Informations et exemples sur comment exécuter du code Python dans un navigateur.

° ex0146, suite de ex0144, exécution de code Lua.
Ce code est la suite du code ex0144.html.
En plus des fonctionnalités de ex0144.html, il permet d'éditer et d'exécuter du code Lua.
L'idée est similaire à ex0145 qui permet d'exécuter du code Python.
Le langage Lua est très proche du langage C, dans sa syntaxe de base.
Il est prévu de mixer toutes ces possibilités en une seule application, vers ex2000.

° ex0150, fonctionnalités intéressantes.
Le code est une extension de celui de "ex0140" et est de nouveau subdivisé en 4 fichiers.
Adjonction de :
- la possiblité de voir le code XML généré par le programme Blockly.
  C'est utile pour le copier et le coller dans la startBlocks d'un nouveau projet.
- La possibilité de sauver la réalisation Blockly
- La possibilité de charger une réalisation Blockly

!! ex0160, = ex0150 + code javascript automatique.
Le code est une extension de celui de "ex0150" et est de nouveau subdivisé en 4 fichiers.
Le code javascript est mis à jour automatiquement à chaque modification de blocs.
Adjonction de l'instruction : "demoWorkspace.addChangeListener(myUpdateFunction);" dans 'exe0160.js'
c.f. : Code Generators.

!! ex0170, exemple de génération de blocs.
Donne plusieurs exemples de génération de blocs Blockly.
Montre le lien entre la Blockly Factory (Blockly > Demos > Blockly Developer Tools) et la génération de code pour définir des blocs, ainsi que pour générer du code javascript.

° ex0200, Exécution ralentie du code.
Il peut être intéressant d'avoir un code qui s'exécute au ralenti.
Javascript n'a pas d'instruction "wait(temps)". Javascript n'est pas multitâche mais il existe deux manières pour simuler une instruction "wait(temps)" en rendant la main au système.
Une boucle d'attendte ne sert à rien, car cela bloque javascript et aucune mise à jour n'est visible durant cette boucle.
Ici une première manière est illustrée. Elle utilise le minuteur (timer) et l'instruction yield.
Le code de départ est celui de l'ex0150 et est de nouveau subdivisé en 4 fichiers.
Adjonction de l'exécution de code au ralent.

° ex0210, déplacement d'un objet au ralenti.
- Adjonction de la possibilité de lire les coordonnées de la position de l'objet.
- Adjonction d'un choix multiple de la lecture d'une coordonnée de la position de l'objet.
L'id de l'image déplacée est définie dans la balise <data> du bloc <block type="logo_gotoxy"> de la toolbox.
Le nom de l'id est suivit d'une virgule, puis du temps en [ms] entre deux déplacement d'un pixel de l'image.
Dans le fichier html de base, une image ayant cette "id" doit être définie.
Dans cet exemple, l'id est : "idBouleBleue" et la vitesse est 2.
Dans le code javascript (ex0210.js), dans : "Blockly.Blocks['logo_gotoxy'] = {"
la ligne : "data": "idBouleBleue, 5", // Valeurs par défaut. a été ajouté.

° ex0220, comme ex0210, disposition différente.
Au lieu d'avoir l'image de la boule bleu à droite du menu de Blockly, elle est positionnée à gauche. Très peu de changements relativement à ex0210.

° ex0222, comme ex0222, avec illumination du block actif.
Seulement deux lignes ont été ajoutées et les blocs sont illuminés en cours d'exécution, pour indiquer l'instruction exécutée.

° ex0224, Exécution ralentie du code, avec mise en évidence des blocs.
C'est presque le même code que les ex0220 et ex0222, avec une méthode particulière à Blockly pour illuminer les blocs actifs durant l'exécution du programme.

° ex0230, comme ex0220, la boule doit suivre le chemin.
Départ de l'ex0220, avec une image d'un chemin, dans un canevas.
La boule bleue doit suivre le chemin jaune.
En cours de développement.

! ex0300, Exécution ralentie du code, avec mise en évidence des blocs.
Voici la méthode particulière de Blockly, ...
avec mise en évidence du bloc actif durant l'exécution du programme.
Il y a plus de finesse dans la mise en évidence des blocks.
Regardez dans le fichier "ex0300.js", les deux fonction : "function runCode_slow(timeMS) {" et "function initApi(interpreter, scope) {", ainsi que les deux premières fonctions.
Pour des détails, c.f. l'interpréteur javascript.

° ex0350, Exemple de programmation objet en javascript.
N'a pas grand chose à voir avec Blockly, mais donne un exemple de programmation objet.
Cette exemple n'est pas bon, utilise une ancienne méthode compliquée.
ex0352 donne une légère modification, toujours pas bien.
!!! Regardez l'exemple ex0355, qui est bien meilleur.

° ex0400, Puzzles, allez voir l'ex0412.
Un premier test de de puzzles avec Blockly.

° ex0410, Chenille, durant le développement de l'ex0412.

° ex0411, Un pas vers l'ex0411, avec moins de code et moins de fonctionnalités.

!! ex0412, Puzzles, composantes d'un ordinateur.
Un gros développement, qui utilise beaucoup de fonctionnalités de Blockly, avec sa structure objet. Branchez la souris à la prise pour voir l'effet.
Branchez le desktop à la prise, avant et après l'avoir complété correctement.
Pour des explications sur le code, cliquez sur : plus d'info

° ex0420, introduction de type de données.
Un typage est donné à divers éléments, pour interdire certaines connexions.

° ex0422, suite de l'ex0420.
Un typage est donné à divers éléments, pour interdire certaines connexions.
Lors d'un refus de connexion par Blockly d'un bloc à l'autre, il serait intéressant d'avoir un événement dans le code qui permetterait de traiter ce refus.
Le but de cet exemple est de traiter ce refus, par bidouillage, à défaut de mieux.
Tous les rejets sont détectés, mais il est possible d'obtenir de fausses détections de rejets, en déplaçant deux fois de suite le même bloc rapidement sur une courte distance.
Il est possible de modifier la variable 'Blockly.BUMP_DELAY' à 150 [ms], pour ne plus avoir de fausses détections de rejets.

° ex0500, déplacement de cartes.
La première étape vers des algorithmes de tri. Il y a des cartes à disposition on peut les déplacer par programme, à l'aide de blocs.
On peut également obtenir la valeur de la carte se trouvant dans une case donnée.

° ex0502, développements de l'ex0500.
Création d'une vraie boîte de dialogue MODALE. Donc rien de la page Web n'est accessible, tant que l'on a pas cliqué sur le bouton de confirmation de la boîte de dialogue modale.
Ici, il y a un vrai petit challenge, qui est d'échanger deux cartes de leur place.
Avec un message et un bruitage, en fonction de la réussite ou de l'échec du challenge.

° ex0504, développements de l'ex0502.
Demande d'échanger deux paires de cartes.
En route pour demander d'écrire une fonction qui échange deux cartes de place.
Dès qu'il y a des fonctions, la méthode utilisant l'interpréteur javascript est nécessaire pour aller lentement.
Le code fonctionne bien.

° ex0505, mini variation de l'ex0504.
Exactement le même code que l'ex0504, avec l'adjonction de dans ex0505.js, de la fonction : 'onchange(event)' et des petites adjonctions dans : 'RunBlockly()'.
L'adjonction : 'maxBlocks: 18,' limite l'utilisation à 18 blocs.
Cette limitation est indiquée dans l'aide, qui se situe dans le code HTML.
Dans le code HTML, il y a aussi une adjonction, pour afficher le nombre de blocs disponibles.

° ex0506, 3 paires à de cartes à permutter.
Adjonction de cartes
Il faut permutter deux paires de cartes, avec 20 blocs au maximum.
Est-ce faisable sans l'utilisation d'une fonction ?
Dans le code HTML :
° affichage du nombre de blocs disponibles.
° Placement automatique des cases et des cartes.

° ex0508, 10 cartes.
Juste pour découvrir et s'amuser.
On peut écrire le programme que l'on veut et tester.
Un bouton 'STOP Run' d'arrêt d'exécution de programme a été ajouté.
Un bloc de mélange des cartes a été ajouté.
Permet d'aller plus vite.
ex0600 est une amélioration notable de cet exemple.

° ex0510, 90 nombres.
Juste pour découvrir et s'amuser.
Illuminer tous les blocs peut devenir trop lent.
Ici, un bloc est illuminé et le programme ralenti, uniquement pour les animations, sinon, le programme va rapidement.
On peut s'amuser avec une liste de 90 nombres à déplacer.
Adjonction de :
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant l'image
° une boîte Blockly pour échanger deux images, en sélectionnant leur cases
ex0610 est une amélioration notable de cet exemple.

!!! ex0600, Menu + icons + Améliorations.
Adjonction de :
° une barre de titre
° affichage dans la barre de titre le nombre de blocs utilisés
° un menu. Le menu s'ouvre automatiquement si le curseur reste dessus durant 0,4 secondes.
° icones
° 3 vitesses d'exécutions (plus une 4ème avec "eval(code)")
° la possibilité de varier la vitesse des animations
° un bouton "stop exécution"
° un bouton "pause exécution"
° un bouton d'exécution d'un pas à la fois
° la possibilité d'ilumination de code ou non, donc éliminer les 'highlightBlock' dans le code javascript.
° une boîte Blockly pour échanger deux images, en sélectionnant leur cases
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant sa case
° une boîte Blockly pour changer la couleur de fond d'une image, en sélectionnant l'image
Les changements de fonds ne sont visibles que pour l'As, le 2 et le 3, car il faut qu'une partie de l'image soit transparente.
° une boîte de dialogues modales "À propos"

° ex0605, Menu + icons, comme ex0600.
Une petite modification de ex0600.
Au lieu d'avoir un menu qui s'auvre automatiquement lorsque le curseur est dessus, il faut cliquer pour qu'il s'ouvre.

° ex0610, avec 90 nombres.
Comme ex0600, avec 90 nombres au lieu de 10 cartes.

° ex0830, ex0600, multilangues, indépendance de la langue.
Reprise de l'ex0600, en le rendant multilangue.
Pour avoir une application utilisable par beaucoup d'autres personnes et pour suivre les traces de Blockly, il est bon d'avoir une applications indépendante de la langue.
Voir l'ex0900
Sans trop compliquer le code, il est bon d'avoir la possiblité de traduire facilement tous les textes qui dépendent de la langue dans une autre langue.
Il y a quatre fichiers contenant des textes dépendant de la langue :
° ex0830.html
° ex0830.js
° ex0830_startBlocks.xml
° ex0830_toolbox.xml
Il y a deux manières de changer les textes des catégories de la toolbox.
1) la manière de Blockly, avec un : name="%{BKY_CATEGORY_NAME_LOGIC}"
  Dans ce cas, c'est dans un fichier : msg/js/fr.js   qu'il faut définir le texte.
2) La même manière que pour changer le texte de la page html.
  Dans ce cas, c'est dans un fichier : msg/fr.xml   qu'il faut définir le texte.
  Cette deuxième manière à l'avantage de voir dans le code la langue par défaut.
Se référer aux fichiers dans : msg   pour des exemples. Les deux méhtodes ont été volontairement implémentées pour donner des exemples.
Mauvaise surprise.
Le chargement des langues en local pose des problèmes. Apparemment, un serveur est nécessaire ici. Pourquoi ???
On peut utiliser XAMP, et si on reste dans une langue, tout fonctionne bien.
En quittant firefox, puis en le relançant, le chargement de langues fonctionne de nouveau, mais parfois, arrête de fonctionné. Cela ajoute une complication au développement en local.
Voici une explication et une solution : Same origin policy for file:URIs.
Dans Firefox, on peut taper : about:config dans la barre d'adresse, chercher security.fileuri.strict_origin_policy qui est à TRUE par défaut. En le mettant à FALSE, on peut travailler en local sans ennuis.

° ex0900, création d'une bibliothèque.
Mise des routines des ex0500 à ex0800 dans une librairie, en restant multilangue.
C.f.   ../../bglibrary.js   ;   ../../bgcss/menu.css   et   ../../bgmsg/js/
Dans ce qui précède, certaines parties de code se retrouvent à une trentaine d'exemplaire. Cela peut être pratique pour l'indépendance des codes, mais ce n'est pas efficacee et une amélioration d'une routine est longue à reporter dans les développement antérieurs. Par exemple, il y a une erreur dans les ex0500, ex0502, ex0504, qui a été corrigée par la suite.
Il est donc temps de mettre des routines dans une bibliothèque de troutines. (library en angalis).
Le but est de constituer une bibliothèque généraliste, avec de nouveau blocs, qui reste multilangue, comme c'est le cas avec Blockly.
La bibliothèque peut être consituée de code HTML, XML, javascript et CSS.
Comme le code javascript peut générer de l'HTML et l'inclusion de code HTLM n'est pas standard dans des pages Web, l'insertions de code HTML se fera par le biais du javascript.

Lorsque l'on change de langue :
° la toolbox est recharchée et traduite dans la nouvelle langue.
° la langue est chargée de "../../msg/js/", celle par défaut de Blockly.
° la langue est chargée de "../../bgmsg/js/", celle de la bibliothèque de Bernard Gisin.
° la langue est chargée de "msg/js/", celle de l'application finale.
° les blocs présents sont conservés et traduit, sauf les textes qui sont personnels.
Par défaut, on peut ignorer la langue de l'application finale, car elle est codée dans la page Web finale. En ajoutant des : id="HTML_..." aux balises ayant du texte dépendant de la langue, ont permet de les traduire facilement dans les fichiers placés dans "msg/js/"
En ajoutant des : id="HTML_IMG_..." aux balises ayant un title dépendant de la langue, ont permet de les traduire facilement dans les fichiers placés dans "msg/js/".
C.f. les exemples.

° ex0905, exemple d'utilisation de la bibliothèque.
On joue avec 10 cartes. Permet de retourner des cartes.

° ex0906, exemple d'utilisation de la bibliothèque.
On joue avec des cartes, teste la couleur des cartes, retourne des cartes et permet de séparer les couleurs.

° ex0910, exemple d'utilisation de la bibliothèque.
On permet de trier une liste de 90 nombres.

° ex0920, programmation générale, reprise du code ex0160.
Permet d'écrire un programme général.

° ex0930, puzzles, reprise du code ex0412.
Test de puzzles. Multilangue et certaines parties de définition de puzzles sont laborieuses.
C.f. l'ex0932 pour des simplifications du code.

° ex0932, puzzles, reprise du code ex0412.
Test de puzzles. Multilangue avec simplification de création de puzzles.
Création d'une boîte de dialogue généraliste qui permet d'afficher des messages personnalisés, multilangue, avec de la musique si désiré. c.f. "idDialogBoxGeneral0" de ex0932.html et DialogGeneral(fUpdate, oText, NumDialog) de bglibrary.js

° ex0940, labyrinthe, reprise du code ex0230.
Test de labyrinthe. Multilangue.
Avec une boîte de dialogue généraliste qui permet d'afficher des messages personnalisés, multilangue, avec de la musique si désiré. c.f. "idDialogBoxGeneral0" de ex0940.html et DialogGeneral(fUpdate, oText, NumDialog) de bglibrary.js

° ex0950, puzzles, similaire au puzzle des blockly games.

° ex0952, puzzles, similaire au précédent, avec des drop down lists.

° ex0954, puzzles, similaire au précédent, avec des drop down lists.
Montre la souplesse, on ajoute facilement de nouveau puzzles, de nouvelles images et de nouveau traits.
On ajoute également facilement des nouvelles conditions sur les traits que les animaux doivent avoir.
Ils n'ont pas tous forcément le même nombre de traits.

° ex1505, une suite d'étapes pour séparer les cartes rouges des noires.
Diverses étapes pour apprendre à déplacer et retourner des cartes et à séparer les rouges des noires.

° ex1600, une suite d'étapes pour l'apprentissage d'algorithmes de tri.
Diverses étapes pour apprendre des algorithmes de tri.

° ex1605, apprentissage d'algorithmes de tri, améliorations.
Diverses étapes pour apprendre des algorithmes de tri.
Une version améliorée, avec placement des cartes plus joliement effectué.

° ex1705, une suite d'étapes pour retourner les cartes demandées.
Il faut retourner des cartes à diverses reprises.

° ex2000, programmation générale, en divers langages.
Permet d'écrire un programme général.
Permet de traduire automatiquement les blocs en Javascript, en Python et en Lua.
Les programmes en Python et Lua ont des limitations. Les annimations ne fonctionnent pas avec ces deux langages (pour l'instant).
Les blocs, les divers codes et l'affichage des résultats sont affichés dans des sous-fenêtres du navigateur.
Il est possible de configurer la situation initiales, dans un fichier .js qu'il est possible d'écrire soit-même.
Plusieurs exemples de fichiers de configurations sont disponibles :
° cfg2000fr_base_4x4.js, 4x4 cadres.
° cfg2000fr_binaire_choice.js, choix parmi plusieurs traitements binaires.
° cfg2000fr_base10_compteur_v1.js, un exemple de compteur en base 10.
° cfg2000fr_base10_compteur_v3.js, un autre exemple de compteur en base 10.
° cfg2000fr_binaire_compteur_v1.js, un exemple de compteur binaire.
° cfg2000fr_binaire_compteur_v3.js, un autre exemple de compteur binaire.
° cfg2000fr_binaire_compteur_auto.js, un exemple de compteur binaire automatique.
° cfg2000fr_binaire_8_digits.js, 8 chiffres pour traiter du binaire.
° cfg2000fr_binaire_4_digits.js, 4 chiffres pour traiter du binaire.
° cfg2000fr_cartes_mxn.js, défini mxn cases, m et n étant choisi par l'utilisateur.
° cfg2000fr_exemples_choice.js, choix parmi plusieurs exemples, sans utilisation de cartes
° cfg2000fr_syracuse_v1.js, un exemple, sans utilisation de cartes.
° cfg2000fr_syracuse_v2.js, un autre exemple, sans utilisation de cartes.
° cfg2000_magiefr_2x3_choice.js, choix parmi plusieurs options.
° cfg2000fr_magie_2x3_v1.js, un tour de magie avec des cartes.
° cfg2000fr_magie_2x3_v2.js, un tour de magie avec des cartes.
° cfg2000fr_magie_2x3_v3.js, un tour de magie avec des cartes.
° cfg2000fr_magie_2x3_v0.js, un tour de magie avec des cartes.
° cfg2000fr_magie_2x4_v0.js, base pour un tour avec 16 cartes.
° cfg2000fr_evenements_choice.js, choix parmi des des exemples de trairement d'événements.
° cfg2000fr_evenements_v1.js, un exemple de traitement d'événements.
° cfg2000fr_evenements_v2.js, un autre exemple de traitement d'événements.
° cfg2000fr_traduction.js, exemple pour modifier le menu de configuration
° cfg2000en_trad_francais.js, pour modifier le menu de Configuration. Change actuellement de français en français :-).
° cfg2000en_trad_english.js, pour modifier en anglais le menu de Configuration. Les traductions restent à faire...
° cfg2000de_trad_deutsch.js, pour modifier en allemand le menu de Configuration. Les traductions restent à faire...
° cfg2000fr_url.js, exemple du fichier de config. permettant de charger une config. depuis une URL.
°
Si vous voulez, copiez-en un, faites de légères modifications, puis chargez-le depuis le menu "configuration".
Vous pouvez :
- soit le charger depuis un fichier se trouvant localement sur votre disque dur,
- soit le charger depuis une URL (adresse Web : http://...).
Vous pouvez en télécharger un, le modifier, le charger et créer votre propre configuration.
Il n'est pas nécessaire de tout comprendre pour faire des modifications.
Un fichier de configuration est un programme en javascript. Il permet donc de faire d'énormes modifications, pour une personne à l'aise dans ce langage de programmation.

° Exemple de code, "abgex/code".

° ex0170_puzzle, exemple de puzzle.

° Blockly Developer Tools, information pour développer des applications "blockly apps".

° ,

° Learning to use Blockly on the Web.

° .

° J'ai copié le code de : "Blockly_Google/blockly/blocks/text.js", allant de : "Blockly.Blocks['text_print'] = {" au "};" correspondant.
Je l'ai collé entre les deux balises : "<script>" et "</script>" de mon code.

° J'ai copié le code de : "Blockly_Google/generators/javascript/text.js", allant de : "Blockly.JavaScript['text_print'] = function(block) {" au "};" correspondant.
Je l'ai collé entre les deux balises : "<script>" et "</script>" de mon code.

° J'ai modifié la ligne : "return 'window.alert(' + msg + ');\n';" en : "return 'Display(' + msg + ');\n';"

° J'ai renommé les textes "text_print" en minuscules en : "text_affiche" partout dans le code, à 4 endroits.

° J'ai aisni obtenu une nouvelle fonctionnalité.

° Blockly factory, Pour développer des nouveaux blocs.

° Pour générer le code XML d'une suite de blocs .

° Blockly Generator Tests.

° .

° .

° Programmation visuelle avec Blockly.
Des parties intéressantes.

° Blockly pour générer du Python.
Ensuite, on peut modifier et exécuter le code Python dans la page Web.

° Blockly pour générer du Javascript.
Ensuite, on peut modifier et exécuter le code Javascript dans la page Web.
On peut également sauver le programme sous forme de blocs en XML.

° Scratch + Google = Next Generation of Programming Blocks for Kids.

° Scratch pour les développeurs.
La nouvelle version de Scratch, version 3, se base sur Blockly.

° Coding with Chrome.
Depuis le navigateur google Chrome, permet d'avoir un environnement de développement basé sur Blockly.
On peut sauver des productions dans un fichier .cwc.
Pour ouvrir un tel fichier, c'est bien caché. Il faut cliquer sur le "menu" formé de 3 segments horizontaux, en haut à gauche, et sélectionner @@NAVIGATION_OPEN_FILE.
Beaucoup d'exemples créés par (hkza) un ancien retraité de l'université de où? sur GitHub .

° .

° .

° .

° , Blockly: Using Block Based Coding in your App

° Blockly Tutorial Part 1 .

° Blockly Tutorial Part 2 Edited.

° Why top universities teach drag and drop programming, 1 minute 24 seconds.

° .

° Blockly Factory, pour développer de nouveaux blocs.

° .

° .

° .

° Liste de vidéos sur Blockly.

° Premier programme Blockly@rduino v2.

° Blockly Developer Summit 2018: Welcome and The History of Blockly. 37 minutes en anglais.
Selon le créateur de Blockly, Neil Fraser (c.f. 15'50"), "Blockly is a generic graphical programming environment, not a programming language."
"Blockly est un environnement graphique de programmation, ce n'est pas un langage de programmation."
À 16'30", quelques exemples de compagnies qui utilisent Blockly.

° Programmation par blocs, un atricle avec des liens intéressants.

° TypeScript, Javascript that scales.
Un surensemble de javascript, qui accepte des variables typées. On peut ensuite "compiler" le code typescript en des lignes de codes javascript.
Cela amène de la rigueur dans la programmation en javascript et permet la détection d'erreurs à la compilation.

° studio.code.org, similaire à Blockly games, pour apprendre à programmer en jouant. Apprends avec Code Studio.
+ La page d'entrée de code.org.

° Scratch au collège, des vidéos explicatives.

° Scratch en ligne, utilisable dans une page Web, rien besoin d'installer.
+ L'application Scratch en ligne.

° Python und JavaScript mit blockly, en allemand.
Utilise Blockly pour dessiner à l'aide d'une tortue
On peut sauver et charger le programme écrit.
Permet d'afficher le code Javascript et le code Python équivalent.
Utilise "Jython" et "TigerJython".

° WebTigerJython, Programmation dans une page Web en Python, pour dessiner avec le module "Turtle"
Dévelopé par l'ETHZ.
Est utilisable en français.
Utilise "Jython" et "TigerJython".

° Python Online Editor, Programmation dans une page Web en Python, pour dessiner avec le module "Turtle"
Autre présentation, similaire au lien précédent.
Permet aussi de s'initier aux bases de données.
En Anglais ou Allemand.

What is Jython?
Jython est une implémentation de Python en Java. Cela permet d'exécuter du code Python dans une page web.

° TigerJython Group
Est un environnement de développement écrit en Java, adapté au langage Python.

° .