Giter VIP home page Giter VIP logo

prez-software's Introduction

prez-software

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js
Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

  1. Copy an existing presentation folder
  2. Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the h1 tag, smooth CSS styles have been added to make it bold.

Images

Adding Images

By default, mages are wrapped in a picture like border. Using the img or picture tags are recommended.

Adding/Changing Background Images

Each slide can have a background image. A simple way to set a color is via CSS's background or background-color properties. But images are a great way to add some spice to spice it up. Add the data-background=img.url data attribute.
Great sources to get images:
https://www.pexels.com/
https://pixabay.com/
https://www.reshot.com/
https://picjumbo.com/
https://www.rawpixel.com/
DON'T USE UNSPLASH! Unsplash is one of the best if not #1 for getting stunning free stock photos, but our school wifi traffic regulating service decided to bock the site.

Adding Code

Adding Code Examples

It is recommended you use jsfiddle for code examples but if its super short, or something JS fiddle cannot handle you can use the preloaded code printing library. Syntax Highlighting does not work. You will also need to escape your code if its HTML or uses characters that might interfere with HTML (<,>). Example:
<pre><code data-trim data-noescape> <!-- Code here Any Lang --> </code></pre> </li>

Adding Editable code

Adding editable code is the deal "maker", use [jsfiddle] (https://jsfiddle.net/) (codepen requires pro plan) and toggle the only tabs you need the students to edit (js,html,css). For node or server based examples use codebox.

Generating PDFs to hand out as notes

add the ?print-pdf query string to the URL. //Still under the works

prez-software's People

Contributors

sethusenthil avatar shreyasuresh avatar rishavb123 avatar rajatp314 avatar

Stargazers

R Arun avatar

Watchers

James Cloos avatar  avatar

Forkers

kihtrakraknas

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.