Bert Bos: Okay, I have some slides, and it starts with some… administrivia, let me share my screen. Where is it? You see a slide now? With the title of the session on it? Okay. Where are we? So, some checks, can you all hear me? It seems you can.

Bert Bos: There's an IRC channel… For notes and reactions… It's called #html-slides-editors. It would be nice if you can make yourself known there, so I know who else is present. Let me do that myself as well. Not required, just nice.

Bert Bos: Also, if there are questions later, it would also be nice to have some minutes of those discussions. Is there anybody able to take those notes later. On IRC by preference, but other ways are possible, too. I'll ask again when we get to the questions.

Bert Bos: Other advice. If you're not talking, please mute. We don't have too many people, and I don't hear any noises, but in case there is a fire alarm in your place, then… You don't have to bother other people. And just a reminder that we operate under the Code of Ethics, as all W3C events. Be polite.

Bert Bos: That's it. Let's start with the technical part.

Bert Bos: There's basically two things I want to do with this session. One is to give you a demo of the things I've been doing so far. These 2 editors for making slides. So that makes 2 demos. And then I want to know... I want to ask you how to further develop those. And especially with a view of, how to use them to make it easier for people to make slides for W3C events. We like it when our slides are in HTML. It's easy to archive, easy to reuse, accessible, and such. So how do we make it so that people use more HTML? I think those editors can help with that, but you can tell me.

Bert Bos: And more in general, what other things, apart from the editors, are possible to make people make HTML slides for. Things like TPAC, AC meeting, W3C workshops, things like that.

Bert Bos: Let's start with the first of the two editors. Let me go back a bit first, some old history. A very long time ago, we had an AC meeting, it was in 1996, AC meeting in Paris in January 1996, a little over 30 years ago. And one of the things that was on the agenda there was an explanation of the style activity. There had just been a workshop, and just created a CSS working group. And my colleague at the time, Håkon Lie, the co-inventor of CSS with me, was charged with telling the AC there about what was happening in stylesheets. And we were ambitious, and we thought, we have HTML, and we want HTML to replace everything. Documents, but also slides. So let's try and make slides for that agenda topic in HTML.

Bert Bos: Now, this was 96, as I said, there was no implementation in any major browser of CSS at that time. This was before Microsoft IE came out. Long before Opera also, which implemented slides. But we did have an editor, sorry, we did have a browser at the time called Arena, made by Dave Raggett. And then, developed by another colleague of mine, Yves Lafon, which implemented CSS. So we decided to use that, and present slides in HTML. Startling with CSS. That's a bit tricky.

Bert Bos: We had to carefully count the lines on each slide, because there was no page break, so we counted the lines so that every page down key, advance exactly to the next slide. But it worked. We did the presentation that way. That was, as far as I know, the first time we used HTML for slides.

Bert Bos: And it's been going well since then. We've been using HTML more and more. We've actually had AC meetings in the past where all the slides were in HTML. And mostly using the template that we normally provide for that, with a common style. Although some people still use HTML with other styles.

Bert Bos: But there are also still sessions where people use other things than HTML. PowerPoint, of course. The new contender is Google. Google Docs or Google Slides. A PDF. How can I make it such that people without any thinking further, always use HTML. That's my question.

Bert Bos: I asked, why do people use HTML or not use HTML? One of the answers I got as well is easy to use PowerPoint, for example.

Bert Bos: So, can I make it easier? And what does easy mean? Well, different people have different opinions for that. Some people want something that has an easier syntax than HTML. Which leads to markdown. So the first thing I made… was a Markdown editor to create slides. And that's what I want to show you now.

Bert Bos: Let me click… That's linked there… I need to share another window. Which window is that? That window, I think. Now you see, I hope, a browser window with some colored things at the top and mostly empty space below it.

Marie-Claire Forgue: Yep.

Bert Bos: Okay, so this is, basically, a large… text area with some buttons above it, I will lead you through the various buttons. By default, it uses a built-in style which comes with the JavaScript framework that I used for presenting slides was called B6+. Also works with shower, but I have pre-configured b6+ there.

Bert Bos: I'll skip the first button for now. The second button there says change style sheet". That's where you can select… I click on it, and nothing happens. Oh no, I cannot click there, I need to click in the actual window, so it's… No, I do. Very smart. Sorry. With Zoom windows overlapping other windows, it's sometimes a bit hard to know where I am. I want to go to Firefox, yes. Is it that one? No, it's not done. Sorry. Oh, I don't have another one. Must be this one. Why can I not click on it? I don't understand. This is Zoom filtering my mouse clicks, or… This is funny.

