-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathide.html
136 lines (136 loc) · 7.47 KB
/
ide.html
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MicroAlg - Web IDE</title>
<meta name="description"
content="Environnement en ligne pour MicroAlg." />
<meta name="keywords" content="microalg, algo, algorithme, algorithmique, lisp, environnement" />
<script type="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>
<script src="emulisp/int.js" type="text/javascript"></script>
<script src="emulisp/emulisp_core.js" type="text/javascript"></script>
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="web/style.css" />
<script type="text/javascript" src="web/ide_injections.js"></script>
<script type="text/javascript" src="web/parenedit.js"></script>
<link type="text/css" href="web/parenedit.css" rel="stylesheet" />
<script src="web/showdown.js"></script>
<script src="web/svg-tree-drawer/svg-tree-drawer.js"></script>
<link href="web/css-ninja-tree/css-ninja-tree.css" rel="stylesheet"/>
<script src="web/jquery.terminal-min.js"></script>
<link href="web/jquery.terminal.css" rel="stylesheet"/>
</head>
<body class="microalg">
<noscript>
<div style="color:#CC0000; text-align:center">
Besoin de Javascript pour utiliser cet IDE.
</div>
</noscript>
<div id="content" class="web-ide">
<div class="link-right">
<a href="#questce">Qu’est-ce ?</a> :
<a href="#instructions">Instructions</a> :
<a href="./">Accueil</a> :
<a href="#content">Haut de page</a>
</div>
<br>
<div id="script-container" class="malg-container"></div>
<div id="repl-container" class="malg-container"></div>
<div id="repl-container2" class="malg-container"></div>
<br><br>
<div id="bla">
<h1>MicroAlg - web IDE</h1>
<h2 id="questce">Qu’est-ce ?</h2>
<p>Cette page est un
<a href="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
<a href="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
<a href="https://github.com/Microalg/Microalg/blob/latest/INSTALL.md">la page d’installation</a>.</p>
<p class="link-right"><a href="#content">Retour</a></p>
<h2 id="instructions">Instructions</h2>
<h3>Édition de scripts</h3>
<p>La <a href="#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
<a href="tuto_blocs.html">le tutoriel correspondant</a>.</p>
<p>La <a href="#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
<a href="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 <a href="#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 <a href="#repl-container2">troisième zone de texte</a>
utilise <a href="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>
<p class="link-right"><a href="#top">Retour</a></p>
</div>
<div id="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:
var txtarea = $('#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>
<script type="text/javascript" src="web/tabIndent.js"></script>
<script type="text/javascript" src="web/jquery.textcomplete.min.js"></script>
<link type="text/css" href="web/jquery.textcomplete.css" rel="stylesheet" />
<script>
tabIndent.config.tab = ' ';
tabIndent.renderAll();
attachTextComplete();
</script>
</body>
</html>