How Plone Powers Hundreds of Websites at one of the Largest Research Institutions
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 44 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/60209 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Namur, Belgium |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Plone Conference 202231 / 44
10
14
22
23
26
27
40
00:00
Turtle graphicsWebsiteScale (map)Plane (geometry)Software developerCore dumpClient (computing)Hybrid computerAreaMultiplication signSubsetHuman migrationCASE <Informatik>Right angleMedical imagingBounded variationDivisorFunctional (mathematics)Projective planeElectronic mailing listWave packetComputer fileNumberUsabilityText editorDecision theoryLevel (video gaming)WebsiteKey (cryptography)View (database)Object (grammar)Staff (military)Table (information)Process (computing)Centralizer and normalizerResultantProduct (business)Square numberBitCodeExpert systemObservational studyInterface (computing)Musical ensembleOnline helpComplex (psychology)Data managementRevision controlPoint (geometry)Drop (liquid)Profil (magazine)Descriptive statisticsService (economics)Element (mathematics)Software development kitWeb pageDirectory serviceAdditionVideo gameMathematicsSelf-organizationFamily1 (number)Power (physics)TouchscreenInternet service providerDrag (physics)Photographic mosaicContext awarenessArithmetic meanFeedbackFilm editingLine (geometry)Instance (computer science)Disk read-and-write headCloningContent (media)Block (periodic table)Similarity (geometry)Physical systemEvent horizonWage labourMereologyMembrane keyboardBlogOcean currentCovering spaceWeb portalDifferent (Kate Ryan album)Contrast (vision)Greatest elementEmailWeb-DesignerOpen sourceRootInheritance (object-oriented programming)DebuggerData structureFormal languageSet (mathematics)Mobile WebLink (knot theory)Standard deviationUniverse (mathematics)InformationUser interfaceMetadataAddress spaceField (computer science)SpeciesGraph coloringGeneric programmingFlow separationGame controllerTemplate (C++)Type theoryData storage deviceDampingSingle-precision floating-point formatWeb 2.0Mixed realityExecution unitDefault (computer science)Menu (computing)Complete metric spaceScripting languageSynchronizationBasis <Mathematik>Normal (geometry)Clique-widthContent management systemEuler anglesNumbering schemeWordPlanningPixelRepresentational state transferUniform resource locatorWindows RegistryGUI widgetVery-high-bit-rate digital subscriber lineComputing platformHypermediaDependent and independent variablesSlide ruleFitness functionVideoconferencingExistenceConfiguration spacePrice indexTwitterGene clusterFront and back endsPressureSource codeElectronic visual displayGroup actionIntranetDesign by contractInternetworking2 (number)Axiom of choiceComputer configurationPattern languageComputer fontForm (programming)Presentation of a groupLatent heatLanding pageOrder (biology)Equaliser (mathematics)Stack (abstract data type)Computer animationLecture/Conference
00:52
Hill differential equationProjective planeCodeGoogolRemote procedure callPoint (geometry)User interfaceData managementLecture/Conference
01:41
Computing platformHypermediaWebsiteVideoconferencingForm (programming)Multiplication signSimilarity (geometry)Universe (mathematics)Lecture/ConferenceMeeting/Interview
02:40
Client (computing)Multiplication signBitMereologyPhotographic mosaicFormal languageMathematicsLecture/Conference
03:42
Multiplication signWeb-DesignerClient (computing)Internet service providerLecture/Conference
04:23
Process (computing)FamilyMultiplication signBitVideo gameLecture/Conference
05:00
CASE <Informatik>Observational studyMultiplication signArea
05:57
BlogEmailSelf-organizationLink (knot theory)Object (grammar)WebsiteIntranetPresentation of a groupExecution unitProjective planeWeb portalComputer animation
06:39
AreaSelf-organizationWebsiteExecution unitProjective planeNumberDesign by contractBitMultiplication signPhysical systemPressureLecture/ConferenceComputer animation
07:21
Execution unitIntranetProjective planeAreaStaff (military)Text editorComputer animationLecture/ConferenceMeeting/Interview
08:03
Arithmetic meanRepresentational state transferProjective planeBlock (periodic table)Mobile WebSet (mathematics)Core dumpDependent and independent variablesMultiplicationComputer animation
08:56
Block (periodic table)BuildingWeb pageElement (mathematics)View (database)Lecture/ConferenceComputer animation
09:34
SupercomputerLatin squareUniformer RaumElement (mathematics)World Wide Web ConsortiumView (database)Object (grammar)Element (mathematics)Descriptive statisticsArithmetic meanWordDisk read-and-write headContext awarenessContent (media)InformationText editorMedical imagingPhysical systemComputer animation
10:24
Element (mathematics)Medical imagingBlock (periodic table)Descriptive statisticsComputer animation
11:04
Normed vector spaceComputerBlogYouTubeSimulationInformationBlock (periodic table)SupercomputerBlock (periodic table)Standard deviationWeb pageOcean currentBitOrder (biology)Computer animation
11:45
Block (periodic table)Multiplication signBounded variationData structureBlock (periodic table)Graph coloringRevision controlLatent heatClient (computing)
12:28
Block (periodic table)GradientSicSupercomputerComputer configurationGraph coloringBlock (periodic table)Clique-widthStandard deviationOpen sourceNumberInheritance (object-oriented programming)Web pageBounded variationClient (computing)ExistenceComputer animation
13:27
RhombusSupercomputerModul <Datentyp>Module (mathematics)Block (periodic table)GradientComputer wormMassRadio-frequency identificationClique-widthSet (mathematics)PixelFilm editingDifferent (Kate Ryan album)Graph coloringBounded variationInstance (computer science)Contrast (vision)Block (periodic table)Website
14:20
Web pageBlock (periodic table)GradientComputer-generated imageryCASE <Informatik>NumberInstance (computer science)Medical imagingHypermediaAxiom of choiceBlock (periodic table)2 (number)Element (mathematics)Computer animation
15:25
Block (periodic table)Bounded variationText editorPhysical systemDefault (computer science)Web pageClient (computing)Projective planeComputer animationLecture/Conference
16:08
SimulationQuantumInflection pointFood energyInformationSelf-organizationCurvaturePhysical systemBlock (periodic table)Physical systemWeb pageWebsiteAreaFitness functionSlide ruleProjective planeGene clusterLecture/ConferenceComputer animation
17:00
SimulationDisintegrationComputer wormMomentumZoom lensMaxima and minimaSupercomputerMedianAreaEmailStaff (military)Menu (computing)WebsiteComputer animation
17:39
Discrete element methodIntrusion detection systemStatisticsBlock (periodic table)Maxima and minimaTensorMaizeSimulationWide area networkMedianContent (media)SupercomputerWebsiteWeb pageCloningDampingGraph coloringBlock (periodic table)Template (C++)Source codeProgram flowchartComputer animation
18:18
Annulus (mathematics)SupercomputerWage labourDivision (mathematics)DemonComputer wormForm (programming)MIDIStatisticsComa BerenicesData typeRouter (computing)Cohen's kappaIntelMoment (mathematics)EmailMereologyLanding pageWeb pageWebsiteResultantSource codeComputer animationProgram flowchart
18:56
ArmData typeMomentumMenu (computing)PhysicsBasis <Mathematik>InformationProcess (computing)EmailInformationMetadataEntire functionInheritance (object-oriented programming)AreaComputer animation
19:40
WebsiteShape (magazine)FamilyGenderInclusion mapLogical constantLevel (video gaming)Execution unitWebsiteAdditionExclusive orEqualiser (mathematics)Menu (computing)EmailXMLComputer animation
20:24
Logical constantLevel (video gaming)Function (mathematics)Web pageGroup actionProfil (magazine)Projective planeContent (media)Disk read-and-write headPhysical systemWebsiteLecture/ConferenceComputer animation
21:10
Software architectureSoftwarePhysical systemSupercomputerImplementationTime domainScalabilityMachine learningFunction (mathematics)BuildingIntegrated development environmentWeb pageInformationElectronic mailing listMathematical optimizationProcess (computing)SimulationPhysicsSystem programmingCurvatureAreaProjective planeWebsiteInformationInstance (computer science)Computer animationLecture/ConferenceMeeting/Interview
21:51
Macro (computer science)Mach's principleSupercomputerDefault (computer science)Universe (mathematics)Projective planeWebsiteMixed realityDifferent (Kate Ryan album)Event horizonWeb portalMedical imagingBlock (periodic table)Greatest elementComputer animationLecture/Conference
22:38
Queue (abstract data type)Form (programming)Link (knot theory)WebsiteSet (mathematics)Element (mathematics)Instance (computer science)Computer fontGraph coloringCompilation albumComputer animation
23:30
InformationMenu (computing)Maxima and minimaComputer fontWebsite1 (number)BitWeb portalProjective planeComputer animationLecture/ConferenceMeeting/Interview
24:09
Logical constantBuildingPlot (narrative)System programmingDigital signalMereologyCellular automatonBlock (periodic table)Graph coloringClient (computing)Different (Kate Ryan album)Lecture/Conference
24:49
InferenceMaß <Mathematik>DebuggerFront and back endsClient (computing)Content (media)Generic programmingProfil (magazine)Type theoryProjective planeComputer animationLecture/Conference
25:48
Event horizonData storage deviceSystem programmingCellular automatonRevision controlSelf-organizationPoint (geometry)Electronic visual displayProfil (magazine)Membrane keyboardObject (grammar)Content (media)Meeting/Interview
26:36
Similarity (geometry)Complex (psychology)Directory serviceSynchronizationScripting languageProfil (magazine)InformationService (economics)Type theoryContent (media)Lecture/ConferenceMeeting/Interview
27:27
Address spaceLogical constantQuantumFuzzy logicInformationTheoryGraph (mathematics)Domain nameMilitary operationAsynchronous Transfer ModeSingle-precision floating-point formatQuicksortDirectory serviceAddress spaceProfil (magazine)Web pageAreaInformationPhysical systemElectronic mailing listLecture/ConferenceComputer animation
28:16
Data typeGraph (mathematics)MedianSystem programmingNormed vector spaceEmailSupercomputerSimulationProfil (magazine)Key (cryptography)Electronic mailing listDirectory serviceView (database)Block (periodic table)Service (economics)Physical systemWebsiteTable (information)Staff (military)Computer animation
29:04
System programmingBoom (sailing)MedianSupercomputerSimulationEmailControl flowQuantumElectronic mailing listNumberBlock (periodic table)Bounded variationSelf-organizationCASE <Informatik>Complex (psychology)AreaLecture/ConferenceComputer animation
29:48
WebsiteCovering spaceContent (media)Ocean currentLevel (video gaming)Web portalBlock (periodic table)Process (computing)AreaMeeting/InterviewComputer animation
30:32
SimulationProcess (computing)Point (geometry)DivisorWebsiteSelf-organizationComputer animationLecture/ConferenceMeeting/Interview
31:11
Field (computer science)MereologyWeb pageEvent horizonComputer fileSimulationHochleistungsrechnenSupercomputerWorkstation <Musikinstrument>CloningPower (physics)Content (media)WebsiteWeb pageMedical imagingResultantAdditionElement (mathematics)Process (computing)Computer animation
32:13
SupercomputerHochleistungsrechnenMultiplication signComplex (psychology)Interface (computing)Expert systemWebsite
32:57
SupercomputerHochleistungsrechnenHuman migrationResultantBitPhysical systemContent (media)Multiplication signHuman migrationLecture/Conference
33:35
Maxima and minimaWebsiteMedical imagingComputer filePhysical systemObject (grammar)Event horizonMereologyLecture/Conference
34:12
Projective planeHuman migrationMultiplication signContent (media)Client (computing)Data structurePhysical systemEvent horizonComputer fileWebsiteLecture/ConferenceMeeting/Interview
34:55
Wage labourPhysical systemWeb pageResultantLine (geometry)Human migrationProjective planeClient (computing)Text editorRevision controlOnline helpLecture/ConferenceMeeting/InterviewComputer animation
35:40
Human migrationRight angleCASE <Informatik>UsabilityDifferent (Kate Ryan album)Level (video gaming)Text editorLecture/ConferenceComputer animation
36:20
DivisorResultantWave packetSubsetFunctional (mathematics)Text editorSoftware developerUsabilityKey (cryptography)Very-high-bit-rate digital subscriber lineInstance (computer science)ImplementationInterface (computing)Representational state transferLecture/ConferenceMeeting/Interview
37:03
Text editorDivisorProjective planePoint (geometry)View (database)Product (business)Data managementProcess (computing)Lecture/ConferenceMeeting/Interview
37:45
Basis <Mathematik>Process (computing)Product (business)CloningVideoconferencingDecision theoryStaff (military)Wave packetLecture/Conference
38:28
VideoconferencingWage labourWave packetText editorFeedbackStaff (military)Wide area networkMultiplication signLecture/ConferenceMeeting/Interview
39:18
Plane (geometry)Computer-integrated manufacturingPhysical systemPoint (geometry)Projective planeGroup actionLecture/Conference
40:22
Projective planeOpen sourceBlock (periodic table)WebsiteGraph coloringFlow separationSource codeAdditionLecture/ConferenceComputer animation
41:11
WebsitePlane (geometry)Boom (sailing)MereologyWebsiteSet (mathematics)View (database)TwitterEmailAddress spaceComputer animation
41:57
World Wide Web ConsortiumWebsiteConfiguration spaceMedical imagingWindows RegistryData storage deviceLecture/ConferenceMeeting/Interview
42:35
Data managementFunction (mathematics)Lecture/Conference
43:21
Wave packetLecture/ConferenceMeeting/Interview
44:48
Right angleOpen setPoint (geometry)WebsiteLecture/Conference
45:26
Formal languageRootWebsiteCASE <Informatik>Lecture/Conference
46:07
AreaUniform resource locatorProjective planeFormal languageRootCASE <Informatik>AdditionWebsiteLecture/ConferenceMeeting/Interview
46:54
Directory serviceElectronic mailing listContent (media)Data modelNumberWebsiteObject (grammar)Lecture/ConferenceMeeting/Interview
47:40
Field (computer science)Instance (computer science)Directory serviceLink (knot theory)Electronic mailing listText editorCASE <Informatik>InformationLecture/Conference
48:24
Turtle graphicsWebsiteScale (map)Computer animation
Transcript: English(auto-generated)
00:00
Alright, we can start it. You know Timo is a Plone Core Developer and founder of KitConcept from Germany.
00:35
The upcoming Plone 6 stack already powers hundreds of high profile websites all around the globe.
00:41
Today I will present a case study how one of the largest research institutions in Europe alone runs hundreds of websites on the Plone 6 Volto stack. Between 2009 and 2010 I lived in Barcelona for two years. I worked as a freelancer back then, I did a Google Summer of Code project where I work on Plone discussion
01:05
and at some point I got bored by working remotely. So I started to work for the local university, the Polytechnical University Barcelona UPC and I met people there who over the years become dear friends, colleagues. I met Victor there who is my colleague today. I met Ramon who is a dear friend.
01:24
I met Albert who did the Plone 5 and Plone 6 user interface and Irene who worked for us as a UX designer for a few years. Jeanette is also here today who was our manager back then. Yeah, so we had a great team back then and UPC, as I said, I was only there for two years
01:46
so all the fame goes to them. They did some amazing stuff actually. I think they still run the largest Plone cluster in Europe, maybe even not in the world most likely but in Europe they have like 500 to 600 Plone sites running or had them running.
02:03
I haven't checked up lately to be honest. They built their own social media platform, they had a video platform back then and they had something that they called GenWeb, a generator for university websites like a long time ago where you could by just filling out a form
02:21
get your own website up and running, your own Plone website up and running in a matter of minutes which back then I found pretty amazing. Over the years we saw lots of similarities and recurring requirements when working with universities, with research institutions or research bodies
02:42
and every time I discuss requirements with a client and then I usually go to Victor at first and ask him and he always has this face then and he says of course they want that and it's like sometimes he seems even a bit bored by the requirements but it's hard to find that we find like completely new requirements on that
03:04
because we kind of thought about those problems earlier, maybe at a previous time but the interesting part of that is that even if technology changes rapidly and we see that with Plone 6 where we rewrote half of the stack of Plone 6 in a new language
03:26
Ideas and concepts stick. GenWeb was built, I don't know actually if it was built for Plone 3 or Plone 4 something along those lines, with Plone 4 then moved to Plone 5, it uses tiny MC templates, Mosaic
03:45
which was the latest technology back then but time moved on and today we have Plone 6, we have Volto technology changed, the way web development happens today changed we all know that
04:00
but the thing is when clients approach us today with those kind of requirements even though when we switch the entire technical stack we never have to start from zero, we always have previous concepts, previous ideas and that's true for both us as community and us as a company or a solution provider
04:22
so we have the experience from the past, what we did in the past and this is something that I truly love about my job actually the reinvention of ideas and concepts where we gain lots of experience and we make it better every single time I mean maybe that was because I had brothers and sisters and I love playing with Lego so much
04:42
and when they destroyed my Lego I had to rebuild it every single time and every single time even though I was furious at the beginning I built something that was slightly better than the version before and I enjoyed that so much and it's something that I still enjoy in my daily life actually to just make it a little bit better than last time maybe if you have the chance to reimplement
05:01
and of course technology changes so it allows us to create things that we aimed for in the past but we hadn't the right technology and when the right technology comes along then you can actually implement it that's something that we'll talk about in the keynote on Friday more in depth
05:20
so yeah, this continuous improvement to make things better over time is something that I really enjoy and I would like to present you a case study where we reinvented some of the ideas and concepts that we did in the past so this success story is about the Forschungscentrum Jülich which is one of the biggest research institutions in Europe FZJ or Forschungscentrum Jülich translates to Jülich Research Centre in English
05:45
they host more than 7,000 employees and scientists including Nobel Prize winner Peter Gruenberg FZJ is located in an area of 1.7 square kilometres between Cologne and Aachen and they have an annual revenue of more than 800 million euros
06:00
so quite a big organisation, right? In 2020 they asked us to do a relaunch of their website with Plone 5.2 and Volto we did that, we relaunched the main intranet site with 18 organisational units that are like separate and migrated more than 100,000 content objects and 30 gigabytes of data
06:21
if you're interested in that I recommend checking out my World Plone Day presentation from 2021 about this project but today I want to talk about the project that they asked us to do after we did the intranet that was the relaunch of the main portal that we started in November 2020
06:41
but they didn't ask us to only do the main portal but as well migrate 11 institutes and more than 80 institute areas and roughly like 50 organisational units and subsites their HR or career website and back then they had more than 100 project websites, right?
07:02
So that's quite a number of websites and we had to do that all within 18 months and there was a bit of time pressure like in any project, right? The support contract of the old system that we were using was running out so we had to migrate to Plone
07:23
but that was not the only thing there was also the global pandemic that was still going on it actually started during the FZJ intranet project so we had some experience with that and FZJ had some experience with that as well but still we had to migrate like 100 institute slash institute area slash business units and whatnot
07:43
we had to train the staff because every institute, institute area, business unit, whatnot had their own staff and their own editors so we had to train all those people during a pandemic where the editors were actually used to in-house trainings, right? Like to meet face to face and that just wasn't possible during the pandemic
08:04
so for the technical stack we chose Volto and the Plone 6 stack when I say Plone 6 stack I mean Volto plus REST API plus Plone 5.2, right? and Volto was one of the key aspects for the success of the project amongst others
08:22
and I would like to show you what we did and how Volto helped with that so Plone 6 and Volto is all about blocks, right? I said that many times, I hope I don't bore you after like saying this over and over again but Plone 6 is all about blocks, blocks, blocks Plone 6 has this one column layout for responsive design
08:43
and it comes with grid blocks that allow you to have those multi column sophisticated layouts and it is all prepared for responsive and mobile web, right? Volto comes with, or Plone 6 comes with a set of predefined core blocks that of course we used at FZJ
09:01
but we also built 29 custom build blocks for them I will present an excerpt of that because I can't present every single block that would take too long so I will just go through a few so the first block I would like to present is actually on their front page that's actually from like yesterday I think
09:21
or the day before yesterday so this is a slider block you can teaser an arbitrary amount of elements I think you all know how sliders work you can move right, move left so this is the outside view nothing too uncommon and this is now the edit view
09:41
if you are in the edit view you have on the right side the sidebar and you can add an arbitrary amount of new elements that you want to tease and when you choose an element you see on the right side that it takes the title, the description and also the image and you are now free to overwrite that
10:01
because sometimes you want to have a different wording and you can also add a head title for instance, right? so the system will try to make it as easy as possible for editors so we take over this information that's on the content object but it doesn't mean that you have to take over that information because when you want to teaser content in a different context
10:22
you might want a different title or a different description so you can overwrite that and you can also drag and drop the elements and it will show you right away on the left side how it will look like because Plone 6 truly has this in-place editing feature
10:40
where you see exactly what you see when you are not logged in, right? Another block that we used on the top is the so-called highlight block it works roughly the same like the slider block that you saw you choose an existing element that you want to tease it takes over the title, the description and the image that you have and it shows the button that you can also overwrite if you want
11:05
and the third block that I would like to present is the parallax block this is a screenshot actually of the current front page so if you scroll down a little bit you see this standard parallax block, right? it goes into two speeds so you have basically an image, you put text over it
11:25
and the editing looks the same like in the previous one we also have a carousel block that allows you also to have an arbitrary amount of teasers you can also drag and drop them in the order if there are more than four or three you can define that
11:41
then it shows the carousel editing works exactly the same like the slider block that's the cool thing also about Volto blocks, right? you don't have to reinvent the wheel every single time but you can just use the data structure that you need and if you have two or three variations of the main data structures that you need then you're basically free to implement whatever you want on the front end, right?
12:03
so it's pretty trivial actually all those blocks have lots of variations you see here four variations of the carousel block for FZJ and of course the variations depend on the corporate design and specifications from your clients
12:22
so FZJ has eight corporate design colors so we have actually eight different versions of that block you can choose if you have a background color if you want a narrowed width background or a full width background and depending on the block there are lots of more options
12:41
I will come to the number of options in a minute the next block which is like if I would have to name one block that stands out it's the grid block because it's super flexible and it's a very general purpose block that we also open source pretty soon and this will actually become the standard grid block for problem six, right?
13:04
and here is a page that we use internally to show all the variations that are possible, right? so when a client approaches us there's usually an existing corporate design manual and we just take the corporate design background colors and whatnot and integrate that into the blocks
13:20
and here's like the grid blocks you have a four grid block, three grid block, two grid block, one grid block then you have different background colors here blue you can have a light blue you can make that narrowed width like full width actually I couldn't like my screenshot tool and keynote
13:41
don't allow like screenshots that are that long so like the keynote has like 10,000 pixels I think and my screenshot tool is like cut that into many so this is really a small excerpt, right? but you get the idea of like the amount of variations that you get with just a few like settings more or less, right? and this is something that you have to into account
14:01
when you build your Volto site because when you want that to be like accessible for instance you have to check that, right? if that really works, if the contrast works and those kind of things so always be careful like how you should always be careful like about how powerful blocks can be, right? and the amount of variations that you can actually create with that
14:22
I will show you a short screencast of the editing experience of the grid block so you choose the grid block you can choose the number of columns I choose two here you can choose from a number of sub blocks so you can have images, teasers, listings, text you can actually add any block that you have in there
14:42
so if you have a social media block or something you can also add that here here we added two images you can choose from existing images or upload images like in a normal block and you can drag and drop them if you want to reorder them you can create, you can add a third element if you want
15:03
so the first choice of columns is just the first choice, right? you can always remove, reorder or delete blocks if you want and yeah, you can create a second column block with something else like take for instance like you can add text in there
15:21
the text is of course rich text you can edit it, you can add an image so I guess you get the idea so as said we built almost like 30 blocks 29 to be exact for FZJ the blocks all have variations and if you can combine those blocks arbitrary I only showed you the variations of a single block
15:40
and then think about if you have all the variations of all the blocks and then you can combine them arbitrary this gives you quite an amount of flexibility in the system so it allows you to create very sophisticated page compositions and it has been great in the FZJ projects to see editors to just use that flexibility
16:03
and come up with new layouts that we haven't even thought about we initially always create default layouts for the client our designer does that to make recommendations how a page looks like but the system is so powerful that they can come up with their own if they want to, right?
16:20
okay, so that was about Volto and blocks the next challenge was that as I said, it wasn't only the portal but also lots of other sites and subsites and I will walk you through what we did there so, FZJ has those 11 institutes which are like, yeah, institute clusters more or less
16:42
and they have more than 80 institute areas which you can see here, right? and this is also only an excerpt all of the institute didn't fit on that slide and I think during our project they added like 5, 6, 7 new or so I don't know, but lots of them
17:02
and all institutes and institute areas needed their own website, right? because, I mean, they are separate from the main Forsch & Sennemühle so they needed their own header which you can see here they have their own name on top of that
17:24
they have their own footer they have their own search and they have their own permissions that are granted to the staff I will come to that later how we actually implement that and I will show you now how to create a new institute website in two minutes so you go to the add menu you choose institute like you choose a page
17:41
let's create like a clone institute institute websites in FZJ are supposed to have a to start with a text block that introduces the institute it uses a text block with a background color with full background color and the next thing that should be there is an institute slider
18:00
actually I started from scratch now in reality we have a template that is created for institutes that are like pre-filled with lots of things to make it easier but now for the sake of showing you I created that from scratch, right? so you saw the slider already that's a different slider that's supposed to be only used by the institutes, right?
18:21
but internally it works exactly the same like the main slider and you see here in the header the name of the institute is there because that's part of their corporate design so we don't need the title of the Volto page so you can remove the title for landing pages if you want to
18:40
and now we have the institute site but of course we need to fill them with subsites, right? because they have their own navigation so we need to add a few a few sub pages here so we add them and you can see the navigation is filled, right? and there you see how the final result will look like
19:00
you have the header you have the institute name you have the main navigation you have the own breadcrumb you have your own footer you briefly saw the footer below with the information that's something that you can fill in in the metadata and here you have your entire Plone Institute, right? in like a few minutes we also have those institutes areas
19:23
that belong to one institute you can see that only the header is different here so in an institute area you just have the parent institute on the top, right? so you can navigate this is specific to the FCJ
19:40
I guess apart from that it works exactly like an institute that I showed you then on top of that we also have like business units and other subsites this is the equal opportunities bureau which is one example you can see it has another header that is different from the main portal and different from the institute website
20:03
you can spot on the right side that they have this additional menu that's exclusive for them and this basically behaves like an institute site, right? but organizationally it's different but it's the same idea
20:21
of having a sub-site if you have been into the Plone community it's like basically the lineage use case, right? and we made it work with Volto another example where you have a page that's not a website on its own but rather like a sub-page is the research groups
20:41
they start with this full-size image and they're supposed to display what a research group does within an institute or within the main portal you can see here this is the head it's supposed to be the head of the institute and you have member profiles here
21:01
you have news that are related to that so you can... projects and whatnot we have an elaborate system to mark content with institute, institute areas and topics and then you can of course filter those news according to this
21:22
another example is project websites a website about single projects where a project is teasered with the stakeholders and this information so this is basically the same and now we come to the big gun so the gen-web idea that you create a website within three minutes
21:42
and it's a complete separate website your own phone instance basically so I'll show you briefly how this works so here you have a default what we also call project websites don't mix that up with the other project website but this is basically a separate site
22:02
so think about like a joint venture from different universities or different institutes or there's an event or something and they want to create that and it should be roughly in the corporate design of the main portal but not exactly because they have their own image
22:20
and it should be slightly separatable like from a visual design from the main portal and this is how that thing looks so it has the highlight block if you remember that one and then it has the grid block and at the bottom it has the stakeholders and a footer
22:41
and you can go to the site settings and change things here so you can change for instance the logo so let's create a Plone Comp site so we click change the logo you can change the fonts that's predefined we change the main navigation color to the Plone blue actually not sure if that's really the Plone blue I just choose the blue
23:02
then you can edit the footer the elements that you already saw so we want to exchange the element in the footer there we want to add the Plone Foundation because the Plone Foundation is paying for that site we can then reorder the elements in the footer so we move contacts to the beginning
23:22
and here this Jara logo we move it to the front we can add more logos if we want the site works with like one logo or with 20 it doesn't care and then we save and you see that we have the new logo we have the new navigation we have a different font
23:41
and the Jara is in front and the Plone Foundation is there so you can easily edit things there so this allows you to also within a few minutes to create a new site that's visually distinctive from the other ones but it still kind of looks a bit like the FZJ site
24:01
this is what we want because they are close but sometimes you have projects that should be really visually distinctive they want to be distinctive from the main portal and this is just an example of how things could look like and a possible client requirement so they want really a different look and feel
24:22
so this is grid blocks they want to show that in a complete different way they want to have more colors in there they want to have a complete different footer so this is also a normal requirement and what do you do then? You can either create an Uber control panel
24:41
but you could also just say we accept the fact that sometimes they want something completely different and then we just give them something different and the cool thing about Volto and Plone and separating the front end from the back end is that you can keep your back end and everything that you built with that
25:00
like the control panel and the infrastructure and you can just build another front end and then you're free to do whatever you want no matter what the client wants as long as it is on the front end you can do whatever because 90% of what we do these days happens on the front end we don't do that much on the back end these days any longer it's like maybe content types and stuff
25:22
but even that we can do that with generic setup and profiles so if a client comes to us and says we want on the existing infrastructure we want something distinctive we can give them customizations on the front end and on the back end based on their requirements and we're completely free because when you create a new Volto project you can make that dependent on another Volto project
25:43
which is the FZJ main project and then just customize and it will just work so this is a great flexibility that we haven't had with previous Plone versions ah crap I can't stop this animation so I hope I don't have to dance or anything
26:02
okay next thing that I would like to show is member profiles yeah most large organizations at some point want to display member profiles in some way for FZJ they wanted to show they're mostly the scientists because for them it's important to be visible
26:21
to have a profile where people can go and also a way of being contacted if you have been in the Plone community think about membrane where you have where Plone gives you member objects as content objects in 2010 I think we implemented something similar
26:40
for their Freitag I gave a talk with Jill and Kees about that in Arnheim I think so we also have a history here in the Plone community of knowing that problem and know how to solve that in Volto and also in Plone back end that was actually not that complex we connected the existing active directory
27:02
in LDAP of FZJ with Plone and basically created a sync script that runs every like I don't know how often it runs now but it can run quite frequently because it's fast so you sync the member profiles with content types
27:21
and FZJ had an active directory where they have this self service where people can actually update their information and you want a single sort of truth so we rely on the active directory and this is where people can manage their data and this is how a profile looks like
27:42
on the page so you have a picture of that person you can assign this person to an institute or an institute area or one of the other bodies that we have you can also mark them with different keywords so the contact and the address that comes from the active directory they can have an introduction
28:01
they have a list of the scientific publications that comes from another system they have prices they receive they have projects, they have news most of the information we have in Plone some of them like the papers where they are cited
28:21
we have them in a different system so the key here is of course always integrating Plone also integrates well with other systems like LDAP, Active Directory or other services so we have those not 7000 profiles because not everybody agrees to be online but we have lots of profiles and we have lots of sites
28:42
as I showed you and now we can use that and create listings so if you have an institute you want to list your staff you want to be able to just list them so this is something that we added to the listing block listing block is also super powerful because you can add variants if you come from Plone 5
29:00
think about summary view and table view and stuff and we have that in Volto as well with the listing block and you can add an arbitrary number of listings and this is the standard listing you can choose you can see here the institutes or the institute areas you can choose if you want to see the picture or not
29:22
altogether we have I think 8 variations of just listing members so you could do that we have a second main theme which is adding that as a grid but as said you have sub variants I only show the two two main variants so you will get the idea
29:41
but as said there are lots of use cases because it's a complex use case it's a large organisation and people have different needs depending on what they want to show another sub website that was really important was the Korea website I will only cover that briefly
30:01
even though that would be enough content for a separate talk so this is the current Korea website it's integrated in the main portal we could have done that also separately I showed you multiple ways of what we built for FZJ it has a highlight block at the beginning
30:21
and then I will only show a short excerpt here you can basically search for a job choose your career level your area of expertise and where you want to work and then you can hit the search and then you get to the job offers there is much more that we created for the Korea
30:40
department of FZJ but here you have a sophisticated filter that works on Sola so you can search there for your right job and then choose it my colleague Jacob where are you? he did all this work and I hope that at some point he will give a talk about that as well but I will just briefly cover that today
31:04
another important success factor is search if you have a large organisation with hundreds of websites and lots of content you need a powerful search and the clone search is okay but we need something
31:21
really sophisticated so we went with Sola you can also use Elasticsearch it doesn't matter that much but we went with Sola for powerful search features and high quality results and in addition to that we implemented faceting as you can see here you can choose the facets this is what Sola gives you
31:42
you don't have to recompute that but that is really quick if you switch we have different kinds of listing elements like you see here an image will be listed differently from a page or a document will be listed differently you can sort here so this is one important thing you can also even look for job offers
32:02
and for people depending on what you are looking for and the second important feature that I would like to highlight is that if you have hundreds of websites you want your users to be able to search across all the websites and at the same time
32:20
search on one website only and you could create an uber complex search interface where you choose the institutes and fix that with facets we worked with our UX experts and we came up with a simple solution that I think is more user friendly you can see here below the search interface sorry for the German
32:40
I did screenshots for German, I don't know why in German you can see that you can choose in those radio buttons between all websites and only this website and we only show that when you are on a sub-site because when you are searching on a portal you don't care you want to search everywhere but if you are in one of the sub-sites
33:02
you can choose if you look for something and you don't find it you can switch to the global search of course we could build something sophisticated in here if you don't find results that is switched automatically but that's maybe a bit too much magic for people so we didn't implement it but that would be possible
33:24
so crap, running out of time another thing, migration of course so far I only talked about what we built but we had an existing system and we had lots of content in the old system and we needed to migrate so in the old system
33:41
and I think that was only the published content, it was like 250 content objects that we had in government site builder that we received in 90 gigabytes of XML data we didn't we migrated at the end 40k images 13,000 files 7,000 news items, 7,000 events
34:01
and the interesting part here is that I will spare you the details because that will be enough enough for an entire separate talk I guess so I will just briefly go over it in previous project we did full migrations to Volto and that kind of worked
34:21
but this time we chose kind of a hybrid approach together with the client that worked pretty well which was that we migrate the base content so we migrate all the images, all the files all the documents, all the news items, all the events but not the overall like site structure because when you do that and you have an old system
34:42
which is usually where you migrate from it's pretty limited of what you can do and technically we can migrate all this content but it will mean in the end that you will migrate only like text and you will have those big walls of text even for overview pages or you have a more sophisticated system that allows you to do
35:02
things in the layout but then it's really hard and labor intensive to to write a migration there and the bottom line is we did that in the past so technically we can do it it just turned out that the end result wasn't good enough to really like push the launch button so what we saw in those projects where we did a full
35:22
migration was that our clients had to had to do the sites, had the pages, had to do the pages again, especially the overview pages right? And it's way quicker for an editor to do that in Volto than having the migrated version over so that didn't help much, right? so the
35:42
so it wasn't like it wasn't well invested money I would say to do this full migration so this is why we choose this hybrid approach I'm not saying that this hybrid approach is always the right it depends on your use case, right? but for this use case I think it worked pretty well and yeah, to summarize things
36:02
so within the 18 months of our project, we built hundreds of websites, as I showed you for different levels hundreds of editors were trained during a pandemic and thanks to Volto and his user friendliness worked out, we got overwhelmingly positive feedback
36:21
from our editors and I think Volto was one of the key success factors of the project, the rich functionality that it offers, the superior usability and this results in low training costs and high acceptance factor for the editors and the new stack allowed us to develop in high speed
36:41
and develop features that have been really labor intensive in the past to just implement that, for instance like the sub-site thing it's just a marker interface at the end and Volto does the rest it's really not super sophisticated what happens there internally but it's a feature that's
37:01
incredibly valuable for the editors and talking about success factors here, Volto wasn't the main success factor one really highly crucial success factor was that in a project that size, when you have that many stakeholders like more than 100 bodies, it's not easy
37:21
to handle that from an organizational point of view and I would like to highlight the people on SSJ's side who did all the job there, we didn't do anything like that as KitConcept, we could focus really on what we're good at building the technical stack and other people took care of this very crucial thing in the project
37:41
Stefan Giesen and Philipp Patra who were product manager and product owner they handled all these organizational challenges and that's not easy to have hundreds of people waiting for you to be able to edit stuff and to organize that and they did a pretty good job and especially Mr. Patra
38:00
who I work with on a daily basis did a fantastic job as a product owner, he made quick decisions I could explain technical details to him and that worked really well Andreas Bruins from the IT staff he created tons of clone videos I told you earlier that we couldn't
38:21
do in-house training so what they did was they trained one person of the IT staff to do screencast videos and he created I don't know how many, maybe 15 or so videos they were really high quality, I have to admit I was impressed by the quality of that and that helped FZJ to train really lots of people and then
38:42
just throwing them at Plone and they could work that out for themselves no need to do labor intensive and expensive in-house trainings but they really did that with only a small amount of labor at the end and the editor team gave us valuable
39:00
feedback and insights because there were people that worked with other CMSs for quite some time and when people switch and they have lots of experience they give you valuable insights also for Volto and PloneCore and we try to incorporate that and the feedback and then we have the IT staff and Bernd Volba and Christian Wans are here over there
39:21
and if you want to know how to run such a system then those are the people to talk to, maybe at some point you will give a talk if I continue I mean Erica just said that you just need to get on the stage and express a wish and then it will come through so yeah, let's see
39:42
and one thing that I'm particularly proud of is that Bernd Volba became a PloneCore contributor we showed him Plone and explained him about the community and at some point he just contributed a fix to PloneCore and I was like wow, that's amazing
40:01
we invited him then to the Beethoven Sprint, he came there so I'm really really happy about that because that's something that I always try in all our projects to show people how amazing the Plone community is and how to get them in to allow them to see what an amazing group of people that is
40:20
and yeah, this is a great accomplishment we always try to open source as much as possible in our project and FCJ supported us in that as well, so I think everything that I showed you from the blocks is open source so Volto blocks grid is open source anyways we started that before the project but FCJ allowed us
40:41
to invest into that more we have the slider block which is open source, the carousel block which I showed you, in addition to that we have a separator button and heading block we open source the text with background color block that I showed you in the institute website and we have a GDPR banner add-on
41:01
that we also open source and we'll continue to try to open source portions of what we did there, so if you saw something that you like, just reach out to us and we can see what we can do to help you to accomplish something similar go to fz-jülich.de
41:23
the site is live since quite a while check it out, everything that I showed you you can see that most of the screencasts were from the live set actually, not the editing part but from the outside view of course, so have a look check it out if you have questions reach out to me
41:41
or to those folks over there something they can tell you better than I can yeah, my name is Timo Stahlenberg on GitHub, on Tisto, Twitter Timo Stahlenberg if you want to reach out my email addresses is there, I will leave it here feel free to talk to me, ask me questions thanks a lot
42:09
any questions? so the sub-site configuration
42:21
you showed that was in you configured the footer and you uploaded images did you store them as base64 in the registry or where is the storage layer for that? crap, I can't answer that because I'm just a manager these days so I do excellent stuff
42:42
so Victor has to answer that I have no clue where we store them the logo for example, that is our control panel the control panel are
43:01
the same way that we use with the logo overrides in classic we only had to fix the widget for because it wasn't compatible we had to I think we fixed something in PLON schema now it works
43:22
yes, if that's the question so that opens the door to also allow Volto to have the customisation of the logo the right way or at least the way that we do in PLON, so yeah welcome
43:48
I'd like to respond to the thing you said about the training in days of pandemic and COVID, I had a similar situation and also experience you have to find somebody who is foolish or brave enough to create screencasts
44:02
and then if you have somebody inside the organisation, great one of my customers nudged me into it and we had this combined training where I created 5 or 6 or 7 short screencasts and we did then, actually they use MS Teams don't ask me why and then we had like, ok, I sent out 3 screencasts, then we had an open session
44:22
for an hour where people could ask questions, I very quickly redid my own screencasts by just following them again, and I did a second session and that's how we trained the whole department in a week and they have now reference material for the next 2 years for the site, it's there it's some investment, it's some sweat for me or if you find a lucky person
44:41
inside your organisation, that's so, so valuable screencasts, screencasts, screencasts also talking to people regularly and having open business hours or something helped us a lot in FZJ I mean all the credit goes to FZJ because they organised that
45:02
but that was something that worked out really, really well to just let people come and ask questions, right, and show them stuff and we only had a few sessions and there were enough and then at some point people didn't show up any longer because they had everything they needed, right
45:21
another technical one, sorry the subsites so the site is multi-linguals, English and German so that's kudos to the team must have been a shitload of work to get that all translated that is always the bottleneck do you have subsites that are only in one language
45:41
and don't have language root folders you have that, okay good good to know that that works in Volto as well I mean there is a use case where this is non-trivial actually, I mean usually
46:03
no no, that wasn't our use case so we always have to we only have two language root folders because the institute and institute areas are sub-URLs right, they don't have their own URLs are they never do that? no, they never do that for the projects we did
46:23
I think we covered all use cases that are there, I can't think about any else, any other use case so for the project website infrastructure you can choose if you have a language root folder or not, because there are instances, right, but we don't have to we don't have the use case that you have a sub-site that's
46:42
available under its own URL in addition to the existing one, right, I guess that's the only might be the only use case that we don't that we haven't covered, but yeah no more questions?
47:03
you told about the directory listing and all the data coming from the active directory of them how was it that well, the structured data like phone number, room number and so on is quite perfect there, but all the
47:22
additional stuff where the users actually want to edit the site, is that also via active directory or does active directory just creates a base site and then you can edit that? so, we have a member content object
47:41
and we have certain fields that come from active directory that are read only for the editors and they can add more information like the picture for instance which is not an active directory or the links to the listings and those kind of things but we also have the use case that users are actually not in the active directory at all, so
48:01
you can also use the member freely if you want to have it somewhere else yeah, so that's a quite flexible solution and that was the easiest way to implement it for us thanks a lot