GateIn UXP – Acme Sites

An Informal Site Layout and Configuration AnalysisWith a Workflow Suggestion for Site Development

Sean Champspchamp % users.sourceforge.net

Draft 2 - July 2012

GateIn UXP

• GateIn Portal Framework + Social Intranet Components

• Commercially supported in eXo Platform

• GateIn UXP edition includes two sample portals ACME Web Site ACME Social Intranet

Acme Web Site(GateIn Demo)

Acme Web SitePortlets and Editable Regions

Content List Portlets

Content Detail Portlets

Toolbar Portlets

Acme Web SiteThematic Overview

• Public Content - Presentational Focus Clean Appearance in Content Consistent Decorative Style in Layout Elements

Background Images Icons and Icon Styles Site Color Theme

Coordination of Design Style Among Elements

Acme Web SiteStructural Overview

• Design elements are contained within static blocks defined by portlet structures HTML Images

• Page design is constructed with simple portlets – Content Portlets, in this example Content Detail Content List

• Content Portlets - Content Elements HTML CSS

CSS classes, referencing …. CSS stylesheets for page (howto?)

Images Groovy Scripting ??? Templates ???

• Editing Workflow Content can be edited with GateIn Content Explorer, in the browser window Content can be pushed to server via GateIn WebDAV adapter, in the development network

(howto?)

A Development WorkflowPage One - Overview

• Summary: Two site editions – static HTML locally designed, partitioned, then reconstructed in the portal

• Concept Develop the site locally with conventional toolchains Partition the content automatically for publication to the portal; Publish the content to the portal (WebDAV) Reconstruct the original site design using specified portlets (may be automated)

• Benefits– Allows for ease and familiarity of workflow with conventional toolchains and site development models– Allows adaptation of published content, using the flexible portal framework– “Best of both worlds”

• Requirements– Familiarity with conventional toolchains– Familiarity with portal structure, layout, and portlet availability– Familarity with techniques and tools for site partitioning and publishing

• Toolchains Web editor toolchain may include Adobe Dreamweaver or other web site editing platform Graphics Editing Toolchains

Vector Graphics Toolchain Raster Graphics Toolchain

Audio/Video Editing Toolchains

A Development WorkflowPage Two – The Process

Local Site Edition (Static XHTML) Design and develop the pages and other content items using the selected toolchains Partition the pages structurally, for reconstruction in portlets

Content Display Portlet, for Singleton Content Content List Portlet, for Enumerated Content

Denote each partitioned element for its target portlet Using a specially selected CSS class on each block level element, denote each target portlet by type - content

display, content list, etc<div class=“foo contentDisplay”>…</div>

Use the HTML ‘id’ value on each partitioned block level element, to denote the file name of the generated content element file

<div class=“foo contentDisplay” id=“fooBanner”>…</div>

Generate partitioned site with individual named content elements, using XSL Page Content Elements – Extract the partitioned content blocks into individual files, each named per HTML ID Page Meta-Elements – Extract the CSS, script components, page meta tags, and other page metadata into

individual files, each named for the type of the containing element and the content Include any additional media components – graphics, audio, video – in the final portal publication set

Publish partitioned content elements to portal, via WebDAV Portal Site Edition

Construct the portal pages, retaining the site structure (folders) as developed in the static HTML edition May be automated on the portal side, with the addition of some third party code

More About GateIn PortletsConfiguring the Content Display Portlet

• Content Path• Displayable Options

Title Date Option Bar – Displays the ‘print’ link

• Print Settings “Show in page” (?) “With” (?)

• Advanced Settings Dynamic Navigation - content change with URL params Content Visibility Restriction – by ‘authentication’ or ‘role’

More About GateIn PortletsConfiguring The Content List Portlet

• Content Selection– Display Mode

• “By Folder” – Display all content in folder• “By Content” – Manual selection of displayed content

– Folder Path– Sorting Order for List Items

• Display Settings– Header Text– Template Selection (THIS IS IMPORTANT!)– Pagination (UNIQUE!)– Number of Displayed Items per Portlet ‘Page’– Displayable items - Toggle

• Title• Image• Summary• Header• Date• Link• Referesh• “More”• RSS Feed

More about GateIn Portlets(from the GateIn User Guide 3.5)

• Every page element is contained by a portlet• Functional Portlets

Account Portlet – account registration and profile configuration Organization Portlet – user, group, and organization structure and permissions Application Registry Portlet – application categories and permissions Star Toolbar Portlet – toolbar button – select display language and site skin, or sign out

• Interface Portlets Banner Portlet – Organizational banner, icons, slogan HomePage Portlet – (page as portlet??) Navigation Portlet – navigation toolbar elements Sitemap Portlet – Structured list of site pages Breadcrumbs Portlet – Site navigation history, abbreviated Iframe Portlet – Inline frames, external content Dashboard Portlet – Portal gadgets container page, accessed from navigation toolbar Gadget Wrapper Portlet – Gadget presentation in canvas mode (Canvas mode ??) Footer Portlet – Site organization name, rights, etc

Acme Social Intranet Homepage(GateIn Demo)

Acme Social Intranet Homepage

Analysis

• Demo• Content is for internal use by employees• Limited presentational content• Streamlined workflow• Dashboard allows each user to select his or her own custom

Google gadgets and other gadgets, like a Sandbox

Acme Social Intranet Agendas Page

(GateIn Demo)

Acme Social Intranet Agendas Page

Analysis

• Conventional web-based calendar• GateIn Calendars can be read as iCal streams

Acme Social Intranet Wiki Page(GateIn Demo)

Acme Social Intranet Wiki Page

Analysis

• Self Contained Wiki in Intranet Portal

Acme Social Intranet Documents Page

(GateIn Demo)

Acme Social Intranet Documents Page

Analysis

• Central management and intranet-local sharing for multiple types of media file– Documents– Music and Audio– Pictures – Video

• Accessible with WebDAV (??)

Expanding on the Acme ModelDirections for Component Integration

• Portlets for Machine Generated Content, Dynamic Content• Reports

Aperte Reports• Workflow Integration

Aperte Workflow• Knowledge Management in Web 2.0

Ontopia OWL API Apache Stanbol Maui Indexer DCMI

Project Management EmForge