Git Product home page Git Product logo

desenvolvendo-aplicativos-para-firefoxos's Introduction

Oficina: Desenvolvendo aplicativos para Firefox OS

Smartphone de todos, para todos.

Essa apresentação foi feita utilizando o sistema shower disponivel em https://github.com/codepo8/shower.

Abaixo esta o readme original.

Mozilla Evangelism Reps shower

This is the HTML5 slide deck system created to make it easier for Mozilla evangelism reps to get started with their presentations.

Based on @pepelsbey's original shower system available on https://github.com/pepelsbey/shower
Licensed under MIT License, see license page for details.

Enhancements

Speaker notes using console.log()
Smooth transitions between slides
Option to turn off slide numbers
left/right placement of images
Image frames / swinging animation

How to use

The way to present these slides is explained in detail in this screencast Editing slides

The mozilla-example.html file contains all the possible slides the system supports. Simply copy the ones you need and delete the others. There are also comments to explain the global switches for the system. General edits to the slide system

There are a few things you can change in the overall document:

Smooth transitions - by default there is a one second transition using opacity for fading in between slides. This is triggered by the class "fade" on the HTML elements. If you remove it, slides just pop from one to another.
Progress bar - the progress bar can be removed by deleting the DIV with the class "progress" at the bottom of the document
Slide numbers - if you want to remove the slide numbers, add a class of "nonumbers" to the HTML element

Slides

Each slide needs a unique ID and the class of slide to be recognised by the system and to be navigated to.
Each slide has a header and a footer - the presenter notes go into the footer of the slide. They are not shown by default. You can roll over the slides in list view to see them and during presenting they'll be shown in the debugging console of the browser.
Each slide needs a H2 header to show as the "NEXT" information in the speaker note display.

Lists

You can control the display of lists by adding various classes to the UL element:

"longlist" applies a smaller font so that you can add more items
"inline" turns the list into comma separated words followed by a full stop.
"oneline" puts all list items on one line
"inner" adds in-slide navigation to the list. You need to set a class of "active" to the first LI to show the items one by one rather than all at the same time

Images

Adding a class of "middle", "left" or "right" to any IMG element positions it on the screen.
Slides with a class of "cower" will show the image as a background with the headings becoming white with a half-opaque black background. You can add a "w" or "h" class to the slide to fit the background image to the width or the height respectively.
Adding a FIGURE element around the image allows you to add extra features by adding one or more of the following classes to the FIGURE:
Adding a "shadow" class gives it a drop shadow
Adding a "frame" class makes the image look like it is hanging from a nail
Adding a "swing" class adds an animation to dangle it from the nail.

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.