Developer-friendly presentations

Developer-FriendlyPresentations

01

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

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