microalg.github.io/ide.html at master · Microalg/microalg.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MicroAlg - Web IDE</title>
<metaname="description"
content="Environnement en ligne pour MicroAlg." />
<metaname="keywords" content="microalg, algo, algorithme, algorithmique, lisp, environnement" />
<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="web/jquery.min.js"><\/script>')</script>
<scriptsrc="emulisp/int.js" type="text/javascript"></script>
<scriptsrc="emulisp/emulisp_core.js" type="text/javascript"></script>
<linkhref="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<linkrel="stylesheet" href="css/normalize.css">
<linkrel="stylesheet" href="css/skeleton.css">
<linkrel="stylesheet" href="css/custom.css">
<linkrel="stylesheet" type="text/css" href="web/style.css" />
<scripttype="text/javascript" src="web/ide_injections.js"></script>
<scripttype="text/javascript" src="web/parenedit.js"></script>
<linktype="text/css" href="web/parenedit.css" rel="stylesheet" />
<scriptsrc="web/showdown.js"></script>
<scriptsrc="web/svg-tree-drawer/svg-tree-drawer.js"></script>
<linkhref="web/css-ninja-tree/css-ninja-tree.css" rel="stylesheet"/>
<scriptsrc="web/jquery.terminal-min.js"></script>
<linkhref="web/jquery.terminal.css" rel="stylesheet"/>
</head>
<bodyclass="microalg">
<noscript>
<divstyle="color:#CC0000; text-align:center">
 Besoin de Javascript pour utiliser cet IDE.
</div>
</noscript>
<divid="content" class="web-ide">
<divclass="link-right">
<ahref="#questce">Qu’est-ce ?</a> :
<ahref="#instructions">Instructions</a> :
<ahref="./">Accueil</a> :
<ahref="#content">Haut de page</a>
</div>
<br>
<divid="script-container" class="malg-container"></div>
 &nbsp;
<divid="repl-container" class="malg-container"></div>
 &nbsp;
<divid="repl-container2" class="malg-container"></div>
<br><br>
<divid="bla">
<h1>MicroAlg - web IDE</h1>
<h2id="questce">Qu’est-ce ?</h2>
<p>Cette page est un
<ahref="https://fr.wikipedia.org/wiki/Environnement_de_d%C3%A9veloppement_int%C3%A9gr%C3%A9">environnement
 de développement intégré</a> de fortune pour
<ahref="http://microalg.info">MicroAlg</a>.</p>
<p>Elle permet pour l’instant de faire quelques tests, mais aussi
 d’avoir une vitrine en ligne pour ce langage. D’autres façons
 d’utiliser MicroAlg sont en cours de développement. Voir pour cela
<ahref="https://github.com/Microalg/Microalg/blob/latest/INSTALL.md">la page d’installation</a>.</p>
<pclass="link-right"><ahref="#content">Retour</a></p>
<h2id="instructions">Instructions</h2>
<h3>Édition de scripts</h3>
<p>La <ahref="#blockly-container">zone avec les pièces de puzzle</a>
 permet de programmer visuellement, avec la souris. Fini les fautes
 de frappe. Elle crée le code MicroAlg correspondant et l’envoie
 dans la zone de texte juste en dessous.</p>
<p>Commencer par cliquer sur une des catégories de commandes sur la
 gauche (<code>Valeurs</code>, <code>Cmdes…</code>…) et glisser un
 bloc <code>Afficher</code> dans le bloc <code>Programme</code> de
 l’espace de travail. Puis dans la catégorie <code>Autres</code>,
 prendre un bloc de texte (avec les guillemets <code>"..."</code>),
 le glisser au bout du bloc <code>Afficher</code> puis taper un
 message dans ce dernier bloc. Le code correspondant s’affichera
 dans la fenêtre en dessous, et pourra être exécuté en cliquant sur
 le bouton <code>Exécuter</code>.</p>
<p>Pour apprendre MicroAlg au travers de cette interface, suivre
<ahref="tuto_blocs.html">le tutoriel correspondant</a>.</p>
<p>La <ahref="#script-container">première zone de texte</a> permet
 d’éditer des scripts. Pour les exécuter, appuyer sur
<code>Ctrl</code>+<code>Entrée</code> ou cliquer sur le bouton
<code>Exécuter</code>.</p>
<p>L’affichage des résultats se fait juste après la fenêtre
 d’édition si vous utilisez la commande <code>Afficher</code>, ou
 dans la fenêtre graphique si vous utilisez
<ahref="doc.html#utilisationdescommandesgraphiques">des commandes
 graphiques</a>.</p>
<h3>Consoles interactives</h3>
<p>Les autres zones de texte permettent un échange « instructions
 après instructions » avec l’environnement.</p>
<p>C’est pratique pour tester des instructions quand on développe
 un programme dans la zone d’édition de scripts.</p>
<p>En particulier, la <ahref="#repl-container">deuxième zone de texte</a>
 est un terminal de fortune, bricolé pour l’occasion. Pour exécuter
 le code, appuyer sur <code>Ctrl</code>+<code>Entrée</code> ou
 cliquer sur le bouton <code>Exécuter</code>.</p>
<p>La <ahref="#repl-container2">troisième zone de texte</a>
 utilise <ahref="http://terminal.jcubic.pl/">un plugin jQuery</a>
 d’émulation de terminal. Elle est donc assez confortable mais ses
 parenthèses ne sont pas colorées et on ne peut pas passer à la
 ligne sans exécuter le code.</p>
<pclass="link-right"><ahref="#top">Retour</a></p>
</div>
<divid="post-footer"><!-- Juste pour pouvoir accéder à la doc. -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<script>
// Éditeur:
inject_microalg_editor_in('script-container',
{src: '(Afficher "Bonjour tout le monde !")',
blockly: true,
processing: true,
localStorage: true});
// Focus et curseur final dans l’éditeur:
vartxtarea=$('#script-container').find('.malg-editor').first();
txtarea.focus().selectRange(txtarea.val().length,txtarea.val().length);
// REPL de fortune:
inject_microalg_repl_in('repl-container',
'# Voici la console interactive de MicroAlg.\n'+
': # <- le # indique que la fin de la ligne est un commentaire.\n'+
': # Ctrl + Entrée pour exécuter le code.\n'+
': (Aide)');
// jQuery Term:
inject_microalg_jrepl_in('repl-container2',
': # Voici la console interactive de MicroAlg.\n'+
': # <- le # indique que la fin de la ligne est un commentaire.');
</script>
<scripttype="text/javascript" src="web/tabIndent.js"></script>
<scripttype="text/javascript" src="web/jquery.textcomplete.min.js"></script>
<linktype="text/css" href="web/jquery.textcomplete.css" rel="stylesheet" />
<script>
tabIndent.config.tab=' ';
tabIndent.renderAll();
attachTextComplete();
</script>
</body>
</html>