<h3>Use <a href="https://revealjs.com/" rel="nofollow noreferrer">RevealJS</a>.</h3>
<p>Initially when this question was asked I was adopting <a href="https://revealjs.com/" rel="nofollow noreferrer">RevealJS</a> for my own slides after I had witnessed some of my colleagues using it. At that point my knowledge about the framework was incomplete. However, I am very happy to come back here and see that <a href="https://cseducators.stackexchange.com/questions/7445/what-is-the-technology-or-combination-of-technologies-one-would-use-to-create#comment20368_7445">it has already been mentioned in the comments</a>.</p>
<p>RevealJS is amazing. Even the <a href="https://revealjs.com/installation/#full-setup" rel="nofollow noreferrer">full setup</a> is extremely simple and it comes with <a href="https://revealjs.com/?demo" rel="nofollow noreferrer">a demo</a> (which you can run after installing the framework) which demonstrates the full potential of the framework... by using it! Something catches your eye? Examine how it behaves by inspecting the code, tweak it and include it in your slides!</p>
<p>RevealJS is open source. It's extremely important for content creators and for support paired with an amazing community.</p>
<p>RevealJS is simple. You can kickstart the entire presentation by simply editing the demo. It's easy to use pre-existing tools that enable you to do everything you have listed:</p>
<ul>
<li><p><strong>Slides</strong> - The integral part of the framework. As simple as adding a <code>&lt;section&gt;</code> element.</p>
</li>
<li><p><strong>Animations</strong> - Sometimes we need to draw more attention to certain transitions. RevealJS comes with some ready-to-use animations, but nothing is stopping you from creating your own transitions!</p>
<p>In addition to that, there are many built-in animations dedicated to code. Want to highlight a specific line? A section of lines? Animate the highlighting in a specific order? As simple as specifying which lines you wish to highlight in which order.</p>
</li>
<li><p><strong>Live coding</strong> - Well, depending on the language, it's either trivial to embed it (web-based elements <em>just work</em> out of the box) or to use some other, external sources. For example, given the fact that RevealJS is web-based, it's trivial to embed any website data to it. <a href="https://replit.com/" rel="nofollow noreferrer">https://replit.com/</a> or <a href="https://godbolt.org/" rel="nofollow noreferrer">https://godbolt.org/</a> are as easy to add to your slides as it can get.</p>
</li>
</ul>
<p>All in all, it's easy to use, easy to navigate, easy to pick up and I am yet to encounter something that will turn out to be a major flaw in that framework.</p>

CC BY-SA 4.0
2022-06-30T21:59:10.510Z
2022-07-03T12:05:28.660Z
2022-07-03T12:05:28.660Z
Fureeish
<p>I teach Computer Science courses. Ideally, I would like to have all teaching materials in a website: slides, animation of data structures operations, live coding to illustrate the basic data structures operations, etc.</p>
<p>What would be your recommended technology to achieve these or part of?</p>

CC BY-SA 4.0
2022-06-07T19:33:31.123Z
I don't really understand the question.  You want recommendations for an LMS?
Ben I.
CC BY-SA 4.0
2022-06-07T20:53:40.240Z
Not necessarily an LMS. For example, reactjs is nice for slides, but how to integrate live coding? Any tools for adding animations, and so on ...
Drimades Boy
CC BY-SA 4.0
2022-06-08T04:09:29.877Z
Mostly a link, so I'm not making this an answer, but I took a class with Professor Pamela Fox (CS 61A at Berkeley - tragically she is no longer teaching :/) and she used HTML slides, which she explains [here](https://pamelafox.github.io/html-slides-for-programming/). I think this may include a significant number of the features you seem to want, if I understand your question correctly!
auden
CC BY-SA 4.0
2022-06-10T21:15:28.737Z
Sozi is good for slides. Video for Live (ish) coding, or some video chat system (zoom, MS-teams, Google meets, etc) for actual live coding.
ctrl-alt-delor
CC BY-SA 4.0
2022-06-12T13:05:06.467Z
@AudenYoung Wow, the HTML slides look great. If you make this into an answer (maybe citing a few points from the slides, or something like that), you certainly have my upvote!
TuringTux
CC BY-SA 4.0
2022-06-16T14:31:02.790Z
This is pretty broad. There are many different technologies available for any and all of these concepts (slides, animating algorithms, live coding, etc), but it's not clear what your use case is. The answer seems like: make a webpage and pick the best open source tools for each specific task that suit your needs.
ggorlen
<programming><data-structure><lecture-tools>
What is the technology (or combination of technologies) one would use to create slides, animations and live coding for lectures?
# What is the technology (or combination of technologies) one would use to create slides, animations and live coding for lectures?

