Developer-friendly presentations
-
Upload
aestas-it -
Category
Technology
-
view
1.203 -
download
0
description
Transcript of Developer-friendly presentations
![Page 1: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/1.jpg)
Developer-FriendlyPresentations
01
![Page 2: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/5.jpg)
What is presentation?
05
![Page 6: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/6.jpg)
Everyonedoes it!
06
![Page 7: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/10.jpg)
Lifesaver
10
![Page 11: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/11.jpg)
Rules11
![Page 12: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/12.jpg)
6x6
12
![Page 13: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/13.jpg)
10-20-30
13
![Page 14: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/14.jpg)
Slideware
14
![Page 15: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/15.jpg)
IsPowerPoint...
15
![Page 16: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/16.jpg)
Good or Bad?16
![Page 17: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/17.jpg)
PowerPoint UI
17
![Page 18: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/18.jpg)
Keynote UI
18
![Page 19: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/19.jpg)
OpenOffice Impress UI
19
![Page 20: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/20.jpg)
LibreOffice Impress UI
20
![Page 21: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/21.jpg)
Problems21
![Page 22: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/22.jpg)
PowerPoint isa sales tool!
22
![Page 23: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/23.jpg)
10% - 80% - 10%
23
![Page 24: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/24.jpg)
UI is focused on
style
animations
layout
•••
24
![Page 25: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/25.jpg)
It drives youaway from...
25
![Page 26: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/26.jpg)
...the mostimportant
part...26
![Page 27: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/27.jpg)
CONTENT!!!27
![Page 28: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/28.jpg)
It's notdeveloper-friendly!
28
![Page 29: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/29.jpg)
Single presenter
29
![Page 30: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/30.jpg)
Do not do italone!
30
![Page 31: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/31.jpg)
Collaborating on slides I
31
![Page 32: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/33.jpg)
Merging is impossible
33
![Page 34: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/34.jpg)
Solutions?34
![Page 35: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/35.jpg)
HTML5 +CSS3 + JS
35
![Page 36: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/39.jpg)
Demo39
![Page 40: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/40.jpg)
Why is itbetter?
40
![Page 41: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/41.jpg)
It's easy tocollaborate
on41
![Page 42: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/42.jpg)
It's mergable42
![Page 43: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/43.jpg)
It's splittable43
![Page 44: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/44.jpg)
It'scustomizable
44
![Page 45: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/45.jpg)
It'spublishable
45
![Page 46: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/46.jpg)
It'sautomatable
46
![Page 47: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/48.jpg)
Any otherdrawbacks?
48
![Page 49: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/49.jpg)
But HTML isstill...
49
![Page 50: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/50.jpg)
...a mix ofcontent and
style!50
![Page 51: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/51.jpg)
Markup isgood,..
51
![Page 52: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/52.jpg)
Markdown isbetter!
52
![Page 53: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/53.jpg)
Markdownsyntax
53
![Page 54: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/58.jpg)
Lists
* Candy.
* Gum.
* Booze.
01.
02.
03.
58
![Page 59: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/61.jpg)
Horizontal rules
* * *
***
*****
- - -
---------------------------------------
01.
02.
03.
04.
05.
61
![Page 62: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/65.jpg)
Bring yourown device65
![Page 66: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/67.jpg)
Demo67
![Page 68: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/68.jpg)
MVC I
68
![Page 69: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/69.jpg)
MVC II
69
![Page 70: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/70.jpg)
Anydeveloper...
70
![Page 71: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/71.jpg)
can create aconverter!
71
![Page 72: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/78.jpg)
What aboutthe images?
78
![Page 79: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/79.jpg)
XML is theanswer!
79
![Page 80: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/81.jpg)
Inkscape
81
![Page 82: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/82.jpg)
yEd Graph Editor
82
![Page 83: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/83.jpg)
Summary83
![Page 84: Developer-friendly presentations](https://reader033.fdocuments.us/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.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/85.jpg)
Look Ma...85
![Page 86: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/86.jpg)
NoPowerPoint!
86
![Page 87: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/87.jpg)
Readingmaterial
87
![Page 88: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/88.jpg)
Book: Presentation Patterns
88
![Page 89: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/89.jpg)
Book: HTML5 for Masterminds
89
![Page 90: Developer-friendly presentations](https://reader033.fdocuments.us/reader033/viewer/2022052904/557ae334d8b42a63778b51ab/html5/thumbnails/90.jpg)
Questions?90