The Battle for the Body Field

The Battle for the Body Field

A deep dive into the problem of semi-structured content, lessons form the technical communications community, and a plan for WYSIWYG editors that don't break the web site. Originally presented at DrupalCon 2014 in Austin, video available at: https://www.youtube.com/watch?v=9BwufXmG-yE

71102c81b6c5a5f88ddd21d29fd093b3?s=128

Jeff Eaton

June 04, 2014
Tweet

Transcript

  1. The Battle For The Body Field Fighting the right battles

    Solving the right problems Building the right tools 1 @eaton : #drupalcon : #bodybattle : 4/6/2014
  2. 2 ©2014 Randy Heinitz : https://www.flickr.com/photos/rheinitz/12215449286

  3. THE WYSIWYG WARS 3 Ugly markup Lazy editors Markdown Easy

    Clean markup Markup Literacy Real HTML Hard
  4. THE WYSIWYG WARS 3 Ugly markup Lazy editors Markdown Easy

    Clean markup Markup Literacy Real HTML Hard NO!
  5. ‣ Chunks vs. Blobs is insufficient ‣ HTML is insufficient

    ‣ Learn from XML, DITA ‣ Store meaning, then transform 4
  6. The Hard Problem 5

  7. 6 ©2012 Donnie Nunley : https://www.flickr.com/photos/dbnunley/8024693442

  8. Wheeee! 7

  9. Redesigns hurt Reuse suffers Mobile breaks 8

  10. 9 <html> ☹ </html>

  11. 10 ©2009 Michael Scott : https://www.flickr.com/photos/sarahandmikeprobably/3264565204

  12. 11 Title Summary Byline Body Gallery <html> ☹ </html>

  13. 12

  14. 13 HOLD ON, CHAMP.

  15. 14 Title Summary Byline Body Gallery Miniblobs

  16. 15 Body Body Body Body Body Body Body Body Body

    Gallery?
  17. 15 Well, Shit.

  18. The Harder Problem 16

  19. ✓ Narrative text
 Reports, documentation, long-form news ✓ Islands of

    structure
 Galleries, popup info, embeds ✓ Placement that matters
 “But the gallery goes with that paragraph!” 17
  20. 18

  21. 19 19

  22. <figure class="gallery"> <ul> <li><a href="1.html"><img src="1.jpg"></a></li> <li><a href="2.html"><img src="2.jpg"></a></li> <li><a

    href="3.html"><img src="3.jpg"></a></li> </ul> <figcaption> <a href="gal.html>Our gallery!</a> </figcaption> </figure> But Semantic HTML! 20
  23. <figure class="gallery"> <ul> <li><a href="1.html"><img src="1.jpg"></a></li> <li><a href="2.html"><img src="2.jpg"></a></li> <li><a

    href="3.html"><img src="3.jpg"></a></li> </ul> <figcaption> <a href="gal.html>Our gallery!</a> </figcaption> </figure> But Semantic HTML! 20 NO!
  24. Browser meaning vs. Content meaning 21

  25. Vocabulary Mismatch Aside Section List Paragraph Citation Teaser Chapter Gallery

    Author bio Credits 22
  26. “HTML is rich enough for a designer to represent complex

    content, but not precise enough to describe and store content in a presentation-independent fashion. WYSIWYG tools can make the problem worse: rather than shielding content creators from the complexity of markup, they make it easier to describe content using the wrong vocabulary. 23 Jeff Eaton, quoting himself, because it’s his presentation
  27. 24

  28. Meanwhile, in DITA Land 25

  29. 26

  30. 27 <task id="signup"> <title>Signing up for health insurance</title> <taskbody> <steps>

    <step>List your dependents</step> <step>Gather past medical information</step> <step>Fill out forms 21a, 39b, and 92c</step> <step audience="retail"> Hand in your paperwork to a supervisor </step> <step audience="corporate"> Deliver your paperwork to the HR office </step> </steps> </taskbody> </task> <p conref="../boilerplate.xml#disclaimer"> This text will be replaced by the boilerplate legal disclaimer. </p>
  31. ‣ Model and store meaning 28

  32. ‣ Model and store meaning 28 <warning type="hardware"> Don’t turn

    off the server! </warning>
  33. ‣ Model and store meaning ‣ Extend a core vocabulary

    29
  34. ‣ Model and store meaning ‣ Extend a core vocabulary

    29 <em> <strong> <task> ! <p audience="admin"> ! <a trust="unverified">
  35. ‣ Model and store meaning ‣ Extend a core vocabulary

    ‣ Use placeholder markup 30
  36. ‣ Model and store meaning ‣ Extend a core vocabulary

    ‣ Use placeholder markup 30 <gallery id="42" caption="Our gallery!" />
  37. ‣ Model and store meaning ‣ Extend a core vocabulary

    ‣ Use placeholder markup ‣ Expand & transform for output 31
  38. ‣ Model and store meaning ‣ Extend a core vocabulary

    ‣ Use placeholder markup ‣ Expand & transform for output ‣ Tailor the editing tools 32
  39. Skeptical Cat 33

  40. It’s not “The Future” 34

  41. 35

  42. 36

  43. 37

  44. 38 <div data-entity="node" data-entity-id="1" data-view-mode="teaser" data-caption="This is my node!" />

  45. 38 <div data-entity="node" data-entity-id="1" data-view-mode="teaser" data-caption="This is my node!" />

  46. 39

  47. Making it happen 40

  48. Build on HTML 41 <p>Frankly, <em>this</em> is fine.</p>

  49. Data Attributes For Stackable Behavior 42 <img src="test.jpg" data-caption="This is

    the caption!" data-audience="admin"/>
  50. Custom Elements For Self-Contained Stuff 43 <glossary term="800-number"/>

  51. Transform For Output ‣ Drupal filters ‣ Response handlers ‣

    jQuery plugins ‣ Angular directives ‣ Format mapping 44
  52. ‣ Store only the meaning ‣ Tailor WYSIWYG to that

    vocabulary ‣ Transform for presentation 45 ‣ Tools that match the content ‣ Cleaner integration with external systems ‣ Simpler WYSIWYG implementation ‣ Smooth transition to future standards
  53. Q+A 46

  54. Also Read… ‣ The battle for the body field
 alistapart.com/article/battle-for-the-body-field

    ‣ When editors design
 www.smashingmagazine.com/2013/06/26/controlling-presentation-in-structured-content ‣ Introduction to custom elements
 www.smashingmagazine.com/2014/03/04/introduction-to-custom-elements ‣ The way you design web content is changing
 www.newfangled.com/the_way_you_design_web_content_is_about_to_change ‣ The cost of leaky abstraction
 www.lullabot.com/blog/article/inline-editing-and-cost-leaky-abstractions 47