Template for creating slides for NCSU OSGeoREL courses

a title slide

Vaclav Petras

NCSU OSGeoREL at Center for Geospatial Analytics

September, 2014

Possible layouts in the left-right template

  • text on left, image on right
  • image on right, text on left
  • text can be:
    • p
    • ul
    • ol
  • image can be:
    • img
    • video
    • iframe
      • Vimeo video
      • YouTube video
      • any web page

Applying left-right layout

  • set section element class to:
    • imgtext for image on left
    • textimg for image on right
  • example of setting a class: 
    <section class="imgtext">

Details about left-right template

  • difference between having image on right or left is in the class, not the order
    • but perhaps it is better to keep the order also in the code, not only by styles
    • anyway, when changing the layout to the other one, it is enough just to change the class

Details about left-right template

  • vertical size of text or image is not limited which means that one has to keep the right ratio
  • there are always just two elements under the section element
  • any heading level can be used
    • heading element is not involved in the layout

Image size in left-right template

  • the width:height ratio should be 9:10
  • square image (1:1) is safe way

Disadvantages of left-right template

  • text is pushed
  • to the left/right
  • if the lines are
  • short

Vimeo video as iframe

GRASS GIS 7: your reliable geospatial number cruncher — Markus Neteler

GRASS GIS looks back to the longest development history in the FOSS4G community. Having been available for 30 years, a lot of innovation has been put into the new GRASS GIS 7 release...

Left-right layout with arbitrary elements

Left

  • set class left for the element which should be on left
  • any element be used
  • common choice is div element which then contains more elements

Right-aligned

  • set class right for the element which should be on right
  • the right element can be the same as left one or different
  • text is still aligned to the left

Left-right test slide

class="left"
class="right"

Headings

Heading level 3

  • Any headings can be used but it is a good practice to use the heading hierarchically.
  • The level of heading is for semantic.
  • The size should be modified using the style attribute or by changing CSS for all.

Heading level 4

  • Different headings should be placed in the order without skipping.

Heading level 4

  • It seems that a good practice is h2 heading for slide/section headings h1 or h2 for presentation title and h3 for subtitles.

Lists

  • bullet (unordered) list are done by ul
  • numbered (ordered) list are done by ol
  • nested lists
    1. nested list font size is smaller
    2. works the same for bullet and numbered lists
    3. you should pay attention to nesting elements
      • nested list must be inside li element
      • if the HTML is not valid the styles will not work
  • description lists and their elements (dl, dt, dd) do not have any special handing

Any web page can be embedded

  • online pages to avoid screenshots or switching to different window to show a web page
    • by controlling the embedded web page you loose control over the slides
      • you need to click to the slide to associate keyboard with slides again
      • you may consider enabling the control arrows (controls) for Reveal.js
    • mind the risk of not having internet access
    • note that if the slides are online with https, websites with http will not show
  • offline pages for embedding some HTML document which we don't want to integrate

Large image or image at the slide bottom

Additional text or caption.

Test slides to fit screens

With all kind of slides you need to take care of their size which unlike non-HTML presentations is not fixed.

Note that a web browser window has different aspect ratio then the full screen where the presentation will be used.

Test your slides with different ratios, new screens and projectors have 16:9, 16:10 and the classic ration is 4:3.

For example, Mozilla Firefox has responsive design view (Tools > Web Developer > Responsive Design View) where you can try different rations, e.g. 4:3 can be tested as 800x600. You can also save few useful ones.

Math using MathJax

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Notes

  • syntax is \(\TeX\)
  • you have to be online for MathJax to work
  • or get an offline version of MathJax and change the Reveal.js math settings

More complicated equation

$$ J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m} {m! \, \Gamma(m + \alpha + 1)} {\bigl({\frac{x}{2}}\bigr)}^{2 m + \alpha} $$

Building the presentation

with Python scripts


./copy-common-files.py --dst-dir=build
./build-slides.py --outdir=build --title="Custom title" \
    --meta-description="Description of the page" --meta-author="Author Name" \
    list.html of.html files.html with.html slides.html
    

./build-slides.py --help
./copy-common-files.py --help

Building the presentation

without Python scripts

  • Get head.html and foot.html files.
  • Paste the content of these files into one file, called e.g. index.html.
  • Edit header to change title, author and description.
  • Use the HTML code from the example files as a starting point for your slides.
⌂