Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,927 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
no profile picture user

  • Be the first to comment

Show More

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

×