Re: VIDEO: Simplifying Plone with tiles and shortcodes

On 17 Mar 2014, at 1:31 am, Dylan Jay <djay-n0pU0XVUApFWk0Htik3J/[email protected]> wrote:

> On 16 Mar 2014, at 12:57 am, Guido Stevens <[email protected]> wrote:
> 
> > On 15/03/14 01:09, Martin Aspeli wrote:
> >
> >> On Fri, Mar 14, 2014 at 11:13 pm, Dylan Jay
> >> <djay-n0pU0XVUApFWk0Htik3J/[email protected]="mailto:djay-n0pU0XVUApFWk0Htik3J/[email protected]">> wrote:
> >
> >
> >>    and the shortcode syntax. The intention was to use image
> >>    placeholders originally but we needed a way to identify and preview
> >>    the contents of a tile so I came up with this idea instead.
> >>    You are exactly right that it has the downside that a single char
> >>    missing can disable the tile. I considered that a lot. On balance I
> >>    think short codes are better because they allow power users to cut
> >>    and paste and make quick changes by hand.
> >>
> >> Agree. I am a bit worries that to very nontechnical users this may seem
> >> like "programming" and scary, but I don't know. It needs testing.
> >
> >
> > When watching the video I immediately thought: that's cool and powerful, 
> > but of course it's only a prototype and the shortcodes will be hidden 
> > behind some visual placeholder soon.
> >
> > The whole raison d'etre for a WYSIWIG editor is to hide the markup 
> > language from the end user and replace it with a more intuitive editing 
> > interface. To now introduce a second layer of markup language in there 
> > (on top of the WYSIWIG-wrapped HTML) is inelegant.
> >
> > I appreciate that a lot of work has been done to get to this point. 
> > Would there be many obstacles in factoring the shortcodes into a domain 
> > specific language that can be marked up in html? I mean something like e.g.
> > <div class="plone-app-contentlistingtile folder_summary"
> >      data-view_template="folder_summary"
> >      data-path=".::1">
> >   <div class="control">(change tile parameters)</div>
> >   <div class="preview"> ... </div>
> > </div>
> >
> > That would open the route to fully integrate the editing of tiles 
> > seamlessly into the WYSIWIG editor itself.
> >
> > I understand that if it would've been easy, it would've been done. But 
> > I'm asking specifically: a) what are the obstacles? and b) now that we 
> > have a working shortcodes implementation, doesn't that help and make the 
> > final leap more attainable?
> 
> It's actually easier technically to use html rather than a shortcode. The tricky part is how to represent the tile so it can be edited. A tile could insert almost any kind of html, include nothing. So whatever editing interface you use will have to add some kind of border or something you find and edit the tile, so it's never going to be a purely WYSIWYG experience. You will likely need to show a name or params of the tile so the user can identify one tile from another.
> 
> There are maybe 4 ways to integrate tiles that I can think of
> 1. we insert some kind of place holder such as an image to represent a tile
> 2. deco style, mentioned by martin, where you split the page into blobls that uses a grid system and uses a visual editor for just for "text tiles". 
> 3. we build our own visual editor, or deeply integrate with tinymce to support the concept of blocks of html that aren't editable except via a popup.
> 4. we insert markup that can be edited such as a shortcode, like in the demo.
> 
> #1 is what the original collective.tinymcetiles did and it's not too user friendly since we might be inserting inline text and it doesn't really act the same way as an image. Unless we perhaps insist that all tiles are html blocks and have defined heights and widths. It's also hard to get a preview unless we build in a html to png converter.
> 
> #2 has proofed hard to implement but in addition it also has implications for theming. It means you have to have a way of arranging the different blocks like a grid system and which grid system do you use? and what if the themer doesn't want to use a grid? What if you want a layout where text flows around a floated image? Blogging systems like medium use this approach and it does make for a nice editing experience but also medium is not designed to be themed into any kind of website. 
> 
> #3 is what you're perhaps suggesting. I did look into if there was a way to insert an iframe into tinymce editing box so the iframe contents could be the non-editable tile preview. This didn't look possible. 
> I didn't consider, what you seem to be suggesting, to insert a pattern type markup and then use javascript/css to modify it. This might be working against tinymce a bit too much, since tinymce is designed to let you modify any html in it's edit area. 

Apparently tinymce does support noneditable content. You can see a demo here http://www.tinymce.com/tryit/3_x/noneditable_content.php
This also lets you drag and drop these sections around which is nice.
You could highlight generated text similar to the example shown and perhaps use a tooltip to show a description of the tile, perhaps using the shortcode notation.
Not all tiles might have a preview, for example the item might need to be saved before a sensible preview is possible, so would have to handle that.
I'm also wondering if it might make sense to support both shortcodes entered into the visual editor at the same time as something that just shows the preview with some styles to show it's a generated preview. or perhaps just support cut and pasting codes via the html view.


> 
> #4 is a compromise. Something that works ok with any visual editor.
> A similar example is how plomino inserts fields etc, which is using styles
> https://plomino.readthedocs.org/en/latest/_images/m33cfb2d3.png
> But it's not WYSISYG either. 
> 
> Shortcodea allow you to cut and paste codes from tutorials or between pages, or to manually update them without having to go via a special UI.
> They do seem to be widely used in wordpress. Here is an interesting video showing not just inserting a shortcode in wordpress but creating a new shortcode type.
> https://www.youtube.com/watch?v=Ai56zFq-B3g
> 
> 
> 
> >
> > :*CU#
> > -- 
> >     Guido Stevens  |  +31.43.3618933  |  http://cosent.nl
> >
> >     s o c i a l   k n o w l e d g e   t e c h n o l o g y
> >
> >
> > ------------------------------------------------------------------------------
> > Learn Graph Databases - Download FREE O'Reilly Book
> > "Graph Databases" is the definitive new guide to graph databases and their
> > applications. Written by three acclaimed leaders in the field,
> > this first edition is now available. Download your free book today!
> > http://p.sf.net/sfu/13534_NeoTech
> > _______________________________________________
> > Plone-developers mailing list
> > Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
> > https://lists.sourceforge.net/lists/listinfo/plone-developers
> 


------------------------------------------------------------------------------
Learn Graph Databases - Download FREE O'Reilly Book
"Graph Databases" is the definitive new guide to graph databases and their
applications. Written by three acclaimed leaders in the field,
this first edition is now available. Download your free book today!
http://p.sf.net/sfu/13534_NeoTech