[00:00.000 --> 00:12.000]  Okay, so hello everyone, I am François Chrois-Sinterbeur, I'm really glad to be here and I will present
[00:12.000 --> 00:18.160]  to you Tableau Noir, which is an online blackboard.
[00:18.160 --> 00:28.000]  So a long time ago, in a galaxy far, far away, a mysterious virus attacked the population.
[00:28.000 --> 00:42.000]  So it attacked almost everybody and that's why we decided to organize a lockdown, right?
[00:42.000 --> 00:54.000]  But we still had to teach and actually we did blackboards to teach and we are not able to use
[00:54.000 --> 01:04.000]  blackboards anymore. And actually there exists solutions online that enables to draw and share ideas,
[01:04.000 --> 01:15.000]  but they don't feel completely the need. Some of them look really like, I would say, graphical drawing softwares,
[01:15.000 --> 01:23.000]  so with many buttons and usually you need to get rid from all these buttons that are on the screen.
[01:23.000 --> 01:34.000]  Also, usually when you have to explain things, you need to make animations and to make students interact with you.
[01:34.000 --> 01:40.000]  So for instance, you know maybe sorting algorithms?
[01:40.000 --> 01:48.000]  Sorting algorithms, like insertion, sort. And you can use manettes for that, it's very easy on blackboards.
[01:48.000 --> 01:55.000]  You have manettes like that and you can teach, okay, you have to insert five in this, so you will move this
[01:55.000 --> 02:07.000]  and put five here and nine will be here, okay? And it's very difficult to use that with real blackboards,
[02:07.000 --> 02:16.000]  with existing tools, solutions that are online. Also many of them, when you go on the website, you have to sign.
[02:16.000 --> 02:27.000]  And maybe you don't want to sign up and to give data to the services that offer some white or blackboards online.
[02:27.000 --> 02:35.000]  And also when you are using them, actually their server, they keep all your data maybe, they store your information
[02:35.000 --> 02:43.000]  and you don't want that. So that's why we decided to create Tableau Noir, which is available on this webpage.
[02:43.000 --> 02:51.000]  You can, so it's online and it's also offline, you can also use Tableau Noir offline with Electron,
[02:51.000 --> 03:01.000]  which is a kind of software to make websites used like offline. It's collaborative and that's it.
[03:01.000 --> 03:05.000]  So now the rest of the presentation is divided in several parts.
[03:05.000 --> 03:08.000]  The first part, I will discuss the philosophy of the tool.
[03:08.000 --> 03:14.000]  The second part, I will explain a bit more the use of these fridge magnets here.
[03:14.000 --> 03:18.000]  Then we will discuss the collaborative board aspects of Tableau Noir.
[03:18.000 --> 03:23.000]  Then I will discuss how to make a presentation with Tableau Noir and finally we'll conclude.
[03:23.000 --> 03:28.000]  So what is the philosophy of Tableau Noir? The philosophy is kiss.
[03:28.000 --> 03:35.000]  So maybe you know this philosophy, this philosophy means keep it simple and stupid.
[03:35.000 --> 03:38.000]  This is a bit the philosophy behind Tableau Noir.
[03:38.000 --> 03:44.000]  So if you have a lot of tools like that in your drawing software, actually you don't need them
[03:44.000 --> 03:49.000]  because if you want to select a part of your board when you teach,
[03:49.000 --> 03:53.000]  you don't have time to select the correct tool selecting and then blah blah blah.
[03:53.000 --> 04:01.000]  You will use directly, suppose you have this little guy and you want to move this guy on the board
[04:01.000 --> 04:07.000]  but you just select with the shark you put around and then control X
[04:07.000 --> 04:13.000]  and boom you can move the little guy or little girl.
[04:13.000 --> 04:15.000]  So we don't need this button.
[04:15.000 --> 04:19.000]  Now you have a button for shark and erase.
[04:19.000 --> 04:22.000]  You just have one button for toggling, it's sufficient.
[04:22.000 --> 04:32.000]  Then you have, usually in drawing software you can draw more thick or thin lines
[04:32.000 --> 04:37.000]  but with a shark you don't need, you do that.
[04:37.000 --> 04:41.000]  So let's get rid of these buttons too.
[04:41.000 --> 04:46.000]  Button for the type of line is the same, it's very easy to do that when you teach.
[04:46.000 --> 04:48.000]  So we don't need that.
[04:48.000 --> 04:50.000]  Zoom, we don't need also.
[04:50.000 --> 04:54.000]  I will explain that later why we don't need Zoom.
[04:54.000 --> 04:58.000]  So the tool Tableau Noir is teaching oriented.
[04:58.000 --> 05:01.000]  You can hide the toolbar.
[05:01.000 --> 05:05.000]  There is a toolbar but usually you hide it.
[05:05.000 --> 05:07.000]  We don't care about the toolbar.
[05:07.000 --> 05:11.000]  You have short keys like C.
[05:11.000 --> 05:19.000]  If you press C you can change the color of your shark and so on.
[05:19.000 --> 05:24.000]  Dynamic size of the eraser, usually when you erase in drawing software
[05:24.000 --> 05:28.000]  you have to choose the size of your eraser.
[05:28.000 --> 05:32.000]  When you teach you don't have time, maybe this size is good.
[05:32.000 --> 05:40.000]  No, when you erase, if you do it slowly you erase not so much
[05:40.000 --> 05:44.000]  and if you start to, then it will be big.
[05:44.000 --> 05:50.000]  Okay, cool.
[05:50.000 --> 05:57.000]  Accessibility, some persons are left-handed and others are right-handed.
[05:57.000 --> 06:01.000]  So on the project I had a request about that
[06:01.000 --> 06:04.000]  and I think it's important that everybody can use Tableau Noir
[06:04.000 --> 06:09.000]  so you can flip also the cursor.
[06:09.000 --> 06:19.000]  You can add text and also later formula in your lecture.
[06:19.000 --> 06:21.000]  Okay, so now let's talk about manettes.
[06:21.000 --> 06:26.000]  So manettes are things you can move on the board.
[06:26.000 --> 06:32.000]  So you can, for instance, explain the sort of algorithms directly in Tableau Noir
[06:32.000 --> 06:36.000]  by moving the manettes.
[06:36.000 --> 06:40.000]  Actually, you also have manettes from OpenMoji.
[06:40.000 --> 06:42.000]  This is a very nice project.
[06:42.000 --> 06:46.000]  I accidentally went on this.
[06:46.000 --> 06:52.000]  It's all icons.
[06:52.000 --> 06:57.000]  And Tableau Noir provides these icons in the interface
[06:57.000 --> 07:03.000]  so you can use this little picture for whatever you want.
[07:03.000 --> 07:07.000]  You can make interactive diagrams.
[07:07.000 --> 07:12.000]  So for instance, you can draw graphs where the manettes are the nodes
[07:12.000 --> 07:16.000]  and you have edges that you have drawn by hand.
[07:16.000 --> 07:20.000]  And then interestingly, you can move the manettes
[07:20.000 --> 07:27.000]  and the graph will be updated accordingly.
[07:27.000 --> 07:30.000]  Okay, you can also put a manette in the background.
[07:30.000 --> 07:37.000]  So if you have a grid and you want to draw on the top of the grid
[07:37.000 --> 07:41.000]  so you can transform that into a manette
[07:41.000 --> 07:44.000]  and then put the manettes in the background by pressing B
[07:44.000 --> 07:46.000]  and then you can draw on the top.
[07:46.000 --> 07:51.000]  And especially when you erase, you will not erase the grid.
[07:51.000 --> 07:57.000]  Otherwise, you have to redraw it and it's boring.
[07:57.000 --> 08:03.000]  Let's talk now about the collaborative aspect of Tableau Noir.
[08:03.000 --> 08:08.000]  So interestingly, if you are alone, if you use Tableau Noir alone
[08:08.000 --> 08:11.000]  there is no communication with the server.
[08:11.000 --> 08:13.000]  Nothing.
[08:13.000 --> 08:18.000]  Especially just loading the HTML file and JavaScript otherwise
[08:18.000 --> 08:21.000]  then during the interaction there is no communication with the server.
[08:21.000 --> 08:27.000]  But as long as long as you click on this button, which is here
[08:27.000 --> 08:29.000]  you will share the board, right?
[08:29.000 --> 08:32.000]  And then it will contact the server.
[08:32.000 --> 08:38.000]  So in the tableau noir.github.io, the kind of official address
[08:38.000 --> 08:44.000]  it will contact the server that is located in my lab in Ren, so Iriza.
[08:44.000 --> 08:51.000]  And it will create a shared board and you can share the URL with others.
[08:51.000 --> 08:54.000]  And then when you share the URL, they are all connected
[08:54.000 --> 08:57.000]  and when you draw something, you have messages that are passing
[08:57.000 --> 09:00.000]  and giving the information that has been done on the board.
[09:00.000 --> 09:04.000]  That's somehow how it's implemented.
[09:04.000 --> 09:06.000]  So the server is written in JavaScript.
[09:06.000 --> 09:10.000]  It's very small in Node.js.
[09:10.000 --> 09:16.000]  And the client, so it's a bundle file and the entire project is written in TypeScript.
[09:16.000 --> 09:21.000]  Using some libraries to...
[09:21.000 --> 09:25.000]  Yeah, I don't have the list here, but yeah.
[09:25.000 --> 09:27.000]  So the features of the...
[09:27.000 --> 09:30.000]  When you share the board so you have no account
[09:30.000 --> 09:32.000]  you can protect a board with a password.
[09:32.000 --> 09:39.000]  So by protect I mean some users may not have the right to draw on the blackboard.
[09:39.000 --> 09:44.000]  They only have the right to see the blackboard.
[09:44.000 --> 09:46.000]  And those data are stored on the server.
[09:46.000 --> 09:52.000]  So it means if everybody is stopping the session, sorry for that, data are lost.
[09:52.000 --> 10:00.000]  So you have to save manually the blackboard when you want to.
[10:00.000 --> 10:02.000]  Ah, there is no zoom.
[10:02.000 --> 10:03.000]  Why?
[10:03.000 --> 10:07.000]  Because suppose we have zoom on a blackboard.
[10:07.000 --> 10:13.000]  If somebody is writing something, for instance, okay, everything is okay.
[10:13.000 --> 10:17.000]  And the other person is writing hello.
[10:17.000 --> 10:23.000]  But this person is not seeing it because the zoom is not the same.
[10:23.000 --> 10:26.000]  So if you introduce zoom, you will get troubles.
[10:26.000 --> 10:32.000]  So that's why we decided not to have zoom.
[10:32.000 --> 10:36.000]  So the solution, if you don't have zoom everybody is seeing the same thing.
[10:36.000 --> 10:43.000]  We are happy and that's it.
[10:43.000 --> 10:44.000]  Okay.
[10:44.000 --> 10:50.000]  So with this tool actually, so this is a kind of new feature that has been added afterwards.
[10:50.000 --> 10:54.000]  We can now make presentation with Tableau Noir.
[10:54.000 --> 11:02.000]  And actually the presentation that you are seeing is made in Tableau Noir.
[11:02.000 --> 11:10.000]  So actually, so it's not completely clear, but it's like we have another way to do presentations.
[11:10.000 --> 11:15.000]  So I will divide the way to make presentation in three.
[11:15.000 --> 11:20.000]  You have Librophys style, La Terre Bimmer style and Tableau Noir.
[11:20.000 --> 11:24.000]  So how do you make animations?
[11:24.000 --> 11:31.000]  In Librophys, you have to navigate through a lot of menus to see, ah, I want to move this on the left.
[11:31.000 --> 11:36.000]  Coming from the right and so on.
[11:36.000 --> 11:39.000]  Okay.
[11:39.000 --> 11:46.000]  In La Terre, you have to write, sorry, I write this type of codes many times.
[11:46.000 --> 11:50.000]  You have to write some obscure code to encode animations.
[11:50.000 --> 11:54.000]  You can say, ah, this is on the slide, not on the next slide and so on.
[11:54.000 --> 12:01.000]  And kind of in Tableau Noir, you just do it.
[12:01.000 --> 12:05.000]  So maybe we can make a demo.
[12:05.000 --> 12:10.000]  We have one minute for the demo.
[12:10.000 --> 12:16.000]  So let's suppose we are at the first demo.
[12:16.000 --> 12:19.000]  And we want to explain how we arrive at the first demo.
[12:19.000 --> 12:22.000]  So there is a little cat.
[12:22.000 --> 12:25.000]  This is not a cat. This is a cat, no?
[12:25.000 --> 12:27.000]  Okay.
[12:27.000 --> 12:30.000]  Okay. This is my first slide.
[12:30.000 --> 12:32.000]  Okay.
[12:32.000 --> 12:35.000]  So now I create a new slide from here.
[12:35.000 --> 12:36.000]  Boom.
[12:36.000 --> 12:38.000]  And we have this cat.
[12:38.000 --> 12:43.000]  And this cat is going to the first demo.
[12:43.000 --> 12:44.000]  Okay.
[12:44.000 --> 12:45.000]  So now we have two slides.
[12:45.000 --> 12:48.000]  This one and this one.
[12:48.000 --> 12:53.000]  Okay. Now maybe we create a new slide where we erase everything.
[12:53.000 --> 12:56.000]  And you have, I don't know, this, I am improvising.
[12:56.000 --> 12:57.000]  Sorry.
[12:57.000 --> 13:01.000]  Maybe if you have ideas, don't hesitate.
[13:01.000 --> 13:02.000]  A t-shirt.
[13:02.000 --> 13:03.000]  Ah, a t-shirt. Okay.
[13:03.000 --> 13:11.000]  So we have a t-shirt.
[13:11.000 --> 13:13.000]  The cat.
[13:13.000 --> 13:17.000]  And then, so this is a slide, right?
[13:17.000 --> 13:22.000]  And then it takes the t-shirt and goes home.
[13:22.000 --> 13:37.000]  So let's see the presentation.
[13:37.000 --> 13:39.000]  So hello. I'm a cat.
[13:39.000 --> 13:41.000]  I want to go to the first demo.
[13:41.000 --> 13:42.000]  I entered.
[13:42.000 --> 13:44.000]  And I want to have a t-shirt.
[13:44.000 --> 13:45.000]  So you have a t-shirt here.
[13:45.000 --> 13:47.000]  The cat is quite happy.
[13:47.000 --> 14:01.000]  And he gets home with the t-shirt.
[14:01.000 --> 14:02.000]  Okay.
[14:02.000 --> 14:03.000]  So conclusion.
[14:03.000 --> 14:08.000]  So kind of table noir can be summed up.
[14:08.000 --> 14:11.000]  It fits the teachers and students need.
[14:11.000 --> 14:14.000]  Plus the kiss principle, keep it simple, stupid.
[14:14.000 --> 14:16.000]  Plus a bit of nostalgia.
[14:16.000 --> 14:22.000]  You have the real blackboard aspect, which is not completely clean,
[14:22.000 --> 14:24.000]  but you have, like, of dust.
[14:24.000 --> 14:27.000]  Dust that is a bit of dust.
[14:27.000 --> 14:28.000]  Yes.
[14:28.000 --> 14:32.000]  Video game aspect with a circular menu.
[14:32.000 --> 14:37.000]  With also, like, if you draw something very far, like this,
[14:37.000 --> 14:42.000]  you will have the overview of the map of the board.
[14:42.000 --> 14:48.000]  So kind of Zelda games or whatever.
[14:48.000 --> 14:53.000]  So now I am tempted to add new features.
[14:53.000 --> 14:59.000]  But this is the opposite of kiss.
[14:59.000 --> 15:04.000]  So I would be very glad to discuss with you about some features
[15:04.000 --> 15:06.000]  that I would like to add.
[15:06.000 --> 15:07.000]  And that's it.
[15:07.000 --> 15:17.000]  Thank you for your attention.
[15:17.000 --> 15:18.000]  Really cool project.
[15:18.000 --> 15:19.000]  I think we all agree.
[15:19.000 --> 15:20.000]  So thank you.
[15:20.000 --> 15:22.000]  Thanks a lot for the presentation.
[15:22.000 --> 15:26.000]  And if you guys have any questions, feel free to grab them outside
[15:26.000 --> 15:28.000]  and ask your questions.
[15:28.000 --> 15:29.000]  Thank you.
[15:29.000 --> 15:39.000]  Thank you.