2
$\begingroup$

I have PDF slides prepared in Latex. I would like to have all of my slides in a website where students can find all learning materials, animations, examples, etc. Do you have any experience with creating HTML/CSS/other from slides? Is there any framework you would recommend?

Edit: I would like to write everything in HTML/CSS so I can add links and animations of algorithms in the future.

Improve this question
$\endgroup$
4
  • 2
    $\begingroup$ I'm not sure I understand the question. You have... a powerpoint? And you're trying to convert it to HTML/CSS? $\endgroup$
    – Ben I. ♦
    May 16, 2019 at 16:42
  • 1
    $\begingroup$ There are no power points here. I have PDF slides prepared in Latex. $\endgroup$
    – Drimades Boy
    May 17, 2019 at 1:31
  • 2
    $\begingroup$ I edited your question to include that information. In the future, if a clarification is requested, please also do this. Comments are considered transient on SE. Questions are meant to be high-quality and self contained. $\endgroup$
    – Ben I. ♦
    May 17, 2019 at 10:25
  • $\begingroup$ Can you explain why your current workflow $\LaTeX \to \text{PDF}$ isn't good enough? Links and animations are easy enough to do with that. $\endgroup$
    – Kai
    Feb 8 at 11:57

6 Answers 6

Reset to default
2
$\begingroup$

pandoc can convert slides written in markdown to a html presentation using reveal.js. pandoc can go markdown->latex (beamer) too. Not sure about going latex->reveal.js but it could be possible.

Improve this answer
$\endgroup$
2
$\begingroup$

One of our instructors at CSU does his entire course web site using Pmwiki, which uses a markup language. If you follow certain conventions, it can be converted to a slide show in the browser. For an example how this works, see https://www.cs.colostate.edu/~cs253/Spring19/ This is a C++ course for students in the second year. On the home page is a link to the slide technology used. I believe it is java script that takes the HTML file and renders it in a slide format. If you look at the Schedule page and click any of the links to lecture material, you will see a straight web page. At the top left corner is a link that will render the page as a slide show. You can advance through the slide show using the arrow keys.

One of the other instructors takes screen shots of the PowerPoint slides and embed them in the HTML page. For an example of this style, see here.

If either of these interest you, I can put you in touch with the specific instructors.

Improve this answer
$\endgroup$
1
$\begingroup$

Some options

  • just put the PDFs on the site.
  • runestone — allows you to create interactive webpages, with programming code.
  • sozi — for creating animated slideshows from SVGs.
  • You can generate SVGs from $LaTex$. First use a $Tex$ engine that creates DVIs, then convert the DVIs to SVGs.
Improve this answer
$\endgroup$
1
$\begingroup$

Creating appealing slides using markdown and publishing them online using github or netlify is another exciting way to create slides. My Slides hosted at GitHub Pages: https://manoov.github.io/slides/moodle_fop-2022/

Improve this answer
$\endgroup$
0
$\begingroup$

If you can get the slide deck into Google Slides you can publish to the web from there.

With your slides open, select Publish to Web on the File menu. From there click on Embed and then the Publish button. You'll get an HTML snippet that uses an iframe. Copy and paste that into your HTML and it'll look just like it does in the presentation.

Improve this answer
$\endgroup$
2
  • $\begingroup$ Does it work with PDFs? $\endgroup$
    – Drimades Boy
    May 17, 2019 at 1:32
  • $\begingroup$ Slides doesn't, but if you have the PDF online somewhere it's pretty easy to embed a PDF into a web page. $\endgroup$
    – Ryan Nutt
    May 17, 2019 at 12:39
0
$\begingroup$

Create a Beamer presentation using RMarkdown, with Rstudio or any other tool. Prepare your slide content using Markdown. Click on the 'Knit' to format and view as HTML or PDF of the slides. Renders beautifully. enter image description here

Improve this answer
$\endgroup$
2
  • $\begingroup$ Hi Manoov, welcome to Computer Science Educators! This is currently a stub answer. Could you edit the answer to add more information? You will not find much in the way of upvotes for one-sentence responses. $\endgroup$
    – Ben I. ♦
    Jun 6, 2019 at 17:15
  • 1
    $\begingroup$ Added reference to more clarity. $\endgroup$
    – Manoov
    Jun 10, 2019 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.