7 ms·
WebSlides – Making HTML presentations easy
- jvehent 10y agohttps://github.com/hakimel/reveal.js/ https://github.com/hakimel/reveal.js/ is my framework of choice when making slides.
- tannhaeuser 10y agoreveal.js + pandoc + some customization is what I'm sitting at right now. While I like it a lot, I could imagine that reveal.js's default layout isn't suitable for presentations with lots of details. Also haven't figured out how to jump to a particular slide.
- brnkrygs 10y agoI'm fairly sure that reveal.js URLs are hackable... the slide number is added to the URL as an anchor. Setting that in your URL bar might be a simple way to jump around to various slides. Also, ESC brings up a slide map that you can jump around on. e.g. http://lab.hakim.se/reveal-js/#/2 http://lab.hakim.se/reveal-js/#/2 (Hi from a fellow enthusiast)
- reagle 10y agoYes, pandoc can convert from markdown to many slide formats, but reveal.js is my favorite.
- tomcam 10y agoYou can jump to a selected slide: http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/ http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js...
- MarcScott 10y agoAnd if you're an emacs user there's https://github.com/yjwen/org-reveal/ https://github.com/yjwen/org-reveal/ to make the whole process a little easier using org mode.
- throwanem 10y agoSame. I've used that combination for all the presentations I've given since starting at $CURRENT_JOB late in 2015, and have received nothing but compliments on same. I was a little concerned about getting "why didn't you use PowerPoint?" and the like, and prepared to respond with several substantive reasons (not least of which is how much faster org-reveal is!), but it didn't even come up.
- viraptor 10y agoIt's the only one I know of that supports speaker notes. You can actually use it on two screens.
- Vinnl 10y agoSpectacle does so as well: http://formidable.com/open-source/spectacle/ http://formidable.com/open-source/spectacle/
- dharma1 10y agoSame. I like it so much I pay for his commercial offering, http://slides.com http://slides.com - which has a bunch of neat extra functionality
- Vinnl 10y agoWhen presenting code, Spectacle [1] i.c.w. spectacle-code-slide [2] is pretty sweet, although a bit messy to set up (but that's true for revealjs as well). [1] http://formidable.com/open-source/spectacle/ http://formidable.com/open-source/spectacle/ [2] https://github.com/thejameskyle/spectacle-code-slide https://github.com/thejameskyle/spectacle-code-slide
- navies 10y agoThere's an issue where navigating to the next slide from the first slide brings you back to the first slide. I'm not sure if this is intended.
- jlantunez 10y agoHi, Navies. It's not an issue. It's intentional
- ohstopitu 10y agoI generally use RemarkJS to create my slides (https://github.com/gnab/remark https://github.com/gnab/remark). However, what's the difference between this tool and https://slides.com/ https://slides.com/ (and it's MIT open sourced at https://github.com/hakimel/reveal.js/ https://github.com/hakimel/reveal.js/) ? EDIT: not saying you should not create this tool...but what was the motivation? (or the differentiation factors?)
- jlantunez 10y agoHi ohstopitu, Slides.com is an great tool. WebSlides is a solution for making presentations, landings, and long-forms. It's also a starting point for building custom CSS frameworks. For more on why I decided to build WebSlides check out this post: https://medium.com/p/fa7a9e37ff97/ https://medium.com/p/fa7a9e37ff97/ Thanks!
- pythonaut_16 10y agoHere's another pretty cool one using Elixir and Phoenix Channels (Websockets): https://github.com/ernie/venture https://github.com/ernie/venture It also has markdown based slides but syncs the presentation to clients via websockets, and allows for interactive slides with things like Polls and live chats.
- davidbanham 10y agoReveal.js can also sync the presentation to clients via websockets with its multiplex plugin. You can use the same mechanism to have the presentation on a computer connected to your projector and control the slides from your phone (or any other computer)
- reimertz 10y agoI created CLI for creating simplistic presentations for my first lightning talk. It turned out pretty great so I open sourced it. It has some neat features such as live-reloading server, anonymous deployment, mirrored highlighting and cursor and speaker mode. https://reimertz.github.io/lagom https://reimertz.github.io/lagom Would be awesome to get some more contributors.. hrmf, I mean, users. :)
- franciscop 10y agoPlease make the website more usable. It has a really nice design but poor UX. At least I should be able to scroll to... scroll. And hiding elements until you hover over an invisible part of the screen is totally against a good UX (discoverability). This could be okay in games or in purely artistic webpages, but if you intend your visitors to use the page and read the content it is counterproductive. Edit: being this a project for making slides on a website with such a poor UX gives a really bad feeling for your potential clients. Will the project itself have the same problems? Will I be trying to hurry to finish the presentation and not find a button to save as PDF because it's invisible? etc Edit: the link was changed from the website to the github.com, this comment was intended for the original URL: https://webslides.tv/ https://webslides.tv/
- colordrops 10y agoThis is the ultimate article on scrolling UX: https://bost.ocks.org/mike/scroll/ https://bost.ocks.org/mike/scroll/ Basically, don't mess with built-in scrolling functionality - just change how your page renders based on scroll position.
- dfinninger 10y agoI agree here. When I got to the site I thought that it was just a placeholder image until I saw your comment and tried the keyboard. Browsing the web is pretty mouse/trackpad driven. Especially for landing sites like this. It just felt un-intuitive.
- jlantunez 10y agoThanks for your suggestion, franciscop. Check again (desktop view) :) https://webslides.tv/ https://webslides.tv/
- franciscop 10y agoto jlantunez (I cannot reply in your comment), better as I can see the footer now, but it is barely visible, the nav is still hidden and you should probably be listening to the scroll and then scroll the page depending on that, as that's the expected behavior on websites. on('scroll') probably doesn't work as you want to listen for intent, but google gave me really good results on this topic back in the day
- dagenleg 10y agoYes, but why make html presentations at all? Are there any tangible benefits except for fancy animations?
- tarboreus 10y agoPersonally I'd rather make a presentation in HTML than in a magic GUI. Also works on a broader array of platforms. But your mileage may vary.
- teleclimber 10y agoI'd say so, yes. Mostly just because HTML is ubiquitous, it means your presentation continues to live on after your talk by uploading it to your site. Plus your slides can be responsive, accessible, searchable, linkable (if you build them correctly of course).
- jlantunez 10y agoGood karma (hypertext) and productivity (presentations, landings, and long-forms). Designers, marketers, and journalists can now focus on the content.
- danappelxx 10y agoI think you got it backwards... right now non-tech-savvy people focus on the content with their tooling (PowerPoint, Keynote, Google Slides). Your tooling introduces a new layer of complexity: now they have to learn HTML and css to do the _exact same thing_. What you built looks great, but you have to reconsider who you're marketing it towards. I can't imagine anybody but a programmer using this. If your goal is to build a platform for presentations like medium is for articles, isn't that what speakerdeck.com already is? If you want to build a better speakerdeck, just say that then? "A better way to create and share slides online"
- jlantunez 10y agoThis is the first release of WebSlides. I don't want to build a better Speakerdeck. WebSlides is about telling/sharing engaging stories (css, indexable content...).
- geraldbauer 10y agoIf you want to write your talks / presentations in plain text w/ markdown formatting I put together a ready-to-fork jekyll (github pages) theme called jekyll-talks-themes -> https://github.com/henrythemes/jekyll-talks-theme https://github.com/henrythemes/jekyll-talks-theme (using the s6 (html) slidekit -> https://github.com/slidekit https://github.com/slidekit ).
- geraldbauer 10y agoFor for html presentations packaged for github pages (jekyll) and writing in plaint text with markdown formatting, see the slideshow-templates org -> https://github.com/slideshow-templates https://github.com/slideshow-templates Ready-to-fork (use) packs include: deck.js, impress.js (3D!), reveal.js, g5, s6, s5, and more.
- geraldbauer 10y agoStill early - I've put together an "Awesome Slideshows" page -> https://github.com/slideshow-s9/awesome-slideshows https://github.com/slideshow-s9/awesome-slideshows listing (awesome) html presentation / slideshow templates, themes, tools and more.
- captn3m0 10y agoAnother similar effort: https://github.com/robbie-cao/awesome-slides https://github.com/robbie-cao/awesome-slides
- jagger27 10y agoI have a bit of feedback: the scrolljacking doesn't work at all for me in Safari on macOS with a MacBook touchpad. All it does is activate the edge-bounce animation. Chrome is a little janky too, half activating the bounce animation and then advancing to the next slide. Firefox is fine since it doesn't do the edge-bounce. The worst crime (to me anyway) is the history spam and this applies to all browsers. Hitting back changes the URL but not the slide that's shown, curiously. If you're going to go this route, that's fine, just update the visible slide. I would prefer if it didn't make me jump 50 history items back to get to where I came from.
- jlantunez 10y agoThanks, jagger27. Touchpad is my priority right now. I'm just a CSS guy :)
- jagger27 10y agoIt shows! The design is lovely.
- skeletonjelly 10y agoWith regards to the history, you can update the URL without having the history spam. I believe it's replaceState instead of pushState
- godot 10y agoRight. I actually don't mind the 50 history items, but it definitely feels like a bug when the URL changes upon hitting Back but does not update the visible slide.
- explorigin 10y agoPressing "B" to black the screen is a feature that I consider critical that is missing here.
- viraptor 10y agoWhat do you use it for?
- hawski 10y agoIt seems that people use it to help audience focus. You would black the screen between slides. Probably you could emulate it by including blank slides in-between. There is of course other opinion, that it can be more distracting, but it depends on material and speaker: http://www.mrmediatraining.com/2011/03/29/powerpoint-why-you-shouldnt-use-the-b-key/ http://www.mrmediatraining.com/2011/03/29/powerpoint-why-you...
- explorigin 10y agoIt adds an element of professionalism to a presentation. You can hook up your lappy to the projector. Once things are tested, you black the screen while you wait for people to file in. This way the introducer can have the audience's full attention before your talk. Also, it can be a powerful tool when you want the audience to pay attention to you and not the slides (if you need to go off-script for example).
- viraptor 10y agoFor the first part, configuring a side screen, rather than a mirror screen works as well. Don't put the presentation on the extra screen until you want to. Not very helpful for going off script though.
- armandososa 10y agoSomething to be aware: this is OP's first Github project. Let's be nice so it isn't the last.
- hakakadera 10y agofor someone starting out with their first github project, one would appreciate your comment.. although one may be 100% OK for their work to be the subject of any rational analysis, it is worthwhile to know the constructive motive behind such discussion and thereby even criticism may encourage more future contributions (moving far from being the last project). +1 for being vocal
- hakakadera 10y agoI humbly give the finger to the idiots who downvoted this. Reflects your elitism and easy priveleged life with no idea of what its like to live elsewhere other than where you grew up. No wonder, valley is full of bullies who just did 10000 hours of practise but 0 hours of being human.
- sanjayts 10y agoI must say that I completely missed the arrow keys and the page numbers at the bottom; the font color is way too light for the background. Maybe making that a bit more prominent would go a long way.
- redleggedfrog 10y agoThat's pretty slick, nice work. I don't make a lot of presentations, but the fact I could figure out a lot of it in minutes makes this attractive. I definitely see it as a web tool more than a marketing / management tool. If I showed our marketing dept markup they'd have a conniption fit.
- metasean 10y agoIt works great on IceCatMobile and is open source - so it has my support!
- xjia 10y agoThis looks really useful. Is there a way to make it directly printable? It would be great if I can use it for my lectures.
- eranation 10y agoVery nice! Feature request - make this also friendly for simple websites, (just hide the next previous and add a navigation bar) Much simpler than bootstrap for non technical people, well done!
- gear54rus 10y agoOn a side note, does anyone know about something like that for simple docs? Like if I want to migrate away for those bloated un-diffable PDFs and DOCXs to a HTML? Preferably it should support importing from those 2 formats.
- imafish 10y agoProject looks fine - but I don't see myself switching from latex beamer any time soon.