["tilescript",
["html", "<h1>Toward A More Scalable End-User Scripting Language</h1>\n<ul>\n<li class=\"author\">Alessandro Warth</li>\n<li class=\"author\">Takashi Yamamiya</li>\n<li class=\"author\">Yoshiki Ohshima</li>\n<li class=\"author\">Scott Wallace</li>\n</ul>\n<p style=\"text-align: center\">Viewpoints Research Institute</p>\n"],
["html", "<h2>The Goal of Tilescript</h2>\n<p style=\"font-size: 1.5em;\">\nis to create new end-user scripting language\nwith</p>\n<ul style=\"font-size: 2em;\">\n<li>good learning curve\n<li>high ceiling\n</ul>\n\n"],
["tile", "alert('This is Tilescript.')"],
["html", "<h2>Graphical Language vs Text Language</h2>\n<h3>Graphical  Language</h3>\n<ul>\n<li>eToys</li>\n<li>Scratch</li>\n<li>Viscuit</li>\n<li>StageCast</li>\n</ul>\n<h3>Text Language</h3>\n<ul>\n<li>Processing</li>\n<li>Pippy</li>\n<li>Java, Python, etc...</li>\n</ul>\n"],
["html", "<h2>A classification of various end-user programming systems</h2>\n<img src=\"data/spectrum.png\"/>"],
["html", "<h2>Two Languages in eToys</h2>\neToy have two languages, tile language and Smalltalk.\nYou could write any extension in Smalltalk but...\n<h3>Gap #1 : User interface</h3>\n<img src=\"data/tileAndText.gif\">\n<h3>Gap #2 : Object Model</h3>\n<p>Prototype vs Class</p>\n<img src=\"data/prototypeClass.gif\">"],
["html", "<h2>Strategy</h2>\n<ul style=\"font-size: 1.5em;\">\n<li>Gap #1 : Convert a tile script into\nequivalent textual code, and vice-versa.</h3>\n<li>Gap #2 : Use Javascript as the basis.</h3>\n<ul>\n<li>Prototype-base object model</li>\n<li>Good reflective facilities</li>\n<li>Popular</li>\n</ul>\n<li>... And for \"Pop the hood\" of any part of the system.\n<ul>\n<li>Macro</li>\n</ul>\n</ul>"],
["html", "<h2>What's needed?</h2>\nA converter of\n<ul style=\"font-size: 1.5em;\">\n<li>Javascript to Parser Tree (tile)\n<li>Parser Tree to Javascript\n<li>Macro expansion\n</ul>\n<p align=\"right>... <b>OMeta</b> can do everything.</p>\n"],
["html", "<h2>OMeta as a parser generator</h2>\n<img src=\"data/ometa1.jpg\">"],
["html", "<h2>OMeta as general object transformer</h2>\n<img src=\"data/ometa2.jpg\">\n<p><a href=\"ometa-js/js.html\">\nSource code of the Javascript and Tilescript parser</a>\n</p>"],
["html", "<h2>Tile conversion</h2>\n"],
["tile", "(3+4)"],
["tile", "(5*6)"],
["html", "<h3>Why tile is so good?</h3>\n<p align=\"center\">tile   --------------- text</p>\n<p align=\"center\">\n<img align=\"center\" src=\"data/tileAndText2.jpg\">\n</p>"],
["html", "<h2>Macro</h2>\n\n<h3>Predefined control structures</h3>\n<ul>\n<li>if {...} else {...}\n<li>for () {...}\n</ul>\n<h3>User defined control structures (prototype.js)</h3>\n<ul>\n<li>[1,2,3].each(function(v, i) { return ... })\n<li>[1,2,3].any(function(v, i) { return ... })\n</ul>\n<h3>Macro</h3>\n<ul>\n<li>@<a href=\"#repeat\">repeat</a>(4,++x)\n<li>@<a href=\"#map\">map</a>(x, x*2, [1,2,3])\n</li>\n"],
["html", "<h2>Environment</h2>\n<h3>Our options were</h3>\n<ul>\n<li>Squeak Javascript\n<li>Adobe Flash (ActionScript3)\n<li>Web Browser\n</ul>\n<h3>Why web browser?</h3>\n<ul>\n<li>Easy project sharing\n<li>No installer\n<li>Flow layout\n(good for Active Essays / Literate programming)\n</ul>\n"],
["html", "<h2>What's Active Essay?</h2>\n<p style=\"\nfont-size: 2em;\nfont-family: 'Times New Roman';\nfont-style: italic;\n\">\nActive Essay = Essay + Program\n</p>\n<p>\n<i>\ncombining a written essay, live simulations,\nand the programs that make them work in order\nto provide a deep explanation of a dynamic system\n</i>\n</p>\n"],
["html", "<h3>\"Building with Squeak\" in Squeak 3.6-full</h3>\n<p>A tutorial of etoys with GeeMail</p>\n<p><img src=\"data/activeEssay3.gif\"></p>\n"],
["html", "<h3>\"Weasel Essay\" by Ted Kaehler</h3>\n<p>explains how evolution works with\nvariation, selection and randomness.</p>\n<p>Based on the example on pages 46-49\nin The Blind Watchmaker by Richard Dawkins.\n(W.W. Norton, 1987)</p>\n<p><img src=\"data/activeEssay1.gif\"></p>\n"],
["html", "<h2>Active Essays as a Curriculum</h2>\n<p>Let's write your Active Essays by yourself! but...</p>\n<p><img src=\"data/activeEssay2.gif\"></p>\n<p>It is hard to read a source code \nin an active essay because eToy depends\non the screen size.</p>\n<p>Flow layout helps us!</p>"],
["html", "<h2>The goal of the environment</h2>\n<h3>eToys' curriculum</h3>\n<ul>\n<li>Concrete experiment of abstract idea like math & science\n</ul>\n<h3>+ Tilescript's curriculum</h3>\n<ul>\n<li>Learning by Explaining\n<li>Active Essays = Essay + Program\n</ul>"],
["html", "<h2>How to use The Tilescript Environment</h2>\n<p style=\"font-size: 2em; text-align: center;\nmargin-top: 3em; margin-bottom: 3em;\">\n<a href=\"http://tinlizzie.org/jstile/#Tutorial\">\nhttp://tinlizzie.org/jstile/#Tutorial</a>\n</p>\n(Firefox2 only now) <a href=\"#Tutorial\">Tutorial</a>"],
["html", "<h2>Examples</h2>\n<ul>\n<li><a href=\"#FCConverter\">FCConverter</a>\n<li><a href=\"#Canvas\">Canvas</a>\n<li><a href=\"#Scribble\">Scribble</a>\n<li><a href=\"#ComplexNumber\">ComplexNumber</a>\n<li><a href=\"#Random\">Random</a>\n\n</ul>"],
["html", "<h2>Conclusion</h2>\n<ul>\n<li>Tilescript is a new end-user scripting language\nwith a gentle learning curve and a high ceiling.\n<li>Bidirectional conversion between tile and text.\n<li>Simple macro to extend control structure.\n<li>Authoring environment for Active Essays.\n</ul>\n<p>\n(future goal)\n<ul>\n<li>The system itself should be an active essay.\n</ul>"],
["html", "<img src=\"data/vpri.png\" style=\"\nposition: fixed;\nleft: 0px;\nbottom: 0px;\n\">"]
]