Really simple content management system

• Safari 3.1+, Chrome, Firefox 3+, or Internet Explorer 7+ as your development environment
• HTML file which is encoded by UTF-8 and written in standard mode
• JavaScript enabled on browsers listed above

• Connecting to your web pages via FTP using the FTP credentials you have supplied for any website you configure within our system
• Parsing the webpage and retrieving any editable regions (snippets) within any page you wish to check-out for editing
• Publishing your changes to the webpage back to your FTP space. Considering the following HTML code:

Considering the following HTML code:


When you configure the page above to become editable within SnappySnippet’s editor, all HTML nodes that have a class of “SnappySnippet” becomes available for editing within a WYSIWYG editor.
As a designer, you will need to have an FTP account which can be used to access your website pages. SnappySnippets supports the following FTP protocol to connect to your website pages

• FTP
• FTP over SSL
• Secure FTP (SFTP/FTP over SSH)

You simply have to select the correct protocol when you are configuring a website within the editor.

The first thing you need to do once you create a new designer account is to configure a website for editing within the portal. Irrespective of the type of account that you have within our system (pro/basic), you will be able to configure multiple websites from within the same account.

The very first time you log into the editor, a wizard will show up guiding you through the process of configuring a website. You may dismiss this wizard if you wish and opt to configure a website at anytime through the administrative tab section of your account.

The diagram and steps below illustrates the process of configuring a new website within SnappySnippets.

• Click on “Add new website”
  
  
• A website configuration form is displayed enabling you to enter the details for the website you wish to configure.
  
  
  
  Form fields explained
  
  • Website Name – Any name that you wish to use to refer to the website within the portal
  • Website address – This is required so as to enable previewing of changes made to a page before they are published
  • FTP Server – This should be your FTP protocol. In most cases this will be ftp://, however, SFTP and secure FTP is also supported.
  • Port – This is the port required to connect to your FTP server. In most cases, this would be port 21; however you may change this setting if your hosting space requires you to connect on a different port.
  • Username – Your FTP username
  • Password – Your FTP password
  • Website root – Your FTP root folder
  • Editor Type – You have the option of selecting a simple or an advanced WYSIWYG editor. For most requirements, a simple editor should be sufficient to make basic changes; however, if you require more control over your content, you may select the advanced editor. Please see the WYSIWYG Editor section for more information on available editors.
  • X-Path – XPath expressions are used to determine which nodes within your HTML document should be editable. By default, any HTML Element with a class attribute value of “SnappySnippet” becomes editable within the portal. Please refer to the XPath section for more information on XPath configuration
  • Advance publishing options
    
    • Enforce exclusive checkout – Enable/Disable check-in/check-out version control. Please see the versioning section for more details
    • Enforce check-in notes – Determines whether an editor or designer has to enter a brief description of changes made to a page before the page is published.
    • Enable page title editing – when this is enabled, the designer or editor is able to modify the HTML title value of a page.
    • Enable page Meta tags editing – When this is enabled, users are able to modify Meta tags properties of a document. This is particularly useful for Search Engine Optimization where the description and keywords Meta tags can be changed.
• Once you have successfully configured your website, you will need to select any web pages that you wish to make editable within the portal. To add editable files to a configured website, select the website from your list of websites, click on the edit button and then select “Add/Configure editable files” from the list. The screen shot below illustrates this process.
  
  
  
  Once the “Add/Configure editable files” button is clicked, a file browser window is presented, which lists all files available within the configured website.
  
  
  
  To enable a webpage for editing through the portal, you simply click on the file name after which the file property form will be presented.
  
  
  
  Once you save the file, you can now start editing your web pages through the portal.

You may add multiple editors that you wish to grant access to your configured websites. You have complete control over any editor accounts that you create within the system.

When you create an editor, you will also need to assign the editor to any websites that you wish for the editor to have access to.

While assigning an editor to a website, you may choose to assign administrative privilege rights or basic rights to that editor within the website.

