Faint idea to published website. An OpenWGA Tutorial, Part 2
Lets move to the second part of this small tutorial, which may be the hardest one for me personally. Setting up a new site in developer studio and then moving it up to a live server are standard procedures where you can do every step just one by one without thinking too much. However the in-between part is a more creative one and lets you get in touch with the real "work" behind making a website: Creating and organizing content and developing its design.
So the challenge is: Explaining the most basic prerequisites for doing this in OpenWGA so you are able to accomplish what you want but are not annoyed by loads of information. Ok, so lets have a very lightweight introduction to this.
1. What's in a website? Content!
So you have the developer studio installed in part 1 of this tutorial and you have a runtime project, now holding some themed variant of the "basic website kit". Gentlemen, please start your engines now. And by engines I mean the embedded OpenWGA server. You can do so by again double-clicking the "runtime.xml" in your runtime project and hit the "Start" button in the runtime editor that appears.
Alternatively you may want to use this little thingy in the toolbar:. Clicking on the little arrow on it lists all runtime projects in the workspace and lets you start/stop/restart the embedded server with each one.
After some short time your server should be up and running. We're now going to look at your new website from a new perspective: The perspective of a web content author. Open the runtime editor by double-clicking the "runtime.xml" again. Here you should see your newly created website in the list.
Select it there, then click the link "Content Manager" on the right.
Your browser should come up and load your website, not directly this time but inside the OpenWGA authoring application, called "Content Manager". Might look like this:
do we see: We see your website right in the middle, just like we know
it. We see some panels around it, the most prominent one being the one
to the right. It offers us to "Edit Content", meaning the page we
currently see on the site.
We're gonna try this, shall we? Just click the "Edit Content" button on the right. Immediately a dialog is coming up, saying that a "draft copy" will be created and offering to change the title of the page we are going to edit.
(Please ignore these typos for now. I'm going to have a word with our label editor...)
So what does "draft copy" mean? It means that the system is going to create a copy of the page which at the moment will be visible just for us, not for your average website user. On this copy we will be able to work with the page contents safely and without compromising the public website. Nobody (except maybe other authors) will see this copy until we are going to "publish" it. On that event it will replace the currently visible version. Until then we also may decide to dump our working copy instead and keep everything as it is.
On clicking "Create draft copy" here you will see the interface altering a litte bit. It will look like this:
What happenend? The available actions in the right panel have changed. You now see an action "Publish content" which you can hit once you are satisfied with your work and it should get public. I will not be going into further detail about the other points here, as this would lead too far now.
Instead have a look at the website. You suddenly see little red and green buttons on it. These are "Edit Icons", marking positions where the page can be edited. As you might assume there is a fundamental difference between the icons of both colors:
- Red edit buttons let
you edit the "real content" of the page, i.E. the text that is
contained in it or other data embedded to it. Clicking it will open an
editor right at the place where the content to edit is displayed on the
page (go on, try it!). The right panel will now show controls you would
expect from some text processing application, allowing you to format
your content. Also it will give you "save" and "cancel" buttons. Have a
guess what they do.
- Green edit buttons let you
modify the structure of the page. Pages of the "basic website kit" are
built from so called "content management modules", little website parts
which are arranged accross the page in a way that suits your needs. They
can offer text modules (like the ones you edit by the red edit
buttons), images to embed or "containers" to contain and layout yet
other modules, to name just some examples.
It shows that there are two sections on this page where modules may be arranged: "left" on the left part of the page, where this little Walt Disney quote is shown, and "content" on the center of it, holding the actual text. Both currently contain a single "Richtext" module, offering a text field which is formattable, so this is a pretty basic page. To get an impression about what is possible, select "left" or "content" on the module hierarchy and click on the "Add" button to browse through the array of available modules.
Content modules are great! By using those an author can produce pretty terrific results with little effort. He can have some basic page with just some formatted text like we have here. But he can also create a more complex layout without any coding. Have a look at this page from the openwga.com site for an example:
You can find the full online version of this page here. An author can create these pages just by arranging container and content modules in some hierarchy that matches the order of display. Have a peek at the module configuration of this page. You may be able to identify the seen elements easily in this hierarchy:
we're not going to dive much deeper into this, as this would bring us
too far away from what we actually want to do. Just one more thing to
clarify: Content modules do NOT make up the complete layout of the page!
They are available only to layout those inner "content" parts of the page
that are in the responsibility of the author. If they are available, and
where, is up to the actual design of the website. We're gonna have a
look at that later in the tutorial.
On to the next page...