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.
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:
Graphical overlays for in-context site editing
Site Creation Wizard
Stream prebuilt Sites that are archived on Alfresco Network
Navigation Trees and Site Maps
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
Multiple Templates per Page (format keys)
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
The following actors are defined:
Creates and administers the website
Authors new content and places it into the website
Previews content, makes changes, and then submits content for approval
Uses dashboards to review content editing tasks
Edits content within context of website and approves for release
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.
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.