Managing Content of Flash-powered Websites with Magnolia

Managing content of flash-powered
websites with Magnolia
16 september 2010

0. about us

1. introduction

2. the solution

3. results

4. demo time

5. Q&A

Copyright 2010 OpenMind 2

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

We are working with

0. about us

1. introduction


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

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

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

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

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

2. the solution


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

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

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

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


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.

2. the solution

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

3. results


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

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

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

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.it
www.openmindonline.it
www.openmindlab.com


Managing Content of Flash-powered Websites with Magnolia

Recommended

Recommended

More Related Content

Similar to Managing Content of Flash-powered Websites with Magnolia

Similar to Managing Content of Flash-powered Websites with Magnolia (20)

More from bkraft

More from bkraft (20)

Managing Content of Flash-powered Websites with Magnolia