Staff Guide

Introduction

This guide is intended to help contributors get the most out of the CCPBioSim website, whilst it does not cover all of the advanced features that this site is capable of (in most cases this is because some things are limited to administrators for various reasons), this guide was put together to introduce some of the functionality which we think will be of most use or most likely to be used by our contributing authors. Should you want to know more our would like to see more subjects/tutorials added to this guide, you think that something is confusing or not helpful, then don't hesitate to contact This email address is being protected from spambots. You need JavaScript enabled to view it..

The guide starts out by highlighting the basics of producing content with the editor, and then moves onto more advanced topics about how to go about contributing various types of content to this site. Use the contents menu on the right hand side of this page to navigate your way through sections that are of most interest to you.

 


Introducing the Editor

The editor used on this site was chosen so that it behaves as close to editors we use in everyday life as possible (such as Microsoft's Word) just in a web browser and not a standalone desktop application, for most cases submitting web content to this site need not be more complicated than constructing a well formatted document. The idea behind choosing this way of working is so that well formatted pages can be constructed with next to no knowledge of the underlying HTML code, hopefully this will save management members time and also enable those not fluent in HTML to contribute. So lets take a look at the editor, the image below is the sort of thing you will see embedded into what ever page you have decided to create, this is the editor.

 

editor window

 

 

To the top of the editor pane you will see the toolbar, as with popular desktop word processing software this is where the core functionality of the editor can be controlled. Just below the toolbar is the main content area, this is where the actual content will be entered and styled etc (just as with word processing software). Below that is a status bar and some short cut buttons that add extra functionality. There are a lot of options on the toolbar and these will assist in producing high quality content, below shows the functionality that can be found on the editor toolbar.

 

Starting with the top row of the toolbar the following image and table show what each of the buttons do: 

 editor toolbar toprow

 

1. Help
Open the editor help dialog

2. New Document
This will clear the editor workspace
3. Undo
Undo the last action
4. Redo
Redo the last action
5. Bold
Apply/Remove bold style on selected text
6. Italic
Apply/Remove italic style on selected text 
7. Underline
Apply/Remove the underline style on selected text 
8. Strikethrough
Apply/Remove strikethough style on selected text
9. Justified
Format selected text to be flush with both margins 
10. Centre Align
Format selected text/object to be centred
11. Left Align
Format selected text/object to be flush with the left hand margin
12. Right Align
Format selected text/object to be flush with the right hand margin
 13. Style
Select a format style, it is better to use these where possible so that formatting is done based on the website style sheets
14. Font Family
Set the font-family on selected text eg: ArialSet the font-family on selected text eg: Arial
15. Font Size
Set the font-size on selected text eg: 10px
16. Text Colour
Change the colour of the selected text
17. Background Colour
Change the background colour of selected text
18. Spellchecker
Toggle the spellchecker
19. Remove Formatting
Remove formatting of selected text, this is useful and should be used for text that has been pasted in from another source.
20. Code Cleanup
Clean up HTML code, this is for tidying up the HTML of a heavily edited document/markup.

 

The middle row of the toolbar contains the following functionality:

 

editor toolbar middlerow

 

1. Cut
Cut selected text to the clipboard for pasting
2. Copy
Copy selected text to the clipboard for pasting
3. Paste
Paste from the clipboard
4. Paste Plain Text
Paste clipboard contents as plain text (useful for pasting from microsoft word or other websites)
5. Find
Search within content
6. Find and Replace
Find a matching text string and replace it
7. Indent
Increase indentation of selected text or element
8. Outdent
Decrease indentation of selected text or element
9. Ordered List
Create a number/label ordered list
10. Bullet List
Create a bulleted list
11. Block Quote
Insert or remove a block quote (useful for highlighting text snippets) 
12. Subscript
Apply or remove subscript styling to selected text
13. Superscript
Apply or remove superscript styling to selected text
14. Case Changer
Change the case of the selected text, options include uppercase, lowercase, sentence case and camel case
15. Insert Custom Character
Insert a character from a selection of special characters
16. Insert Horizontal Line
Insert a horizontal line at the position of the text cursor
17. Insert Table
Insert a table at the position of the text cursor. Clicking the arrow allows quick insertion which clicking the main button allows many parameters to be set
18. Delete Table
Delete currently selected table
19. Table Row Properties
Set properties for selected table row
20. Table Cell Properties
Set properties for table cell (this can be used to set column widths)
21. Insert Row Above
Insert a new table row above the cursor position
22. Insert Row Below
Insert a new table row below the cursor position
23. Delete Row
Delete the row that the cursor is in
24. Insert Column to the Left
Insert a new table column to the left of the cursor position
25. Insert Column to the Right
Insert a new table column to the right of the cursor position
26. Delete Column
Delete the column that the cursor is in
27. Split Table Merged Table Cell
Split a table cell that has been previously merged
28. Merge Table Cells
Merge selected table cells

 

The bottom row of the toobar contains the following functionality (generally this is more advanced editing features):

 

editor toolbar bottomrow

 

1. Text Direction Left
Set text direction on selected element to left
2. Text Direction Right
Set text direction on selected element to right
3. Toggle Guidelines/Invisible Elements
Show invisible lines/elements (useful for tables and divs)
4. Toggle Visual Control Characters
Show control characters
5. Source Code Editor
Edit the HTML code directly (advanced users only)

6. Toggle Block Elements
Show a visual representation of block elements

7. Insert non-breaking Space
Insert a non breaking space
8. Edit CSS
Edit the CSS code directly (advanced users only)
9. Citation
XHTML citations (advanced users only)
10. Abbreviation
XHTML abbreviation (advanced users only) 
11. Acronym
XHTML acronym (advanced users only)
12. Deletion
XHTML deletion (advanced users only)
13. Insertion
XHTML insertion (advanced users only)
14. Insert/Edit Attributes
Edit XHTML attributes (advanced users only)
15. Insert/Edit Anchor
Insert an anchor point, this can then be used with links to link to specific parts of text
16. Delete Link
Delete a link from the currently selected text
17. Insert/Edit Link
Insert a link on either selected text or at cursor position
18. Insert Edit Image
Insert/upload an image at the cursor position or edit selected image
19. Insert Read More
Insert a read more element, this is used to split content into two sections (a preview and full article), this is useful for news articles and should not be used for events.
20. Insert/Edit Pagebreak
Insert a page break, this is useful for making multi page articles in one articles (this is useful for workshop material)
21. Print
Print out the content area
22. Toggle Fullscreen Mode
Make the editor occupy the full screen
23. Preview Mode
Preview the output (good for formatting but won't look like the fully formatted site version, it is best to always save and check the real thing)
 

 

This article sums up the basic functionality of the editor, the following pages deal with how to use it to actually produce certain types of content.

 


Dealing with Images

Making any web content is fairly straight forward with the tools we have seen so far. However making web content that actually looks good is slightly more tricky, this article describes how to upload, insert and make the most out of using images on this website. This is quite a long guide as it contains steps that show how to do things, the following links should allow you to navigate to the relevant section.

 

Uploading Images
Inserting Images
Styling Images
Lightbox Effects
- Single Image Lightbox
- Lightbox Image Gallery

 

Uploading Images

Whilst it is possible to link to externally hosted images, this is discouraged since any downtime/deletions that occur externally to this site will have an impact upon content served by us. So to get around that it is possible to upload your images to the server directly. We would also encourage contributors to help keep the images directory tidy, there are a number of directories already present that match content contribution types so please could you make every effort to upload your images into one that matches the content you are creating.

So to begin uploading images click the following button on the toolbar of the editor (highlighted in red in the image below):

 

editor insertimage

 

You will then be presented with the following dialog box (click to enlarge):

 

editor imageupload1

 

Inside this dialog box is everything you will need for uploading and inserting images, for the time being we are only uploading images to the server so we are only concerned with the bottom half of that window (highlighted red in the image below, click to enlarge):

 

editor imageupload2

 

In the highlighted area, the file and directory structure of the image upload area is shown, before uploading any images you should navigate into the correct directory where you wish to upload your image, you can do this by clicking on the directory you wish to enter. You can create a directory should you have a lot of images that you wish remain separate to the others by clicking on the icon that shows a folder with a green plus just above and to the right hand side of the pane highlighted in red in the image above. Once you are in the correct directory you can click on the upload button (highlighted red in the image below, click to enlarge):

 

editor imageupload4

 

You will then be presented with the upload dialog box (shown in the image below, click to enlarge):

 

editor imageupload5

 

This dialog is where you will upload your files to, to select your files you can either just drag your files into the dialog, or you can click upload and navigate to the files you wish to upload in the conventional way. Once you have selected the file/s to upload, you will see them listed in the upload dialog (shown in the image below, click to enlarge):

 

editor imageupload6

 

You will notice that you can rename or delete any of those files in the upload dialog using the buttons to the right of each entry, if you are happy then you can then click upload and the files will be transferred to the server. Once this is done you will see green ticks next to each file, at this point the dialog will either close by itself after a short delay or you can click the close button manually. This will then return you to the following dialog, where you can now see the files you have uploaded marked in bold (click to enlarge):

 

editor imageupload7

 

This is all that you need to do to upload images to the CCPBioSim server. That next section deals with how to then insert these images into your content.

 

Inserting Images

The part of the guide deals with inserting an image into your content article, if you want to learn how to place an image onto the server ready for inclusion in your content then please read the previous section. Inserting images is straight forward, you start by placing the text cursor on the line in the editor where you would like the image to be inserted, followed by clicking the "insert/edit image" button on the editor toolbar (shown in the image below):

 

editor insertimage

 

Clicking on the "insert/edit image" button brings up the image manager dialog, once in this dialog you can use the bottom section of the dialog to navigate the filesystem to find your image. Once you have located your image, if you click on it in the file browser then it will fill in the "URL" section in the top section of the dialog (click to enlarge).

 

editor imageupload1

 

Once you have done this, you can also adjust some of the styling parameters before hitting the "insert" button on the bottom right of the dialog. Once the "insert" button has been clicked, the dialog will close and the editor will insert the image in the text where you placed your cursor. Inserting images is a simply process where you don't have to worry about formatting HTML code. The next section will discuss some of those styling options and what they do.

 

Styling Images

Styling images is quite easy in this editor, some styling functions are available in the top bar whilst others are only available in the media manager dialog. The only functions that are on the main toolbar are the alignment buttons, you can use these by clicking to select a particular image and then click the corresponding alignment button to position it where you desire (much the same as you would do in Microsoft Word). The rest of the functionality will come from the media manager (expert users can use CSS but that is beyond the scope of this guide). To edit the style parameters of an image, first select it in the editor content area, then click the "insert/edit image" button (shown below):

 

editor insertimage

 

As we have seen in the previous sections the media manager dialog will appear (click to enlarge):

editor imageupload1

 

At the top of this dialog, the fields were are interest in are; Alternate Text, Dimensions, Alignment, Margins and Border. A brief description of what each will do are listed below:

Alternative Text - This is what will be shown if for some reason the image itself cannot be displayed in the users browser.

Dimensions - It is better to resize images using these fields than using the drag resize of the editor, this can help keep the aspect ratio constant and not cause distortion.

Alignment - This is how you can change the alignment of the image, options can be left, centre, right (horizontally) and bottom, middle, top (vertically, but only useful in certain cases such as in a table cell).

Margins - These are useful for text wrapping or for placing images next to each other, if an image has no margin then text or neighbouring images can touch the edge of the image. It is more aesthetically pleasing to the eye for this not to happen, so setting the margin can keep other objects a set distance away. This can either be done equal on all sides by checking the equal values box, or it can be applied differently along different edges.

Border - These can be useful in some situations, it is possible to set the thickness, style and colour of the image border.

The are more advanced options available in the tabs "rollover" and "advanced". The rollover settings are useful if an effect is required on mouse rollover, in this tab there are two fields. The first for what happens when the mouse cursor rolls over the image and the second for what happens when the mouse cursor rolls off the image. A useful case for this parameter might be if you want to have say a greyscale image become colour on mouseover, to do this you would embed the greyscale image on the page as outlined in the previous section, then set the "mouseover" field to the coloured image and set the "mouseout" field to the greyscale image (to set it back). This would then switch images when mouse over events trigger it to happen.

 

Further options can be found on the advanced tab, but these are expert functionality and should only be used by users that are fluent with CSS and understand the consequences of setting such parameters.

 

Lightbox Effects

Lightbox effects are a nice way to show lots of images in a user/device friendly way. If you have say long articles with lots of text and images mixed then you can make your images much smaller and have them popup bigger on a mouse click. This is a good way to show full sized images without breaking the flow of text on a screen. This tutorial will show how to add the lightbox property to images (lightbox can be added to all kinds of media, from videos to ordinary text links by following exactly the same procedure) and how to associate images into a lightbox gallery to make visually pleasing content.

 

A single lightbox item

The first step in creating a lightbox enabled image is to firstly insert an image to act as the thumbnail link, because the lightbox will popup with the full-sized image, you do not need to make the thumbnail full-sized. For instructions on inserting and resizing an image see the previous sections of this guide. Once you have inserted your image and resized it to the desired size etc, have the image selected and click on the "link" button on the editor toolbar (shown below):

 

editor linkbutton

You will then be presented with the following dialog (shown below, click to enlarge):

 

editor lightbox1

 

You then need to link to the original image again (as we want to show a full sized version in the popup), so to this either type the path into the URL field if you know it or simply click the insert button to the right of it and select your image from there (show below, click to enlarge):

 

editor lightbox2

 

Once you have done this then the URL field will be populated with the correct path to what you wish to show (as a side note, you can also link other types of content besides images to create other types of effects). Now for the lightbox configuration, under the popup tab, select the popup type to be "JCE MediaBox Popups" and then fill in the "title" and "caption" fields. The title and caption fields are what will be shown in the lightbox with the image, so you can use this to explain things on the image etc. So your popup box should look something like the following (click to enlarge):

 

editor lightbox3

 

Once you have done this you can then just click insert, upon saving your content you should then be able to test functionality of the lightbox to make sure it works. The following image is a lightbox enabled image which can be used to test the functionality in your browser.

 

hectime calculator

 

That is it! It is that simple to add in lightbox functionality. This effect can not only be used on images but because it is applied via the link property, you can use it on a text link, video, image, or anything else that a link property can be assigned to. In addition to that the lightbox is not only used to display images, it can be used to show external websites, youtube videos, vimeo videos, webpages from this site etc just by changing the media type option in the "popups" tab and having the correct URL. The possibilities are truly large.

 

A Lightbox Gallery

We have covered a single lightbox item, a more interesting use of lightbox is using it to show a gallery of objects. The interesting thing about this is the image thumbnails do not have to be located physically side by side on the page, you could show images that are scattered throughout an article in terms of their physical location within a single gallery. This means if a user clicks any image that they can then easily scroll through all images on the page without having to close and click each one. This is useful for image showcases etc.

To do this all you need to do is follow exactly the same procedure as for the single case but then for each image you assign the "group" field in the "popups" tab to the same value for each image, this can be seen in the image below (click to enlarge):

 

editor lightbox4

 

In the above case the field "group" was set to "gallery1", this in principle can be any valid text string and multiple galleries can be created on the same page by having separate group names. The below images are linked as a lightbox gallery which can be navigated by clicking and then swiping or arrow keys (depending which device you are using). Remember the below images are next to each other in physical space but they don't have to be, the only requirement is that the group id is the same.

 

1234

 

 


Creating a News Article

To submit a news article to the CCP website navigate to the "Create News Item" menu entry under the "Staff" menu. You will then see the news submission editor, which looks like the following (click to enlarge):

 

news submit1

 

Fill in the "Title" field, this is what the users will see so make it relevant and as short as possible. The alias field should be left blank, this will be automatically generated from the title field. The next thing to do is to use the template for the news content, to get the template click on the insert template button just below the main editor area (click to enlarge):

 

news submit2

 

Then from the template selection list, click on the news template "News Item Template" (click to enlarge):

 

news submit3

 

You should then see the basic structure of the news item appear in the content window (click to enlarge):

 

news submit4

 

Now that the template is inserted into the content area, you will notice that the text is split into two sections by a grey line. This grey line is a special character that allows the content management system to split the article into two sections, the top section is an article snippet which is simply a quick paragraph summarising the article, whilst the bottom section is for the full article text. The text that comes with the template should be replaced with real text.

It is possible to use images in the articles, you should only use 1 image in the top section of the article but you can use as many as you wish for the full article. Any images that are used in the top sections should be no larger in size than 200px in height or 400px in width, it is recommended that in articles images used be limited in size but use the "lightbox" effect (described in the "dealing with images" section of the staff guide) to show the full sized image. This makes the articles more tidy and readable and helps support those that are reading the site on hand held devices can do so without too many large images obscuring the text.


Creating a Conference/Workshop

To submit an event such as a conference or a workshop to our events system is straight forward. Firstly select which type of event you wish to submit from the staff menu, either "Create a Conference" or "Create a Workshop". This will set some basic defaults in the backend so that your event ends up in the right place on the website. Once you have clicked the event you wish to submit, you will be presented with the following window (click to enlarge):

 

event submit1

 

This is the basic event editor, in this window you should first give your event a title (the official event title) and then move on to setting the dates and times. Once you have done this, you can then move on to creating the actual event details page that your prospective delegates will see. We are trying to keep our events formatted in a particular way so that users familiar with our events will know exactly how they work. To do this and save lots of time spent reinventing the wheel, we have implemented a templating system, click on the "insert template" to the bottom left of the editor box and you will see the following dialog (click to enlarge):

 

event submit2

 

In the dialog that has appeared, there are a number of entries that apply to events, what these are for are summarised below:

Conference Template - This template is the template that should be used for all CCPBioSim run conferences or conferences that are run where we are providing the main conference information page (such as a joint conference).

Conference Template (for linking to external conferences) - This template is a much more simple one and is simply just to provide a brief description of an external conference and a link to their website. This should be used for the conference information page is hosted elsewhere, for example an advert for a conference that would be interesting to our users but we are not directly involved with it.

Workshop Template - This is the template for workshops hosts by us, where the main conference information is to be hosted on our site. For events run by others that are of interest (advertising) you can just use the "Conference Template (for linking to external conferences)" but submit it under the workshop section.

Once you have chosen your template, it will be inserted into the editor. This provides a basic structure for information that should be provided to delegates attending a conference. Simply populate the sections under each heading with the correct information, and delete/add any headings as you require them. The template would look something like this (click to enlarge):

 

event submit3

 

Once you are ready then click the save button and your event should appear at various stages around the site (front page (if it is in the top 3 soonest events), and events section). 

 


Creating Workshop Course Material

Creating workshop material is a fairly simple process, and this can be done either before or after the workshop has been advertised. This system is capable of producing quite complex and highly structured content such that it should no longer be necessary to use external websites for this purpose. Any functionality that you may feel is missing can be requested by contacting This email address is being protected from spambots. You need JavaScript enabled to view it. and where possible this functionality will be added.

Workshop material can be as simple as a single webpage or as complicated as this user guide. The first place to start is to navigate to the staff menu and then select the option "Create Workshop Material", this will give you the editor screen that is preconfigured to submit workshop material to the correct place within the backend (below shows the editor, click to enlarge):

 

news submit1

 

 

For a single page workshop material, you simply use the editor as normal like you would for any other content as described within previous sections of this guide. However much more complicated material can be created using this editor, such as a multiple page guide. To create multiple page content you simple use the insert page break buttons (shown below in red):

 

editor pagebreak1

 

This will open up the pagebreak settings dialog, in this dialog are two fields. The title field is for use within the editor, this is simply so that you can keep track of the pagebreaks. The second field is for adding the title that the user will see in the fronted table of contents. The dialog is show in the image below (click to enlarge):

 

editor pagebreak2

 

 

Each pagebreak you add will add a new page to your workshop material, pages can be added and deleted easily in the editor. If you wish to add a title to each page it is recommended to use the heading 3 format from the styles dropdown in the editor, so as to remain in keeping with the rest of this site.

 

To then link to the workshop material created by following this guide, you will then need to insert links to it in the event description page. So make sure you are logged in, then under the menu item "management", select "manage events" and then modify the event this material corresponds to. Then insert a link, we recommend this goes near the top of the page, however if you have a complex programme with several separate material documents then it might be best to link them from within the programme timetable or similar. To actually insert the link, once in the event editor first click in the editor to select where to place. You then need to click the "insert/edit link" button, and on the opened dialog window. You then need to select the directory called "content" from within the third box down, and then select the directory "workshop material", you can then click the material you just made and it will fill the URL field. Then type in the link text in the text field and set any other attributes before clicking insert.

 

Software

BioSimSpace

A new software framework to create an interoperability layer around the many software packages that are already embedded within the biosimulation community. BioSimSpace will enable rapid development of workflows between these software packages that can then be used in conjunction with existing workflow software such as Knime, Pipeline Pilot, ExTASY etc. This project is currently in an early phase of development, more information can be found here.

 

FESetup

FESetup is a tool to automate the setup of (relative) alchemical free energy simulations like thermodynamic integration (TI) and free energy perturbation (FEP) as well as post–processing methods like MM–PBSA and LIE.  FESetup can also be used for general simulation setup ("equilibration") through an abstract MD engine.  The latest releases are available from the project web page.

 

Other Software:

ProtoMS - a complete protein Monte Carlo free energy simulation package.

Sire - a complete python/C++ molecular simulation framework, particularly focussed around Monte Carlo, QM/MM and free energy methods.

PCAZIP - a toolkit for compression and analysis of molecular dynamics trajectories.

COCO - a tool to enrich an ensemble of structures, obtained e.g. from NMR.

Handy Routines for Ptraj/Cpptraj - additional analysis methods for ptraj and cpptraj.

Under Construction

 

This area is currently under construction, please come back here later for exciting new site content.

Sponsored Events

CCPBioSim is active in supporting and engaging with the biosimulation community. One of the ways we do this is by sponsoring events, such as conferences and workshops. Below is a list of events that CCPBioSim has provided sponsorship support to:

 

The 17th European Seminar on Computational Methods in Quantum Chemistry (ESCMQC2017), Harper Adams University (UK) on 11th - 14th July 2017 - website

First Conference for Research Software Engineers, Museum of Science and Industry Manchester (UK) on 15-16th September 2016 - website

Big Data in Biomolecular Systems Conference, UCL (UK) on 9th September 2016 - website

Computational Chemistry Gordon Research Conference, PGA Catalunya Business and Convention Centre (Spain) on 24th - 29th June 2016 - website

Young Modellers Forum of the Molecular Graphics and Modelling Society,  The old Naval College Greenwich (UK) on 27th November 2015 - website

Molecular Graphics and Modelling Society meeting Membrane Signalling and Transport: Computation and Experiment, Oxford University (UK) on 15th - 17th April 2015 - website

ICMS Workshop New Frontiers in the Characterization of Molecular Systems, Edinburgh University (UK) on 9th - 10th April 2015 - website

CMS Conference, The University of Warwick (UK) on 15th - 18th March 2015 - website

Computational Chemistry Gordon Research Conference, Mount Snow, VT (USA) on 20th - 25th July 2014 - website

 

Research

 

This area is currently under construction, we have developed an exciting new area to showcase the science we do and the impact it has.

We now have to work on producing multimedia content to populate this area of the site, please bear with us as we do this. You can sign up to our twitter or mailing list for updates in the meantime.

Check back soon!