• When you assign an editor to a website, the editor will be able to modify any webpage configured for that website.
• When you assign an editor as an administrator on a website, in addition to being able to edit WebPages within the website, the user is also able to:
  • Clone web pages on pro accounts
  • Revert WebPages back to previous versions
  • Forcibly check-in a Webpage that has been checked out by another editor.

Adding a new editor

To add a new editor to the system

• Select the administrative tab
  
  
• Click on the user icon in the “User administrative configuration” pane
  
  
• Clicking on the link above will display a grid listing any editors that you may have created within the system. To add a new user, click on the “Add new editor” button.
  
  
• Clicking on the “Add new editor” displays a form that enables you to enter the details of the editor.
  
  
  
  Within this form, your may also assign websites that the editor is allowed to edit by ticking the “Assigned” checkbox next to the website. If you wish to grant the editor administrative privileges on a particular website, check the “Administrator” checkbox next to the desired website.

Editing an existing editor

To edit an existing editor’s account, you simply follow steps 1 and 2 above to load the editors list grid.

• Click on the edit icon on the grid next editor you wish to edit
  
  
• The form below is then displayed. On this form, you may assign or remove an editor from a website. You may also set administrative rights to websites.
  
  

Enabling, disabling and deleting an editor.

You may disable the account of any editor that you wish to restrict access too temporarily. When an editor is disabled, the user will not be able to sign into the system. You may also permanently delete an editor’s account within the system. When the editor pane loads, it displays the account status of an editor. To disable an active editors account, simply select the user within the grid, and click on delete.



To enable a disabled editor’s account, once the editor has been selected, the relevant action is displayed on the button


You may also enable, disable or delete an editor’s account within the editor details form that is displayed when you click on the edit icon.

Sending editor confirmation emails

When you create a new editor account, you may wish to send a welcome email to the registered editor’s email account. This email would typically contain vital information such as instructions on how to sign into the system. To send a confirmation email to an editor:

• Click on the email icon next to the editor’s name within the editor grid.
  
  
• An email form is then displayed. The email pre-loads the editor’s information that may be required to sign into the system. You may completely modify the content of this email. This email template is also completely customisable within the list of administrative features on your account.
  
  

Within the administrative section of your site, you may configure the following features for your account:

• Home page template
• Logo
• Confirmation email template

Home page template 1

The homepage template enables you to customize the look and feel of the editor’s homepage. The template may contain HTML tags, JavaScript are not allowed. A default template is displayed prior to a custom template being created.

Logo

You may upload your company logo which will be displayed at the top left hand side of the editor. A default logo is displayed prior to a logo being uploaded. To upload your logo, go to the administrative pane, and click on “Upload logo”.

Confirmation email template1

You may customise confirmation email templates that are used to send emails to your editors. The email template is customisable per website, implying that you can assign each website within your account an appropriate template. To customise an email template for a website, select the website from the list of websites and then click on “Edit confirmation email template”. You may use special place holders within your templates. When a template is loaded, Placeholders within your template are parsed and automatically substituted with the appropriate parameters.

The supported placeholders are listed below

The screenshot below illustrates how a default template looks like

SnappySnippet uses XPath to determine which regions within a webpage are editable. In most cases, the default value would be more than sufficient. However, the examples below list a few ways in which you may support your custom editable regions. To change the XPath query used to select editable regions within a webpage, bring up the webpage configuration form and change the XPath value within it. In the form below,

You may configure which type of WYSIWYG editor is used to edit WebPages for any configured website. The website configuration form gives you an option to select either a “Simple Editor” or an “Advanced editor”. An advanced editor has more HTLM editing capabilities and may be more suited towards power users, however, in most scenarios, a simple editor is more than appropriate for editing content.

Simple editor

Advanced editor

Remote sign in enables you to sign into the portal from your website. With remote sign in, all you need to do s provide the necessary HTML variables within your HTML form on your website. For security reasons, remote sign in only allows the “POST” form method.

HTML variables required

