Developer-friendly presentations
90
Developer-Friendly Presentations 01
-
Upload
aestas-it -
Category
Technology
-
view
1.205 -
download
0
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 collaborate
Transcript of Developer-friendly presentations
Developer-FriendlyPresentations
01
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
This talk is NOT about
making effective and successful presentations
improving your sales and marketing processes
PowerPoint/Keynote tips and tricks
•••
03
This talk IS about
using development-like approach to creating presentations
colloborating during presentation authoring
separating presentation content and design
•••
04
What is presentation?
05
Everyonedoes 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.
Winston Churchill“
08
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
Lifesaver
10
Rules11
6x6
12
10-20-30
13
Slideware
14
IsPowerPoint...
15
Good or Bad?16
PowerPoint UI
17
Keynote UI
18
OpenOffice Impress UI
19
LibreOffice Impress UI
20
Problems21
PowerPoint isa sales tool!
22
10% - 80% - 10%
23
UI is focused on
style
animations
layout
•••
24
It drives youaway from...
25
...the mostimportant
part...26
CONTENT!!!27
It's notdeveloper-friendly!
28
Single presenter
29
Do not do italone!
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/articles/slideous/
S5 - http://goessner.net/articles/slideous/
S9 - http://slideshow-s9.github.io/
••••
36
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
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
Demo39
Why is itbetter?
40
It's easy tocollaborate
on41
It's mergable42
It's splittable43
It'scustomizable
44
It'spublishable
45
It'sautomatable
46
But wait...
no amazing animations
no beautiful transitions
no layout templates
can I move this text box?
••••
47
Any otherdrawbacks?
48
But HTML isstill...
49
...a mix ofcontent and
style!50
Markup isgood,..
51
Markdown isbetter!
52
Markdownsyntax
53
Headers
# This is an H1
## This is an H2
###### This is an H6
01.
02.
03.
04.
05.
54
Headers
A First Level Header
====================
A Second Level Header
---------------------
This is just a regular paragraph.
01.
02.
03.
04.
05.
06.
07.
55
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
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
Lists
* Candy.
* Gum.
* Booze.
01.
02.
03.
58
Numbered lists
1. Candy.
2. Gum.
3. Booze.
01.
02.
03.
59
Code blocks
This is a normal paragraph:
println "This is a code block.";
01.
02.
03.
60
Horizontal rules
* * *
***
*****
- - -
---------------------------------------
01.
02.
03.
04.
05.
61
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
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
Images
01.
02.
03.
64
Bring yourown device65
Markdown for slides
1st level header serves as slide separator
Horizontal rule serves as slide content and slide notes separator
••
66
Demo67
MVC I
68
MVC II
69
Anydeveloper...
70
can create aconverter!
71
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
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
Landslide
Home page: https://github.com/adamzap/landslide
Landslide generates a slideshow using from markdown, ReST, or
textile.“74
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
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
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
What aboutthe images?
78
XML is theanswer!
79
SVG/GraphML
SVG can be used for free-form vector diagrams
GraphML can be used for diagrams with many connected elements
••
80
Inkscape
81
yEd Graph Editor
82
Summary83
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
NoPowerPoint!
86
Readingmaterial
87
Book: Presentation Patterns
88
Book: HTML5 for Masterminds
89
Questions?90
