Managing content of flash-powered
           websites with Magnolia
                     16 september 2010
0.        about us


                1.        introduction


                2.        the solution


                3. ...
0.   about us




Copyright 2010 OpenMind        3
OpenMind and the open source
 OpenMind s.r.l. (www.openmindonline.it) is one of the most active Italian
 company on open s...
We are working with




                              0. about us
Copyright 2010 OpenMind   5
1.   introduction




Copyright 2010 OpenMind          6
Stakeholders – Piaggio Group, the client

                               PIAGGIO GROUP is the largest
                    ...
Stakeholders – Van Gogh Creative, the web agency

                                    Vangogh Creative is an
             ...
Piaggio Group Goals

        Unique communication strategy for all the brands and markets
         Partnership with unique...
Piaggio Group Requirements

             Use flash to deliver a strong emotional experience
                 Manage conten...
Business Opportunity by our point of view

                   Enter the markets where flash solutions are attractive
     ...
Copyright 2010 OpenMind   12
2.   the solution




Copyright 2010 OpenMind          13
Server side architecture overview


                                        simple cache module

                         ...
Client side architecture overview
                                           html page

                               JS ...
Flash module

    
        swfaddress server-side support (manage swfaddress redirects)
    
     custom template and pa...
Communication flow – 1

    Consider following request:
         http://www.motoguzzi.it/motoguzzi/IT/it/moto/naked/V7-cla...
Communication flow – 2

    swfaddress request:
    Host                  www.motoguzzi.it
    Path                  /
   ...
Communication flow – 3

    www.motoguzzi.it/ is rendered as any other page (communication flow - 1), but
    before the e...
Authoring support

    In authoring environment each html page loads the magnolia javascripts needed to
    work with dial...
3.    results




Copyright 2010 OpenMind        21
Business results - Piaggio

           Unique authoring platform for their sites with same authoring
            experienc...
Business results – Van Gogh



                  Powerful AS framework integrated with a CMS platform

         Frontend r...
Business results - Openmind


                                  New Magnolia module

                    Strong case histo...
4.    demo




Copyright 2010 OpenMind    25
And what about mobile?

                     We know Flash on iPhone and iPad is not permitted!

       This is not a limi...
5.    q&a




Copyright 2010 OpenMind    27
Thank you!



                          manuel.molaschi@openmindonline.it
                               www.openmindonlin...
Upcoming SlideShare
Loading in …5
×

Managing Content of Flash-powered Websites with Magnolia

1,362
-1

Published on