Sample authentication HTML form

Error codes

When an editor tries to sign-in unsuccessfully due to an invalid email address, password or the account being disabled, when a form variable named “SnappySnippet_ErrorURL” within an HTML form is specified, the editor is redirected to that page on your website. To help you display the appropriate message to the user, when the string “{0}” is appended to the return URL, SnappySnippet will replace this value with the error code.

Hence, the SnappySnippet_ErrorURL such as:

http://www.mysite.com/signIn/?code={0}

May be replaced and redirected to a URL listed below if the editor’s email address or password is incorrect: http://www.mysite.com/signIn/?code=1001

Error code description

Signing into the editor

You may sign into the editor by entering the following address into your browser

http://www.snappysnippets.com/signIn/

On the sign in form, your editors may also select the preferred language choice from the list of supported languages in the dropdown menu.

The easy to use editing interface within the editor ensures that designer s and editors are able to use the portal with very little or no training. When a user signs into the portal, a list of websites that are available to the user for editing is displayed to the right hand side of the window.

For optimal performance and user experience, the editor is best used within the browser’s maximised full screen mode. A screen resolution of 1280 by 1024 or above is also recommended.

To edit web page within a website,

• Click on the pages icon on the list of websites grid
  
  
• Once you click on the pages icon, a list of web pages available for editing will be displayed in the bottom half of the screen.
  
  
• Clicking on the edit icon implies that you wish to check-out the web page for editing. Depending on how the administrator of the account has configured the website, you may have to confirm the check-out action. After checking out a file, a list of snippets that are editable is then retrieved and displayed on screen. Placing your mouse cursor over any of the snippets gives you a quick/dirty preview of the content the snippet box holds.
  
  
  
  
• Clicking on the “edit” button on the snippet pane loads the content within it in the snippet editor. The editor loaded might look different to the one below depending on what type of editor is configured for the website. When you have finished editing the loaded content, you must click on save snippet.
  
  
  
• Repeat step 4 for any content you wish to edit within the loaded page. Once you are finished making your changes, you can either
  • Publish your changes

    To publish your changes, simply click on the “Publish webpage” button
    
    

  • Preview your changes before publishing

    To preview your web page before publishing, simply click on the “Preview webpage” button
    
    

  • Cancel any changes that you have made to the webpage

    To cancel all the changes that you have made, simply click on the “Cancel changes” button
    
    

  • Save the changes for manual or automated publishing at a later time.

Previewing a page does not make your changes live, if you click on preview and are happy with the result, you may then go right ahead and click on the publish button.

Cancelling changes you have made to a webpage will check the web page back in, making it available for editing again.

Depending on how the website you are editing is configured, you may have to write a few words on the changes made to a webpage before the webpage is published.

To attach a schedule to a web page, check out the webpage, make your desired changes to it and then click on the “Scheduled publishing” button.

A window appears and prompts you to select the type of scheduling you wish to attach to the webpage.

Manual scheduling

A manual scheduling can be attached to a webpage when you wish to make changes to the page and then manually publish it at a later date. To assign a manual schedule to a page, select the “manual publishing” option and click on the “save schedule option” button. You may then log into the system at any time to publish the changes to the webpage.

To publish a page that you have assigned a manual schedule to

• Click on the schedule icon that is displayed
  
  
• A window is then displayed, click on the “manually publish webpage now” to publish the webpage.
  
  
  
  

You may also cancel the schedule attached to the webpage by following the steps above and then clicking on “Cancel webpage schedule”.

Automated scheduling1

Depending on the type of account that you are set up on, you may be able to assign an automated schedule to a page. With an automated schedule, you simply select a date and a time that you wish for a page to be published at and our automated system attempts to publish the page within less than 60 seconds after the assigned time lapses.

If an attempted automated publishing fails, the system will attempt to send an email to the designer or editor that requested the automated publishing. Whenever an attempted automated publish fails, this is usually due to changes in the configured website’s FTP access credentials.

