index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Skulpt</title>
  7. <link rel="stylesheet" type="text/css" media="all" href="static/codemirror.css">
  8. <link rel="stylesheet" type="text/css" media="all" href="static/solarized.css">
  9. <link rel="stylesheet" type="text/css" media="all" href="static/main.css">
  10. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  11. <script src="static/codemirrorepl.js" type="text/javascript"></script>
  12. <script src="static/repl.js" type="text/javascript"></script>
  13. <script src="static/python.js" type="text/javascript"></script>
  14. <script src="../../support/jsbeautify/beautify.js" type="text/javascript" ></script>
  15. <script src="static/skulpt.min.js" type="text/javascript"></script>
  16. <script src="static/debugger/debugger.js" type="text/javascript"></script>
  17. <script src="static/skulpt-stdlib.js" type="text/javascript"></script>
  18. <script src="static/env/editor.js" type="text/javascript"></script>
  19. <script src="static/debugger/debugger_cm.js" type="text/javascript"></script>
  20. </head>
  21. <body>
  22. <a href="https://github.com/skulpt/skulpt"><img style="position: absolute; top: 0; left: 0; border: 0;"
  23. src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"
  24. alt="Fork me on GitHub"></a>
  25. <div class="page">
  26. <div class="body">
  27. <div class="main">
  28. <img src="static/logo.png" alt="Skulpt" id="logo">
  29. <h2>Python. Client side.</h2>
  30. <p>Skulpt is an <em>entirely in-browser</em> implementation of Python.</p>
  31. <p>No preprocessing, plugins, or server-side support required, just write
  32. Python and reload.</p>
  33. <h2>Demo</h2>
  34. <p>The code is run entirely in your browser, so don't feel
  35. obligated to &quot;crash the server&quot;, you'll only stub your
  36. toe. <a id="toggledocs" href="#">Help</a>, or examples:
  37. <a href="#" id="codeexample1">1</a>
  38. <a href="#" id="codeexample2">2</a>
  39. <a href="#" id="codeexample3">3</a>
  40. <a href="#" id="codeexample4">4</a>
  41. <a href="#" id="codeexample5">5</a>
  42. <a href="#" id="codeexample6">6</a>
  43. <a href="#" id="codeexample7">7</a>
  44. <a href="#" id="codeexample8">8</a>.
  45. Ctrl-Enter to run.
  46. </p>
  47. <div id="quickdocs" style="display: none">
  48. <ul>
  49. <li>cut/copy/paste/undo/redo with the usual shortcut keys</li>
  50. <li>Tab does decent indenting.
  51. Thanks to <a href="http://codemirror.net/"
  52. target="_blank">CodeMirror</a> for the text editor.
  53. </li>
  54. <li>Ctrl-Enter to run, Shift-Enter to run selected</li>
  55. <!--
  56. <li>F9 to toggle breakpoints</li>
  57. <li>F10 to step over</li>
  58. <li>F11 to step in</li>
  59. <li>Shift-F11 to step out.</li>
  60. <li>You can inspect values with e.g. 'print foo' in the
  61. &quot;Interactive&quot; box. When debugging, this will
  62. execute in the debug context.</li>
  63. -->
  64. </ul>
  65. </div>
  66. <p></p>
  67. <textarea id="code" cols="85" rows="25">
  68. import turtle
  69. t = turtle.Turtle()
  70. for c in ['red', 'green', 'yellow', 'blue']:
  71. t.color(c)
  72. t.forward(75)
  73. t.left(90)
  74. </textarea>
  75. <textarea id="debugger_cm", cols="85" rows="1"></textarea>
  76. <button id="skulpt_run">Run</button>
  77. <button id="skulpt_js_output" onclick="var cm = $('.CodeMirror')[2].CodeMirror;$(cm.getWrapperElement()).toggle()">Hide/Unhide JS</button>
  78. <textarea id="codeoutput"></textarea>
  79. <p>Output: (<a href="#" id="clearoutput">clear</a>)</p>
  80. <pre id="edoutput"></pre>
  81. <div id="mycanvas" height="400" width="400"
  82. style="border-style: solid;"></div>
  83. <h2>Interactive:</h2>
  84. <p>This is a very cool new feature that is just getting off the ground. This would be a great project to jump in and help out on!</p>
  85. <textarea id="interactive" cols="85" rows="1"></textarea>
  86. <h2>Your Very Own Copy</h2>
  87. <p>Want to give it a shot? Grab it with git:</p>
  88. <pre>
  89. git clone https://github.com/skulpt/skulpt.git
  90. </pre>
  91. <p>
  92. Or download it like this: <a href="/static/dist/skulpt-latest.tar.gz">skulpt-latest.tar.gz</a> or like this: <a href="/static/dist/skulpt-latest.zip">skulpt-latest.zip</a>
  93. </p>
  94. <h2>What's New?</h2>
  95. <p>
  96. <ul>
  97. <li>Suspensions! This may not mean a lot to you, but trust me its going to be big. Suspensions provide the foundation for the asynchronous execution we need to build an interactive debugger, a smoother turtle module, enhanced urllib and other cool features. For developers you should check out the time module and the suspensions.txt file under doc/.</li>
  98. <li>Stub implementations of the standard library modules. You will now get an unimplemented exceptions rather than some other file not found error.</li>
  99. <li>General cleanup and standardization of the code. See the short description of the coding standards in the CONTRIBUTING file</li>
  100. <li>Loads of bugfixes: <a href="https://github.com/skulpt/skulpt/compare/0.9.2...0.9.4">see</a></li>
  101. <li><span style='font-family: "Consolas","Lucida Console","Monaco",monospace;'>slice()</span> function implemented. And improvements to list slicing.</li>
  102. <li><span style='font-family: "Consolas","Lucida Console","Monaco",monospace;'>string</span> and <span style='font-family: "Consolas","Lucida Console","Monaco",monospace;'>operator</span> module added.</li>
  103. <li>Keyword arguments for <span style='font-family: "Consolas","Lucida Console","Monaco",monospace;'>sorted()</span></li>
  104. <li><span style='font-family: "Consolas","Lucida Console","Monaco",monospace;'>text()</span> function in processing</li>
  105. </ul>
  106. <p>By these awesome people:
  107. <a href="https://github.com/bnmnetp">Brad Miller</a>,
  108. <a href="https://github.com/rixner">Scott Rixner</a>,
  109. <a href="https://github.com/albertjan">Albert-Jan Nijburg</a>,
  110. <a href="https://github.com/mchat">Marie Chatfield</a>,
  111. <a href="https://github.com/isaacdontjelindell">Isaac Dontje Lindell</a>,
  112. <a href="https://github.com/jaspervdg">jaspervdg</a>,
  113. <a href="https://github.com/Lalaland">Ethan Steinberg</a>,
  114. <a href="https://github.com/Jeff-Tian">Jeff-Tian</a>,
  115. <a href="https://github.com/meredydd">Meredydd Luff</a> and
  116. <a href="https://github.com/LeszekSwirski">Leszek Swirski</a>
  117. </p>
  118. </p>
  119. <h2>Skulpt in the Wild</h2>
  120. <p>
  121. <ul>
  122. <li><a href="http://interactivepython.org/courselib/static/thinkcspy/index.html"> How to Think like a Computer
  123. Scientist: Interactive Edition</a></li>
  124. <li><a href="http://interactivepython.org/courselib/static/pythonds/index.html"> Problem Solving with Algorithms
  125. and Data Structures using Python</a></li>
  126. <li><a href="http://www.pythonlearn.com/">PythonLearn</a></li>
  127. <li><a href="https://online.dr-chuck.com/">Dr. Chuck Online</a></li>
  128. <li><a href="http://www.codeskulptor.org">CodeSkulptor</a></li>
  129. <li><a href="https://trinket.io/">trinket</a></li>
  130. <li><a href="http://www.geometryzen.org">Geometry Zen</a></li>
  131. <li><a href="http://www.evaluzio.net">Evaluzio</a></li>
  132. </ul>
  133. </p>
  134. <p>If you have a project that uses skulpt and would like me to link to it here, let me know on our github page.</p>
  135. <h2>Skulpt on <a href="http://www.coursera.org">Coursera</a></h2>
  136. <P>
  137. <ul>
  138. <li><a href="https://www.coursera.org/course/interactivepython">An Introduction to Interactive Programming in Python</a></li>
  139. <li><a href="https://www.coursera.org/course/pythonlearn">Programming for Everybody</a></li>
  140. </ul>
  141. </p>
  142. <h2>Getting Started</h2>
  143. <p>If you want to embed a nice looking bit of code that your users can edit, Trinket.io can
  144. help you with that! You can put together the example on their site, and then generate the
  145. code for an iframe that you can embed in your page!</p>
  146. <iframe src="https://trinket.io/embed/python/538012d3a6554c7945027aab" width="100%" height="356" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe>
  147. <p>If you want to roll your own page, Getting started with skulpt on your own page can seem a little intimidating, but here's a really simple example that
  148. gets you going. You can copy and paste or grab the code from <a href="https://gist.github.com/4650616">this gist</a>.</p>
  149. <script src="https://gist.github.com/bnmnetp/4650616.js"></script>
  150. <h2>Helping out!</h2>
  151. <p>Skulpt surely isn't done yet.</p>
  152. <p>If you want to check out a list of bugs, or add to it, or see what's been
  153. fixed recently, you can head over to the always-euphemistic-sounding <a
  154. href="http://github.com/skulpt/skulpt/issues">issues page</a>.</p>
  155. <p>If you are interested in contributing to skulpt in any way, check out this new <a href="https://github.com/skulpt/skulpt/blob/master/CONTRIBUTING.md">how to contribute</a> document.</p>
  156. <p>If you'd like to chit-chat, <a href="http://groups.google.com/group/skulpt">there's a list for
  157. that</a>.</p>
  158. <p>If you would like to help with coding, these new and improved <a
  159. href="static/ProgMan/index.html">developer docs</a> will help get you started.</p>
  160. <h2>Third Party Modules</h2>
  161. This new feature lets you create and host your own modules for use in Skulpt. The
  162. following gist shows how to include one of them in a page.
  163. <script src="https://gist.github.com/bnmnetp/20bd9105f11f2a164fc0.js"></script>
  164. <h2>Customizing modules after import</h2>
  165. <p>If you want to customize how a module behaves you can use the ``onAfterImport`` hook. Here is a gist of how the trinket guys do it.</p>
  166. <script src="https://gist.github.com/bzwheeler/8a5a833ee2a6a7d2c7ba.js"></script>
  167. <h2>License</h2>
  168. <p>Skulpt may be licensed under:</p>
  169. <ol>
  170. <li>The <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</li>
  171. <li>Or, for compatibility with Python, the <a
  172. href="http://www.opensource.org/licenses/PythonSoftFoundation.php">PSFLv2</a>.
  173. </li>
  174. </ol>
  175. <p> Please note that this dual license only applies to the part of Skulpt that
  176. is included in the runtime, and not necessarily to surrounding code for build
  177. processing or testing. Tests are run using <a
  178. href="http://code.google.com/p/v8/">V8</a>, and <a
  179. href="http://code.google.com/closure/compiler/">Closure Compiler</a>, and
  180. some test code is taken from the <a href="http://www.tinypy.org/">tinypy</a>
  181. and <a href="http://www.python.org/">Python</a> test suites, which may be
  182. distributed under different licensing terms. </p>
  183. <h2>About</h2>
  184. <p>The Father of skulpt is Scott Graham, you can find his blog here: <a href="http://www.h4ck3r.net/">personal page
  185. (and blog)</a></p>
  186. <p>My own personal page and blog is <a href="http://reputablejournal.com">Reputable Journal</a></p>
  187. </div>
  188. <div class="footer">
  189. <p>
  190. Yes, I know how &quot;sculpt&quot; is spelled. The correct spelling was
  191. thoroughly reserved according to ICANN and search engines.
  192. </p>
  193. </div>
  194. </div>
  195. </div>
  196. <script type="text/javascript">
  197. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  198. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  199. </script>
  200. <script type="text/javascript">
  201. try {
  202. var pageTracker = _gat._getTracker("UA-10993568-1");
  203. pageTracker._trackPageview();
  204. } catch (err) {
  205. }</script>
  206. </body>
  207. </html>