Re: VIDEO: Simplifying Plone with tiles and shortcodes

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.

#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

_______________________________________________
Plone-developers mailing list
Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
https://lists.sourceforge.net/lists/listinfo/plone-developers