Managing Content of Flash-powered Websites with Magnolia
-
Upload
boris-kraft -
Category
Documents
-
view
1.338 -
download
0
description
Transcript of Managing Content of Flash-powered Websites with Magnolia
Managing content of flash-powered websites with Magnolia
16 september 2010
Copyright 2010 OpenMind 2
0. about us
1. introduction
2. the solution
3. results
4. demo time
5. Q&A
Copyright 2010 OpenMind 3
0. about us
Copyright 2010 OpenMind 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 5
We are working with
0. about us
Copyright 2010 OpenMind 6
1. introduction
Copyright 2010 OpenMind 7
Stakeholders – Piaggio Group, the client
1. introduction
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
Copyright 2010 OpenMind 8
Stakeholders – Van Gogh Creative, the web agency
1. introduction
Vangogh Creative is an emerging web-agencyhttp://www.vangogh-creative.it/
With strong experience in:
Music
Fashion
Automotive
Flash addicted!
Copyright 2010 OpenMind 9
Piaggio Group Goals
1. introduction
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
Copyright 2010 OpenMind 10
Piaggio Group Requirements
1. introduction
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
Copyright 2010 OpenMind 11
Business Opportunity by our point of view
1. introduction
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
Copyright 2010 OpenMind 12
Copyright 2010 OpenMind 13
2. the solution
Copyright 2010 OpenMind 14
Server side architecture overview
2. the solution
Magnolia
simple cache module
flash modulecustom template
renderer
server-side swfaddress
mediamodule
springintegration
layer
springMVC
Copyright 2010 OpenMind 15
Client side architecture overview
2. the solution
html page
JS (swfaddress, swfobject, analytics)
flash movie VG framework
actual content
navigationhandler
swfaddressintegration
analyticsintegration
http status handler
contenthandler
Copyright 2010 OpenMind 16
Flash module
2. the solution
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
Copyright 2010 OpenMind 17
Communication flow – 1
2. the solution
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).
Copyright 2010 OpenMind 18
Communication flow – 2
2. the solution
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
Copyright 2010 OpenMind 19
Communication flow – 3
2. the solution
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.
Copyright 2010 OpenMind 20
Authoring support
2. the solution
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.
Copyright 2010 OpenMind 21
3. results
Copyright 2010 OpenMind 22
Business results - Piaggio
3. results
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
Copyright 2010 OpenMind 23
Business results – Van Gogh
3. results
Powerful AS framework integrated with a CMS platform
Frontend release process mostly independent from CMS release process
Tech solution to support their creativity
Copyright 2010 OpenMind 24
Business results - Openmind
3. results
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
Copyright 2010 OpenMind 25
4. demo
Copyright 2010 OpenMind 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 27
5. q & a
Copyright 2010 OpenMind 28
Thank you!
manuel.molaschi@openmindonline.itwww.openmindonline.itwww.openmindlab.com