Okay, great. Thank you. First, a big shout out to the first them organizers and the
development organizers, because this is always impressive to see what collective energy
can bring in and build. That's really great, great event. And so I'm pleased to present
to you today a tool that it will not be particle physics, so we will be going much, much,
lower scale, craftsmanship and so on. But it's a tool that could be useful for the community
for anyone communicating research or communicating whatever they want through figures and graphics.
And it's a tool to implement this. So I've been writing free software for 30 years. I'm now
half-time associate professor in the North University and half-time private consultant
for a developer building things and both sides just try to feed each other and that's what
one of the examples that I want to present. So what is the thing I will present? The thing I
will present is Kotab, which is an accessible instrument, a tool, a GUI to offer interactive graphics
in SVG. So this is the GUI, the authoring environments. And this is one example of the thing
it produces, so this is not impressive, but it's not but it's a SVG graphics. And I didn't built it,
this is the actual users of the project that built this one. And so this is a single SVG file
that has been edited through the interface to add some interactive like interactivity, like clicking
on elements, displaying things, overring. So this is not impressive at all, from a technical point
of view, because developers say, okay, I just can put some jazz code and define elements and
CSS and whatever, so this is trivial. But for actual graphic geographers or the material
he viewsers, it's not that simple. And so building a tool, the tool I will present is a tool
that tries to bridge the gap to limit the difficulty of building this kind of things that
may seem trivial. And when I see this, I'm also always really pleased with the result to see
what simple tools with appropriate users can build things that are actually useful and present to
see. So where does it come from? So it doesn't come from my, I developed other free software
from my scratching my own inches, but this is not one of my inches, it comes from another community,
which was atlas blue, so it's an online geography review, a dedicated at sea and seaside study
and they use a lot of maps. And since it's an online review, they wanted to, they really, the
itch they had, it was to, okay, it's frustrating to have some interactive publishing means,
but not using anything interactive. So we just publish basic statistical maps. So how can we
produce dynamic maps? If we don't have a software developer that makes a helps us to add this
interactivity. And so they try to develop some prototypes and discuss and then we came to discuss
together and are proposed to help them to build a tool that would enable them to build such
interactive maps. The targeted scenario here, so this is very important because
the thing and I will try to think about the, to provide some reflection about the process,
how we instrument the activity of the person that wants to make something and how we provide tools
that help them to instrument this activity. So the activity wanted to be part of, the tool to be
part of is taking some static map figure here. Yes, static map, it can be a map or graphics
any kind of graphics. So just before it was just figures that were some, that was displayed,
there edited through some authorings software which is in-skate ideally, but in reality it's
illustrator, it's a proprietary, but more used by this community and many, and many of people.
So they use illustrator to build their graphics and then export it in some way and then put
it in the website, which is a WordPress website and so they upload the image and they're done.
And how do we fit into this picture? So in between, we propose to export the data from
the director or directly from in-skate since it's as a genetic, so this is not an issue for in-skate.
Say, and for this director, you've got some export process that is actually, you've got three
different export processes that are slightly different, so you've got to choose the right one,
but you've got an export process that produce an SVG file and this SVG can be
opened into the interface of work, into the cartel interface, and the users can add their
interactivity rules to a system of rules and build an interactive map out of their figure
and the software just outputs the same SVG it tries to preserve not to remove anything for it
in only ads. Some run time, so obviously you've got to have some JavaScript run time,
CSS data, and a declarative rules that are embedded as metadata into the
into the SVG file and you get a single SVG file that you can just upload wherever you want to publish it.
And you also have, but I will tell about a bit more about it, and you can also have this kind of
feedback group if you need to re-edit the original file, but I will see. So there existed in this
kind of area of software there, there was already some work done, but I don't know if you already
tried in escape, there is some interactive mock-up extension, but it's escape plugin, which are
all the constraints and especially ergonomic constraints of being able to use only the things
available to plugins. That's to say a handle selection of elements and then clicking a button.
And it's very difficult to use actually, or illustrator also has the same kind of thing,
maybe a little more, I'm going to make it at the first, but anyway, both required to write
JS code anyway to define their interactivity, which is not adequate for many of the users and
especially the ones with whom I worked. And so I took some inspiration on my side from
data inspiration because they wanted to add interactivity, and there's a great project that
Geoffrey here. So the guy who directed the thesis of my boss touch and of the
who created D3, and he also created the project V-guide V-guide, we the project aims at defining
and grammar for interactive graphics. So it's a very interesting project, and as part of this project,
they've got many, so it's data-oriented, it's comes from the D3's part of the big picture.
And they had this data V-guide Voyager interface that uses DragonDrop to define
visualizations for data and can add some interactivity. So this was one of the inspirations for the
project, but here we don't manage data. We only manage figures, and we can preserve the data if
it's embedded in the ZSDG5, but we don't care actually about the data, which is difficult for
computer scientists to imagine. So some technical details about how it works. So the goal is to
have a single autonomous SVG5 in the end so that you can upload it, not to have to think about
dependencies, cross-site requests, or anything naming, fine naming, or whatever. Okay, you've got a
single SVG file. So you've got a small runtime which is LGPL embedded inside the SVG and some
interaction moves defined as metadata, defined declaratively. It's only XML nodes stored as SVG
metadata. And for the moments they are very basic, so they define an event, which is mouse over,
mouse-click, the standard, the events that you can find into browser, in a web API,
and an action with parameters. I know in the back of my mind of computer scientists and previous
experiences that I will soon have to add conditions, have to add state information, state handling,
and whatever. But this, I restrained myself, voluntarily, from doing this, because okay, it was
putting too much, I shall be able to reach before the access. So it was going to fast to fast.
Because I want you to be able to observe the activity of the user, the actual activity,
going from bottom approach, bottom of approach. And keeping things simple, simple,
let's start so that they can be correctly understood and manage it and to see how we
can progress from that. And so there's also a custom CSS chart, style sheet, but
and once we've got the runtime or in parallel with the runtime, so we also built an editor,
and both are also influencing each other, because okay, you don't define the same runtime,
if you know that you're going to edit the thing with a graphical interface afterwards.
Or if you know that you're editing code, you don't think you don't use necessarily the same
abstractions. So it's a browser-based with a Dragon Drop Interactions. There's an interface
designed for familiarity, so I took a lot of time observing how they were using, I didn't know
the street or so, how they were using the street or what kind of objects were manipulating
the layers, how they named them, and so on, and we've got many IDs from this. And so at first,
the the objects inspector that we've got here was directly inspired from the
illustrator way of presenting things. Since then, we moved away because we wanted to simplify things,
but at first, there was this inspiration that wanted to take experience from their actual
processes. And it's built, this is just a pepith, it's built in Vanilla Jazz,
so you don't have any view or react or whatever, it's built less because I was born in the web
that you could just look at the source of web page and learn from it and not have to fetch
some repository and see how it's organized. So I want to be able to do just this. So some demo time
of the interface, so this is the web interface that you can access. And so this is a basic
example that we have here, but I will use the first demo logo, which seems appropriate.
Now, it shouldn't take that much time to open. Okay, that's much better. And so you've got here,
the first demo logo, just one disclaimer, I cheated, I didn't cheat, it's the original one,
I don't know it from the website, but I changed one thing just for the sake of the
presentation, I changed the IDs of the XML elements in it because it was easier to
to say that, okay, you can see the IDs, like SVG 5 4 1 4, but then I can talk about dots gear
and write dot and have dot instead of the same SVG 1 4 6 4 or whatever. So I just changed the
IDs of the of the elements, that's that opportunity here in the interface. And then when you've
got this kind of file, so you can see which elements, when you over, when you move the mouse over
an element, you can see what element is concerned. And for instance, I can have some interactivity
based on the write dot. So I take the write dot, I create a new rule. If you click, sorry for
non-ference speaking, this is a two-due item that's coming in the next slide,
internalization is not yet here, but it's one of the rare occasions where it's non-English
non-English speaking people were advantage. So if you click on the on the write dot, then you
can just inverse the visibility of of the gear for instance. And so this is one of the action,
I could add other actions. And I will add another one on the left dot, since I've got two dots,
let's take this opportunity. So if you click on the left dot, then I can pick different actions
and the number of actions is limited for the moments, but it's already useful and they use
and then use it in query ways. And that's what interests me. And we can invert class. And so we've
got some classes that are defined here in the CSS for the moment just basic CSS rules. But the
rotation is always something that we want to see. So this class names are taken from the CSS
file. So you've got this rotation animation. And now I've got defined these two rules and I can
open the preview. And this is the SVG generated, which is incorporated into a just an HTML window.
You've got the code and meaning code that's presented here. And if I click on the write dot,
just I took out the visibility of the element. And if I took it on the right. Ah, no, that was not
the one. Okay, great. But it's cool too. But to make the gear turn, because I saw this animation
on some applications. Okay. That's better.
So if you take any SVG file, that is five minutes. Okay, I'll open up. If you take any SVG file that
is displayed on the website in this way, you can just open it in view the application. And you've
got the rules that are defined. And you can modify them, get inspirations from them or whatever.
And there is one example of five, but I won't go through it with the different actions that are
that are proposed and you can use them. For instance, if you know prezy or sozy, the open source
clone of alternative to prezy. So you can zoom on an element on this element for instance.
So these kind of actions are proposed and accessible. And not much use actually full
moment by the users. So this is one of my pet peeves, but they don't use it. So it just, yeah,
okay, it was fun for me, but not for the actual users. So some of features, as I said, you can
if you update the file, since the rules are declarative, it's only things that we add to the SVG.
So you can go back to the process, re-added the file into your editor, and then reproduce SVG,
and then merge back from a previous interactive file, the rules that were defined. So that
usually you don't mess up with the whole IDs and whatever elements. You just tweak some elements.
And so you can just merge back the data to get all your existing stillworking actions.
And also the evidence, this is a technical detail that they don't, it's not still used. But
the events are emitted by the SVG element that's proposed. So that means that embedded into the
previous window, if you see, I want to say, but if you, you can just listen to the events
emitted by the SVG and interact with the rest of the page. So you could imagine having your
interactive SVG interact with just itself or interact with the outside world of the webpage.
If you manage the webpage and know for that, you know how to code and do.js.
It has some shortcomings like Turkey. It has some coming, like we are requiring the identification
of elements, and this is actually a source of this required feedback, because the people realize
that either they need to group things together to make it easier to make them visible or whatever,
or they need to add some identifiers, because in Illustrator you don't have to get
to specify identifiers. So they often need to re-specify identifiers.
And this is a set of volunteer limitations of the framework model and possible actions.
You can see the galleries, so the slides are on the website are linked on the
for them webpage. So you've got an example gallery that was built by the users.
For instance, you can just see this kind of simple thing, but just areas and mouse over and
visibility toggling. But yeah, it's specifying in a simple way is just full. And to come
internalization, diagnostics on the SVG structure, because there are many details that
should be explicit for the users. That are obvious for developers. Okay, you should have an ID.
Okay, but no, you've got to tell that to people. And extended even actions and built some
shortcuts. But okay, we can go back just, I wanted to take two minutes to think about the research,
how does this fit into my, this was only a development thing and how does this fit into my view
of the research. So what I'm studying is more instrumental instrumenting the activity of
activity, the different activities, so how to build instruments and how to help use our
land innovation. So just some food for filter discussion. There's a psychologist who's an MPR
about L, who defined a theory in 1995 of instrumented activity. So you've got an activity and you
use instruments in activity. At first instance, a chisel in a woodworking is just a tool,
which is a piece of metal with a handle. But as soon as you use it to carve wood, it becomes
an instrument that has a purpose. And that instrument will impact the object of the activity
for instance the wood or an impact of practice of the person because I don't do the same things
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
tools and that's the part also that's interesting is the process of this activity that you bring
a tool to change the activity. In turn, it will update the tool to because you will want to
adapt the tool to this activity and build new things. And one thing, time's up, so this is thing,
if people want to talk about this ID in context of interdisciplinary work, so how does this work
work? And I'm a computer scientist, maybe I don't care about the geographer's activity actually
I do, but I don't. And they don't care about my work as a developer, but how do we produce
interdisciplinary teams that just care about each other's research subject? So I will end with that
and welcome, and welcome questions. Thank you.
Thanks for the presentation, the demo was fantastic. My question is, I know you mentioned
that internalization is one of your plans, but as someone who can only speak one line of
would I still be able to use this? Yeah, I can, so will you, will you still be
after internalization with French disappear? And now French one disappear internalization is only adding
new language, not removing original ones. And so the French will still be there, internalization
is not translating everything into English. Internalization means the user being able to pick
the language that she wants. Yeah, so you mentioned a little bit about a more
I'd like you to mind and be there how design phase of this software happen, because even
exactly the such a group you're working with, the tasks for that, the software, or you,
what's the importance of tradition? They came with a, I do the process of building this software
just happened and in what way did they ask for this specific software? Did the users and users
asked for this specific software or came with other requirements? And this is one of the things I
talked about, I think. Yeah, in just a interdisciplinary work, and this is really the thing I
try to situate myself is to build importance of dialogue and building command language. So it took
a lot of time just to, I know Larry Wall, the creator of the Pearl language,
once said that the virtues of programmer was laziness, so the ambition to create everything to
digrate and to be over an overload. And that's, I agree for the laziness, I'm lazy to, but for
you, Bris, I would say rather humility is important because as a developer, it's easy to just
to think, okay, this is trivial, and I know what you should do, and it's better to come with
some humility and get to learn what other people can teach you, especially in areas you're not
comfortable. It's somehow answer to questions. So we have a time for one last question.
So does it do any version control? Oh, does it play nasty as nasty as SVG? So if you've got
nice SVG, which is not just a one single line without new lines, okay, you can put this into a
version control system and it will, it will play nicely. So it's short or not short?
Some libraries will speak out and completely flat SVGs without things like layers or groups or anything
like that. Does the software support changing the groups or renaming the layers and so forth,
or is that planned future something? So does software support changing the layers of the group of
your organization? That's difficult because you got to rely on something at least you got to have
a foundation. So the foundation is the structure, actually, the ideas of the elements. So just,
I'd say just experiment with it. Yeah, that's that the intended way of using it.