HTML Slides: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
 
Line 4: Line 4:


== Create your own ==
== Create your own ==
* Start a new Etherpad [http://etherpad.mozilla.org:9000/ here].
* Start a new Etherpad [http://etherpad.mozilla.org/ here].
** Change the end of the URL to whatever you'd like it to be. (e.g. <code>/community-mktg-july-28</code>)
** Change the end of the URL to whatever you'd like it to be. (e.g. <code>/community-mktg-july-28</code>)
** Copy + paste the basic template code to get started (http://etherpad.mozilla.org:9000/engagement-slides-take-2)
** Copy + paste the basic template code to get started (http://etherpad.mozilla.org/engagement-slides-take-2)
**Change + save what you like on your Etherpad and the magic happens!
**Change + save what you like on your Etherpad and the magic happens!
** Your slides will show up at http://htmlpad.org/<yourfilename>. For example see: http://htmlpad.org/community-mktg-july-28/rev.2198.
** Your slides will show up at http://htmlpad.org/<yourfilename>. For example see: http://htmlpad.org/community-mktg-july-28/rev.2198.

Latest revision as of 06:46, 31 January 2012

Template

Here is the latest template that Atul created.

Create your own

Edit your presentation

  • Shift-click anywhere on the page to get to the etherpad to make changes.
  • Edit + hit reload on the original slides to see changes.
  • To get a permanent link to a particular revision, add /rev.1 (or some other number at the end) to the end of the URL. Make sure that you removed anything after the # of the URL. For example, http://htmlpad.org/community-mktg-july-28/rev.2198.
  • To get a permanent link to a particular slide, add #slideNumber to the end of a URL, where slideNumber is the slide number to permalink to. For example, http://htmlpad.org/community-mktg-july-28/rev.2198#3.

Add a new slide

Tips

  • Remember, your HTML source is on an etherpad, so you can invite people to collaborate with you in real-time.
  • Feel free to ping toolness (Atul) on irc if you need help with anything.
  • Formatting:
    • Guide to HTML bullets.
    • style="float: right"> Places images to the right. Text will wrap around.