1.
Developer-Friendly
Presentations
01

2.
About me
•
•
•
•
•
Name: Andrey Adamovich
Bio: Developer, coach, speaker, author
Company: Aestas/IT
E-mail: andrey@aestasit.com
Linkedin: http://www.linkedin.com/in/andreyadamovich
02

3.
This talk is NOT about
•
•
•
making effective and successful presentations
improving your sales and marketing processes
PowerPoint/Keynote tips and tricks
03

4.
This talk IS about
•
•
•
using development-like approach to creating presentations
colloborating during presentation authoring
separating presentation content and design
04

5.
What is presentation?
05

6.
Everyone
does it!
06

7.
Presentations are used for
•
•
•
•
•
community talks
conference speeches
training sessions
sales meetings
what not?
07

8.
Democracy
“
It has been said that democracy is the worst form of government
except all the others that have been tried.
Winston Churchill
08

9.
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

10.
Lifesaver
10

11.
Rules
11

12.
6x6
12

13.
10-20-30
13

14.
Slideware
14

15.
Is
PowerPoint...
15

16.
Good or Bad?
16

17.
PowerPoint UI
17

18.
Keynote UI
18

19.
OpenOffice Impress UI
19

20.
LibreOffice Impress UI
20

21.
Problems
21

22.
PowerPoint is
a sales tool!
22

23.
10% - 80% - 10%
23

24.
UI is focused on
•
•
•
style
animations
layout
24

25.
It drives you
away from...
25

26.
...the most
important
part...
26

27.
CONTENT!!!
27

28.
It's not
developerfriendly!
28

29.
Single presenter
29

30.
Do not do it
alone!
30

31.
Collaborating on slides I
31

32.
Collaborating on slides II
•
•
•
e-mail?
shared drive?
... not good!
32

33.
Merging is impossible
33

34.
Solutions?
34

35.
HTML5 +
CSS3 + JS
35

36.
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

37.
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

38.
Example
0 .< e t o >
1 scin
0.
2
<2U i fcsdo<h>
h>I s oue n/3
0.
3
<l
u>
0.
4
<icas"famn rl-n>tl<l>
l ls= rget oli"sye/i
0.
5
<icas"famn rl-n>nmtos/i
l ls= rget oli"aiain<l>
0.
6
<u>
/l
0 .< s c i n
7 /eto>
38

39.
Demo
39

40.
Why is it
better?
40

41.
It's easy to
collaborate
on
41

42.
It's mergable
42

43.
It's splittable
43

44.
It's
customizable
44

45.
It's
publishable
45

46.
It's
automatable
46

47.
But wait...
•
•
•
•
no amazing animations
no beautiful transitions
no layout templates
can I move this text box?
47

48.
Any other
drawbacks?
48

49.
But HTML is
still...
49

50.
...a mix of
content and
style!
50

51.
Markup is
good,..
51

52.
Markdown is
better!
52

53.
Markdown
syntax
53

54.
Headers
0 .# T i i a H
1
hs s n 1
0.
2
0 .# T i i a H
3 # hs s n 2
0.
4
0 .# # # T i i a H
5 ### hs s n 6
54

55.
Headers
0 .A F r t L v l H a e
1
is ee edr
0 .= = = = = = = = = =
2 ==========
0.
3
0 .A S c n L v l H a e
4
eod ee edr
0 .- - - - - - - - - - 5 ---------0.
6
0 .T i i j s a r g l r p r g a h
7 hs s ut
eua aarp.
55

56.
Block quotes
0 .# # H a e 3
1 # edr
0.
2
0 .> T i i a b o k q o e
3
hs s
lc ut.
0 .>
4
0 .> T i i t e s c n p r g a h i t e b o k q o e
5
hs s h eod aarp n h lc ut.
0 .>
6
56