Marie-Claire Forgue: But, the mouse... When you say preview, it works, no? There is a… no, no. You cannot click whilst you look at that.

Bert Bos: Stop sharing? Sorry.

Marie-Claire Forgue: You're very good.

Bert Bos: Oh, I know, it's something else. It's my no-script extension that is...

Marie-Claire Forgue: Oh, I should have figured.

Bert Bos: Sorry about that. Yeah, okay, start sharing again… Share button, there it is. Share. Now if I click on change stylesheet", yes, there's a dialog that appears where you can enter the URL of a stylesheet. As you see, it's pre-configured with certain style sheets.

Bert Bos: Not changing it now… There's a save to file" button. That saves the whole of the application, basically, with anything you typed in it, So you can continue from there later on.

Bert Bos: There's also an import markdown" button, if you already have prepared some markdown elsewhere, you can import that, you can also export it. There's an export HTML" button, so probably when you're done with the slides, that's what you want to use. It generates an HTML file.

Bert Bos: There's a play" button… If you don't want to save the HTML, you can also play the slides directly from within this editor.

Bert Bos: And then below that, there are 3 tabs. Markdown tab where you actually type in your slides. a preview. And the help. I click on the help first. It shows you a very brief explanation of what the editor is and does. At the bottom, there's a link to a manual for the style, if the style sheet comes with a manual. You can click there. And explains you… What the features of the style sheet are.

Bert Bos: But let's go to the markdown. And then I can explain you the first button, which is a menu with a couple of common types of slides. Let's say I want a cover slide, and it fills already the basic structure of a cover slide.

Bert Bos: Don't know how familiar you are with Markdown, but yhis actually uses… an extension of Markdown for creating block elements. The three dots there, it's quite a common extension that many different types of Markdown use. This creates a div element. And inside there, I can make my slides, so let's take an example. Title here. Misspelled, but doesn't matter. Make a list… List item. Okay, that's a bit of Markdown. Let's see how that looks in the preview. Looks like that. So this is the style that I said was pre-installed.

Bert Bos: Oh, why is that on the right? I don't know. Why is that… Lighter lines, no idea. Oh, maybe because I need a space between the… Another markdown export, actually, let's try again. Sorry. I don't know why it's right-aligned. Must be something I… But let's try another kind of slide, a normal slide. With the title again. Let's try a numbered list this time. How does that look?

Bert Bos: Now, it's left aligned, okay. I don't know if that's a bug in the stylesheet or in the editor, anyway.

Bert Bos: So that's how that works. Let's see if the play button actually works. Let me see now if I double-click on it… no, doesn't work. Oh, yeah, it's my… sorry, my script blocker, it doesn't want to enable JavaScript. I should have disabled that one, I guess. Let me try if I can do that. I can't.

Marie-Claire Forgue: The demo effect, Bert.

Bert Bos: Yeah, I'm sorry. But it should be possible normally to press the play button and then have the slideshow running there.

Bert Bos: In the interest of time, let's go to the other demo. So, back to my slides. Where are my slides… There, okay. Okay, now you should see my slides again.

Bert Bos: The other editor. The other editor is a WYSIWYG editor, because as I said, some people have different opinions on what is easy. So some people think Markdown is easy, other people prefer WYSIWYG. And yet other people prefer Emacs or VI. But in this case, I made a WYSIWYG editor. It's called, for now, the B6+ slide editor. One of the questions I have is, is there a better name for it? But for now, that's what it's called.

Bert Bos: So that's, as I said, WYSIWYG editor. It allows you to edit slides that you have on your local disk, but also it can open slides online. I can also save slides online, but that, of course, requires support from the server. It uses HTTP PUT. Like the Markdown editor, it has the possibility of showing you a manual. Both a manual for the editor itself, and the manual for the style sheet that you're using. I'll show you that in the demo.

Bert Bos: It has a text editor for CSS, not a WYSIWYG editor for CSS, because the goal is not to edit style sheets, the goal is to edit slides. And I'll show you the interesting structured editing feature. And like in a Markdown editor, you can play things directly from the editor, present your slides directly from within the editor. I'll show you that too.

Bert Bos: So, let's go to this demo. I need to change to another window again. It must be that window… I know. Okay. No, I hope you see a… a big screen with an editor in it. I don't know… yeah, you can see the menu at the top as well? Yeah, okay, that's good.

Bert Bos: Let me lead you through the various parts of the interface. I'm on a Mac, so the menu at the top is at the top of the screen. There are the usual things, like, creating a new document, opening an existing one, saving, etc. Editing, copy-paste works. There are various types of elements you can make. Headings, block quotes, whatever. Support for creating tables as well. Looks like there's a lot of things already, maybe, but there's still a lot of things to do as well.

