-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
executable file
·770 lines (760 loc) · 40.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Innovation in Technical Communication</title>
<meta name="description" content="keynote tcwworld India 2015">
<meta name="author" content="Tom Johnson">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<!-- favicon icons -->
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- end favicon code -->
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/beige.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<!-- these are my custom styles. remember that slide sizes scale, so try to use percentages. -->
<style>
p.alignLeft {
text-align: left;
}
span.orange, a.orange {
color: orange;
outline-color: gray;
}
div.innovation ul li {
margin-bottom:12px;
}
figcaption {
font-size:.8em;
}
p.miscItems {
font-size:1.2em;
}
.slides section h3 {
color: orange !important; outline: gray;
}
.slides img.shortened {
max-width: 80%;
max-height: 80%;
}
#upcoming-slide .label {
color: #444 !important
}
ul.credits li {
font-size: .6em;
}
</style>
<!-- Note: Make artboard sizes about 775px wide X 445px tall. If the image appears as a vertical navigation, add a class of "shortened" to the image element to reduce its size to 80% -->
</head>
<body>
<div class="reveal innovation">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1><span class="orange">Innovation</span><br/> in Technical Communication</h1>
<h3>tcworld India 2015</h3>
<p>
<small>Created by <a href="http://idratherbewriting.com">Tom Johnson</a> / <a href="http://twitter.com/tomjohnson">@tomjohnson</a></small>
</p>
<aside class="notes">
<p>- You probably know my blog at idratherbewriting.com</p>
<p>- My first time in India.</p>
<p>- First time giving this presentation</p>
<p>- Tackling most invigorating subject ever!</p>
</aside>
</section>
<section>
<h2>Keyboard Shortcuts</h2>
<table>
<tr>
<td><b>Full Screen</b></td>
<td>F</td>
</tr>
<tr>
<td><b>Next Slide</b></td>
<td>Space bar</td>
</tr>
<tr>
<td><b>Slide Notes</b></td>
<td>S</td>
</tr>
<tr>
<td><b>Thumbnail View</b></td>
<td>Esc</td>
</tr>
</table>
<p><small>View online at <a href="http://tomjohnson1492.github.io/innovation">http://tomjohnson1492.github.io/innovation</a></small><br/>
<small><i><b>Note:</b> Some slides move down instead of to the side, so use the space bar to advance slides.</i></small></p>
<aside class="notes">
<p>Congrats -- this is the speaker notes view.</p>
<p>Follow along as you like.</p>
<p>Notice the navigation arrows in the lower corner.</p>
<p>Feel free to fork this slide template.</p>
</aside>
</section>
<section>
<h2>Startup cultures encourage innovation</h2>
<img src="media/vectors/innovation_milkyway.svg" />
<aside class="notes">
<p>- In SV, every company a startup.</p>
<p>- Startups encourage innovation.</p>
<p>- Teams usually small, direction changeable.</p>
<p>- Doc is an open road, but nothing persuasive.</p>
</aside>
</section>
<section>
<blockquote cite="http://idratherbewriting.com/2015/02/18/the-genius-of-github/#comment-226950">"As to what your journey says, I think it says that all the current models of tech comm development are deeply unsatisfactory in one way or another." <br/><br/>— Mark Baker, Every Page Is Page One</blockquote>
<aside class="notes">
<p>- M. Baker evaluates my TC journey: HATS, wikis, struct. auth.</p>
<p>- As writer, you have lots of options. No standard.</p>
<p>- Tool fragmentation indicative of dissatisfaction.</p>
<p>- Why all options dissatisfying? Limiting in some way.</p>
</aside>
</section>
<section>
<h2>"Think Big Thursdays"</h2>
<img src="media/vectors/innovation_tbt.svg"/>
<aside class="notes">
<p>- Task: transition content online.</p>
<p>- Time to implement, experiment.</p>
<p>- Move the needle forward.</p>
<p>- Dream the vision without constraints of how.</p>
</aside>
</section>
<section>
<h2>Story of telegraph and telephone</h2>
<figure>
<img src="media/rasters/bellsfirsttelephone.jpg"/>
<figcaption>Bell and an early model of the telephone</figcaption>
</figure>
<aside class="notes">
<p>- Instructive to look at innovation in history.</p>
<p>- Early versions of telephone not compelling.</p>
<p>- Similar stories: netflix, wikipedia.</p>
<p>- Disruptive tech displaces mainstream.</p>
</aside>
</section>
<section>
<h2>A framework for innovation</h2>
<img src="media/vectors/innovation_disruptive.svg"/>
<aside class="notes">
<p>- Provides framework.</p>
<p>- Divides innovation into sustaining vs. disruptive.</p>
<p>- Developing technologies are sub-performant for a time.</p>
<p>- Big companies operate at diff. value markets.</p>
</aside>
</section>
<section>
<h2>Survey of innovations</h2>
<section>
<h3>Innovations with technology</h3>
<p class="miscItems">HTML5 • REST APIs • CSS media queries • oAuth • AJAX • instant search • SVG • augmented reality • Internet of Things • big data • social networks • YouTube • Bootstrap • static site generators • jQuery • YouTube • StackOverflow • Github • continuous integration • LESS & Sass • wikis
</p>
<aside class="notes">
<p>- Thriving tech innovation is unprecedented.</p>
<p>- These are just some highlights relevant to tech comm.</p>
<p>- Just trying to keep up with it all is challenging.</p>
</aside>
</section>
<section>
<h3>Innovations with ideas</h3>
<p class="miscItems">decentralization • agile • crowdsourcing • gamification • Cluetrain Manifesto (user-to-user communication) • "Everything Is Miscellaneous" • The Long Tail • semantic web • information architecture • content marketing • transparency • simplicity of design • open source • social coding
</p>
<aside class="notes">
<p>- Sometimes idea derives from tech.</p>
<p>- Web is major driver.</p>
<p>- Dave Weinberger is thought leader.</p>
</aside>
</section>
<section>
<h3>Innovations in tech comm</h3>
<p class="miscItems">information typing • minimalism • task-based documentation • topic-oriented documentation • DITA • DocOps • Every Page Is Page One • emotional language • personalization • interactive video • user-generated content • content strategy • single sourcing
</p>
<aside class="notes">
<p>- Not much innovation in tech comm.</p>
<p>- Partly, we're not engineers.</p>
<p>- Most ideas are sustaining innovations.</p>
<p>- Tech comm follows path <i>separate from web</i>.</p>
</aside>
</section>
</section>
<section>
<h2>Most significant innovation for TC?</h2>
<section>
<h3>Everyone is a technical writer</h3>
<img class="shortened" src="media/vectors/innovation_significant.svg"/>
<aside class="notes">
<p>- Response from Mark Baker.</p>
<p>- Definition of tech writer applies generally.</p>
<p>- Information is decentralized.</p>
<p>- People don't care about the source.</p>
</aside>
</section>
<section>
<h3>Unofficial technical writer</h3>
<img src="media/rasters/everyoneistechwriter.png"/>
<aside class="notes">
<p>- Stackoverflow surfaces constantly</p>
<p>- The model: if you don't find, ask, then next time...</p>
<p>- Shake myth that these aren't technical writers.</p>
</aside>
</section>
<section>
<h3>Job trends for "technical writer"</h3>
<img src="media/rasters/twjob_trends.png"/>
<aside class="notes">
<p>- Why do I still have a job?</p>
<p>- May only hold true for popular products in mainstream.</p>
<p>- Amount of tech in 7 years has dramatically increased, but not TW jobs.</p>
<p>- <a href="https://twitter.com/WhiteHouse/status/575045191318573057">Obama tweet</a>: There are 500k IT jobs to be filled. No jump in TW jobs?</p>
</aside>
</section>
</section>
<section>
<h2>How to stay relevant?</h2>
<img src="media/vectors/innovation_microsoft.svg"/>
<aside class="notes">
<p>- Learn from MS's failure.</p>
<p>- Why MS failed? Earnings channeled into dividends.</p>
<p>- Is tech comm like the Microsoft?</p>
<p>- Evaluate TC in each of these areas.</p>
</aside>
</section>
<section>
<h2>Dilemmas with innovation</h2>
<section>
<h4><span class="orange">How long can you operate at a sub-performing level while you do research and development?</span></h4>
<image src="media/vectors/innovation_performance.svg"/>
<aside class="notes">
<p>- Think Big Thursdays somewhat of an illusion.</p>
<p>- Requires personal time.</p>
<p>- People take tools for granted.</p>
<p>- Project mgrs expect deadlines met.</p>
</aside>
</section>
<section>
<h4><span class="orange">How can you switch models when you're mired in legacy content and systems?</span></h4>
<image src="media/vectors/innovation_legacy.svg"/>
<aside class="notes">
<p>- Startup environments advantageous.</p>
<p>- Do pilot projects to experiment.</p>
<p>- Difficulty of switching tooling at Badgeville.</p>
<p>- Leave legacy content in legacy format.</p>
</aside>
</section>
<section>
<h4><span class="orange">How can you build anything if you're not really an engineer?</span></h4>
<img src="media/vectors/innovation_notanengineer.svg"/>
<aside class="notes">
<p>- Hard to be innovative without strong tech bg.</p>
<p>- Quickly run up against technical limitations.
<p>- This is why tech comm is slow to innovate.</p>
<p>- End up dependent on vendors for innovation.</p>
</aside>
</section>
<section>
<h4><span class="orange">What happens to your career skillset when you invest in an obscure technology?</span></h4>
<image src="media/vectors/innovation_skillset.svg"/>
<aside class="notes">
<p>- The tools you know land you the job.</p>
<p>- Companies want you to plug into <i>their</i> tools.</p>
<p>- Don't have unlimited time for learning.</p>
</aside>
</section>
</section>
<section>
<h2>Pressure to conform to mainstream</h2>
<img src="media/vectors/innovation_pressure.svg"/>
<aside class="notes">
<p>- Lots of pressure to conform to mainstream.</p>
<p>- Wanted to learn DITA to stay competitive.</p>
<p>- Created 30 best practices for team.</p>
<p>- Required skillset for many jobs</p>
</aside>
</section>
<section>
<h2>So many limitations</h2>
<img src="media/rasters/navtabs.png"/>
<aside class="notes">
<p>- Wanted more: navtab, mini-TOC, faceted filtering, show/hide sections, side panes.</p>
<p>- Import into WP works but WP fails.</p>
<p>- Navtabs = particularly frustrating; not very flexible.</p>
<p>- Some good parts: text editor, filtering, OxygenXML.</p>
</aside>
</section>
<section>
<h2>XML and the web: Drifting apart?</h2>
<section>
<h3>JSON is standard</h3>
<img class="shortened" src="media/vectors/innovation_json.svg"/>
<aside class="notes">
<p>- JSON overtook XML as comm. protocol.</p>
<p>- Reverberates through web stack.</p>
<p>- Not a lot of UX people want to work with XML.</p>
<p>- API doc space involves devs contributing.</p>
</aside>
</section>
<section>
<h3>Technologies used by web developers</h3>
<img class="shortened" src="media/rasters/webtechnologies.png"/>
<aside class="notes">
<p>- Example from B. Colborn, from N. Kaplan.</p>
<p>- Markdown is really popular and preferable.</p>
<p>- Number of web development tools exploding.</p>
</aside>
</section>
</section>
<section data-transition="convex">
<h2>The turning point</h2>
<img class="shortened" src="media/vectors/innovation_turningpoint.svg"/>
<aside class="notes">
<p>- Tech comm a speck on the map by comparison.</p>
<p>- Need to look outside tech comm bubble.</p>
<p>- Tech comm momentum will never keep pace with web.</p>
</aside>
</section>
<section>
<h2>The genius of Github and open source</h2>
<section>
<h3>Collaborate, version, distribute</h3>
<img class="shortened" src="media/rasters/github.png"/>
<aside class="notes">
<p>- In addition to tech, methods for dev differ.</p>
<p>- Default code repository for projects.</p>
<p>- Use git as the revision control software.</p>
</aside>
</section>
<section>
<h3>Revolutionary for software development</h3>
<blockquote>
"Github, in my humble opinion, is one of the most revolutionary things that has happened to software in 20 years." <br /><br />— Joe Malin
</blockquote>
<aside class="notes">
<p>- Living code samples (get updates locally). </p>
<p>- Complete transparency into code.</p>
<p>- Ability to distribute, fork.</p>
</aside>
</section>
<section>
<h3>"Social coding"</h3>
<img class="shortened" src="media/vectors/innovation_github.svg"/>
<aside class="notes">
<p>- Code no longer static, isolated -- social.</p>
<p>- One dev takes over when wants to add feature.</p>
<p>- Open source code collaboration.</p>
</aside>
</section>
<section>
<h3>What if everyone's help were in an open Github repo?</h3>
<img class="shortened" src="media/vectors/innovation_whatif.svg"/>
<aside class="notes">
<p>- If revolutionary for software, why not revolutionary for tech comm?</p>
<p>- No reason why the model couldn't work.</p>
<p>- Different companies, same problems. Sharing solutions.</p>
</aside>
</section>
</section>
<section>
<h2>Treating documentation as code</h2>
<section data-background="media/vectors/innovation_code.svg">
<h3>Writing documentation like a developer</h3>
<table>
<tr>
<td><b>File format:</b></td>
<td>Text files</td>
</tr>
<tr>
<td><b>Authoring:</b></td>
<td>Text editor</td>
</tr>
<tr>
<td><b>Building:</b></td>
<td>Continuous build scripts</td>
</tr>
<tr>
<td><b>Collaborating:</b></td>
<td>Source control</td>
</tr>
<tr>
<td><b>Versioning:</b></td>
<td>Source control</td>
</tr>
<tr>
<td><b>Pushing live:</b></td>
<td>Terminal commands</td>
</tr>
</table>
<aside class="notes">
<p>- Why I hate Confluence's rich text editor.</p>
<p>- Using DITA with Oxygen was first exposure.</p>
<p>- No need for CMS; discussion at TC Camp unconference</p>
</aside>
</section>
<section data-background="media/vectors/innovation_code.svg">
<h3>This slidedeck is just HTML5.</h3>
<p>Here's the code for this slide:</p>
<pre><code>
<section>
<h3>This slidedeck is just HTML5.</h3>
<p>Here's the code for this slide:</p>
<p>Github repo: <a target="_blank" href="https://github.com/tomjohnson1492/innovation/">
https://github.com/tomjohnson1492/innovation/</a></p>
<p><i>So much more satisfying to work in text
file formats.</i></p>
</section>
</code></pre>
<p>Github: <a target="_blank" href="https://github.com/tomjohnson1492/innovation/">https://github.com/tomjohnson1492/innovation/</a></p>
<p><i>So much more satisfying to work in text-file formats.</i></p>
<aside class="notes">
<p>- Reinforces my decision to treat doc as code.</p>
<p>- Simpler, yes, but more free.</p>
<p>- Hope to never use PPT again.</p>
<p>- You can fork my presentation, using as template.</p>
<p>- People build on each other's work.</p>
</aside>
</section>
</section>
<section>
<h2>Disruptive tech: Static site generators</h2>
<section>
<h3>Lightweight, flexible, no database</h3>
<img class="shortened" src="media/rasters/staticgen.png"/>
<aside class="notes">
<p>- Conversation at ICC - Docpad, Jekyll users.</p>
<p>- Tech works using command line.</p>
<p>- Fits well into the API doc space.</p>
<p>- 50 options but most work similarly</p>
<p>- Author in Markdown, which is glorious.</p>
</aside>
</section>
<section><h3>Static site generator characteristics</h3>
<ul>
<li>Lightweight</li>
<li>Fast</li>
<li>Usable</li>
<li>Flexible</li>
<li>Secure</li>
<li>Suitable for hackers</li>
</ul>
<aside class="notes">
<li> <b>Lightweight.</b> No database — output is just static files.</li>
<li><b>Fast.</b> As static, pre-built files, pages load < 1 second.</li>
<li><b>Usable.</b> Write in Markdown. Add HTML or JS as needed.</li>
<li><b>Flexible.</b> Complete control to define entire site.</li>
<li><b>Secure.</b> As static files, very secure. </li>
<li><b>Suitable for hackers.</b> Treat content just like code.</li>
</aside>
</section>
<section>
<h3>Jekyll is most popular</h3>
<img class="shortened" src="media/rasters/jekyll.png"/>
<aside class="notes">
<p>- Preview mode to see changes in browser.</p>
<p>- Uses Liquid templating language for advanced logic.</p>
<p>- Used in major sites: getbootstrap.com, healthcare.gov, more.</p>
</aside>
</section>
<section>
<h3>Live preview rebuilds with each save</h3>
<img class="shortened" src="media/rasters/livepreview.png"/>
<aside class="notes">
<p>- Live preview allows you to see</p>
<p>- Build time is under 2 seconds</p>
<p>- No need for MD editor w/ split view</p>
<p>- DITA not only tech for cond. filtering</p>
</aside>
</section>
<section>
<h3>Documentation theme I built on Jekyll</h3>
<figure>
<img class="shortened" src="media/rasters/jekylldoctheme.png"/>
<figcaption><small>Clone me here: <a href="http://tomjohnson1492.github.io/documentation-theme-jekyll/">http://tomjohnson1492.github.io/documentation-theme-jekyll/</a></small></figcaption>
</figure>
<aside class="notes">
<p>- Used Bootstrap framework and jQuery plugins.</p>
<p>- Vanilla theme starts simple, then grow complexity.</p>
<p>- Liquid allows you to do all DITA functionality + more.</p>
</aside>
</section>
</section>
<section>
<h2>
5 reasons why static site generators can be a disruptive technology</h1>
<img src="media/vectors/innovation_12345.svg"/>
</section>
<section>
<h2>Reason 1: Snug fit into web technologies</h2>
<section>
<h3>HTML, JS, CSS</h3>
<img class="shortened" src="media/rasters/htmljscss.png"/>
<aside class="notes">
<p>- Can't rely on UX. Tooling accessible even to non-UX.</p>
<p>- These three are basics of everything on web.</p>
<p>- So many resources online to learn.</p>
</aside>
</section>
<section>
<h3>Bootstrap</h3>
<img class="shortened" src="media/rasters/bootstrap.png"/>
<aside class="notes">
<p>- The bootstrap grid -- makes responsive design easy.</p>
<p>- Whole templates built on Bootstrap.</p>
<p>- Add new components like magic with styles</p>
<p>- Lots of JS Fiddles showing how-tos, e.g., collapsible section. </p>
</aside>
</section>
<section>
<h3>jQuery</h3>
<img class="shortened" src="media/rasters/jquery.png"/>
<aside class="notes">
<p>- jQuery plugins for everything -- selecting, filtering, animating.</p>
<p>- Know enough jQuery to integrate & world expands.</p>
<p>- In my Jekyll theme, jQuery for sidebar, drop-downs, mini-TOCs, expand/collapse.</p>
</aside>
</section>
<section>
<h3>Markdown</h3>
<img src="media/rasters/markdown.jpg"/>
<aside class="notes">
<p>- A ton of web dev tools process Markdown.</p>
<p>- Simple way to express HTML. </p>
<p>- No tags to get in the way, so it's very readable even in code editor.</p>
<p>- Where you fall short, use HTML, just be careful of spacing.</p>
</aside>
</section>
<section>
<h3>UX talent will help when platform is web</h3>
<img class="shortened" src="media/vectors/innovation_ux.svg"/>
<aside class="notes">
<p>- Experience in working w/ Alan. His tools: Esprima, Gulp, Parse.js., Estraverse, Grunt.</p>
<p>- Response to using XML? Make easy to extract content.</p>
<p>- Extensive doc portal solutions require UX skillset.</p>
</aside>
</section>
</section>
<section data-background="media/vectors/innovation_scalability.svg"/>
<h2>Reason #2: Scale infinitely</h2>
<section>
<h3>Grow as needed without budget constraints</h3>
<ul>
<li>Allow unlimited number of authors.</li>
<li>No price per "seat."</li>
<li>Avoid free-for-all content junkyard of wikis.</li>
<li>Handle any type of content.</li>
</ul>
<aside class="notes">
<p>- Main criticisms: Static site gens work only for small projects.</p>
<p>- Acknowledgment: Could be true. But consider scalability of Wikipedia.</p>
<p>- No need to create fancy specializations for custom content types.</p>
</aside>
</section>
<section>
<h3>Allows everyone to be a tech writer</h3>
<img class="shortened" src="media/vectors/innovation_allcontribute.svg"/>
</section>
<section>
<blockquote><i>One person writing from one perspective in one company, especially an outsider to the actual business context of the user, can't possibly cover all the information needs for every user.</i></blockquote>
</section>
</section>
<section>
<h2>Reason #3: Content APIs</h2>
<section>
<h3>Growth in REST APIs</h3>
<img class="shortened" src="media/rasters/webapigrowth.png"/>
<aside class="notes">
<p>- Websites are more than standalone pieces of content. </p>
<p>- Everything is a mashup now.</p>
<p>- Avg web developer works with 8-10 APIs per site.</p>
<p>- Web is expanding into a true intertangled, interwoven web.</p>
<p>- </p>
</aside>
</section>
<section>
<h3>Healthcare.gov site as API</h3>
<a href="https://www.healthcare.gov/developers/"><img src="media/rasters/healthcaregov.png"/></a>
<aside class="notes">
<p>- Totally new concept.</p>
<p>- Principles of open data, universal access.</p>
<p>- An idea still developing.</p>
</aside>
</section>
<section>
<h3>Why not create help content APIs?</h3>
<img class="shortened" src="media/vectors/innovation_helpapi.svg"/>
<aside class="notes">
<p>- Push content into JSON format.</p>
<p>- Allow apps to pull in where needed. </p>
<p>- Easy way to control in-app help.</p>
<p>- Put help in exact spot where needed.</p>
</aside>
</section>
<section>
<h3>Populate UI text dynamically from API</h3>
<a href="http://tomjohnson1492.github.io/documentation-theme-jekyll/tooltip_demo">
<img class="shortened" src="media/rasters/tooltipdemo.png"/>
</a>
<aside class="notes">
<p>- Devs just code IDs in places.</p>
<p>- Must enable CORS on your domain.</p>
<p>- Counterargument: Lacks scope of a web search w/ many results.</p>
<p>- Rebuttal: In ideal scenarios, avoid search scenarios altogether.
</aside>
</section>
</section>
<section>
<h2>Reason #4: Push content into templates</h2>
<section>
<h3>Custom templates for custom content types</h3>
<img class="shortened" src="media/vectors/innovation_separation.svg"/>
<aside class="notes">
<p>- Single sourcing paradigm already familiar.</p>
<p>- Take it one step further: define the formats/structures you want.</p>
<p>- Push to JSON, CSV, API doc, other.</p>
</aside>
</section>
<section>
<h3>Iterate through items</h3>
<pre><code>
{
"entries":
[
{% for page in site.tooltips %}
{
"id" : "{{ page.id }}",
"body": "{{ page.content | strip_newlines | replace: '\', '\\\\' |
replace: '"', '\\"' }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
]
}
</code></pre>
<aside class="notes">
<p>- <code>for</code> loop iterates through content.</p>
<p>- With each item in set, puts <code>id</code> & <code>body</code> here.</p>
<p>- This is Liquid templating language.</p>
<p>- Do similar tactic for CSV and Salesforce.</p>
</aside>
</section>
</section>
<section>
<h2>Reason #5: Leverage open source model</h2>
<img src="media/vectors/innovation_githubhelp.svg"/>
<aside class="notes">
<p>- This isn't so common in help authoring world.</p>
<p>- This open source model accounts for WP's success.</p>
<p>- Momentum of collaboration, sharing will outdo any other solution.</p>
</aside>
<section>
</section>
</section>
<section data-background="media/vectors/innovation_bubbles.svg"/>
<h2>My larger point:</h2>
<h3 class="fragment">Maybe not Jekyll, but ...</h3>
<h3 class="fragment">Look outside the tech comm bubble</h3>
<aside class="notes">
<p>- Not trying to convince you to adopt static site generators</p>
<p>- Point is to expand beyond TC bubble to embrace web tech.</p>
<p>- Reason: So much more momentum, resources, development.</p>
</aside>
</section>
<section data-background="media/vectors/innovation_strategies.svg">
<h2 style="vertical-align: top;">3 Strategies for innovation</h2>
<ol>
<li class="fragment">Look outside the tech comm bubble.</li>
<li class="fragment">Ride the innovation of the web.</li>
<li class="fragment">Share with the community around you. </li>
</ol>
<aside class="notes">
<p>- Tech comm technologies are a speck in the web landscape. Cross-pollinate.</p>
<p>- Follow the trends of the web with tech comm.</p>
<p>- Blog about what you do. Feedback speeds development. </p>
<p>- Even if you fail, there is serendipity (3M & post-it note glue.)</p>
</aside>
</section>
<section>
<h1>Thanks!</h1>
<section>
<h3>Contact info</h3>
<ul>
<li>Blog: <a class="orange" href="http://idratherbewriting.com">idratherbewriting.com</a></li>
<li>Twitter: <a class="orange" href="http://twitter.com/tomjohnson">@tomjohnson</a></li>
<li>GitHub for slides: <a class="orange" href="https://github.com/tomjohnson1492/innovation">github.com/tomjohnson1492/innovation</a></li>
<li> Github for Jekyll documentation theme: <a class="orange" href="http://tomjohnson1492.github.io/documentation-theme-jekyll/">http://tomjohnson1492.github.io/documentation-theme-jekyll/</a>
<li> Email: <a class="orange" href="mailto:tomjohnson1492@gmail.com">tomjohnson1492@gmail.com</a></li>
</ul>
</section>
<section>
<h3>Credits</h3>
<ul class="credits">
<li>Read the innovation series on my blog, <a href="http://idratherbewriting.com/series/innovation-in-tech-comm/">http://idratherbewriting.com/series/innovation-in-tech-comm/</a></li>
<li>Slide framework from Reveal JS</li>
<li>Some vectors come from Vecteezy.com</li>
<li>Mark Baker quote, from comment thread at <a href="http://idratherbewriting.com/2015/02/18/the-genius-of-github/#comment-226950">The genius of Github and its ability to transform tech comm</a></li>
<li>Joe Malin quote, from <a href="http://idratherbewriting.com/2015/02/18/the-genius-of-github/">The genius of Github and its ability to transform tech comm</a></li>
<li>Theory of Disruptive Innovation, Clay Christiansen. <i>The Innovator's Dilemma</i></li>
<li>The graph of disruptive innovation. <a href="http://dltj.org/article/disruptive-innovation-card/">Pocket-sized Graph of the Theory of Disruptive Innovation</a></li>
<li>Bell and an early model of the telephone, <a href="http://en.wikipedia.org/wiki/Invention_of_the_telephone#mediaviewer/File:Actor_portraying_Alexander_Graham_Bell_in_an_AT%26T_promotional_film_(1926).jpg
">Wikipedia</a></li>
<li>REST API Trends graph, <a href="http://www.slideshare.net/fullscreen/programmableweb/web-api-growthsince2005/1
">Programmableweb.com</a></li>
<li>Microsoft is very interesting again -- very, by Jason Calicanus. <a href="https://www.linkedin.com/pulse/microsoft-interesting-again-very-jason-calacanis">Linkedin</a></li>
</ul>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: false,
slideNumber: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>