57.
Emphasizing
0 .S m o t e e w r s * r e p a i e *
1 oe f hs od ae mhszd.
0 .S m o t e e w r s _ r e p a i e a s _
2 oe f hs od ae mhszd lo.
0.
3
0 .U e t o a t r s s f r * s r n e p a i * .
4 s w seik o *tog mhss*
0 .O , i y u p e e , _ u e t o u d r c r s i s e d _
5 r f o rfr _s w nesoe nta_.
57

58.
Lists
0 .*
1
Cny
ad.
0 .*
2
Gm
u.
0 .*
3
Boe
oz.
58

59.
Numbered lists
0 .1
1 .
Cny
ad.
0 .2
2 .
Gm
u.
0 .3
3 .
Boe
oz.
59

60.
Code blocks
0 .T i i a n r a p r g a h
1 hs s
oml aarp:
0.
2
0.
3
pitn"hsi acd bok"
rnl Ti s
oe lc.;
60

61.
Horizontal rules
0 .* * *
1
0 .* *
2 *
0 .* * *
3 **
0 .- - 4
0 .- - - - - - - - - - - - - - - - - - - 5 -------------------
61

62.
Links
0 .T i i [ n e a p e ( t p / e a p e c m " i l "
1 hs s a xml]ht:/xml.o/ Tte)
0 .i l n l n .
2 nie ik
0.
3
0 .[ h s l n ] h t : / x m l . e / h s n t t e
4 Ti ik(tp/eapent) a o il
0 .a t i u e
5 trbt.
62

63.
References
0 .I g t 1 t m s m r t a f c f o [ o g e [ ]
1
e 0 ie oe rfi rm Gol]1
0 .t a f o [ a o ] 2 o [ S ] 3 .
2 hn rm Yho[] r MN[]
0.
3
0 .[ ] h t : / o g e c m
4 1: tp/gol.o/
"oge
Gol"
0 .[ ] h t : / e r h y h o c m " a o S a c "
5 2: tp/sac.ao.o/ Yho erh
0 .[ ] h t : / e r h m n c m
6 3: tp/sac.s.o/
63
"S Sac"
MN erh

64.
Images
0 .! A t t x ] / a h t / m . p )
1 [l et(pt/oigjg
0.
2
0 .! A t t x ] / a h t / m . p " p i n l t t e )
3 [l et(pt/oigjg Otoa il"
64

65.
Bring your
own device
65

66.
Markdown for slides
•
•
1st level header serves as slide separator
Horizontal rule serves as slide content and slide notes separator
66

67.
Demo
67

68.
MVC I
68

69.
MVC II
69

70.
Any
developer...
70

71.
can create a
converter!
71

72.
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

73.
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

74.
Landslide
Home page: https://github.com/adamzap/landslide
“
Landslide generates a slideshow using from markdown, ReST, or
textile.
74

75.
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

76.
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

77.
Slidery usage I
0 .t s ( p e e t t o ' t p : S i e y {
1 ak'rsnain, ye ldr)
0.
2
ituFlsflTe($rjcDrsie" {
nptie iere"poeti/lds)
0.
3
icue".d
nld *m"
0.
4
}
0.
5
otuFl "bidi/rsnainsie.tl
uptie $ulDrpeetto/ldshm"
0.
6
fra 'ekj'
omt dc-s
0 .}
7
77

78.
What about
the images?
78

79.
XML is the
answer!
79

80.
SVG/GraphML
•
•
SVG can be used for free-form vector diagrams
GraphML can be used for diagrams with many connected elements
80

81.
Inkscape
81

82.
yEd Graph Editor
82

83.
Summary
83

84.
Tools used
•
•
•
•
•
•
•
Shower
MarkdownPad 2
Slidery v0.3
Gradle v1.8
Inkscape v0.48
yEd Graph Editor v3.11.1
Git
84

85.
Look Ma...
85

86.
No
PowerPoint!
86

87.
Reading
material
87

88.
Book: Presentation Patterns
88

89.
Book: HTML5 for Masterminds
89

90.
Questions?
90