developer-friendly presentations
DESCRIPTION
Poweroint, Keynote and some lesser-known desktop apllications were for a long time the only choice for creating presentations. Even though there are other ways to share your experience with the public, presentations still remain the key way of delivering structured content to the audience in a short time. Recent technologies like Html5/Javascript/CSS3 and Markdown allow developers to throw away clumsy UI and start creating content that is easy to version, to merge, to restyle and to collaborateTRANSCRIPT
![Page 1: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/1.jpg)
Developer-FriendlyPresentations
01
![Page 2: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/2.jpg)
About me
Name: Andrey Adamovich
Bio: Developer, coach, speaker, author
Company: Aestas/IT
E-mail: [email protected]
Linkedin: http://www.linkedin.com/in/andreyadamovich
•••••
02
![Page 3: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/3.jpg)
This talk is NOT about
making effective and successful presentations
improving your sales and marketing processes
PowerPoint/Keynote tips and tricks
•••
03
![Page 4: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/4.jpg)
This talk IS about
using development-like approach to creating presentations
colloborating during presentation authoring
separating presentation content and design
•••
04
![Page 5: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/5.jpg)
What is presentation?
05
![Page 6: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/6.jpg)
Everyonedoes it!
06
![Page 7: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/7.jpg)
Presentations are used for
community talks
conference speeches
training sessions
sales meetings
what not?
•••••
07
![Page 8: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/8.jpg)
Democracy
It has been said that democracy is the worst form of government
except all the others that have been tried.
Winston Churchill“
08
![Page 9: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/9.jpg)
Presentations
Using presentations for delivering your ideas to the audience is the
most boring way of doing that, but not many dare to use something
else.“09
![Page 10: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/10.jpg)
Lifesaver
10
![Page 11: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/11.jpg)
Rules11
![Page 12: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/12.jpg)
6x6
12
![Page 13: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/13.jpg)
10-20-30
13
![Page 14: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/14.jpg)
Slideware
14
![Page 15: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/15.jpg)
IsPowerPoint...
15
![Page 16: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/16.jpg)
Good or Bad?16
![Page 17: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/17.jpg)
PowerPoint UI
17
![Page 18: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/18.jpg)
Keynote UI
18
![Page 19: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/19.jpg)
OpenOffice Impress UI
19
![Page 20: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/20.jpg)
LibreOffice Impress UI
20
![Page 21: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/21.jpg)
Problems21
![Page 22: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/22.jpg)
PowerPoint isa sales tool!
22
![Page 23: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/23.jpg)
10% - 80% - 10%
23
![Page 24: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/24.jpg)
UI is focused on
style
animations
layout
•••
24
![Page 25: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/25.jpg)
It drives youaway from...
25
![Page 26: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/26.jpg)
...the mostimportant
part...26
![Page 27: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/27.jpg)
CONTENT!!!27
![Page 28: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/28.jpg)
It's notdeveloper-friendly!
28
![Page 29: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/29.jpg)
Single presenter
29
![Page 30: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/30.jpg)
Do not do italone!
30
![Page 31: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/31.jpg)
Collaborating on slides I
31
![Page 32: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/32.jpg)
Collaborating on slides II
e-mail?
shared drive?
... not good!
•••
32
![Page 33: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/33.jpg)
Merging is impossible
33
![Page 34: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/34.jpg)
Solutions?34
![Page 35: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/35.jpg)
HTML5 +CSS3 + JS
35
![Page 36: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/36.jpg)
HTML/CSS/JS presentation frameworks I
Slidy - http://www.w3.org/Talks/Tools/Slidy2
Slideous - http://goessner.net/articles/slideous/
S5 - http://goessner.net/articles/slideous/
S9 - http://slideshow-s9.github.io/
••••
36
![Page 37: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/37.jpg)
HTML/CSS/JS presentation frameworks II
Shower - http://shwr.me
Reveal.js - http://lab.hakim.se/reveal-js
DZSlides - http://paulrouget.com/dzslides/
Deck.js - http://imakewebthings.com/deck.js/
Impress.js - http://bartaz.github.io/impress.js
Google I/O - https://code.google.com/p/io-2012-slides/
••••••
37
![Page 38: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/38.jpg)
Example
<section>
<h2>UI is focused on</h3>
<ul>
<li class=" fragment roll-in">style</li>
<li class=" fragment roll-in">animations</li>
</ul>
</section>
01.
02.
03.
04.
05.
06.
07.
38
![Page 39: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/39.jpg)
Demo39
![Page 40: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/40.jpg)
Why is itbetter?
40
![Page 41: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/41.jpg)
It's easy tocollaborate
on41
![Page 42: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/42.jpg)
It's mergable42
![Page 43: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/43.jpg)
It's splittable43
![Page 44: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/44.jpg)
It'scustomizable
44
![Page 45: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/45.jpg)
It'spublishable
45
![Page 46: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/46.jpg)
It'sautomatable
46
![Page 47: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/47.jpg)
But wait...
no amazing animations
no beautiful transitions
no layout templates
can I move this text box?
••••
47
![Page 48: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/48.jpg)
Any otherdrawbacks?
48
![Page 49: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/49.jpg)
But HTML isstill...
49
![Page 50: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/50.jpg)
...a mix ofcontent and
style!50
![Page 51: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/51.jpg)
Markup isgood,..
51
![Page 52: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/52.jpg)
Markdown isbetter!
52
![Page 53: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/53.jpg)
Markdownsyntax
53
![Page 54: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/54.jpg)
Headers
# This is an H1
## This is an H2
###### This is an H6
01.
02.
03.
04.
05.
54
![Page 55: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/55.jpg)
Headers
A First Level Header
====================
A Second Level Header
---------------------
This is just a regular paragraph.
01.
02.
03.
04.
05.
06.
07.
55
![Page 56: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/56.jpg)
Block quotes
### Header 3
> This is a block quote.
>
> This is the second paragraph in the block quote.
>
01.
02.
03.
04.
05.
06.
56
![Page 57: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/57.jpg)
Emphasizing
Some of these words *are emphasized*.
Some of these words _are emphasized also_.
Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.
01.
02.
03.
04.
05.
57
![Page 58: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/58.jpg)
Lists
* Candy.
* Gum.
* Booze.
01.
02.
03.
58
![Page 59: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/59.jpg)
Numbered lists
1. Candy.
2. Gum.
3. Booze.
01.
02.
03.
59
![Page 60: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/60.jpg)
Code blocks
This is a normal paragraph:
println "This is a code block.";
01.
02.
03.
60
![Page 61: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/61.jpg)
Horizontal rules
* * *
***
*****
- - -
---------------------------------------
01.
02.
03.
04.
05.
61
![Page 62: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/62.jpg)
Links
This is [an example](http://example.com/ "Title")
inline link.
[This link](http://example.net/) has no title
attribute.
01.
02.
03.
04.
05.
62
![Page 63: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/63.jpg)
References
I get 10 times more traffic from [Google][1]
than from [Yahoo][2] or [MSN][3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
01.
02.
03.
04.
05.
06.
63
![Page 64: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/64.jpg)
Images
![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")
01.
02.
03.
64
![Page 65: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/65.jpg)
Bring yourown device65
![Page 66: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/66.jpg)
Markdown for slides
1st level header serves as slide separator
Horizontal rule serves as slide content and slide notes separator
••
66
![Page 67: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/67.jpg)
Demo67
![Page 68: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/68.jpg)
MVC I
68
![Page 69: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/69.jpg)
MVC II
69
![Page 70: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/70.jpg)
Anydeveloper...
70
![Page 71: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/71.jpg)
can create aconverter!
71
![Page 72: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/72.jpg)
Benefits
Separation of design/layout from the actual content
Let's the author first focus on content and then on styling issues
Easy to implement and embed into development process
•••
72
![Page 73: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/73.jpg)
Pandoc
Home page: http://johnmacfarlane.net/pandoc/
If you need to convert files from one markup format into another,
pandoc is your swiss-army knife.
Pandoc can convert documents in Markdown, reStructuredText,
textile, HTML, DocBook, LaTeX, MediaWiki markup, OPML, or
Haddock markup to ...
“73
![Page 74: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/74.jpg)
Landslide
Home page: https://github.com/adamzap/landslide
Landslide generates a slideshow using from markdown, ReST, or
textile.“74
![Page 75: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/75.jpg)
Slideshow-S9
Home page: http://slideshow-s9.github.io/
A Ruby gem that lets you create slide shows and author slides in
plain text using a wiki-style markup language that's easy-to-write and
easy-to-read.“75
![Page 76: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/76.jpg)
Slidery + Gradle
https://github.com/aestasit/slidery
https://github.com/aestasit/slidery-gradle
Slidery is a Java/Groovy library and Gradle plugin to support creation
of presentation slides written in Markdown format.
••
“76
![Page 77: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/77.jpg)
Slidery usage I
task('presentation', type: Slidery) {
intputFiles fileTree("$projectDir/slides") {
include "*.md"
}
outputFile "$buildDir/presentation/slides.html"
format 'deck-js'
}
01.
02.
03.
04.
05.
06.
07.
77
![Page 78: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/78.jpg)
What aboutthe images?
78
![Page 79: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/79.jpg)
XML is theanswer!
79
![Page 80: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/80.jpg)
SVG/GraphML
SVG can be used for free-form vector diagrams
GraphML can be used for diagrams with many connected elements
••
80
![Page 81: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/81.jpg)
Inkscape
81
![Page 82: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/82.jpg)
yEd Graph Editor
82
![Page 83: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/83.jpg)
Summary83
![Page 84: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/84.jpg)
Tools used
Shower
MarkdownPad 2
Slidery v0.3
Gradle v1.8
Inkscape v0.48
yEd Graph Editor v3.11.1
Git
•••••••
84
![Page 85: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/85.jpg)
Look Ma...85
![Page 86: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/86.jpg)
NoPowerPoint!
86
![Page 87: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/87.jpg)
Readingmaterial
87
![Page 88: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/88.jpg)
Book: Presentation Patterns
88
![Page 89: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/89.jpg)
Book: HTML5 for Masterminds
89
![Page 90: Developer-friendly presentations](https://reader033.vdocuments.mx/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/90.jpg)
Questions?90