You may also manually publish a webpage that has an attached automated publishing schedule. Please refer to the Manual publishing section for more details.

SnappySnippets enables you to manipulate your content in a flexible way. A snippet within the SnappySnippet editor refers to a block of content that has been tagged up by your snippet administrator as editable.

Consider the following webpage which has been configured for editing within SnappySnippet. The two circles drawn on the page identifies two distinctive block of editorial content:

After checking out the above webpage, it will be represented as snippets on the editor pane as shown below



Each block of snippet pane represents each block of editorial content within the webpage.

Snippet cloning
Snippet cloning enables you to create an identical copy of a snippet within the webpage. This ensures that the cloned snippet has a consistent look and feel to the original template from which it was cloned. You may choose to clone a snippet before or after the master snippet. Using the webpage above as an example, assuming a new snippet is required between the two current editorial blocks of content.

• You simply click on the “Advance functions” button on the first snippet, which will subsequently present you with a few options. Then select “Clone this snippet after current snippet”
  
  
• 2. This would dynamically place a new snippet between the two current snippets. New snippets also have a green background colour in order to help you visually demarcate which snippet is the cloned snippet. You may then make the necessary editorial changes to the cloned snippet.
  
  

After a snippet has been cloned, you may now edit its content and publish the webpage once you have finished making your changes. The webpage below highlights the cloned section of the webpage after it has been published.

Deleting a snippet

Deleting a snippet enables you to delete a block of editorial content that you do not wish to appear on the webpage. To delete a snippet, click on the “advanced functions” button and select the “Mark this snippet for deletion”.

The snippet is not actually removed from the list of snippets on the pane, but its background is changes to red, implying that the editorial content block will be removed on the webpage once the webpage is published.

SnappySnippets exposes the functionality to update the title and Meta tags attributes of a webpage. Modifying these properties on a webpage may help search engines such as Google and yahoo find and categorise your webpage within the correct category.

To modify the properties of a webpage, you will need to click on the “Webpage properties” tab within the snippets container.

After clicking on the tab, you may then make any necessary changes to the require webpage property. These changes will then be assigned to the webpage once it is published.

Page cloning enables you to create an identical copy of a page. Only editors with administrative rights can clone pages. Pages that are cloned will contain the exact editable regions that are present within the page it was cloned from.

To clone a page, you simply have to click on the clone icon displayed next to the desired page you wish to clone, within the list of WebPages configured for a website.

Clicking on the icon prompts you to enter details such as the desired page name, file name and page location of the new webpage you wish to create.

You may only assign a file name that does not exist on the server. Furthermore, the combination of the file name and file path must be unique within the list of WebPages configured for the particular site.

After successfully cloning a page, it will be included in the list of WebPages available for editing.

SnappySnippet enables you to roll back to previous versions of a webpage that has been modified within the editor. Depending on your account type, you may be able to roll back to versions of a web page created no more that 90 or 365 at any point in time.

It must however be noted that only Editors with Administrative privileges may restore previous versions of a page. As an administrator, you may also forcibly check-in any files that may have been checked out by another editor for editing within the versioning pane.

To restore a web page to any previous versions, you will need to follow the steps listed below

• Select the website in which the web page belongs to
  
  
• Select the “administrative tasks” tab
  
  
• Click on the icon or text within “Document versioning” box to bring up the versioning form.
  
  

A form is then loaded as displayed below

Within the form above, you will need to select a period to search within for available versions, status of the web pages and specific web pages to include. When the “Load versions history” button is clicked, the pane should be populated with previous versions of web pages that have been checked in and out over the period specified.

To restore a particular page back to a version listed within the grid, simply select the item with the checkbox next to it and click on the “Restore to version” button on the grid.

Similarly, to forcibly check –in a file that has been checked out by another editor, select the page from the list and click on the “Check-In webpage” button.

To change your name, email or password on the system, select the administrative tab and directly edit your details in the form provided on the pane. Leave your password fields blank if you do not wish to change your password.