##// END OF EJS Templates
Grammar and spelling improvements
Ben Rousch -
Show More
@@ -11,14 +11,15 b''
11 "cell_type": "markdown",
11 "cell_type": "markdown",
12 "metadata": {},
12 "metadata": {},
13 "source": [
13 "source": [
14 "One of the main reason that allowed us to developp the current notebook web application \n",
14 "One of the main reasons we developed the current notebook as a web application \n",
15 "was to embrase the web technology. \n",
15 "is to embrace the available-everywhere web technology. \n",
16 "\n",
16 "\n",
17 "By beeing a pure web application using HTML, Javascript and CSS, the Notebook can get \n",
17 "Being a pure web application using only HTML, Javascript and CSS, the Notebook can access \n",
18 "all the web technology improvement for free. Thus, as browsers support for different \n",
18 "all of the web technology improvements for free. Thus, as browsers support for different \n",
19 "media extend, The notebook web app should be able to be compatible without modification. \n",
19 "media extend, the notebook web app should be compatible without modification. \n",
20 "\n",
20 "\n",
21 "This is also true with performance of the User Interface as the speed of javascript VM increase. "
21 "This is also true with performance of the User Interface as the speed of the Javascript \n",
22 "VM increases. "
22 ]
23 ]
23 },
24 },
24 {
25 {
@@ -27,27 +28,27 b''
27 "source": [
28 "source": [
28 "The other advantage of using only web technology is that the code of the interface is fully accessible to the end user, and modifiable live.\n",
29 "The other advantage of using only web technology is that the code of the interface is fully accessible to the end user, and modifiable live.\n",
29 "Even if this task is not always easy, we strive to keep our code as accessible and reusable as possible.\n",
30 "Even if this task is not always easy, we strive to keep our code as accessible and reusable as possible.\n",
30 "This should allow with minimum effort to develop small extensions that customize the behavior of the web interface. "
31 "This should allow - with minimum effort - development of small extensions that customize the behavior of the web interface. "
31 ]
32 ]
32 },
33 },
33 {
34 {
34 "cell_type": "markdown",
35 "cell_type": "markdown",
35 "metadata": {},
36 "metadata": {},
36 "source": [
37 "source": [
37 "## Tempering with Notebook app"
38 "## Tampering with the Notebook app"
38 ]
39 ]
39 },
40 },
40 {
41 {
41 "cell_type": "markdown",
42 "cell_type": "markdown",
42 "metadata": {},
43 "metadata": {},
43 "source": [
44 "source": [
44 "The first tool that is availlable to you and that you shoudl be aware of are browser \"developpers tool\". The exact naming can change across browser, and might require the installation of extensions. But basically they can allow you to inspect/modify the DOM, and interact with the javascript code that run the frontend.\n",
45 "The first tool that is available to you and that you should be aware of are browser \"developer tools\". The exact name of these tools is different in each browser, and might require the installation of extensions. But basically they can allow you to inspect/modify the DOM, and interact with the Javascript code that runs the frontend.\n",
45 "\n",
46 "\n",
46 " - In Chrome and safari Developper tools are in the menu [Put mmenu name in english here] \n",
47 " - In Chrome and Safari, Developer tools are in the menu [Menu -> More tools -> Developer Tools] \n",
47 " - In firefox you might need to install [Firebug](http://getfirebug.com/)\n",
48 " - In Firefox you might need to install [Firebug](http://getfirebug.com/)\n",
48 " - others ?\n",
49 " - others ?\n",
49 " \n",
50 " \n",
50 "Those will be your best friends to debug and try different approach for your extensions."
51 "Those will be your best friends to debug and try different approaches for your extensions."
51 ]
52 ]
52 },
53 },
53 {
54 {
@@ -68,12 +69,12 b''
68 "cell_type": "markdown",
69 "cell_type": "markdown",
69 "metadata": {},
70 "metadata": {},
70 "source": [
71 "source": [
71 "Above tools can be tedious to edit long javascipt files. Hopefully we provide the `%%javascript` magic. This allows you to quickly inject javascript into the notebook. Still the javascript injected this way will not survive reloading. Hence it is a good tool for testing an refinig a script.\n",
72 "The above tools can be tedious for editing long Javascipt files. Helpfully, we provide the `%%javascript` magic. This allows you to quickly inject Javascript into the notebook. Still, the Javascript injected this way will not survive reloading. Hence, it is a good tool for testing and refining a script.\n",
72 "\n",
73 "\n",
73 "You might see here and there people modifying css and injecting js into notebook by reading file and publishing them into the notebook.\n",
74 "You might see here and there people modifying CSS and injecting Javascript into notebook by reading files and publishing them into the notebook.\n",
74 "Not only this often break the flow of the notebook and make the re-execution of the notebook broken, but it also mean that you need to execute those cells on all the notebook every time you need to update the code.\n",
75 "Not only does this often break the flow of the notebook and break the re-execution of the notebook, but it also means that you need to execute those cells every time you need to update the code.\n",
75 "\n",
76 "\n",
76 "This can still be usefull in some cases, like the `%autosave` magic that allows to control the time between each save. But this can be replaced by a Javascript dropdown menu to select save interval."
77 "This can still be useful in some cases, like the `%autosave` magic that allows you to control the time between each save. But this can be replaced by a Javascript dropdown menu to select a save interval."
77 ]
78 ]
78 },
79 },
79 {
80 {
@@ -84,7 +85,7 b''
84 },
85 },
85 "outputs": [],
86 "outputs": [],
86 "source": [
87 "source": [
87 "## you can inspect the autosave code to see what it does.\n",
88 "## You can inspect the autosave code to see what it does.\n",
88 "%autosave??"
89 "%autosave??"
89 ]
90 ]
90 },
91 },
@@ -99,10 +100,10 b''
99 "cell_type": "markdown",
100 "cell_type": "markdown",
100 "metadata": {},
101 "metadata": {},
101 "source": [
102 "source": [
102 "To inject Javascript we provide an entry point: `custom.js` that allow teh user to execute and load other resources into the notebook.\n",
103 "To inject Javascript we provide an entry point: `custom.js` that allows the user to execute and load other resources into the notebook.\n",
103 "Javascript code in `custom.js` will be executed when the notebook app start and can then be used to customise almost anything in the UI and in the behavior of the notebook.\n",
104 "Javascript code in `custom.js` will be executed when the notebook app starts and can then be used to customize almost anything in the UI and in the behavior of the notebook.\n",
104 "\n",
105 "\n",
105 "`custom.js` can be found in IPython profile dir, and so you can have different UI modification on a per profile basis, as well as share your modfication with others."
106 "`custom.js` can be found in the IPython profile dir, and so you can have different UI modifications on a per-profile basis, as well as share your modfications with others."
106 ]
107 ]
107 },
108 },
108 {
109 {
@@ -116,8 +117,8 b''
116 "cell_type": "markdown",
117 "cell_type": "markdown",
117 "metadata": {},
118 "metadata": {},
118 "source": [
119 "source": [
119 "You have been provided with an already existing profile folder with this tutorial...\n",
120 "You have been provided with an pre-existing profile folder with this tutorial...\n",
120 "start the notebook from the root of the tutorial directory with :\n",
121 "Start the notebook from the root of the tutorial directory with :\n",
121 "\n",
122 "\n",
122 "```bash\n",
123 "```bash\n",
123 "$ ipython notebook --ProfileDir.location=./profile_euroscipy\n",
124 "$ ipython notebook --ProfileDir.location=./profile_euroscipy\n",
@@ -181,14 +182,14 b''
181 "cell_type": "markdown",
182 "cell_type": "markdown",
182 "metadata": {},
183 "metadata": {},
183 "source": [
184 "source": [
184 "Note that `custom.js` is ment to be modified by user, when writing a script, you can define it in a separate file and add a line of configuration into `custom.js` that will fetch and execute the file."
185 "Note that `custom.js` is meant to be modified by the user. When writing a script, you can define it in a separate file and add a line of configuration into `custom.js` that will fetch and execute the file."
185 ]
186 ]
186 },
187 },
187 {
188 {
188 "cell_type": "markdown",
189 "cell_type": "markdown",
189 "metadata": {},
190 "metadata": {},
190 "source": [
191 "source": [
191 "**Warning** : even if modification of `custom.js` take effect immediately after browser refresh (except if browser cache is aggressive), *creating* a file in `static/` directory need a **server restart**."
192 "**Warning** : even if modification of `custom.js` takes effect immediately after a browser refresh (except if browser cache is aggressive), *creating* a file in `static/` directory needs a **server restart**."
192 ]
193 ]
193 },
194 },
194 {
195 {
@@ -215,7 +216,7 b''
215 "cell_type": "markdown",
216 "cell_type": "markdown",
216 "metadata": {},
217 "metadata": {},
217 "source": [
218 "source": [
218 "Have a look at [default custom.js](https://github.com/ipython/ipython/blob/1.x/IPython/html/static/custom/custom.js), to see it's content and some more explanation."
219 "Have a look at [default custom.js](https://github.com/ipython/ipython/blob/1.x/IPython/html/static/custom/custom.js), to see it's contents and for more explanation."
219 ]
220 ]
220 },
221 },
221 {
222 {
@@ -229,7 +230,7 b''
229 "cell_type": "markdown",
230 "cell_type": "markdown",
230 "metadata": {},
231 "metadata": {},
231 "source": [
232 "source": [
232 "We've seen above that you can change the autosave rate by using a magic. This is typically something I don't want to type everytime, and that I don't like to embed into my workwlow and documents. (reader don't care what my autosave time is), let's build an extension that allow to do it. "
233 "We've seen above that you can change the autosave rate by using a magic. This is typically something I don't want to type everytime, and that I don't like to embed into my workflow and documents. (The reader doesn't care what my autosave time is), so let's build an extension that allow to do it. "
233 ]
234 ]
234 },
235 },
235 {
236 {
@@ -238,10 +239,10 b''
238 "foo": true
239 "foo": true
239 },
240 },
240 "source": [
241 "source": [
241 "Create a dropdow elemement in the toolbar (DOM `IPython.toolbar.element`), you will need \n",
242 "Create a dropdown elemement in the toolbar (DOM `IPython.toolbar.element`). You will need \n",
242 "\n",
243 "\n",
243 "- `IPython.notebook.set_autosave_interval(miliseconds)`\n",
244 "- `IPython.notebook.set_autosave_interval(miliseconds)`\n",
244 "- know that 1min = 60 sec, and 1 sec = 1000 ms"
245 "- know that 1 min = 60 sec, and 1 sec = 1000 ms"
245 ]
246 ]
246 },
247 },
247 {
248 {
@@ -287,7 +288,7 b''
287 "cell_type": "markdown",
288 "cell_type": "markdown",
288 "metadata": {},
289 "metadata": {},
289 "source": [
290 "source": [
290 "#### A non interactive example first"
291 "#### A non-interactive example first"
291 ]
292 ]
292 },
293 },
293 {
294 {
@@ -301,7 +302,7 b''
301 "traitlets.config.cell_magic_highlight['magic_text/x-cython'].reg = [/^%%cython/]\n",
302 "traitlets.config.cell_magic_highlight['magic_text/x-cython'].reg = [/^%%cython/]\n",
302 "```\n",
303 "```\n",
303 "\n",
304 "\n",
304 "`text/x-cython` is the name of CodeMirror mode name, `magic_` prefix will just patch the mode so that the first line that contains a magic does not screw up the highlighting. `reg`is a list or regular expression that will trigger the change of mode."
305 "`text/x-cython` is the name of a CodeMirror mode name, the `magic_` prefix will just patch the mode so that the first line that contains a magic does not screw up the highlighting. `reg`is a list or regular expression that will trigger the change of mode."
305 ]
306 ]
306 },
307 },
307 {
308 {
@@ -315,7 +316,7 b''
315 "cell_type": "markdown",
316 "cell_type": "markdown",
316 "metadata": {},
317 "metadata": {},
317 "source": [
318 "source": [
318 "Sadly you will have to read the js source file (but there are lots of comments) an/or build the javascript documentation using yuidoc.\n",
319 "Sadly, you will have to read the Javascript source file (but there are lots of comments) and/or build the Javascript documentation using YUIDoc.\n",
319 "If you have `node` and `yui-doc` installed:"
320 "If you have `node` and `yui-doc` installed:"
320 ]
321 ]
321 },
322 },
@@ -340,7 +341,7 b''
340 "info: (server): Starting server: http://127.0.0.1:3000\n",
341 "info: (server): Starting server: http://127.0.0.1:3000\n",
341 "```\n",
342 "```\n",
342 "\n",
343 "\n",
343 "and browse http://127.0.0.1:3000 to get docs"
344 "and browse to http://127.0.0.1:3000 to get the docs"
344 ]
345 ]
345 },
346 },
346 {
347 {
@@ -356,7 +357,7 b''
356 "cell_type": "markdown",
357 "cell_type": "markdown",
357 "metadata": {},
358 "metadata": {},
358 "source": [
359 "source": [
359 "By browsing the doc you will see that we have soem convenience methods that avoid to re-invent the UI everytime :\n",
360 "By browsing the docs you will see that we have some convenience methods that avoid re-inventing the UI everytime :\n",
360 "```javascript\n",
361 "```javascript\n",
361 "IPython.toolbar.add_buttons_group([\n",
362 "IPython.toolbar.add_buttons_group([\n",
362 " {\n",
363 " {\n",
@@ -388,8 +389,8 b''
388 "foo": true
389 "foo": true
389 },
390 },
390 "source": [
391 "source": [
391 "The most requested feature is generaly to be able to distinguish individual cell in th enotebook, or run specific action with them.\n",
392 "The most requested feature is generally to be able to distinguish individual cells in the notebook, or run specific actions with them.\n",
392 "To do so, you can either use `IPython.notebook.get_selected_cell()`, or rely on `CellToolbar`. This allow you to register aset of action and graphical element that will be attached on individual cells."
393 "To do so, you can either use `IPython.notebook.get_selected_cell()`, or rely on `CellToolbar`. This allows you to register a set of actions and graphical elements that will be attached to individual cells."
393 ]
394 ]
394 },
395 },
395 {
396 {
@@ -403,14 +404,14 b''
403 "cell_type": "markdown",
404 "cell_type": "markdown",
404 "metadata": {},
405 "metadata": {},
405 "source": [
406 "source": [
406 "You can see some example of what can be done by toggling the `Cell Toolbar` selector in the toolbar on top of the notebook. It provide two default `presets` that are `Default` and `slideshow`. Default allow edit the metadata attached to each cell manually."
407 "You can see some examples of what can be done by toggling the `Cell Toolbar` selector in the toolbar on top of the notebook. It provides two default `presets` that are `Default` and `slideshow`. Defaults allow editing the metadata attached to each cell manually."
407 ]
408 ]
408 },
409 },
409 {
410 {
410 "cell_type": "markdown",
411 "cell_type": "markdown",
411 "metadata": {},
412 "metadata": {},
412 "source": [
413 "source": [
413 "First we define a function that takes at first parameter an element on the DOM in which to inject UI element. Second element will be the cell this element will be registerd with. Then we will need to register that function ad give it a name.\n"
414 "First we define a function that takes as the first parameter an element on the DOM into which to inject UI element. The second element will be the cell with which this element will be registerd. Then we will need to register that function and give it a name.\n"
414 ]
415 ]
415 },
416 },
416 {
417 {
@@ -433,7 +434,7 b''
433 "var toggle = function(div, cell) {\n",
434 "var toggle = function(div, cell) {\n",
434 " var button_container = $(div)\n",
435 " var button_container = $(div)\n",
435 "\n",
436 "\n",
436 " // let's create a button that show the current value of the metadata\n",
437 " // Let's create a button that shows the current value of the metadata\n",
437 " var button = $('<button/>').addClass('btn btn-mini').text(String(cell.metadata.foo));\n",
438 " var button = $('<button/>').addClass('btn btn-mini').text(String(cell.metadata.foo));\n",
438 "\n",
439 "\n",
439 " // On click, change the metadata value and update the button label\n",
440 " // On click, change the metadata value and update the button label\n",
@@ -463,7 +464,7 b''
463 "cell_type": "markdown",
464 "cell_type": "markdown",
464 "metadata": {},
465 "metadata": {},
465 "source": [
466 "source": [
466 "This function can now be part of many `preset` of the CellToolBar."
467 "This function can now be part of any `preset` of the CellToolBar."
467 ]
468 ]
468 },
469 },
469 {
470 {
@@ -492,8 +493,8 b''
492 " - Tutorial 1\n",
493 " - Tutorial 1\n",
493 " - Tutorial 2\n",
494 " - Tutorial 2\n",
494 " \n",
495 " \n",
495 "And check that the buttons you defin share state when you toggle preset. \n",
496 "And check that the buttons you defined share state when you toggle preset. \n",
496 "Check moreover that the metadata of the cell is modified when you clisk the button, and that when saved on reloaded the metadata is still availlable."
497 "Also check that the metadata of the cell is modified when you click the button, and that the saved metadata is still available on reload."
497 ]
498 ]
498 },
499 },
499 {
500 {
@@ -521,7 +522,7 b''
521 "cell_type": "markdown",
522 "cell_type": "markdown",
522 "metadata": {},
523 "metadata": {},
523 "source": [
524 "source": [
524 "`require` is provided by a [javascript library](http://requirejs.org/) that allow to express dependency. For simple extension like the previous one we directly mute the global namespace, but for more complexe extension you could pass acallback to `require([...], <callback>)` call, to allow the user to pass configuration information to your plugin.\n",
525 "`require` is provided by a [javascript library](http://requirejs.org/) that allows you to express dependency. For simple extensions like the previous one, we directly mute the global namespace, but for more complex extensions you could pass a callback to the `require([...], <callback>)` call, to allow the user to pass configuration information to your plugin.\n",
525 "\n",
526 "\n",
526 "In Python lang, \n",
527 "In Python lang, \n",
527 "\n",
528 "\n",
@@ -566,14 +567,14 b''
566 "source": [
567 "source": [
567 "Try to use [the following](https://github.com/ipython/ipython/blob/1.x/IPython/html/static/notebook/js/celltoolbar.js#L367) to bind a dropdown list to `cell.metadata.difficulty.select`. \n",
568 "Try to use [the following](https://github.com/ipython/ipython/blob/1.x/IPython/html/static/notebook/js/celltoolbar.js#L367) to bind a dropdown list to `cell.metadata.difficulty.select`. \n",
568 "\n",
569 "\n",
569 "It should be able to take the 4 following values :\n",
570 "It should be able to take the four following values :\n",
570 "\n",
571 "\n",
571 " - `<None>`\n",
572 " - `<None>`\n",
572 " - `Easy`\n",
573 " - `Easy`\n",
573 " - `Medium`\n",
574 " - `Medium`\n",
574 " - `Hard`\n",
575 " - `Hard`\n",
575 " \n",
576 " \n",
576 "We will use it to customise the output of the converted notebook depending of the tag on each cell"
577 "We will use it to customize the output of the converted notebook depending on the tag on each cell"
577 ]
578 ]
578 },
579 },
579 {
580 {
General Comments 0
You need to be logged in to leave comments. Login now