Skip to content
Web-based slides + audio + video
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
slides/en-us
utils
.DS_Store
.gitignore
Caddyfile
README.md
apple-touch-icon-precomposed.png
apple-touch-icon.png
favicon.ico
index.html
init.js
package.json
server.js

README.md

Talk-o-Vision

Introducing Talk-o-Vision, a browser-native slideshow. That's HTML, CSS, and JavaScript. No frameworks. No external dependencies.

Running Locally

This presentation can be served from any standard web server. (For example, Caddy.)

A NodeJS-based web server is included to make it easy to run locally. To run the web server:

$ npm start

Then visit http://localhost:8000 in a browser.

Adding a New Language

If you'd like to add a new translation of this presentation, you can easily copy the en-us canonical version into a new directory under /slides by typing:

$ npm run addlang zh-cn

This will create a new directory tree that looks similar to this:

slides/zh-cn/
├── css
├── js
├── slides
│   ├── slide1
|       ├── audio.mp3
|       ├── index.html
|       ├── image.png
│   ├── slide2
│   ├── slide3

After that, you can translate the text in slide1/index.html. Press t while viewing the slideshow to open the Transcripts window and ensure that your translated text is being used.

If you'd like to add recorded audio, save the audio file as slide1/audio.mp3 and reference it in slide1/index.html. Similarly, you can add any translated images (screenshots, websites, etc.) as slide1/image.png and reference them in slide1/index.html.

To view the slideshow while you are developing it, type npm start and then visit http://localhost:8000/slides/zh-cn/index-src.html. This version of index.html dynamically pulls in the slides on-the-fly.

You can’t perform that action at this time.