Upload
magnolia-cms
View
4.011
Download
0
Embed Size (px)
DESCRIPTION
This presentation was given at Magnolia Conference 2013 by Dr. Maximilian Störzer, Project Manager at Stadtwerke München: www.swm.de Stadtwerke München (SWM) are a large company with business segments ranging from utilities, public pools, telecom infrastructure to public transportation. We also provide the CMS for the urban administration of Munich. Consequently, a “corporate CMS” has to fulfill diverse requirements. SWM rely on Magnolia CMS and the following three core concepts to efficiently cope with this diversity: - A hierarchical grid-based structure for components - Insatiable HTML components called "modules" - The seamless integration of web applications based on the Google Web Toolkit (GWT). The talk will introduce these concepts and point out how SWM use a relatively small set of building blocks based on these concepts to provide adequate solutions for all our different company web sites.
Citation preview
(8 x 25,4 cm)(Position: H 0; V 2,52)
Hier können Sie ein Bild, Diagramm oder eine Grafik einfügen.
Die Größe sollte diese graue Fläche ganz ausfüllen.
Geeignete Bilder und Grafiken finden Sie unter: I:\Info\Office_Vorlagen\Bilder_und_Grafiken\SWM
Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments
Dr. Maximilian Störzer // September 2013
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 2
Agenda
• The SWM Group – Facts & figures, Branches … setting the stage
• Magnolia-based concepts to conquer diversity A hierarchical grid-based structure for components Insatiable HTML components called "modules" The seamless integration of web applications based on the Google Web
Toolkit (GWT)
• Summary
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 3
The SWM Group – Facts & figures
Stadtwerke München GmbH
SWM Infrastruktur Region GmbH
SWM Versorgungs GmbH
SWM Infrastruktur GmbH
SWM Services GmbH
SWM Kundenservice GmbH
M-net Telekommunikations GmbH
Münchner Verkehrsgesellschaft mbH (MVG)
Customers approx. 1.1 million
(energy and water)
Employees approx. 7,800
Turnover €4.5 billion
Networks• Electricity approx.
12,000 km• District approx. 800
kmheating
• Gas approx. 3,500 km
• Water approx. 3,200 km
• Transport approx. 628 km
Renewable Energies Expansion Campaign: Including all ongoing projects, the share of green electricity will come to 32 %.
Munich owns the SWM group (100%) Citizen Value as Guidline
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 4
Diverse Requirements in a diverse environment … setting the stage
• Web Sites in the SWM Group www.muenchen.de [Magnolia 4.5] (Commercial section and City administration) www.swm.de (including infrastructure sites) [Magnolia 4.4] www.mvg-mobil.de [Magnolia 4.5 in 2014] … and others (currently not Magnolia-based)
SEO, SEO, SEO
Instant reactions on market neesds
Stable systems
Standardized Layout
No HTML / JS knowledge required
Few editors / Expert Web Developers
200+ editors with low IT affinity
High flexibility(layout /
functionality)
Barrier free
Seamless integration of complex web applications
Low maintenance cost
Reuse components
in all contexts
Easy to use for editors
Applications, dynamic contents
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 5
Now let‘s choose THE Corporate CMS
• Well, ok ….
• Approach 1: Simple – An indiviually Customized CMS for each web site No problem, perfectly fits individual requirements …. … maintainability? We only have limited ressources. … synergies? We end up inventing the wheel over and over again.
• Approach 2: Unify requirements …. Great idea …. ! … Maybe not.
• Approach 3: Let‘s play LEGO® Provide a stable and common set of core concepts and components
shared among sites, add individual customization only where necessary Basis: Magnolia 4 EE
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 7
ATOMIC COMPONENTSHIERARCHICAL CONTAINERS
Maintenance and Usability
Grids, Componentes, Containers – Idea
• Editors often demand very similar components like …
Text-Image-Component (very basic), Teaser & Text-Image-Component Multimedia & Text-Image-Component etc. … and vice versa Same components in a 2, 3 or 4
column-layout ( lots of templates)
• Consequences: Many different templates & components
„Component flodding“ for editors result in maintenance costs for IT
• Grid layouts & Hierarchical containers to the rescue
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 8
Our layout allows 1,2,3 or 6 colums … do the math!
Grids, Componentes, Containers – Technical Solution
11.04.2023Dr. Maximilian Störzer, SMW Services GmbH 9
Few „atomic“ fixed width shared components• Each component has an individual layout
and functionality independent from page• E.g. 150, 300, 600px (6 column grid /
150 px columns / 900 px template)• Expample Components: Image, Teaser,
Carousels, Banner, Text, …
Areas• One area for each component width
(area150, area300, …)• Areas are independant of template• Areas are defined once as prototypes
(not per page)
Building pages: Adapter components• Adapter components allow to nest areas
(i.e. 900 600 + 300, 900 3x300, …)
900 600+300
900 600+300
600 4x150
Grids, Componentes, Containers – Technical Solution
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 10
Area definitions are used in template definitions: i.e. Content (area600) plus Sidebar (area300)
Area definitions are also nestedin adapter components • Render smaller components
floating within a larger area
Benefits Unlimited component nesting
without area redefinitions Requires customized STKRenderer to
allow prototype usage in components Authors may place components in any
matching area – very flexible while also enforcing design guidelines
Only few templates necessary
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 11
INSTANTIABLE HTML COMPONENTS
Flexibility, Stability and Great Useability
HTML Modules – Idea
Trade-off • flexible component adaption
(at runtime!) vs.• unique layouts and
secure & stable web sites
Scenario 1: few and expert authors (both editing and web technology)• FTL & HTML available,
open up the system
Scenario 2: At Munich City Administration, 200+ “non-IT” authors maintain www.muenchen.de
Predefined HTML-Modules to the rescue
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 12
Data Workspace
Module definition
Module Component
}Experts define HTML-modules in Magnolia data workspace
Classic Components
}Authors instanciate modules on use• … similar to
regular compts.
Concept combines• high flexibility (add HTML (inc. FTL!),
JavaScipt and CSS) • Minimized risk (definition is expert only,
no change of used components)
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 13
HTML Modules – Technical Solution
• A new section in the data repository workspace allows web experts to define and organize new modules
• Modules can be combined to create complex modules (reuse of HTLM-chunks / FTL functions)
• Requires Data Types• htmlModule: contains the markup (HTML / FTL);
basic elements• containerModule: used to group modules using links• linkModule: reference to other sub modules (even
complex modules)
• The module component allows authors to reference htmlModules, containerModules and linkModules
• FTL markup in the component collects all referenced modules and combines included markups
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 14
SEAMLESS WEB APPLICATION INTEGRATION
Adding the Power of Active Contents
Seamless Integration of Web Applications – Requirements
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 15
Seamless application integration• no frames, no flash (or comparable
technology)• no context change (different site)
Solid Technological Foundations• Stable technology, high browser
independence• Flexible layouting possible• Powerful programming model• Internationalization required
Mix-up strategy• Applications are modules as any
other CMS module• Application UIs may even
contain texts and pictures editable in Magnolia
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 16
SWM Aqua Angebote
• Application ist used to list & book swim courses in public pools
• Application is configurable (i.e. preselections are possible),
• Using the application does not result in page changes
• See for yourself: https://www.swm.de/privatkunden/m-baeder/kursangebote-ticos.html#entryMask
Seamless Integration of Web Applications – Technical Solution
• The Google Web Toolkit (GWT) is a perfect match for our requirements
• Integration in Magnolia is achieved by defining Magnolia application componentes. Main task:
hiding GWT includes from editors, Allowing easy by-use
parameterisation• Applications are programmed by IT
(classic application development) Powerful programming model Concepts for internationalisation UI is generated by GWT JavaScript
code Server is classical Application Server
based Java Application
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH17
Classic Components
ApplicationComponents
}
GWT Hostpagerendered by Magnolia
[ ]Parameter-ized GWT includes
GWT UIJavaScript
GWT ServerJava Application Backend Services
11.04.2023 Dr. Maximilian Störzer, SMW Services GmbH 18
Take Aways … (Summary)
• Due to the high diversity in the SWM group, we also experience a high diversity in requirements for a CMS
• Magnolia proved to be a perfect fit: Using Magnolia’s flexible architecture, we were able to implement concepts to customize a relatively small set of core concepts for each particular scenario
The container concept allows to flexibly combine „atomic“ components so building complex layouts
The module concepts allows to flexibly create special modules (i.e. for campaigns) at runtime; instantiation and use is simple and low risk
Complex web applications can be easily integrated using the GWT framework and wrapping Magnolia components
• Summary: Authors are happy, IT is happy, Management is happy
Thanks Magnolia!
(8 x 22 cm)(Position: H 3,41; V 2,52)
Hier können Sie ein Bild, Diagramm oder eine Grafik einfügen.
Die Größe sollte diese graue Fläche ganz ausfüllen.
Geeignete Bilder und Grafiken finden Sie unter: I:\Info\Office_Vorlagen\Bilder_und_Grafiken\SWM
Thank you for your kind attention. Do you have question?