Developer-Friendly
Presentations

01
About me
•
•
•
•
•

Name: Andrey Adamovich
Bio: Developer, coach, speaker, author
Company: Aestas/IT
E-mail: andrey@aestas...
This talk is NOT about
•
•
•

making effective and successful presentations
improving your sales and marketing processes
P...
This talk IS about
•
•
•

using development-like approach to creating presentations
colloborating during presentation auth...
What is presentation?

05
Everyone
does it!
06
Presentations are used for
•
•
•
•
•

community talks
conference speeches
training sessions
sales meetings
what not?

07
Democracy

“

It has been said that democracy is the worst form of government
except all the others that have been tried.
...
Presentations

“

Using presentations for delivering your ideas to the audience is the
most boring way of doing that, but ...
Lifesaver

10
Rules
11
6x6

12
10-20-30

13
Slideware

14
Is
PowerPoint...
15
Good or Bad?
16
PowerPoint UI

17
Keynote UI

18
OpenOffice Impress UI

19
LibreOffice Impress UI

20
Problems
21
PowerPoint is
a sales tool!
22
10% - 80% - 10%

23
UI is focused on
•
•
•

style
animations
layout

24
It drives you
away from...
25
...the most
important
part...

26
CONTENT!!!
27
It's not
developerfriendly!

28
Single presenter

29
Do not do it
alone!
30
Collaborating on slides I

31
Collaborating on slides II
•
•
•

e-mail?
shared drive?
... not good!

32
Merging is impossible

33
Solutions?
34
HTML5 +
CSS3 + JS
35
HTML/CSS/JS presentation frameworks I
•
•
•
•

Slidy - http://www.w3.org/Talks/Tools/Slidy2
Slideous - http://goessner.net...
HTML/CSS/JS presentation frameworks II
•
•
•
•
•
•

Shower - http://shwr.me
Reveal.js - http://lab.hakim.se/reveal-js
DZSl...
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"sy...
Demo
39
Why is it
better?
40
It's easy to
collaborate
on
41
It's mergable
42
It's splittable
43
It's
customizable
44
It's
publishable
45
It's
automatable
46
But wait...
•
•
•
•

no amazing animations
no beautiful transitions
no layout templates
can I move this text box?

47
Any other
drawbacks?
48
But HTML is
still...
49
...a mix of
content and
style!
50
Markup is
good,..
51
Markdown is
better!
52
Markdown
syntax
53
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
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 ...
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 ...
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...
Lists
0 .*
1

Cny
ad.

0 .*
2

Gm
u.

0 .*
3

Boe
oz.

58
Numbered lists
0 .1
1 .

Cny
ad.

0 .2
2 .

Gm
u.

0 .3
3 .

Boe
oz.

59
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
Horizontal rules
0 .* * *
1
0 .* *
2 *
0 .* * *
3 **
0 .- - 4
0 .- - - - - - - - - - - - - - - - - - - 5 -----------------...
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 ...
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 ...
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/...
Bring your
own device
65
Markdown for slides
•
•

1st level header serves as slide separator
Horizontal rule serves as slide content and slide note...
Demo
67
MVC I

68
MVC II

69
Any
developer...
70
can create a
converter!
71
Benefits
•
•
•

Separation of design/layout from the actual content
Let's the author first focus on content and then on st...
Pandoc
Home page: http://johnmacfarlane.net/pandoc/

“

If you need to convert files from one markup format into another,
...
Landslide
Home page: https://github.com/adamzap/landslide

“

Landslide generates a slideshow using from markdown, ReST, o...
Slideshow-S9
Home page: http://slideshow-s9.github.io/

“

A Ruby gem that lets you create slide shows and author slides i...
Slidery + Gradle
•
•

“

https://github.com/aestasit/slidery
https://github.com/aestasit/slidery-gradle
Slidery is a Java/...
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...
What about
the images?
78
XML is the
answer!
79
SVG/GraphML
•
•

SVG can be used for free-form vector diagrams
GraphML can be used for diagrams with many connected elemen...
Inkscape

81
yEd Graph Editor

82
Summary
83
Tools used
•
•
•
•
•
•
•

Shower
MarkdownPad 2
Slidery v0.3
Gradle v1.8
Inkscape v0.48
yEd Graph Editor v3.11.1
Git
84
Look Ma...
85
No
PowerPoint!
86
Reading
material
87
Book: Presentation Patterns

88
Book: HTML5 for Masterminds

