Web Studio

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Web Studio

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
  
  
  
  • 1.1 Availability
  
  
  • 1.2 How to download Web Studio
  
  
  • 1.3 Getting started
  
  
  • 1.4 Tutorials
  
  


• 2 Features


• 3 Actors


• 4 Concepts
  
  
  
  • 4.1 Simple web site creation
  
  
  • 4.2 Safe editing
  
  
  • 4.3 Easy page authoring
  
  
  • 4.4 In-context editing
  
  
  • 4.5 Share with the community
  
  
  • 4.6 100% Alfresco Surf-compatible
  
  


• 5 High-level scenarios
  
  
  
  • 5.1 Creating a website
  
  
  • 5.2 Authoring a page
  
  
  • 5.3 Visual design of template layout
  
  
  • 5.4 Adding components
  
  
  • 5.5 Associating content types
  
  
  • 5.6 Content instances
  
  


• 6 Screenshots


• 7 Feedback

Alfresco Web Studio

Alfresco Web Studio is a visual, drag-and-drop designer for building web sites with the Alfresco Surf platform.

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.

Using Alfresco Web Studio, you can quickly create custom web sites while leveraging the strengths of the Alfresco Web Content Management runtime and repository.

Availability

Alfresco Web Studio was initially available in Alfresco Labs 3c.
This is a community-focused release.

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

Getting started

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.

Advanced users may wish to take a look at optional configuration options for Web Studio as described in the Web Studio Configuration article.

Tutorials

Learn more about the tutorials on the Web Studio Tutorials page.

Features

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 3c	Graphical overlays for in-context site editing Site Creation Wizard Stream prebuilt Sites that are archived on Alfresco Network Navigation Trees and Site Maps Page Editor Dynamic Template Layout Editor Browser for Alfresco Web Components Snap Alfresco Web Components into pages using drag-and-drop Snap Alfresco Content into pages using drag-and-drop Content Associations Multiple Templates per Page (format keys) Reusable Templates Full compatibility with WCM Sandboxes, preview and submit Collaborative user experience Link out to FTP, WebDAV and Alfresco Explorer Generates Surf Code that can be used in authoring and production environments
Labs 3 Final	In-context content editing User dashboards for interacting with modified items, submitting and reverting changes In-place diff of changed items (sandbox flipping within same web project) Fixes and improvements using direction provided by our Community Component share and deploy via Alfresco Network Additional components available out-of-the-box

Actors

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
  

Concepts

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
  

Safe editing

• 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
  

In-context editing

• 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
  

High-level scenarios

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.

The user:

1. Selects from one of several pre-packaged sites.
   
2. Configures the pre-packaged site.
   
3. Clicks Finish to create the site. It does this by performing the following:
   
   1. Creates a new web project.
      
   2. Populates the web project with the website content which is retrieved from archive zip file on Alfresco Network.
      
   3. Redirects to the front page of the website.
      

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:

1. Browses to the site designer's site and clicks on the floating menu. Web Studio loads over the current site.
   
2. 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.
   
3. Edits the page properties and change the name of the pages.
   
4. 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:

1. Clicks on the templates slider and clicks Create a New Template.
   
2. Defines the name and description of their template. They are then presented with the visual template designer.
   
3. Drops regions onto the template and configures their x, y, width, and height.
   
4. 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.
  

Adding components

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:

1. Clicks Site from the menu and selects Content Type Associations.
   
2. Associates a content type to a template and key that association by format id.
   

Content instances

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.

Screenshots

The following screen shots were taken from HEAD and are representative of what is being prepared for Labs 3c.

640px

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.

640px

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.

Feedback

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.