WEBVTT 00:00.000 --> 00:10.800 Okay, great. Thank you. First, a big shout out to the first them organizers and the 00:10.800 --> 00:15.920 development organizers, because this is always impressive to see what collective energy 00:15.920 --> 00:22.800 can bring in and build. That's really great, great event. And so I'm pleased to present 00:22.800 --> 00:29.680 to you today a tool that it will not be particle physics, so we will be going much, much, 00:29.760 --> 00:36.960 lower scale, craftsmanship and so on. But it's a tool that could be useful for the community 00:36.960 --> 00:42.160 for anyone communicating research or communicating whatever they want through figures and graphics. 00:42.160 --> 00:47.840 And it's a tool to implement this. So I've been writing free software for 30 years. I'm now 00:47.840 --> 00:53.440 half-time associate professor in the North University and half-time private consultant 00:53.440 --> 01:01.360 for a developer building things and both sides just try to feed each other and that's what 01:01.360 --> 01:07.280 one of the examples that I want to present. So what is the thing I will present? The thing I 01:07.280 --> 01:16.240 will present is Kotab, which is an accessible instrument, a tool, a GUI to offer interactive graphics 01:16.240 --> 01:23.280 in SVG. So this is the GUI, the authoring environments. And this is one example of the thing 01:23.280 --> 01:30.880 it produces, so this is not impressive, but it's not but it's a SVG graphics. And I didn't built it, 01:31.600 --> 01:38.640 this is the actual users of the project that built this one. And so this is a single SVG file 01:38.640 --> 01:45.040 that has been edited through the interface to add some interactive like interactivity, like clicking 01:45.040 --> 01:53.920 on elements, displaying things, overring. So this is not impressive at all, from a technical point 01:53.920 --> 02:01.600 of view, because developers say, okay, I just can put some jazz code and define elements and 02:01.600 --> 02:10.800 CSS and whatever, so this is trivial. But for actual graphic geographers or the material 02:10.880 --> 02:17.200 he viewsers, it's not that simple. And so building a tool, the tool I will present is a tool 02:17.200 --> 02:22.720 that tries to bridge the gap to limit the difficulty of building this kind of things that 02:22.720 --> 02:31.840 may seem trivial. And when I see this, I'm also always really pleased with the result to see 02:31.840 --> 02:39.600 what simple tools with appropriate users can build things that are actually useful and present to 02:39.600 --> 02:46.800 see. So where does it come from? So it doesn't come from my, I developed other free software 02:46.800 --> 02:53.360 from my scratching my own inches, but this is not one of my inches, it comes from another community, 02:53.360 --> 03:01.680 which was atlas blue, so it's an online geography review, a dedicated at sea and seaside study 03:01.760 --> 03:11.120 and they use a lot of maps. And since it's an online review, they wanted to, they really, the 03:11.120 --> 03:17.280 itch they had, it was to, okay, it's frustrating to have some interactive publishing means, 03:17.280 --> 03:22.720 but not using anything interactive. So we just publish basic statistical maps. So how can we 03:22.720 --> 03:30.160 produce dynamic maps? If we don't have a software developer that makes a helps us to add this 03:30.160 --> 03:36.880 interactivity. And so they try to develop some prototypes and discuss and then we came to discuss 03:36.880 --> 03:43.920 together and are proposed to help them to build a tool that would enable them to build such 03:43.920 --> 03:52.240 interactive maps. The targeted scenario here, so this is very important because 03:53.280 --> 03:58.240 the thing and I will try to think about the, to provide some reflection about the process, 03:58.720 --> 04:06.320 how we instrument the activity of the person that wants to make something and how we provide tools 04:06.320 --> 04:13.200 that help them to instrument this activity. So the activity wanted to be part of, the tool to be 04:13.200 --> 04:23.920 part of is taking some static map figure here. Yes, static map, it can be a map or graphics 04:23.920 --> 04:30.960 any kind of graphics. So just before it was just figures that were some, that was displayed, 04:32.000 --> 04:39.520 there edited through some authorings software which is in-skate ideally, but in reality it's 04:39.520 --> 04:46.160 illustrator, it's a proprietary, but more used by this community and many, and many of people. 04:46.160 --> 04:53.760 So they use illustrator to build their graphics and then export it in some way and then put 04:53.760 --> 04:59.120 it in the website, which is a WordPress website and so they upload the image and they're done. 04:59.120 --> 05:08.640 And how do we fit into this picture? So in between, we propose to export the data from 05:08.640 --> 05:13.920 the director or directly from in-skate since it's as a genetic, so this is not an issue for in-skate. 05:13.920 --> 05:19.200 Say, and for this director, you've got some export process that is actually, you've got three 05:19.280 --> 05:24.160 different export processes that are slightly different, so you've got to choose the right one, 05:24.160 --> 05:29.280 but you've got an export process that produce an SVG file and this SVG can be 05:32.000 --> 05:38.960 opened into the interface of work, into the cartel interface, and the users can add their 05:38.960 --> 05:46.880 interactivity rules to a system of rules and build an interactive map out of their figure 05:47.840 --> 05:55.920 and the software just outputs the same SVG it tries to preserve not to remove anything for it 05:55.920 --> 06:01.680 in only ads. Some run time, so obviously you've got to have some JavaScript run time, 06:01.680 --> 06:07.440 CSS data, and a declarative rules that are embedded as metadata into the 06:07.440 --> 06:14.400 into the SVG file and you get a single SVG file that you can just upload wherever you want to publish it. 06:14.720 --> 06:22.880 And you also have, but I will tell about a bit more about it, and you can also have this kind of 06:22.880 --> 06:32.560 feedback group if you need to re-edit the original file, but I will see. So there existed in this 06:32.560 --> 06:38.480 kind of area of software there, there was already some work done, but I don't know if you already 06:38.560 --> 06:47.360 tried in escape, there is some interactive mock-up extension, but it's escape plugin, which are 06:47.360 --> 06:52.880 all the constraints and especially ergonomic constraints of being able to use only the things 06:52.880 --> 06:57.760 available to plugins. That's to say a handle selection of elements and then clicking a button. 06:58.320 --> 07:06.240 And it's very difficult to use actually, or illustrator also has the same kind of thing, 07:06.240 --> 07:11.120 maybe a little more, I'm going to make it at the first, but anyway, both required to write 07:11.120 --> 07:16.400 JS code anyway to define their interactivity, which is not adequate for many of the users and 07:16.400 --> 07:22.640 especially the ones with whom I worked. And so I took some inspiration on my side from 07:24.560 --> 07:29.600 data inspiration because they wanted to add interactivity, and there's a great project that 07:29.680 --> 07:36.880 Geoffrey here. So the guy who directed the thesis of my boss touch and of the 07:36.880 --> 07:44.160 who created D3, and he also created the project V-guide V-guide, we the project aims at defining 07:44.160 --> 07:51.040 and grammar for interactive graphics. So it's a very interesting project, and as part of this project, 07:51.040 --> 07:58.160 they've got many, so it's data-oriented, it's comes from the D3's part of the big picture. 07:59.600 --> 08:04.640 And they had this data V-guide Voyager interface that uses DragonDrop to define 08:04.640 --> 08:10.800 visualizations for data and can add some interactivity. So this was one of the inspirations for the 08:10.800 --> 08:19.280 project, but here we don't manage data. We only manage figures, and we can preserve the data if 08:19.280 --> 08:24.960 it's embedded in the ZSDG5, but we don't care actually about the data, which is difficult for 08:24.960 --> 08:34.240 computer scientists to imagine. So some technical details about how it works. So the goal is to 08:34.240 --> 08:40.160 have a single autonomous SVG5 in the end so that you can upload it, not to have to think about 08:40.160 --> 08:47.120 dependencies, cross-site requests, or anything naming, fine naming, or whatever. Okay, you've got a 08:47.120 --> 08:56.240 single SVG file. So you've got a small runtime which is LGPL embedded inside the SVG and some 08:56.240 --> 09:04.320 interaction moves defined as metadata, defined declaratively. It's only XML nodes stored as SVG 09:04.320 --> 09:11.360 metadata. And for the moments they are very basic, so they define an event, which is mouse over, 09:11.440 --> 09:19.680 mouse-click, the standard, the events that you can find into browser, in a web API, 09:20.720 --> 09:26.720 and an action with parameters. I know in the back of my mind of computer scientists and previous 09:26.720 --> 09:33.520 experiences that I will soon have to add conditions, have to add state information, state handling, 09:33.520 --> 09:41.680 and whatever. But this, I restrained myself, voluntarily, from doing this, because okay, it was 09:42.720 --> 09:50.320 putting too much, I shall be able to reach before the access. So it was going to fast to fast. 09:50.320 --> 09:55.360 Because I want you to be able to observe the activity of the user, the actual activity, 09:55.360 --> 10:02.720 going from bottom approach, bottom of approach. And keeping things simple, simple, 10:02.720 --> 10:09.200 let's start so that they can be correctly understood and manage it and to see how we 10:10.080 --> 10:15.040 can progress from that. And so there's also a custom CSS chart, style sheet, but 10:16.000 --> 10:21.520 and once we've got the runtime or in parallel with the runtime, so we also built an editor, 10:21.520 --> 10:27.040 and both are also influencing each other, because okay, you don't define the same runtime, 10:27.040 --> 10:30.960 if you know that you're going to edit the thing with a graphical interface afterwards. 10:31.040 --> 10:38.320 Or if you know that you're editing code, you don't think you don't use necessarily the same 10:38.320 --> 10:45.520 abstractions. So it's a browser-based with a Dragon Drop Interactions. There's an interface 10:45.520 --> 10:50.720 designed for familiarity, so I took a lot of time observing how they were using, I didn't know 10:50.720 --> 10:55.280 the street or so, how they were using the street or what kind of objects were manipulating 10:56.160 --> 11:02.080 the layers, how they named them, and so on, and we've got many IDs from this. And so at first, 11:02.080 --> 11:09.200 the the objects inspector that we've got here was directly inspired from the 11:09.600 --> 11:15.280 illustrator way of presenting things. Since then, we moved away because we wanted to simplify things, 11:15.280 --> 11:22.400 but at first, there was this inspiration that wanted to take experience from their actual 11:22.640 --> 11:28.320 processes. And it's built, this is just a pepith, it's built in Vanilla Jazz, 11:28.320 --> 11:35.920 so you don't have any view or react or whatever, it's built less because I was born in the web 11:35.920 --> 11:40.400 that you could just look at the source of web page and learn from it and not have to fetch 11:40.400 --> 11:46.160 some repository and see how it's organized. So I want to be able to do just this. So some demo time 11:46.240 --> 11:57.440 of the interface, so this is the web interface that you can access. And so this is a basic 11:57.440 --> 12:04.960 example that we have here, but I will use the first demo logo, which seems appropriate. 12:05.760 --> 12:19.120 Now, it shouldn't take that much time to open. Okay, that's much better. And so you've got here, 12:19.120 --> 12:25.680 the first demo logo, just one disclaimer, I cheated, I didn't cheat, it's the original one, 12:25.680 --> 12:31.360 I don't know it from the website, but I changed one thing just for the sake of the 12:32.320 --> 12:39.920 presentation, I changed the IDs of the XML elements in it because it was easier to 12:40.480 --> 12:47.120 to say that, okay, you can see the IDs, like SVG 5 4 1 4, but then I can talk about dots gear 12:47.120 --> 12:55.040 and write dot and have dot instead of the same SVG 1 4 6 4 or whatever. So I just changed the 12:55.120 --> 13:00.000 IDs of the of the elements, that's that opportunity here in the interface. And then when you've 13:00.000 --> 13:06.880 got this kind of file, so you can see which elements, when you over, when you move the mouse over 13:06.880 --> 13:13.200 an element, you can see what element is concerned. And for instance, I can have some interactivity 13:13.200 --> 13:19.120 based on the write dot. So I take the write dot, I create a new rule. If you click, sorry for 13:19.280 --> 13:24.320 non-ference speaking, this is a two-due item that's coming in the next slide, 13:24.320 --> 13:31.440 internalization is not yet here, but it's one of the rare occasions where it's non-English 13:31.440 --> 13:38.800 non-English speaking people were advantage. So if you click on the on the write dot, then you 13:38.800 --> 13:47.920 can just inverse the visibility of of the gear for instance. And so this is one of the action, 13:47.920 --> 13:53.360 I could add other actions. And I will add another one on the left dot, since I've got two dots, 13:53.360 --> 14:02.480 let's take this opportunity. So if you click on the left dot, then I can pick different actions 14:02.480 --> 14:07.840 and the number of actions is limited for the moments, but it's already useful and they use 14:07.840 --> 14:14.320 and then use it in query ways. And that's what interests me. And we can invert class. And so we've 14:14.320 --> 14:22.720 got some classes that are defined here in the CSS for the moment just basic CSS rules. But the 14:22.720 --> 14:29.840 rotation is always something that we want to see. So this class names are taken from the CSS 14:29.840 --> 14:36.400 file. So you've got this rotation animation. And now I've got defined these two rules and I can 14:36.480 --> 14:45.360 open the preview. And this is the SVG generated, which is incorporated into a just an HTML window. 14:45.360 --> 14:50.720 You've got the code and meaning code that's presented here. And if I click on the write dot, 14:50.720 --> 14:57.120 just I took out the visibility of the element. And if I took it on the right. Ah, no, that was not 14:57.120 --> 15:07.520 the one. Okay, great. But it's cool too. But to make the gear turn, because I saw this animation 15:07.520 --> 15:14.720 on some applications. Okay. That's better. 15:15.360 --> 15:38.320 So if you take any SVG file, that is five minutes. Okay, I'll open up. If you take any SVG file that 15:38.320 --> 15:42.800 is displayed on the website in this way, you can just open it in view the application. And you've 15:42.880 --> 15:47.680 got the rules that are defined. And you can modify them, get inspirations from them or whatever. 15:48.880 --> 15:54.160 And there is one example of five, but I won't go through it with the different actions that are 15:54.160 --> 16:01.520 that are proposed and you can use them. For instance, if you know prezy or sozy, the open source 16:01.520 --> 16:07.440 clone of alternative to prezy. So you can zoom on an element on this element for instance. 16:07.920 --> 16:13.520 So these kind of actions are proposed and accessible. And not much use actually full 16:13.520 --> 16:18.960 moment by the users. So this is one of my pet peeves, but they don't use it. So it just, yeah, 16:18.960 --> 16:24.480 okay, it was fun for me, but not for the actual users. So some of features, as I said, you can 16:25.120 --> 16:31.120 if you update the file, since the rules are declarative, it's only things that we add to the SVG. 16:31.120 --> 16:37.280 So you can go back to the process, re-added the file into your editor, and then reproduce SVG, 16:37.280 --> 16:44.080 and then merge back from a previous interactive file, the rules that were defined. So that 16:44.880 --> 16:50.400 usually you don't mess up with the whole IDs and whatever elements. You just tweak some elements. 16:50.400 --> 16:56.640 And so you can just merge back the data to get all your existing stillworking actions. 16:57.200 --> 17:02.240 And also the evidence, this is a technical detail that they don't, it's not still used. But 17:02.240 --> 17:07.280 the events are emitted by the SVG element that's proposed. So that means that embedded into the 17:07.280 --> 17:14.800 previous window, if you see, I want to say, but if you, you can just listen to the events 17:14.800 --> 17:19.920 emitted by the SVG and interact with the rest of the page. So you could imagine having your 17:19.920 --> 17:25.520 interactive SVG interact with just itself or interact with the outside world of the webpage. 17:25.520 --> 17:31.440 If you manage the webpage and know for that, you know how to code and do.js. 17:32.720 --> 17:40.800 It has some shortcomings like Turkey. It has some coming, like we are requiring the identification 17:40.800 --> 17:46.080 of elements, and this is actually a source of this required feedback, because the people realize 17:46.080 --> 17:51.680 that either they need to group things together to make it easier to make them visible or whatever, 17:52.640 --> 17:57.760 or they need to add some identifiers, because in Illustrator you don't have to get 17:57.760 --> 18:01.920 to specify identifiers. So they often need to re-specify identifiers. 18:02.480 --> 18:06.560 And this is a set of volunteer limitations of the framework model and possible actions. 18:07.360 --> 18:13.040 You can see the galleries, so the slides are on the website are linked on the 18:13.040 --> 18:18.720 for them webpage. So you've got an example gallery that was built by the users. 18:19.280 --> 18:27.840 For instance, you can just see this kind of simple thing, but just areas and mouse over and 18:27.840 --> 18:33.920 visibility toggling. But yeah, it's specifying in a simple way is just full. And to come 18:33.920 --> 18:39.520 internalization, diagnostics on the SVG structure, because there are many details that 18:39.520 --> 18:44.560 should be explicit for the users. That are obvious for developers. Okay, you should have an ID. 18:44.560 --> 18:49.760 Okay, but no, you've got to tell that to people. And extended even actions and built some 18:49.760 --> 18:56.400 shortcuts. But okay, we can go back just, I wanted to take two minutes to think about the research, 18:56.400 --> 19:03.360 how does this fit into my, this was only a development thing and how does this fit into my view 19:03.360 --> 19:09.200 of the research. So what I'm studying is more instrumental instrumenting the activity of 19:10.080 --> 19:15.600 activity, the different activities, so how to build instruments and how to help use our 19:15.600 --> 19:22.320 land innovation. So just some food for filter discussion. There's a psychologist who's an MPR 19:22.320 --> 19:29.600 about L, who defined a theory in 1995 of instrumented activity. So you've got an activity and you 19:29.600 --> 19:35.600 use instruments in activity. At first instance, a chisel in a woodworking is just a tool, 19:35.760 --> 19:44.720 which is a piece of metal with a handle. But as soon as you use it to carve wood, it becomes 19:44.720 --> 19:51.440 an instrument that has a purpose. And that instrument will impact the object of the activity 19:51.440 --> 19:56.320 for instance the wood or an impact of practice of the person because I don't do the same things 19:56.320 --> 20:01.360 if I don't have the right tool for them or if I don't add up the tools because you often add up the 20:02.240 --> 20:07.680 tools and that's the part also that's interesting is the process of this activity that you bring 20:07.680 --> 20:14.000 a tool to change the activity. In turn, it will update the tool to because you will want to 20:14.000 --> 20:21.920 adapt the tool to this activity and build new things. And one thing, time's up, so this is thing, 20:21.920 --> 20:29.040 if people want to talk about this ID in context of interdisciplinary work, so how does this work 20:29.040 --> 20:33.920 work? And I'm a computer scientist, maybe I don't care about the geographer's activity actually 20:33.920 --> 20:42.400 I do, but I don't. And they don't care about my work as a developer, but how do we produce 20:42.400 --> 20:48.720 interdisciplinary teams that just care about each other's research subject? So I will end with that 20:48.800 --> 20:58.240 and welcome, and welcome questions. Thank you. 21:03.280 --> 21:08.720 Thanks for the presentation, the demo was fantastic. My question is, I know you mentioned 21:08.720 --> 21:14.800 that internalization is one of your plans, but as someone who can only speak one line of 21:15.680 --> 21:22.720 would I still be able to use this? Yeah, I can, so will you, will you still be 21:23.840 --> 21:30.560 after internalization with French disappear? And now French one disappear internalization is only adding 21:30.560 --> 21:37.440 new language, not removing original ones. And so the French will still be there, internalization 21:37.440 --> 21:43.600 is not translating everything into English. Internalization means the user being able to pick 21:43.680 --> 21:50.880 the language that she wants. Yeah, so you mentioned a little bit about a more 21:50.880 --> 21:58.480 I'd like you to mind and be there how design phase of this software happen, because even 21:58.480 --> 22:04.400 exactly the such a group you're working with, the tasks for that, the software, or you, 22:04.400 --> 22:10.880 what's the importance of tradition? They came with a, I do the process of building this software 22:10.960 --> 22:16.880 just happened and in what way did they ask for this specific software? Did the users and users 22:16.880 --> 22:21.520 asked for this specific software or came with other requirements? And this is one of the things I 22:21.520 --> 22:28.000 talked about, I think. Yeah, in just a interdisciplinary work, and this is really the thing I 22:28.000 --> 22:34.000 try to situate myself is to build importance of dialogue and building command language. So it took 22:34.080 --> 22:42.560 a lot of time just to, I know Larry Wall, the creator of the Pearl language, 22:42.560 --> 22:49.360 once said that the virtues of programmer was laziness, so the ambition to create everything to 22:49.360 --> 22:57.280 digrate and to be over an overload. And that's, I agree for the laziness, I'm lazy to, but for 22:57.280 --> 23:02.320 you, Bris, I would say rather humility is important because as a developer, it's easy to just 23:02.960 --> 23:08.880 to think, okay, this is trivial, and I know what you should do, and it's better to come with 23:08.880 --> 23:16.400 some humility and get to learn what other people can teach you, especially in areas you're not 23:16.400 --> 23:23.680 comfortable. It's somehow answer to questions. So we have a time for one last question. 23:23.760 --> 23:40.320 So does it do any version control? Oh, does it play nasty as nasty as SVG? So if you've got 23:40.320 --> 23:46.560 nice SVG, which is not just a one single line without new lines, okay, you can put this into a 23:46.560 --> 23:53.920 version control system and it will, it will play nicely. So it's short or not short? 23:55.920 --> 24:01.600 Some libraries will speak out and completely flat SVGs without things like layers or groups or anything 24:01.600 --> 24:06.240 like that. Does the software support changing the groups or renaming the layers and so forth, 24:06.240 --> 24:13.200 or is that planned future something? So does software support changing the layers of the group of 24:13.280 --> 24:18.160 your organization? That's difficult because you got to rely on something at least you got to have 24:18.160 --> 24:24.640 a foundation. So the foundation is the structure, actually, the ideas of the elements. So just, 24:24.640 --> 24:33.280 I'd say just experiment with it. Yeah, that's that the intended way of using it.