Creating Spectacular Documentation

23
http://podfeet.com Creating Spectacular Documentation Allison Sheridan November 2012 1 Sunday, November 25, 12

description

Delivered on MacMania 15 in Australia, this talk starts with built-in tools on the Mac to take screenshots, works up to 3rd party tools for screenshots with annotations and finishes with 3rd party tools to add text and annotations to screencaptures to create tutorials and manuals.

Transcript of Creating Spectacular Documentation

Page 1: Creating Spectacular Documentation

http://podfeet.com

Creating Spectacular Documentation

Allison SheridanNovember 2012

1Sunday, November 25, 12

Page 2: Creating Spectacular Documentation

http://podfeet.com

What Kind of Documentation?Send email to my friend to help them with their computerShow a software developer a bug in their softwareAsk for clarification on how a site or application worksHow-to’s for your co-workersAdvanced tutorialsFull blown manuals on documenting your web service or software application

full

spe

ctr

um

2Sunday, November 25, 12

Page 3: Creating Spectacular Documentation

http://podfeet.com

Let’s Star t with Simple ScreenshotsApple has a built in screenshot tool

⌘-shift-3 to take a shot of the entire screen, and save to the desktop

⌘-shift-4 gives you cross-hairs to get just part of the screen (and save to the desktop)

Adding control to the mix (⌘-shift-control-4) keeps the screenshot in the clipboard instead for easy pasting

Use the space bar to any of these to capture an exact window - with a (giant) drop shadow

3Sunday, November 25, 12

Page 4: Creating Spectacular Documentation

http://podfeet.com

Grab is Built in TooDon’t like all those weird keystrokes?Try the Grab UtilityEasy pull-down menus

Selection, Window, ScreenEven timed screenshotsHandy capturing drop down menus

You can even have cute pointers in the shot!Either method of screenshot capture is greatfor dropping a simple picture into an email

4Sunday, November 25, 12

Page 5: Creating Spectacular Documentation

http://podfeet.com

Take Up Your Game with SkitchSometimes a simple screenshot isn’t enough - you need to point at a checkbox or encircle a menu nameTry Skitch from Evernote

Free at evernote.com/skitch/It’s even available for iOS & Android!

Fullscreen, area snap, even use youriSight CameraCapture pull down menus on a timerExport options include png, jpg, tiff,gif or even bmp from Windows

5Sunday, November 25, 12

Page 6: Creating Spectacular Documentation

http://podfeet.com

Skitch’s Many Advanced FeaturesAnnotate your shots

Lines, arrows, circles, rectangles,rounded rectangles, ovals,add text, pixelate sensitive info

ShareOnline servicesLocal storageShare image urls from Evernote

Skitch stores all your images inEvernote automatically

6Sunday, November 25, 12

Page 7: Creating Spectacular Documentation

http://podfeet.com

Jing - Does Flash Videos TooJing does simple screen capture much like Skitch but does Flash Video too...if you like that sort of thingFree for Mac and Windows from techsmith.com/jing.htmlJing hovers on the edge of your window awaiting youSelect the area, then decide if you wanta screenshot or a videoFor images you can annotate with arrows,text, rectangles or linesVideos limited to 5 minShare to Screencast.com

7Sunday, November 25, 12

Page 8: Creating Spectacular Documentation

http://podfeet.com

I Want to Do More!

8Sunday, November 25, 12

Page 9: Creating Spectacular Documentation

http://podfeet.com

My Life Before I used to use Microsoft® Word for documentation

I used to hate my jobTake a screenshot, paste it into Word

Text moves randomly around the imageI began to hate that stupid dog

I’d try to move the image - jump to the endI turned to drink...

9Sunday, November 25, 12

Page 10: Creating Spectacular Documentation

http://podfeet.com

What Changed? Two applications arrived on the scene

First ScreenSteps for creating full manualsThen Clarify for making single page instructions

How are they different from using Word?Designed to make you happy while you createDesigned to make your customer happyDesigned to help you go quicklyDesigned to make you look like a geniusDesigned to lower your support costs & time

10Sunday, November 25, 12

Page 11: Creating Spectacular Documentation

http://podfeet.com

