Your talk title here

The cover slide

High-five at the Mozilla Festival!

Callout slide styles

The following are callout slide styles – either a large word, or a one sentence headline. Use them to chunk your presentation into logical units.

Multilingual content:

This is English.
这是中文(简体)。
這是中文(繁體)。
これは日本語です。

Shout slide
标题
標題
タイトル

Imagine: One line slide

Image slide styles

  • Images are either backgrounds or part of the page.
  • Background images need a "cover" class on on the slide DIV.
  • In-page images need a class of "middle" to get centered
  • Adding "left" or "right" classes floats the image and you can use text next to them
  • Adding a "shadow" class adds a drop-shadow.
  • FIGURE elements around the image allow for a "swinging frame" effect
  • Images can also be videos or SVG. :)

Image slide (stretched horizontal)

Firefox OS phones Image by Chris Heilmann

Image slide (stretched vertical)

Firefox OS phones Image by Chris Heilmann

Image slide (centered, resized)

Firefox OS phones Image by Chris Heilmann

Image slide (right)

Firefox OS phones
  • Item 1
  • Item 2
  • Item 3
Image by Chris Heilmann

Image slide (left)

Firefox OS phones
  • Item 1
  • Item 2
  • Item 3
Image by Chris Heilmann

Image slide (centered, shadow)

Firefox OS phones Image by Chris Heilmann

Image slide (framed)

Firefox OS phones
Image by Chris Heilmann

Image slide (framed, swinging)

Firefox OS phones
Image by Chris Heilmann

Image slide (GIF)

Earthphases

GIFs animate from the start when the slide shows.

Image slide (video)

Image by Chris Heilmann

Image slide (video autoplay)

Image by Chris Heilmann

List style types

The following are the different kinds of list styles available to you. Always remember that bullets kill – both people and audiences. If people can read ahead of your narrative, they will. And you made yourself redundant as a speaker.

Numbered list

  1. Collect underpants
  2. ???
  3. Profit

Unordered List

  • Tigers
  • Elephants
  • Bears
    • Koalas
    • Polar
    • Panda
  • Oh my…

Ordered List

  1. Tigers
  2. Elephants
  3. Bears
    1. Koalas
    2. Polar
    3. Panda
  4. Oh my…

Long List

  1. Tigers
  2. Elephants
  3. Bears
    1. Koalas
    2. Polar
    3. Panda
  4. Hedgehogs
  5. Opossums
  6. Hyrax
  7. Capybara
  8. Oh my…

Inline List

  • Tigers
  • Elephants
  • Bears
  • Hedgehogs
  • Opossums
  • Hyrax
  • Capybara
  • Oh my…

Animated List

  • Tigers
  • Elephants
  • Bears
  • Hedgehogs
  • Opossums
  • Hyrax
  • Capybara
  • Oh my…

One line list

  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies

Long list

  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies
  • Axolotls
  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies
  • Axolotls
  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies
  • Axolotls
  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies
  • Axolotls
  • Elephants
  • Aardvarks
  • Hedgehogs
  • Kittens
  • Puppies
  • Axolotls

Code styles

Code is not automatically encoded and colour coded. The space you have for code is also limited. This is by design: presentations are not there to drench audiences with code. Switch to your editor if needed and link to live, maintained code so people don't copy+paste.

code

        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // App is installed
        };
        installapp.onerror = function() {
         // App wasn't installed, info is in 
         // installapp.error.name
        };
        

Markup is encoded

        

Paragraph without encode

<p>Paragraph without encode</p>

Live CSS code

Live CSS code (smooth)

Quote styles

Quotes are a superb way to look clever and get more kudos for being in the know. Make sure you attribute them correctly and do not quote out of context.

Quote

The worst part of internet quotes is that you can never be sure that they are attributed correctly.

Long quote is long…

But there's no doubt that, we went for this approach, we built this internal framework that we called Faceweb, which is basically this idea that we can take the infrastructure that we built out for pushing code everyday, not having to submit to an app store, building web code on the web stack that we have, and that we can translate that into mobile development. We just were never able to get the quality of it we wanted

Thanks

Red panda (Firefox)
  • {name}
  • {title}
  • {@twitter}
  • Slides: {slideurl}
Photo by Yortw