Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Writing For The Web

76c99937a15274efb23b04361cc29ee0?s=47 Will Moyer
June 08, 2013

Writing For The Web

## Tools

### Online
- http://daringfireball.net/projects/markdown/dingus
- https://draftin.com/
- http://www.aaronsw.com/2002/html2text/
- http://dillinger.io/
- http://www.ctrlshift.net/project/markdowneditor/
- http://markdownlivepreview.com/
- http://markable.in/
- http://johnmacfarlane.net/pandoc/try/

### Mac & iOS
- http://bywordapp.com/
- http://iawriter.com/
- http://markedapp.com/
- http://www.literatureandlatte.com/index.php
- http://brettterpstra.com/projects/nvalt/
- http://quoteunquoteapps.com/highland/
- http://www.texts.io/
- http://brettterpstra.com/ios-text-editors/

### Windows
- http://writemonkey.com/index.php
- http://code52.org/DownmarkerWPF/
- http://www.literatureandlatte.com/index.php
- http://www.texts.io/
- http://markdownpad.com/
- http://resoph.com/ResophNotes/Welcome.html
- https://github.com/revolunet/sublimetext-markdown-preview#readme

## References

### Word Documents vs Plain Text

- http://en.wikipedia.org/wiki/Doc_(computing)#Specification
- http://en.wikipedia.org/wiki/Office_Open_XML
- http://ricardo.ecn.wfu.edu/~cottrell/wp.html
- http://matthewlowes.com/2011/10/08/plain-text-for-writers-part-i-an-argument-for-the-use-of-plain-text/
- http://bettermess.com/a-plain-text-primer/
- http://www.macworld.com/article/1161549/forget_fancy_formatting_why_plain_text_is_best.html

### Semantics

- http://en.wikipedia.org/wiki/Separation_of_presentation_and_content
- https://en.wikipedia.org/wiki/Semantic_HTML
- http://alistapart.com/article/separationdilemma

### HTML & CSS

- https://developer.mozilla.org/en-US/
- http://www.dontfeartheinternet.com/
- http://learn.shayhowe.com/html-css/
- http://learnlayout.com/
- http://learncss.tutsplus.com/
- http://www.codecademy.com/tracks/web

### Markdown

- http://en.wikipedia.org/wiki/Markdown
- http://daringfireball.net/projects/markdown/basics
- http://brettterpstra.com/2011/08/31/why-markdown-a-two-minute-explanation/
- http://bettermess.com/markdown-and-the-language-of-the-web/
- http://www.tuaw.com/markdown-primer
- http://readwrite.com/2012/04/17/why-you-need-to-learn-markdown

76c99937a15274efb23b04361cc29ee0?s=128

Will Moyer

June 08, 2013
Tweet

Transcript

  1. Writing For The Web

  2. Will Moyer Designer Writer Microsoft Word Hater

  3. Workflows What’s your process?

  4. That’s just how I’ve always done it.

  5. ??? ???

  6. “Workflow is understanding your job, understanding your tools, and then

    not thinking about it any more.” —Merlin Mann
  7. Low Friction Preservable Presentation Control Versatile Transferable Accessible

  8. Word is a four letter word.

  9. Proprietary Software Word Imperfect

  10. None
  11. Word Imperfect Proprietary Software Conflates Form & Content WYSIWYG Bad

    At Its Job
  12. None
  13. None
  14. “The word processor is a stupid and grossly inefficient tool

    for preparing text for communication with others. ” —Allin Cottrell
  15. “I love emailing Microsoft Word documents back and forth with

    my client.” —No One Ever
  16. Plain Text An elegant weapon for a more civilized age.

  17. ASCII (and you shall receive) Nobody Owns It Just Compose

    No Hidden Formatting So Many Tools!
  18. “Plain text is fast. It’s portable. It’s easy to edit

    and easy to sync. All you need is a few helpers and you can write just about anything without depending on a word processor or the limitations it imposes.” —Brett Terpstra
  19. What about how it looks?

  20. Digital Your content is everywhere!

  21. Do You Feel In Control? TVs, Laptops, Tablets, Phones Infinite

    Screen Sizes Browsers and Apps And the future…
  22. SEMANTICS

  23. HTML The building blocks of the web.

  24. <html> <body> <h1>Writing For The Web</h1> <p>Here’s a paragraph. You

    can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>
  25. But I don’t wanna write HTML :(

  26. <html> <body> <h1>Writing For The Web</h1> <p>Here’s a paragraph. You

    can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>
  27. CSS

  28. body { font-family: sans-serif; text-align: center; } h1 { font-size:

    54px; color: gray; margin-top: 44px; } p { font-size: 18px; }
  29. <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Writing For The

    Web</h1> <p>Here’s a paragraph. You can tell because there are “p” tags on either side denoting what kind of content this is.</p> <p>If it wasn’t for these tags, there’d be <em>nothing</em> to indicate a difference between the title and the text.</p> </body> </html>
  30. Markdown Your new favorite tool.

  31. # Writing For The Web This is Markdown. Look how

    much more readable it is than HTML. Markdown gives us the benefits of plain text, while still allowing for semantic markup, because Markdown can be converted into *everything* .