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


0. about us


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

http://www.openmindonline.it/


We are working with

0. about us


1. introduction


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


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!


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


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


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



2. the solution


Server side architecture overview

2. the solution

Magnolia

simple cache module

flash modulecustom template

renderer

server-side swfaddress

mediamodule

springintegration

layer

springMVC


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


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


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).



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



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.


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.


3. results


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


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


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


4. demo


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


5. q & a


Thank you!

manuel.molaschi@openmindonline.itwww.openmindonline.itwww.openmindlab.com

mailto:[email protected]

Technology

Managing Content of Flash-powered Websites with Magnolia