(Asked by: username_0 on 2022-06-07)

I teach Computer Science courses. Ideally, I would like to have all teaching materials in a website: slides, animation of data structures operations, live coding to illustrate the basic data structures operations, etc.

What would be your recommended technology to achieve these or part of?

**Tags:** programming, data-structure, lecture-tools

> **Comments:**
> **username_1**: I don't really understand the question.  You want recommendations for an LMS?  
> **username_0**: Not necessarily an LMS. For example, reactjs is nice for slides, but how to integrate live coding? Any tools for adding animations, and so on ...  
> **username_2**: Mostly a link, so I'm not making this an answer, but I took a class with Professor Pamela Fox (CS 61A at Berkeley - tragically she is no longer teaching :/) and she used HTML slides, which she explains [here](https://pamelafox.github.io/html-slides-for-programming/). I think this may include a significant number of the features you seem to want, if I understand your question correctly!  
> **username_3**: Sozi is good for slides. Video for Live (ish) coding, or some video chat system (zoom, MS-teams, Google meets, etc) for actual live coding.  
> **username_4**: @AudenYoung Wow, the HTML slides look great. If you make this into an answer (maybe citing a few points from the slides, or something like that), you certainly have my upvote!  
> **username_5**: This is pretty broad. There are many different technologies available for any and all of these concepts (slides, animating algorithms, live coding, etc), but it's not clear what your use case is. The answer seems like: make a webpage and pick the best open source tools for each specific task that suit your needs.  

---

## 1 answers

### Answer by username_6 on 2022-06-30. Score: 3

### Use [RevealJS](https://revealjs.com/).

Initially when this question was asked I was adopting [RevealJS](https://revealjs.com/) for my own slides after I had witnessed some of my colleagues using it. At that point my knowledge about the framework was incomplete. However, I am very happy to come back here and see that [it has already been mentioned in the comments](https://cseducators.stackexchange.com/questions/7445/what-is-the-technology-or-combination-of-technologies-one-would-use-to-create#comment20368_7445).

RevealJS is amazing. Even the [full setup](https://revealjs.com/installation/#full-setup) is extremely simple and it comes with [a demo](https://revealjs.com/?demo) (which you can run after installing the framework) which demonstrates the full potential of the framework... by using it! Something catches your eye? Examine how it behaves by inspecting the code, tweak it and include it in your slides!

RevealJS is open source. It's extremely important for content creators and for support paired with an amazing community.

RevealJS is simple. You can kickstart the entire presentation by simply editing the demo. It's easy to use pre-existing tools that enable you to do everything you have listed:

* **Slides** - The integral part of the framework. As simple as adding a  element.
* **Animations** - Sometimes we need to draw more attention to certain transitions. RevealJS comes with some ready-to-use animations, but nothing is stopping you from creating your own transitions!

  In addition to that, there are many built-in animations dedicated to code. Want to highlight a specific line? A section of lines? Animate the highlighting in a specific order? As simple as specifying which lines you wish to highlight in which order.
* **Live coding** - Well, depending on the language, it's either trivial to embed it (web-based elements *just work* out of the box) or to use some other, external sources. For example, given the fact that RevealJS is web-based, it's trivial to embed any website data to it. <https://replit.com/> or <https://godbolt.org/> are as easy to add to your slides as it can get.

All in all, it's easy to use, easy to navigate, easy to pick up and I am yet to encounter something that will turn out to be a major flaw in that framework.


---

