(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...
Agenda
• The SWM Group – Facts & figures, Branches … setting the stage
• Magnolia-based concepts to conquer diversity
 A ...
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 3
The SWM Group – Facts & figures
Stadtwerke München GmbH
SWM Infrast...
Diverse Requirements in a diverse environment … setting the stage
• Web Sites in the SWM Group
 www.muenchen.de [Magnolia...
Now let‘s choose THE Corporate CMS
• Well, ok ….
• Approach 1: Simple – An indiviually Customized CMS for each web site
 ...
ATOMIC COMPONENTS
HIERARCHICAL CONTAINERS
Maintenance and Usability
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 7
Grids, Componentes, Containers – Idea
• Editors often demand very similar
components like …
 Text-Image-Component (very b...
Grids, Componentes, Containers – Technical Solution
23.09.2013
Dr. Maximilian Störzer, SMW Services GmbH 9
Few „atomic“ fi...
Grids, Componentes, Containers – Technical Solution
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 10
Area definitio...
INSTANTIABLE HTML
COMPONENTS
Flexibility, Stability and Great Useability
23.09.2013 Dr. Maximilian Störzer, SMW Services G...
HTML Modules – Idea
Trade-off
• flexible component adaption
(at runtime!) vs.
• unique layouts and
secure & stable web sit...
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 13
HTML Modules – Technical Solution
• A new section in the data repo...
SEAMLESS WEB
APPLICATION INTEGRATION
Adding the Power of Active Contents
23.09.2013 Dr. Maximilian Störzer, SMW Services G...
Seamless Integration of Web Applications – Requirements
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 15
Seamless a...
SWM Aqua Angebote
• Application ist used to list &
book swim courses in public
pools
• Application is configurable (i.e.
p...
Seamless Integration of Web Applications – Technical Solution
• The Google Web Toolkit (GWT) is a
perfect match for our re...
Take Aways … (Summary)
• Due to the high diversity in the SWM group,
we also experience a high diversity in requirements f...
(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 dies...
Upcoming SlideShare
Loading in …5
×

Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments

4,336 views
4,242 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,336
On SlideShare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments

  1. 1. (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:InfoOffice_VorlagenBilder_und_GrafikenSWM Munich City Utilities: Using Magnolia’s Flexibility for Diverse Environments Dr. Maximilian Störzer // September 2013
  2. 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 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 2
  3. 3. 23.09.2013 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 km heating • 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
  4. 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) 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 4 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, d ynamic contents
  5. 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 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 5
  6. 6. ATOMIC COMPONENTS HIERARCHICAL CONTAINERS Maintenance and Usability 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 7
  7. 7. 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 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 8 Our layout allows 1,2,3 or 6 colums … do the math!
  8. 8. Grids, Componentes, Containers – Technical Solution 23.09.2013 Dr. 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
  9. 9. Grids, Componentes, Containers – Technical Solution 23.09.2013 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 nested in 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
  10. 10. INSTANTIABLE HTML COMPONENTS Flexibility, Stability and Great Useability 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 11
  11. 11. 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 23.09.2013 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)
  12. 12. 23.09.2013 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
  13. 13. SEAMLESS WEB APPLICATION INTEGRATION Adding the Power of Active Contents 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 14
  14. 14. Seamless Integration of Web Applications – Requirements 23.09.2013 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
  15. 15. 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/privatkund en/m-baeder/kursangebote- ticos.html#entryMask 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 16
  16. 16. 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 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 17 Classic Components Application Components } GWT Hostpage rendered by Magnolia [ ]Parameter- ized GWT includes GWT UI JavaScript GWT Server Java Application Backend Services
  17. 17. 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! 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 18
  18. 18. (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:InfoOffice_VorlagenBilder_und_GrafikenSWM Thank you for your kind attention. Do you have question?

×