Here’s Problems You Can Solve Your father-in-law wants to know how to keep his printer showing in the dockYour daughter wants the Emoji keyboard on her iPhoneYour dentist wants to know how you type his name René with the accentYou want to remember how to partition a drive so it can be a bootable backup

Answer questions once.

11Sunday, November 25, 12

Page 12: Creating Spectacular Documentation

http://podfeet.com

Is it Hard to Keep Them Up to Date?Editing documentation is normally a real painEditing ScreenSteps and Clarify is incredibly easyWhen a menu changes, you can replace the image very easily, adjust annotations and republishRepublishing can be

Updating a WordPress pageCreating a new PDFEven creating a new Word version

Enough teasing...let’s play!

Both ScreenSteps & Clarify are from bluemangolearning.com

12Sunday, November 25, 12

Page 13: Creating Spectacular Documentation

http://podfeet.com

Clarify...with ClarifyClarify is for short form problems where you need to clarify something

$30 in the Mac App Store, or $40 for a cross-platform Windows/Mac version from the website

Publish documents to clarify-it.com so you can send just a link instead of a giant fileExport to PDF to email or saveExport to Rich Text Format tothe clipboard for easy pastinginto an email or other fileEven export to Evernote!

13Sunday, November 25, 12

Page 14: Creating Spectacular Documentation

http://podfeet.com

Getting Star ted with ClarifyClarify creates multi-step lessonsStart by using the camera icon to take the shot

Automatically names the step the name of the captured window

Or use the + button to add a step and then paste in a screenshot or an image you already haveThe number next to the camera allows timed screenshots with up to 8 seconds delayYou can easily replace an image with the switcheroo camera

14Sunday, November 25, 12

Page 15: Creating Spectacular Documentation

http://podfeet.com

Star t Annotating

Annotation toolsArrows, boxes, ovalsHighlighterText notationsBlur confidential info (yay!)The money card is sequence numbers

Clarify the order of steps on a screen using sequence numbersAdd text in a numbered list

15Sunday, November 25, 12

Page 16: Creating Spectacular Documentation

http://podfeet.com

Format to Your Hear t’s Desire

Change fill colors, border colorsChange line thickness and opacityChange fontsChange arrow headsChange blur opacityChange highlight opacity

16Sunday, November 25, 12

Page 17: Creating Spectacular Documentation

http://podfeet.com

The Big Daddy - ScreenStepsScreenSteps Desktop Standard is $40, Pro is $80 ScreenSteps is made to create professional documentation for a software tool or a website

Create Lessons, organize Lessons into ManualsShare documentation tasks between team membersPost online help filesPublish to WordPress, Movable Type, TypePad, Squarespace, BloggerAll tutorials on podfeet.com were made using ScreenSteps

17Sunday, November 25, 12

Page 18: Creating Spectacular Documentation

http://podfeet.com

ScreenSteps Library

ScreenSteps is flexible to your needsShort Lessons with a few StepsLong form Manuals

ChaptersLessonsSteps

18Sunday, November 25, 12

Page 19: Creating Spectacular Documentation

http://podfeet.com

Tag or Lesson View

19Sunday, November 25, 12

Page 20: Creating Spectacular Documentation

http://podfeet.com

Creating LessonsCapture toolInsert real linksEnter instructionsBulleted/NumberedListsAnnotateSet review level toNot Finished, NeedsReview, or ApprovedExport to your heart’s content!

20Sunday, November 25, 12

Page 21: Creating Spectacular Documentation

http://podfeet.com

Additional Advantages of ScreenStepsRearrange steps with the InspectorFloating window for the screen capture toolUse any screen capture tool you like - shot will pop right into ScreenSteps lesson

Use Clipboard button look to see if it’s pulsing More template options - Word and PDFExport options well beyond Clarify

21Sunday, November 25, 12

Page 22: Creating Spectacular Documentation

http://podfeet.com

What Have We LearnedThere’s built-in tools to capture simple screenshots There’s freeware tools to capture screenshots and annotate themThere’s freeware tools to capture short videos (but you’ll be no Don McAllister)There’s paid for applications to help you help co-workers, friends and familyThere’s paid for applications to help you build full scale documentation for your work

22Sunday, November 25, 12