Presentation about integration between Magnolia CMS and flash front-end to get a full Flash CMS! You can work directly from flash application and edit your contents in-place.

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
1,362
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Managing Content of Flash-powered Websites with Magnolia

  1. 1. Managing content of flash-powered websites with Magnolia 16 september 2010
  2. 2. 0. about us 1. introduction 2. the solution 3. results 4. demo time 5. Q&A Copyright 2010 OpenMind 2
  3. 3. 0. about us Copyright 2010 OpenMind 3
  4. 4. OpenMind and the open source OpenMind s.r.l. (www.openmindonline.it) is one of the most active Italian company on open source projects, focused on j2ee technologies: www.openmindlab.com Openmind manages the Openmindlab initiative, to promote our opensource projects (openutils). Some magnolia related projects: media module, simple cache module, criteria API, groovy module, messaging module, stripes and struts integration modules, … From ohloh: • 12 active developers on open source communities • 29 person years effort provided • 118,9 K code lines generated 0. about us Copyright 2010 OpenMind 4
  5. 5. We are working with 0. about us Copyright 2010 OpenMind 5
  6. 6. 1. introduction Copyright 2010 OpenMind 6
  7. 7. Stakeholders – Piaggio Group, the client PIAGGIO GROUP is the largest European manufacturer of two- wheeled motor vehicles and one of the world's leaders in its sector. The Group is also a major international player in the commercial vehicle market. Brands 1. introduction Copyright 2010 OpenMind 7
  8. 8. Stakeholders – Van Gogh Creative, the web agency Vangogh Creative is an emerging web-agency http://www.vangogh-creative.it/ With strong experience in: Music Fashion Automotive Flash addicted! 1. introduction Copyright 2010 OpenMind 8
  9. 9. Piaggio Group Goals Unique communication strategy for all the brands and markets Partnership with unique communication agency for the entire group Increase brand positioning (Vespa, Motoguzzi, Scarabeo, Piaggio) Increase position on web search results Increase traffic to the web sites Reduce tech costs Contents editing and publishing without technical skills Aggressive on the time table for the go live Save money 1. introduction Copyright 2010 OpenMind 9
  10. 10. Piaggio Group Requirements Use flash to deliver a strong emotional experience Manage contents by a simple-to-use CMS Centralized content management Preview environment High-capacity / high-availability system 1. introduction Copyright 2010 OpenMind 10
  11. 11. Business Opportunity by our point of view Enter the markets where flash solutions are attractive Reduce project cost for front end delivery Flash is still the choice for the web in fashion, design, architecture, videogame, movie, product presentation, and so on … we want to be there too There are no enterprise level CMS that manages in “simple is beautiful” way both html and flash contents 1. introduction Copyright 2010 OpenMind 11
  12. 12. Copyright 2010 OpenMind 12
  13. 13. 2. the solution Copyright 2010 OpenMind 13
  14. 14. Server side architecture overview simple cache module flash module custom template renderer media spring module MVC server-side swfaddress spring Magnolia integration layer 2. the solution Copyright 2010 OpenMind 14
  15. 15. Client side architecture overview html page JS (swfaddress, swfobject, analytics) swfaddress analytics integration integration content handler http status handler actual content navigation handler flash movie VG framework 2. the solution Copyright 2010 OpenMind 15
  16. 16. Flash module  swfaddress server-side support (manage swfaddress redirects)  custom template and paragraph renderer that choose template to apply by uri extension without using subtemplating  .html for html ouput  .xml for xml contents  .sec for tree structure infos  bypass flash mode  custom tags to render  html page structure with swfaddress, swfobject, … (sensible to bypass flash mode)  xml content file structure  nodedata values (media, grids, …) in xml page contents  authoring and permissions info in xml page contents 2. the solution Copyright 2010 OpenMind 16
  17. 17. Communication flow – 1 Consider following request: http://www.motoguzzi.it/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic.html Html version of the page is rendered (demo) In the head tag swfaddress and swfobject javascript libraries are included. In the body current page contents and navigation links are rendered. If the request is coming from javascript / flash enabled browser (not a spider for instance) swfaddress-optimizer script extracts path, query string and hash information from uri, sends them to server via XmlHttpRequest and evaluates the response. On the server side a filter intercepts the request coming from swfaddress, builds and returns the javascript statement to redirect the browser to the root of the domain with the right hash value (and keeping query string values). 2. the solution Copyright 2010 OpenMind 17
  18. 18. Communication flow – 2 swfaddress request: Host www.motoguzzi.it Path / Query string sa=/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic Content-Type application/x-swfaddress and filter response: location.replace("/#/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic") When swfaddress evaluates filter response, the user is redirected to http://www.motoguzzi.it/#/motoguzzi/IT/it/moto/nakes/V7-classic/V7-Classic 2. the solution Copyright 2010 OpenMind 18
  19. 19. Communication flow – 3 www.motoguzzi.it/ is rendered as any other page (communication flow - 1), but before the end of the body tag, a script replaces the main div contents with the swf application (unique for entire site). When swf movie is starting, it preloads the site tree (n levels deep under language page) and some other resources (pngs, swfs, flvs). Swf application then reads from browser address bar (through swfaddress AS api) the hash value (/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic) which identifies the current page path. This value has a double use: to highlight right menu paths to the page and to build the request to the server for contents: http://www.motoguzzi.it/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic.xml Xml contents are then rendered by the swf application. The last step is the call from swf application to javascript analytics function. 2. the solution Copyright 2010 OpenMind 19
  20. 20. Authoring support In authoring environment each html page loads the magnolia javascripts needed to work with dialogs, preview mode and paragraphs related operations. Some information are added to xml contents file:  environment (edit / preview / public)  current user  current user permissions on page  xml declaration for buttons <page loggedUser="admin" mode="edit" permissions="W"> <buttons> <button align="L" onclick="mgnlPreview(true)" label="Preview" /> <button align="L" onclick="MgnlAdminCentral.showTree('website', '/motoguzzi/IT/it/home')" label="AdminCentral" /> <button align="R" onclick="mgnlOpenDialog('/motoguzzi/IT/it/home','','','headers','website')" label="Proprietà header" /> </buttons> … Swf application renders magnolia green bars (main or paragraphs bars) and binds calls to ExternalInterface.call(“[button's onclick attribute value]”) to the buttons. 2. the solution Copyright 2010 OpenMind 20
  21. 21. 3. results Copyright 2010 OpenMind 21
  22. 22. Business results - Piaggio Unique authoring platform for their sites with same authoring experience both for traditional html sites and full-flash sites For full-flash sites, flash front end is decoupled from CMS SEO enabled sites Highly optimized platform to deliver contents on a cheap hardware and network infrastructure On time on the go live plan 3. results Copyright 2010 OpenMind 22
  23. 23. Business results – Van Gogh Powerful AS framework integrated with a CMS platform Frontend release process mostly independent from CMS release process Tech solution to support their creativity 3. results Copyright 2010 OpenMind 23
  24. 24. Business results - Openmind New Magnolia module Strong case history to open new ways on the market Strong partnership with a sexy agency More efficiency on front end delivery 3. results Copyright 2010 OpenMind 24
  25. 25. 4. demo Copyright 2010 OpenMind 25
  26. 26. And what about mobile? We know Flash on iPhone and iPad is not permitted! This is not a limit … this is a big opportunity for us and Magnolia. We built a new Magnolia Module to catch this opportunity, but this is another story  Copyright 2010 OpenMind 26
  27. 27. 5. q&a Copyright 2010 OpenMind 27
  28. 28. Thank you! manuel.molaschi@openmindonline.it www.openmindonline.it www.openmindlab.com Copyright 2010 OpenMind 28

×