An Informal Site Layout and Configuration Analysis, with a Workflow Suggestion for Site Development (Draft 2) This second draft of the presentation includes some details and very brief discussion about pages in the Acme Social Intranet, as well as a page describing some possible directions for extending on the Acme model.

1. GateIn UXP – Acme Sites
An Informal Site Layout and Configuration Analysis
With a Workflow Suggestion for Site Development
Sean Champ
spchamp % users.sourceforge.net
Draft 2 - July 2012

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

3. Acme Web Site
(GateIn Demo)

4. Acme Web Site
Portlets and Editable Regions
Toolbar
Portlets
Content Detail Content List
Portlets Portlets

5. Acme Web Site
Thematic 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

6. Acme Web Site
Structural 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?)

7. A Development Workflow
Page 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

8. A Development Workflow
Page 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

9. More About GateIn Portlets
Configuring 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’

10. More About GateIn Portlets
Configuring 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

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

12. Acme Social Intranet
Homepage
(GateIn Demo)

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

14. Acme Social Intranet
Agendas Page
(GateIn Demo)

15. Acme Social Intranet
Agendas Page
Analysis
• Conventional web-based calendar
• GateIn Calendars can be read as iCal streams

16. Acme Social Intranet
Wiki Page
(GateIn Demo)

17. Acme Social Intranet
Wiki Page
Analysis
• Self Contained Wiki in Intranet Portal

18. Acme Social Intranet
Documents Page
(GateIn Demo)

19. 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 (??)

20. Expanding on the Acme Model
Directions 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