89
Questions?
90
Upcoming SlideShare
Loading in …5
×

Developer-friendly presentations

1,842 views

Published on

Powerpoint, Keynote and some lesser-known desktop applications 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 collaborate

Published in: Technology, Design

Developer-friendly presentations

  1. 1. Developer-Friendly Presentations 01
  2. 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. 3. This talk is NOT about • • • making effective and successful presentations improving your sales and marketing processes PowerPoint/Keynote tips and tricks 03
  4. 4. This talk IS about • • • using development-like approach to creating presentations colloborating during presentation authoring separating presentation content and design 04
  5. 5. What is presentation? 05
  6. 6. Everyone does it! 06
  7. 7. Presentations are used for • • • • • community talks conference speeches training sessions sales meetings what not? 07
  8. 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. 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. 10. Lifesaver 10
  11. 11. Rules 11
  12. 12. 6x6 12
  13. 13. 10-20-30 13
  14. 14. Slideware 14
  15. 15. Is PowerPoint... 15
  16. 16. Good or Bad? 16
  17. 17. PowerPoint UI 17
  18. 18. Keynote UI 18
  19. 19. OpenOffice Impress UI 19
  20. 20. LibreOffice Impress UI 20
  21. 21. Problems 21
  22. 22. PowerPoint is a sales tool! 22
  23. 23. 10% - 80% - 10% 23
  24. 24. UI is focused on • • • style animations layout 24
  25. 25. It drives you away from... 25
  26. 26. ...the most important part... 26
  27. 27. CONTENT!!! 27
  28. 28. It's not developerfriendly! 28
  29. 29. Single presenter 29
  30. 30. Do not do it alone! 30
  31. 31. Collaborating on slides I 31
  32. 32. Collaborating on slides II • • • e-mail? shared drive? ... not good! 32
  33. 33. Merging is impossible 33
  34. 34. Solutions? 34
  35. 35. HTML5 + CSS3 + JS 35
  36. 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. 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. 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. 39. Demo 39
  40. 40. Why is it better? 40
  41. 41. It's easy to collaborate on 41
  42. 42. It's mergable 42
  43. 43. It's splittable 43
  44. 44. It's customizable 44
  45. 45. It's publishable 45
  46. 46. It's automatable 46
  47. 47. But wait... • • • • no amazing animations no beautiful transitions no layout templates can I move this text box? 47
  48. 48. Any other drawbacks? 48
  49. 49. But HTML is still... 49
  50. 50. ...a mix of content and style! 50
  51. 51. Markup is good,.. 51
  52. 52. Markdown is better! 52
  53. 53. Markdown syntax 53
  54. 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. 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. 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. 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. 58. Lists 0 .* 1 Cny ad. 0 .* 2 Gm u. 0 .* 3 Boe oz. 58
  59. 59. Numbered lists 0 .1 1 . Cny ad. 0 .2 2 . Gm u. 0 .3 3 . Boe oz. 59
  60. 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. 61. Horizontal rules 0 .* * * 1 0 .* * 2 * 0 .* * * 3 ** 0 .- - 4 0 .- - - - - - - - - - - - - - - - - - - 5 ------------------- 61
  62. 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. 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. 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. 65. Bring your own device 65
  66. 66. Markdown for slides • • 1st level header serves as slide separator Horizontal rule serves as slide content and slide notes separator 66
  67. 67. Demo 67
  68. 68. MVC I 68
  69. 69. MVC II 69
  70. 70. Any developer... 70
  71. 71. can create a converter! 71
  72. 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. 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. 74. Landslide Home page: https://github.com/adamzap/landslide “ Landslide generates a slideshow using from markdown, ReST, or textile. 74
  75. 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. 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. 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. 78. What about the images? 78
  79. 79. XML is the answer! 79
  80. 80. SVG/GraphML • • SVG can be used for free-form vector diagrams GraphML can be used for diagrams with many connected elements 80
  81. 81. Inkscape 81
  82. 82. yEd Graph Editor 82
  83. 83. Summary 83
  84. 84. Tools used • • • • • • • Shower MarkdownPad 2 Slidery v0.3 Gradle v1.8 Inkscape v0.48 yEd Graph Editor v3.11.1 Git 84
  85. 85. Look Ma... 85
  86. 86. No PowerPoint! 86
  87. 87. Reading material 87
  88. 88. Book: Presentation Patterns 88
  89. 89. Book: HTML5 for Masterminds 89
  90. 90. Questions? 90

×