Your SlideShare is downloading. ×
Managing Content of Flash-powered Websites with Magnolia
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

Managing Content of Flash-powered Websites with Magnolia

1,280

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.

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,280
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
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. Managing content of flash-powered websites with Magnolia 16 september 2010
  • 2. 0. about us 1. introduction 2. the solution 3. results 4. demo time 5. Q&A Copyright 2010 OpenMind 2
  • 3. 0. about us Copyright 2010 OpenMind 3
  • 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. We are working with 0. about us Copyright 2010 OpenMind 5
  • 6. 1. introduction Copyright 2010 OpenMind 6
  • 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. 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. 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. 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. 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. Copyright 2010 OpenMind 12
  • 13. 2. the solution Copyright 2010 OpenMind 13
  • 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. 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. 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. 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. 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. 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. 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. 3. results Copyright 2010 OpenMind 21
  • 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. 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. 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. 4. demo Copyright 2010 OpenMind 25
  • 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. 5. q&a Copyright 2010 OpenMind 27
  • 28. Thank you! manuel.molaschi@openmindonline.it www.openmindonline.it www.openmindlab.com Copyright 2010 OpenMind 28

×