{"id":16806215,"url":"https://github.com/pkgw/htmltalk","last_synced_at":"2025-04-11T00:51:08.421Z","repository":{"id":79934531,"uuid":"12958567","full_name":"pkgw/htmltalk","owner":"pkgw","description":"An example of how to make a fancy scientific talk in HTML","archived":false,"fork":false,"pushed_at":"2013-09-24T18:47:30.000Z","size":672,"stargazers_count":22,"open_issues_count":0,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T21:38:52.979Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pkgw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-19T20:26:13.000Z","updated_at":"2024-09-16T13:49:14.000Z","dependencies_parsed_at":"2023-02-24T08:40:45.784Z","dependency_job_id":null,"html_url":"https://github.com/pkgw/htmltalk","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkgw%2Fhtmltalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkgw%2Fhtmltalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkgw%2Fhtmltalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkgw%2Fhtmltalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pkgw","download_url":"https://codeload.github.com/pkgw/htmltalk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322609,"owners_count":21084336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T09:50:25.315Z","updated_at":"2025-04-11T00:51:08.405Z","avatar_url":"https://github.com/pkgw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# An HTML5 Astrophysics Talk\n\nI recently had my last straw dealing with\n[LibreOffice](http://libreoffice.org/) and decided to try to take the plunge\nand make a scientific presentation using HTML5 and JavaScript. I was very\nhappy with how things went, so I thought I'd share how I did it. Of course you\ncan [check out the talk on a live\nwebsite](http://www.cfa.harvard.edu/~pwilliam/htmltalk/).\n\nThe actual talk was a colloquium at [Bucknell\nUniversity](http://www.bucknell.edu/), aimed primarily at physics\nundergraduates with a 45-minute run time. It was given on September 19, 2013.\n\n## The basic rundown\n\nThe presentation is built on a great little framework called\n[reveal.js](http://lab.hakim.se/reveal-js/). It worked out really well for\nmy needs. It’s [on Github too](https://github.com/hakimel/reveal.js).\n\nWhat are some of the key features that make this viable for scientific\ntalks, at least the kind that I give?\n\n* **Easy support for embedded math** using [MathJax](http://www.mathjax.org/)\n* **Good support for PDF plots** using\n  [pdf.js](http://mozilla.github.io/pdf.js/)\n* **A nice “presenter console” mode** built into ``reveal.js``.\n* **Support for exporting as a PDF** (just in case …) also built\n  into ``reveal.js``.\n\nWhat are the advantages?\n\n* Much faster to edit presentation, reorder slides, etc: all done in text. This\n  may not sound super significant, but all I can say is that compared to Impress,\n  for me the experience was **vastly** more pleasant.\n* I’m very happy with the look of the talk. The typography is much better than\n  what I could ever bother to achieve with LibreOffice.\n* Possibly more portable across machines than some aspects of PowerPoint-type\n  presentations.\n* I feel much more confident in doing video and fancy effects in a web\n  browser than LibreOffice.\n* Possibility to build in **truly** fancy effects with interactive\n  JavaScript doodads. To be investigated in the future …\n* Development of the presentation can be tracked in a version control\n  system such as [Git](http://git-scm.com/).\n\nWhat are the disadvantages?\n\n* Layout and styling using HTML and CSS are difficult and annoying for normal\n  people. The Firefox inspector tools helped greatly. Really, only a few\n  tricks are necessary for standard slide layouts, but I suspect that this\n  will be a dealbreaker for folks without web experience.\n* You need to be careful about not relying on network resources for your\n  slide content … unless you’re sure that the computer using your talk will\n  always have a good Internet connection.\n* Media assets may need format conversion. I had to transcode my videos to\n  [WebM](http://www.webmproject.org/) format, and even though ``pdf.js``\n  works well, I ended up converting my PDFs to SVG since they render more\n  easily.\n* You need to remake all of your existing slides, of course.\n\nWhat are the novel aspects of this particular presentation?\n\n* Customized theme that I think is pretty nice. (But I would, wouldn’t I?)\n* Small ``reveal.js`` plugin to interface with ``pdf.js`` easily.\n* Small ``reveal.js`` plugin to autostart a movie when its slide is shown.\n* Hacked ``reveal.js`` MathJax plugin to size things more nicely (not\n  generically useful, probably).\n* iframe example to show embedding of a website in the presentation.\n* Use of Git submodules to include JS libraries.\n* Downloaded copies of Google Web Fonts to avoid needing web access\n  while presenting.\n\nWhat tools were helpful for making this presentation?\n\n* [Git](http://git-scm.com/) for version control.\n* Good knowledge of Emacs for efficient HTML editing.\n* Keyboard compose key and Greek layout for fast entry of non-ASCII symbols.\n* Significant background information plus Firefox web developer tools and\n  reference information for getting the various HTML and CSS things to work.\n* [pdftocairo](http://poppler.freedesktop.org/) for converting PDFs to SVGs.\n* [Transmaggedon](http://www.linuxrising.org/) for transcoding videos to WebM.\n* [PiTiVi](http://www.pitivi.org/) for mild editing of YouTube videos.\n* [My setup for extracting\n  figures](http://newton.cx/~peter/2012/10/extracting-pdf-figures-as-pdfs-in-linux/)\n  from PDFs, as PDFs, on Linux.\n\n“Should I try using this, or stick with LibreOffice Impress / PowerPoint / Keynote?”\n\n* After reading all of the above, you probably can tell what the right\n  answer is for you. All I can say is that if you hate Impress, HTML might\n  be an easier and nicer option than you might think. I was **extremely**\n  happy with how easy it was to put together an attractive set of slides\n  that looked the way I wanted … but I have a ton of background knowledge\n  that made that process easier for me than it will be for most people.\n\n## Testing a local copy\n\nTo test out the slides on your local machine:\n\n1. Clone this repository.\n2. Enter the directory and fetch the dependent libraries\n   with ``git submodule update --init``.\n3. Download and unpack what I call the “assets”, the various large graphics\n  and video files. [Here’s a zipfile of the\n  assets](https://www.cfa.harvard.edu/~pwilliam/htmltalk/htmltalk-assets.zip)\n  (113 MB).\n4. Finally, ``firefox ./slides.html``.\n\nI tested this only on Firefox, though you need to use Chrome for PDF export\n(see below). I’m not to keen to get into browser compatibility testing, so I\nhope it works for you, but no guarantees.\n\n### Exporting the presentation in PDF\n\nThis is a bit of a hassle but is possible. Huzzah! See also the instructions\nprovided with ``reveal.js``.\n\n1. Open the presentation in Google Chrome, launching Chrome with\n   the flag ``--allow-file-access-from-files``.\n2. Edit the URL to end with the query ``?print-pdf``.\n3. Print with ``Ctrl-P`` as usual. Various options may need to be set:\n  - *Destination* to *Save as PDF*\n  - *Layout* to *Landscape*\n  - *Margins* to *None*\n  - *Background colors and images* option *enabled*\n4. Save it.\n\n### Bare-bones template\n\nThe ``skeleton`` branch removes a few nonessential files and content specific\nto this talk, leaving a bare-bones template upon which new talks can be built.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkgw%2Fhtmltalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpkgw%2Fhtmltalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkgw%2Fhtmltalk/lists"}