Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors
-
Upload
simahawk -
Category
Technology
-
view
1.460 -
download
1
description
Transcript of Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors
![Page 1: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/1.jpg)
A perspective on tiles to empower your Plone editors.
Saucelabs
Abstract and Zentraal for PLOG2014S. Orsi - D. Siedband /
![Page 2: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/2.jpg)
Who we are
Simone Orsi
Web developer
at Abstract
Plone contributor
@simahawk
David Siedband
Software developer
at Zeentral
Plone contributor
@siebo
![Page 3: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/3.jpg)
What’s Saucelabs?
● San Francisco based start-up
● Automated and manual testing
● Uses open source tools○ Selenium○ Windmill
● Plone community uses it
![Page 4: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/4.jpg)
The project
Migrate their custom Pylons-based CMS to Plone
Migrate their Wordpress blog to Plone
Separate CMS functionality from custom testing app
![Page 5: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/5.jpg)
Challenges
● Empower marketing team to make direct updates
● Support complex layouts for product pages
● High-traffic○ 5k uniques/day○ 30k pageviews/day
● Incremental deployment
![Page 6: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/6.jpg)
Why they choose plone
● Open Source
● Ease of Use
● Strength of Community
● Strong Security Record
![Page 7: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/7.jpg)
HOW TO SOLVE THIS?
![Page 8: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/8.jpg)
Our solution: composite pages
A page built on using tiles.
The UX empowers the editors to select a tile,
customize the content of the tile and select
some predefined styles for each of them.
![Page 9: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/9.jpg)
Custom tiles
We identified the blocks that compose their
current site layout and we replicated it on top
of tiles.
Every row / block is a tile and the editor can
sort the order of the blocks thanks to the
custom UX.NOTE: to avoid unnecessary transactions to ZODB you need
to save the layout when done.
![Page 10: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/10.jpg)
Custom editing UX
With a “good amount” of Javascript we render the
add and edit forms of the tiles and we render
them on the fly without page reload.
That allows editors to create landing pages in a
couple of minutes without having
![Page 11: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/11.jpg)
Predefined styles
All the tiles have a predefined layout but
the editor can apply some predefined
styles on each tile via checkboxes.
We can configure those styles via plone
registry.
![Page 12: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/12.jpg)
Incremental DeploymentGo live with just a bunch of pages.
1) CSS is ok (pattern-matchable)++theme++saucelabs++resource++
2) JS is ok (pattern-matchable)/portal_javascripts
++theme++saucelabs
3) Images are a bit more involvedCompositePage - tile images live downstream of the tile
![Page 13: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/13.jpg)
LIVE DEMO!
![Page 14: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/14.jpg)
Improvements (??)
A lot…
● better UX
● allow to handle columns (not our use case though)
● manage predefined layouts
![Page 15: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/15.jpg)
QUESTIONS?
![Page 16: Plog2014 - Saucelabs - a perspective on tiles to empower your plone editors](https://reader035.fdocuments.in/reader035/viewer/2022070303/549cdc9dac7959c92a8b4867/html5/thumbnails/16.jpg)