SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler offline
(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
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
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
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
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
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 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!
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
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
INSTANTIABLE HTML
COMPONENTS
Flexibility, Stability and Great Useability
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 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)
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
SEAMLESS WEB
APPLICATION INTEGRATION
Adding the Power of Active Contents
23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 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
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
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
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
(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?

Mais conteúdo relacionado

Mais de Magnolia

Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia
 
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Buzzword bingo: The real deal behind  omnichannel, personalization and headlessBuzzword bingo: The real deal behind  omnichannel, personalization and headless
Buzzword bingo: The real deal behind omnichannel, personalization and headlessMagnolia
 
Developing Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyDeveloping Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyMagnolia
 
Integrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceIntegrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceMagnolia
 
Customer Engagement in the Digital Era
Customer Engagement in the Digital EraCustomer Engagement in the Digital Era
Customer Engagement in the Digital EraMagnolia
 
The Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessThe Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessMagnolia
 
Using Magnolia in a Microservices Architecture
Using Magnolia in a Microservices ArchitectureUsing Magnolia in a Microservices Architecture
Using Magnolia in a Microservices ArchitectureMagnolia
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianMagnolia
 
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia
 
Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Magnolia
 
Launching Magnolia on demand
Launching Magnolia on demandLaunching Magnolia on demand
Launching Magnolia on demandMagnolia
 
Front-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterFront-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterMagnolia
 
Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia
 
Magnolia and the IOT
Magnolia and the IOTMagnolia and the IOT
Magnolia and the IOTMagnolia
 
Internationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesInternationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesMagnolia
 
The new visana website how to fit a square peg into a round hole
The new visana website   how to fit a square peg into a round holeThe new visana website   how to fit a square peg into a round hole
The new visana website how to fit a square peg into a round holeMagnolia
 
Solving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approachSolving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approachMagnolia
 
Extending Magnolia with our solutions
Extending Magnolia with our solutionsExtending Magnolia with our solutions
Extending Magnolia with our solutionsMagnolia
 
Boost your online e commerce with magnolia
Boost your online e commerce with magnoliaBoost your online e commerce with magnolia
Boost your online e commerce with magnoliaMagnolia
 
The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4Magnolia
 

Mais de Magnolia (20)

Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthrough
 
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Buzzword bingo: The real deal behind  omnichannel, personalization and headlessBuzzword bingo: The real deal behind  omnichannel, personalization and headless
Buzzword bingo: The real deal behind omnichannel, personalization and headless
 
Developing Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyDeveloping Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficiently
 
Integrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceIntegrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer Experience
 
Customer Engagement in the Digital Era
Customer Engagement in the Digital EraCustomer Engagement in the Digital Era
Customer Engagement in the Digital Era
 
The Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessThe Age of the IOT & Digital Business
The Age of the IOT & Digital Business
 
Using Magnolia in a Microservices Architecture
Using Magnolia in a Microservices ArchitectureUsing Magnolia in a Microservices Architecture
Using Magnolia in a Microservices Architecture
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynote
 
Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4
 
Launching Magnolia on demand
Launching Magnolia on demandLaunching Magnolia on demand
Launching Magnolia on demand
 
Front-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterFront-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites faster
 
Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?
 
Magnolia and the IOT
Magnolia and the IOTMagnolia and the IOT
Magnolia and the IOT
 
Internationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesInternationalization for globalized enterprise websites
Internationalization for globalized enterprise websites
 
The new visana website how to fit a square peg into a round hole
The new visana website   how to fit a square peg into a round holeThe new visana website   how to fit a square peg into a round hole
The new visana website how to fit a square peg into a round hole
 
Solving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approachSolving for complex UI designs: a front-end perspective and approach
Solving for complex UI designs: a front-end perspective and approach
 
Extending Magnolia with our solutions
Extending Magnolia with our solutionsExtending Magnolia with our solutions
Extending Magnolia with our solutions
 
Boost your online e commerce with magnolia
Boost your online e commerce with magnoliaBoost your online e commerce with magnolia
Boost your online e commerce with magnolia
 
The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4
 

Último

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Último (20)

AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

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

  • 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. 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. 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. 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. 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. ATOMIC COMPONENTS HIERARCHICAL CONTAINERS Maintenance and Usability 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 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. 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. 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. INSTANTIABLE HTML COMPONENTS Flexibility, Stability and Great Useability 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 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. 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. SEAMLESS WEB APPLICATION INTEGRATION Adding the Power of Active Contents 23.09.2013 Dr. Maximilian Störzer, SMW Services GmbH 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. 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. 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. 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. (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?