Your SlideShare is downloading. ×
Developing sites with Magnolia 4 / STK
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing sites with Magnolia 4 / STK

4,313

Published on

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

Published in: Technology, Business, Travel
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,313
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developing sites with Magnolia 4 / STK Experience report Magnolia Conference, Technical Track | Basel, 10. September 2009
  • 2. About us Sebastian Frick Technical Project Manager Norman Wiechmann System Architect
  • 3. 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
  • 4. 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
  • 5. Overview about Magnolia 4 / STK
  • 6. 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)
  • 7. 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
  • 8. 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)
  • 9. 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
  • 10. 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
  • 11. Possible project approaches
  • 12. #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
  • 13. #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
  • 14. #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
  • 15. #2 Customizing design – Choice between grid variants configuration by adding a node bodyClass in template definition
  • 16. #2 Customizing design – Choice between grid variants <body ... class=„col-float3“ > no body class...
  • 17. ? Just changing designs - is this our real world?
  • 18. 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
  • 19. #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
  • 20. #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
  • 21. #5 Remixing STK
    • Create something new from existing STK sources
    • Pick what you need, leave the rest aside
    • Break the grid
  • 22. STK project #1: www.insm.de and subsites - www.einstieg-in-arbeit.de - www.insm-newsroom.de
  • 23. STK project #2: www.studio-tv-film.de
  • 24. A closer look on the backend site…
  • 25. 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
    VS.
  • 26. Maven Setup
    • Multi Module Project
      • html-prototype
      • theme-module
      • project-module
      • webapp
      • content-module
      • patch (optional)
  • 27. 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
  • 28. Theme Module
    • Theme Configuration
  • 29. 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
  • 30. Project Module – Site Definition
    • using custom fluent language update tasks
        • (see MAGNOLIA-2828 for source code)
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. Content Model Bean
    • accessing content properties
    • do calculations
    • accessing related contents
    • do content queries
    • your businesslogic ...
      • … we love it!
  • 35. New Module – Newsletter
    • Integration of email marketing software and mailing lists
    • Submodules
      • newsletter
      • newsletter-stk
      • campaignmonitor
    • www.campaignmonitor.com
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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

×