Bert Bos: Okay, there's some more… here's the play button. Like in the Markdown editor, there is a menu where you can select some common types of slides. I'll explain that there are some buttons that duplicate what's already in the menus, like making tables, etc.

Bert Bos: Okay, let me open a existing slide and show you some editing work. So, open file… And… browse… Actually, what I'm opening are the slides that I'm using for this presentation. There they are. So you see on the left some thumbnails of the slides as they exist. I can click on those to go to the slides. You see the WYSIWYG editor here in the middle. You can go there and select things and change them.

Bert Bos: What I'm proud of is the part here at the bottom, so let me go inside here, set the cursor on a link, and now I see at the bottom that I'm inside a link, which is inside an LI, which is inside an OL. So, for people familiar with HTML that shows you exactly the structure that you're editing. It helps you select the right element as well, so if I want to select the whole of the LI, I can either triple-click here. Or I can click on the LI at the bottom, and it also selects the LI.

Bert Bos: And I told you about, at least it was on the slides, the escape key. So, now, I'm in the link here, I press the escape key, which selects the surrounding element. I press the escape key again. Selects the LI… Another escape selects the whole of the OL. Well, I can pause it again, but nothing more happens, because this is the topmost element in this case.

Bert Bos: I hope that helps editing, it helps me editing at least.

Bert Bos: What else? Do I have some… I told you about the menu here, I see… if you remember, this menu was short, now it's longer. This has all the kinds of slides. Slide templates that are defined by the style sheet. So it actually depends on the style sheet. The cover slides, the slides with images, the final slide, things like that.

Bert Bos: The slide framework, the b6+ has some features for automatic sizing of text. There's a text fit button there. It can show you also either the slides number or not, which is the clear button, if I click the clear button, the decoration disappears.

Bert Bos: I said there was an editor for CSS. If I'm not happy with the style sheet as it is, I can override it. Opens up an editor where I already defined a rule for two columns, apparently.

Bert Bos: Other interesting things maybe to say… I think that's about it. Let me go to my, Oh, yes, of course, there are buttons to create new slides, speaker notes also. If I say, add notes, then there is a new field where I can make speaker notes that you normally don't show during the presentation, but that you can… Where you can put your personal notes. You can also delete them again, of course. Delete this slide, okay.

Bert Bos: Before I spend too much time, let me go back to my slides and the questions I have. Which one is it? Oh yeah, before questions, I said there were so many things to do. For example, here's a long list, and it's not complete.

Bert Bos: Images are supported in some way. You can insert images, you can drag and drop images into the slides, that works, but somehow it doesn't quite work for SVG images. Need to figure out why.

Bert Bos: I said you can publish online. On an HTTP server that supports HTTP PUT. One kind of such server is Solid. Solid pods support that too, but they have a different authentication mechanism, so I need to implement that.

Bert Bos: It has a spell checker I didn't show you there but there is a spell checker except that it doesn't allow you to add new words for it, and there's no really… It doesn't show you suggestions, it just shows you that the word is misspelled. So there are things to do there as well.

Bert Bos: The figure element is something that that I use a lot, but there is no direct support for it yet.

Bert Bos: Some more things, drag and drop of slides, in the thumbnail, area. Does not find and replace yet. And some more things there.

Bert Bos: And, as I said already, I'm looking for a catchy name. So, if you know something, suggest something. What's… Now, what's missing?

Bert Bos: So, if you want to use either the Markdown editor or the WYSIWYG editor, what would you need? What would you want, maybe, to have in it, that's not there yet, or that I didn't show you yet. What do you use? If you use PowerPoint, for example, why do you use that? Is it because it allows you to make diagrams? Because it comes with templates for various types of slides. What is it that makes you use a particular slides editor, and so… What would make you use mine instead?

Bert Bos: And what else? Continuing in that same theme, here's some suggestions for why you might want to use a specific editor, these are my guesses. Don't know if that's the case for you, you'll tell me. Is it just because it's the one you already have? It's the one you always, always used. Or is it specific features? Is it something that it's compatible with? Some integration with something else that's important to you? Is it the ease of use? The quality of the menu? Because your colleagues use it too? Because you have a collection of slides in a particular format that you want to reuse? So, please tell me…

Bert Bos: And then, a final question, particularly for W3C meetings, I said that was why I set out to create these. I want people to use HTML slides at the AC meeting and TPAC and various workshops. Are there particular things for those meetings that would make a particular editor good, ot convenieny, or anything that makes you use that editor, rather than another one for W3C meetings?

Bert Bos: Okay. Now, your turn. Anything, any questions, any advice you have for me?