• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Developing sites with Magnolia 4 / STK

Developing sites with Magnolia 4 / STK



Developing sites with Magnolia 4 / STK Experience report on Magnolia Conference Basel 09/10/2009

Developing sites with Magnolia 4 / STK Experience report on Magnolia Conference Basel 09/10/2009



Total Views
Views on SlideShare
Embed Views



6 Embeds 170

http://www.magnolia-cms.com 114
http://www.slideshare.net 34
http://new-author.magnolia-cms.com 10
http://magnolia-cms.com 8
http://author.magnolia-cms.com 3
http://test-mgnl1 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Developing sites with Magnolia 4 / STK Developing sites with Magnolia 4 / STK Presentation Transcript

    • Developing sites with Magnolia 4 / STK Experience report Magnolia Conference, Technical Track | Basel, 10. September 2009
    • About us Sebastian Frick Technical Project Manager Norman Wiechmann System Architect
    • About Aperto
      • Internet Agency, located in Berlin
      • Offering Conception, Design, Development, Online Marketing
      • Clients from sectors like Public, Media, Automotive, Education
      • Focus on Java technology
    • Aperto and Magnolia
      • Using Magnolia CMS in several projects since 2006 (we started with 3.0.1)
      • Magnolia partner since 2007
      • 15 realized projects, amongst others for customers like Bertelsmann, Siemens Home Appliances, Frankfurt School
      • First realized 4.0 project: www.insm.de
    • Overview about Magnolia 4 / STK
    • Magnolia 4
      • Available since April 2009
      • Standard Templating Kit (STK)
        • Set of pre-built templates and paragraphs
        • unlike Magnolia Sitedesigner the STK is available for CE and EE
      • Advanced Features
        • Enhanced Freemarker Support
        • Additional EE-modules
      • Internal refactorings (API Cleanups)
    • Formation of Standard Templating Kit (STK)
      • short realization times, rapid development and quick changes necessary
      • wide range of project types: from small campaign sites to large business portals
      • own templating kit solutions with other CMS
      • In collaboration with Magnolia we had the opportunity to contribute our experiences and learnings in developing process of the STK
      • conceptional ideas, HTML / CSS and demo theme in STK provided by Aperto
    • What the Standard Templating Kit is not …
      • a visual click-solution
      • a new framework or layer - usage is not mandatory!
      • a static solution concerning features and design
      • a newer sitedesigner (part of the EE in 3.x releases)
    • Standard Templating Kit - Overview
      • Set of standard templates (article, news, events, image galleries)
        • Aggregation paragraphs / templates (RSS, dynamic lists)
        • Feature paragraphs (Video player, Form Module, Commenting)
        • Discover all the possibilities on the Magnolia demo instance
      • Flexible for different kinds of designs
      • Flexible configuration of available templates and paragraph types
      • Open and extensible for new requirements
      • Usage of Freemarker as template language
    • Additional Modules
      • Categorization (for tagging)
      • Imaging Module (automatic resizing of images)
      • User Generated Content Module, supporting clustering between multiple servers
      • And some more...
      • All features and differences between the editions are listed up on the feature matrix on the Magnolia Website
    • Possible project approaches
    • #1 Leave the STK as it is
      • If you have to setup a project really fast…
      • STK provides preconfigured templated in a modern design
      • Logos and images in demo-project can be exchanged
    • #2 Customizing design
      • Usage of modern frontend standards (XHTML, CSS, SEO-friendly markup, WCAG compliance)
      • High maintainability via CSS
      • Flexible Designs due to usage of Media Queries or preconfigured grid variants
      • Maintenance possible without Java / Freemarker knowledge
    • #2 Customizing design – Choice between grid variants
      • Several grid variants available (1-3 columns layout, 0-2 sidebars) via body classes
      • Configuration via STK module
      • Possible variants can be found in the online documentation
    • #2 Customizing design – Choice between grid variants configuration by adding a node bodyClass in template definition
    • #2 Customizing design – Choice between grid variants <body ... class=„col-float3“ > no body class...
    • ? Just changing designs - is this our real world?
    • Challenges in our daily business
      • Clients sometimes don‘t need all templates / paragraphs, sometimes less is more
      • Clients sometimes need additional templates / paragraphs
      • Not every design can be realized via CSS and configuration
      • A project seems to be completely different from a typical STK project
    • #3 Changing composition of templates and paragraphes
      • Possible configurations in Admin Central...
      • Availability of existing or new templates / paragraphs
      • Mapping between paragraphs and templates
      • Managing several themes
      • Multiple site support in Magnolia EE
    • #4 Adding own templates / paragraphs
      • Create an own module for your enhancements
      • It‘s easy to copy and maintain existing sources
      • No barriers in relation to developing completely new features
    • #5 Remixing STK
      • Create something new from existing STK sources
      • Pick what you need, leave the rest aside
      • Break the grid
    • STK project #1: www.insm.de and subsites - www.einstieg-in-arbeit.de - www.insm-newsroom.de
    • STK project #2: www.studio-tv-film.de
    • A closer look on the backend site…
    • What is your style of developing?
      • One genious person can do it all
      • single live instance
      • no build, no deployment process
      • Team of developers with different skills
      • source control management
      • continuous integration
      • scripted deployment on
      • staging- and live instances
    • Maven Setup
      • Multi Module Project
        • html-prototype
        • theme-module
        • project-module
        • webapp
        • content-module
        • patch (optional)
    • Maven Archetype
      • Maven Archetype Plugin
        • http://maven.apache.org/plugins/maven-archetype-plugin/
      • Provided by Magnolia
        • maven-archetype-magnolia-module
        • maven-archetype-magnolia-webapp
        • Not available for 4.x yet
        • STK theme type planned (MPARCH-11)
      • Custom Maven Archetype
        • multi module project strukture
    • Theme Module
      • Theme Configuration
    • Theme Module – Version Handler
      • Default: info.magnolia.module.templatingkit.setup.ThemeVersionHandler
        • bootstrap theme configuration
        • install JavaScript and CSS files into repository with „processed“ type
        • install Images files into dms
      • Custom ThemeVersionHandler
        • not using „processed“ type
        • insert version number into static file pathes
        • adding virtual uri mapping that removes version number on request
        • adding cache header creation on static files with far future expiration
    • Project Module – Site Definition
      • using custom fluent language update tasks
          • (see MAGNOLIA-2828 for source code)
    • Freemarker
      • enforcing of strict separation of design and code (no scriptlets possible)
      • optimized for writing templates
      • independent from servlet container and servlet api
        • allows arbitrary storage location
        • no compilation necessary
        • easy unit testing
      • existing taglibs can be used
      • IDE support for Eclipse + IDEA
    • Freemarker with Magnolia
      • various Freemarker template locations
        • module's jar (classpath)
        • content repository
        • webapp folder / any filesystem folder
      • overloading templates
      • mixing Freemarker and JSP possible
    • STK-specific Context Objects
      • stk
        • instance of the STKUtil
      • content
        • same as normal, but HTML encoded by default
      • def
        • most likely an instance of STKTemplate
        • access header, footer, areas, css-, js-files
      • model
        • depends on the modelClass defined in the template, most likely an instance of an STKTemplateModel
    • Content Model Bean
      • accessing content properties
      • do calculations
      • accessing related contents
      • do content queries
      • your businesslogic ...
        • … we love it!
    • New Module – Newsletter
      • Integration of email marketing software and mailing lists
      • Submodules
        • newsletter
        • newsletter-stk
        • campaignmonitor
      • www.campaignmonitor.com
    • Closing conclusions
      • Magnolia 4 doesn‘t break existing habits!
      • Still possible to use it the way you did before in previous releases
      • No experience migrating complete projects to Magnolia 4 yet, no big problems in porting our helper classes
    • Closing conclusions
      • STK fits to different needs
      • Less templating effort for backend developers, more flexibility for frontend developers
      • More time to focus on new features and integration issues
      • After passing the learning curve: big acceleration in development phase
    • How to get started?
      • Check the online demo
      • Study the STK documentation (it‘s growing)
      • Join the mailing list for discussion and suggestions, don‘t hesitate to put questions
    • Thank you for your interest!
      • Our contacts..
      • [email_address]
      • [email_address]
      • In the web...
      • http://www.aperto.de
      • http://blog.aperto.de
      • http://www.twitter.com/aperto
      • http://www.twitter.com/maschinenraum