Presentation for the Web evolutions
This presentation run with RevealJS and it use Gulp as task runner. To start with the presentation :
npm install
and just type gulp the default task start a server and do all the compilations.
-> index.html : the entry point
-> assets\images : all the images of the prez
-> assets\markdown\prez.md : the content of the presentation. This will will be parse and transform to html by reveal
-> scss\prez\style.scss : the specifics css of the presentation
-> scss\theme* : the theme use (binomed see below to discover it)
-> libs* : all the libraries needed for running well the presentation. Do not touch to the files in this directory
-> reveal : the presentation engine. Do not touch to the files in this directory
-> scripts : the javascript files to manage the interaction with the slides
Codes for writing the slides :
- To create a new slide (horizontal) : separate 2 slides with
##==## - To create a new slide (vertical) : separate 2 slides with
##--## - To add speakers notes on a slide add
Notes:and write your notes the line after
You can add some meta-data to slides / elements by adding
<!-- .slide: data-custom="custom" class="my-class" -->This will produce at the end :
<section data-custom="custom" class="my-class">my Markdown Content <!-- .element: data-custom="custom" class="my-class" -->This will produce at the end :
<div data-custom="custom" class="my-class">my Markdown Content</div>- On Elements :
class=fragment: for sequential show - On Slides :
data-background="URL_TO_IMAGE / COLOR": define a special background - On Slides :
data-state="state": for detecting when we arrive at this slide. To use withReveal.addEventListener('state', callback)
in order to facilitate the disposition on some slides. You can use thoses helpers. Each time, use the class :
center: the element will center horizontalyfull-width: the element will take 100% of widthfull-height: the element will take 100% of heightfloat-left: the element will havefloat = leftfloat-right: the element will havefloat = righth-50 to h-2000: the element will have it's height that will take 50px to 2000pxw-50 to w-2000: the element will have it's width that will take 50px to 2000px
Like for masks in Power point, there somes masks :
<!-- .slide: class="first-slide" -->
# **Presentation Title**
## **sub Title**
### year.mm.dd Meeting Name @ **Where**<!-- .slide: class="who-am-i" -->
## Qui suis-je ?
### Jean-François GARREAU
<!-- .element: class="descjf" -->
IoT Manager, Senior innovation developper & Community Manager
<!-- .element: class="twitter" -->
[@jefBinomed](http://twitter.com/jefBinomed)
<!-- .element: class="gplus" -->
[+JeanFrancoisGarreau](http://plus.google.com/+JeanFrancoisGarreau)<!-- .slide: class="transition-white" -->
# A White Transition Slide<!-- .slide: class="transition-black" -->
# A Black Transition Slide<!-- .slide: data-background="PATH_TO_MY_IMAGE" class="transition" -->
# A Custom Transition SlideA filter will be affected to show the text correctly
<!-- .slide: data-background="PATH_TO_MY_IMAGE" data-copyrights="true" class="transition" -->
# With CopyRights
<div class="copyrights">copyrights</div>copyrights coulds have 3 colors :
class="copyrights": a greyclass="copyrights white": a light greyclass="copyrights black": a dark grey
<!-- .slide: data-background="PATH_TO_MY_IMAGE" class="transition no-filter" --><!-- .slide: class="transition-white" -->
# A White Transition Slide with icon
 <!-- .element: class="icon" -->The icon will be reduce to max-width:150px; max-height:150px
<!-- .slide: class="with-code" -->
## Some Code
```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
## Slide With Big Code
```html
<!-- .slide: class="with-code" -->
## Some BIG Code
<!-- .element: class="big-code" -->
```xml
<?xml version="1.0" encoding="utf-8"?>
## A Quote
```html
## A Quote
<blockquote>
<cite>
To Quote or not to quote...
</cite>
</blockquote>
<!-- .slide: class="last-slide" -->
<!-- .element: class="thank-message" --> Thank you
<!-- .element: class="presenter" --> **Jean-François Garreau **
<!-- .element: class="work-rule" --> GDG Nantes Leader & Ingénieur Lucca
<!-- .element: class="email" --> **jef**@gdgnantes.com ## Title
### SubTitle
A Wonderfull Content ! "A Wonderfull Content" will be big because on stage, you don't have to show lots of text !
Because you often don't want to publish the same slides that you present, you can with this theme use a single file that describe which slides will be present on stage or after.
on the <div class="slides"> element specify the kind of slides you want to show.
<div class="slides" data-type-show="prez"></div>You could set this values :
- no value
- "prez"
- "full"
You have to add the same meta data on the slides that you want to affect
<!-- .slide: data-type-show="prez" -->
## A slide for prez only
A few words !| Slides\Index | no value or not set | "prez" | "full" |
|---|---|---|---|
| no value or not set | Will be show | Will be show | Will be show |
| "prez" | Will be show | Will be show | Will be NOT show |
| "full" | Will be show | Will be NOT show | Will be show |