The official documentation is at: http://docs.alfresco.com
NOTE: Web Studio is no longer part of the Alfresco Community build. The Surf framework that Web Studio utilised has been committed to Spring Source http://www.springsource.org/extension.../se-surf. Spring Surf is the underlying framework used by Alfresco Share.
The Web Editor Framework is the recommended platform for developing rich in-context WCM capabilities.
This document describes features that are not part of Alfresco 3.0 Enterprise. A release of Web Studio is included in Alfresco Labs 3 Final.
This page serves to communicate design considerations and release information to the Alfresco user base regarding the availability and usage of Alfresco Web Studio.
Table of Contents
- 1 Alfresco Web Studio
- 2 Features
- 3 Actors
- 4 Concepts
- 5 High-level scenarios
- 6 Screenshots
- 7 Feedback
Alfresco Web Studio
It features graphical overlays that facilitate the building of your web site's pages, navigation structure, templates, and presentation layout. Web components snap into your site's pages through simple drag-and-drop interactions.
How to download Web Studio
Web Studio is no longer part of the Alfresco Community build. The Surf framework that Web Studio utilised has been committed to Spring Source http://www.springsource.org/extension.../se-surf. Spring Surf is the underlying framework used by Alfresco Share.'
Once you have installed Web Studio, you can start to build a web site.
To help you get started, you can follow a series of tutorials. There are also some pre-built sites available, which you can use to try things out right away.
The complete vision for Alfresco Web Studio is vast and builds upon improvements to Alfresco Web Content Management as we progress down the product roadmap. Many of the features that Web Studio will offer require the WCM Services support that will be available in Alfresco 3.1.
The following are high level functional intentions as separated into release buckets:
|Release Name||Functional Objectives|
|Labs 3 Final|
The following actors are defined:
- Site Manager
- Creates and administers the website
- Content Contributor
- Authors new content and places it into the website
- Previews content, makes changes, and then submits content for approval
- Content Editor
- Uses dashboards to review content editing tasks
- Edits content within context of website and approves for release
- Site Designer
- Builds the website from pages, templates, and presets
- Associates components into page regions and configures components
The following concepts are intended to be the main drivers for Alfresco Web Studio.
Simple web site creation
- Create a web site with a few clicks
- Reuse prebuilt site templates or build your own from scratch
- Make any change to your website knowing that you can always roll back if you make a mistake
- A safe and isolated editing environment
Easy page authoring
- Add new pages to your site with just a few clicks
- Drag-and-drop site assembly
- Access a rich library of online components and templates
- Visual in-context editing and preview
Share with the community
- Upload and download what you build through the Alfresco Network
100% Alfresco Surf-compatible
- Sites built with Web Studio will run standalone in production or work seamlessly within the WCM authoring environment
The following scenarios can be achievable using Web Studio.
Creating a website
A site manager wants to create a new website. They log into the Web Studio tool (for example using a URL like http://company.com/studio) and the Site Creation wizard walks them through the process of creating a new site as follows.
- Selects from one of several pre-packaged sites.
- Configures the pre-packaged site.
- Clicks Finish to create the site. It does this by performing the following:
- Creates a new web project.
- Populates the web project with the website content which is retrieved from archive zip file on Alfresco Network.
- Redirects to the front page of the website.
- Creates a new web project.
The website manager can then hover over page elements to show how in-context controls are available. They can also display the overlay to show how the overlays simply â€œoverlayâ€ on top of the running site.
Authoring a page
A site designer wants to add pages to their site to set up navigation.
The site manager:
- Browses to the site designer's site and clicks on the floating menu. Web Studio loads over the current site.
- Adds a new page from the navigation slider. They may add several pages and drag them into place, automatically creating the page associations and navigation tree.
- Edits the page properties and change the name of the pages.
- Associates a page to a template via the edit page.
Visual design of template layout
A site designer wants to create a new template with their own look and feel.
The site designer:
- Clicks on the templates slider and clicks Create a New Template.
- Defines the name and description of their template. They are then presented with the visual template designer.
- Drops regions onto the template and configures their x, y, width, and height.
- Saves their changes.
The site designer can also:
- Click Find more Templates to view the template add-ons section of Alfresco Network.
- Drag a template from their Web Studio installation over to Alfresco Network.
- Drag templates from Alfresco Network into their Web Studio installation.
The site designer grabs a component type and drops it into the page. This binds the component into place. The user can then click on components bound into the page and configure them.
The site designer can also:
- Click Find more Components to view the components add-ons section of Alfresco Network.
- Drag a component type from their Web Studio installation over to Alfresco Network.
- Drag a component type from Alfresco Network into their Web Studio installation.
Associating content types
A site designer wants to associate content type presentation to templates. This would allow content of various types to find their preferred presentation templates. For instance, the site designer might want articles to display on a 'full page article viewer' template.
The site designer:
- Clicks Site from the menu and selects Content Type Associations.
- Associates a content type to a template and key that association by format id.
A content editor browses the web site with the floating menu in the lower left-hand corner. When they see a piece of content that is in error, they hover the mouse over the content to highlight it. By clicking on the pencil icon, the content editor displays. They can then change the content and the page refreshes.
The following screen shots were taken from HEAD and are representative of what is being prepared for Labs 3c.
This is the Green Energy site which will be distributed as a sample site for Surf in addition to Web Studio. A tutorial for Web Studio will guide users through the manual assembly of the site, but they will also have the option of downloading a prebuilt version directly from Alfresco Network.
This screen shot shows the Web Studio in-context editor overlay along with slider applications on the left. The page, as shown, is currently not in edit mode. But, users can elect to work on page components or content for the current page by opening applications from the sliders on the left.
In the above screen shot, the user has opened the Web Content application slider and can now browse their web application content. All of the user's web application content is actually stored in a Alfresco WCM Web Project (a sandbox). Each user can visually build their web site while working with a full range of static assets (images, html, multimedia files) as well as rich content types (XML based web form content).
Once they have assembled the changes to pages or sections of the site to their preference, they can promote these changes using standard Alfresco WCM workflow. Changes are approved or rejected to a common staging space in Alfresco WCM allowing for a highly collaborative and participatory experience.
Alfresco WCM content deploy is used to publish all content and Alfresco Surf objects out to one or more production servers.
The Alfresco Community has been a great source of inspiration for Alfresco Web Studio. We've relied upon their participation, feedback and support to help guide the creation of the product as well as drive requirements into the underlying Alfresco Surf Platform.
We would like to encourage as much participation as possible and, as such, we've put our hard work and effort into the community so that others may continue to help improve it.
If you would like to be involved, please check out the source code or drop a note in the forums. Be sure, also, to check back frequently, as we will be making many updates for the Alfresco Labs 3d release and beyond.