Re: VIDEO: Simplifying Plone with tiles and shortcodes

On 17/03/14 00:33, Dylan Jay wrote:
> On 17 Mar 2014, at 1:31 am, Dylan Jay <djay-n0pU0XVUApFWk0Htik3J/[email protected]> wrote:
>
>>
>> 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.

The more meta info you show the less WYSIWIG it gets. A compromise might 
be a small "cog" icon that launces a popup menu on click.

>> 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.
>>
>> #3 is what you're perhaps suggesting.

Yes.

>> 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.

Actually I wasn't thinking about implementation specifics. Apparently 
you've got a way to insert shortcodes and expand that into a rendering. 
I was just reflecting on alternate markup syntax, changing the editing 
interface without changing the rendering mechanism.

> 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.

Cut-and-paste via HTML would be most consistent with the other editing 
affordances we have in TinyMCE.

I would really like to hide the actual shortcode markup from the end 
user, unless she chooses to go into HTML source code.

For me, the most close analog is the way one manipulates images. To 
insert, you click a toolbar icon and get a modal dialog with the 
relevant options: select type of tile, input path, etc. Then once it's 
inserted, if you click on an image it gets highlighted with handlebars 
that clearly communicate that it's editable, and then a right-click 
gives you access to all the parameter options you can manipulate via a 
menu system.

The key is to create a GUI menu with widgets for each parameter 
separately. That changes the game from "editing a shortcode tag" into 
"configuring a tile". You really want people thinking about outcomes, 
not about markup.

The obvious drawback of what I'm proposing is that once you change a 
setting you'd expect that to get reflected in the rendering. Unlike 
editing a shortcode, where it's clear you'll have to hit 'save' before 
you see any effects, the GUI I'm proposing here would create an implicit 
assumption of immediate re-rendering.

:*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