Introduction

Introduction

ITWS is a solution that allows you to quickly create a website. This documentation is intended to guide you in the handling and administration of ITWS.

Theory: Getting started with the concepts of ITWS

Structure of my site

This sketch shows the various elements of your website:

_images/layout.png

Here is a summary of the different areas of your site:

Area Description of the area.
Top The top contains your logo, slogan, a link to connect, disconnect and a search box.
The menu The menu on your site is the primary navigational element. It is easily customizable in the control panel.
Content area This is the main area of your site.
The breadcrumbs This breadcrumbs located under the menu lets you know where you are on the site and back (in the section that contains the page you see, for example).
Sidebar Your site has a sidebar that allows you to dynamise your site.
Footer The footer allows you to add information about your company / organization.

Resources types

Like your computer, your website is composed of a set of folders and files. In ITWS it is called “resources”. These resources are present in two forms:

  • The “Folders” that can contain other resources (files or folders)
  • The “Files” that can not contain other resources.

Here is the complete list of ITWS resources:

Logo Type Description
_images/html.png Website Website (article, etc.).
_images/file.png File You can add your website files for share with your visitors. It is thus possible to add any type of files (office documents, pdf, sounds, etc.).
_images/image.png Image Image, photo, etc..
_images/rss_feeds.png RSSFeed RSS feed
_images/tags.png Tag Marker for grouping lexical resources
_images/folder.png Folder Container used for classifying office documents for example.
Tracker (optional) Ticketting tool used for project management.
_images/section.png Section A section is a folder whose view is configurable.
_images/news_folder.png News News

Your website offers a “browser” that allows you to browse all folders and files on your website. We will present the browser in the next section.

The browser

Your website consists of a set of folders and files your just like your favorite operating system (Windows / Linux / Mac).

A browser is accessible at any time since the icon in the admin bar:

_images/admin_bar_manage-en.png

This browser allows you to navigate into the tree of your website:

_images/navigator-en.png

Caption:

  1. Full-text search
  2. Filter by content type
  3. Link to view the resource
  4. Link to edit the resource
  5. Action bar on the selected resource(s).

Administration bars

When you are logged in as an administrator of the site, a bar like this one ...

_images/admin_bar-en.png

... appears at the top of your website. This allows you to easily manage your site. This admin bar consists of 3 blocks.

Bar 1

_images/admin_bar_1-en.png

The first admin bar, which is always displayed allows you to:

  • To quickly access to the home page
  • To access the control panel where you can configure your website
  • To have access to the interface for adding a new resource

Bar 2

_images/admin_bar_2-en.png

The second bar is the most important one. It is different on every page of your site.

This bar gives you important information:

  • The type of the current resource (Section / WebPage ...)
  • The publication status of the resource (green=Public, red=Private, white=no workflow)

You also have buttons that act on the current resource.

Bar 3

_images/admin_bar_3-en.png

The third bar allows you to enable or disable the edit mode.

If edit mode is activated, extra buttons will appear to act on resources when browsing your site. These buttons allow you to edit your site. (Hence the name “edit mode”).

If edit mode is disabled, the buttons of additional shares will be hidden.

The central bar

The 3 variants of the central bar

The central bar changes depending on the type of the resource in which you are. One can nevertheless distinguish three variants of this central bar:

  • The central bar of the website (the site root)
  • The central bar of content type “Container”. Eg “Section” or “Folder”
  • The central bar of the editable content. Eg “Website” or “File”

We will present below, the 3 variants of the central bar.

Admin bar from the root of your site

When you are at the root of your website, you should see the admin bar:

_images/admin_bar_2-en.png

The title of the current resource is “ITWS Web Site” because you are at the root of your site.

The term “ITWS Web Site” is not colored (green / orange or red) because the site is public.

Five actions are possible:

  • View leads you to the home page of your site.
  • Edit allows you change the title and appearance of the home page.
  • Configuration leads you to the administration panel of your site.
  • Folder icon allows you to browse files of your site.
  • New resource icon allows you to add a new resource at the root of your site.

Admin bar for a Section

When the current resource is a section, you should see the admin bar:

_images/admin_bar_section-en.png

The title of the current resource is “Section”. This title is colored green because the resource is published.

Five actions are possible:

  • See leads you to the main view of the section

  • Edit allows you to change title and appearance of the section

  • Advanced can perform advanced operations on the section:
    • See the history of modifications to the section
    • See the list of links and backlinks of the section
    • Manage the table of contents of the section
  • Folder icon to open the files browser. The browser will open at the current location.

  • New resource icon allows you to add a new resource in the current section.

Admin bar for a WebPage

When the current resource is a webpage, you should see the admin bar:

_images/admin_bar_webpage-en.png

The title of the current resource is “Web Page” This title is colored green because the resource is published. Four actions are possible:

  • See allows you to the main view of the webpage
  • Edit allows you to change the contents of the “Website”
  • Advanced provides access to advanced actions
  • Parent folder icon opens the browser from the parent section that contains the current resource.

Sections

A section is a resource (container type) on which the view is configurable. You can choose the way of viewing among these three views:

  • Composite view
  • Gallery view
  • Feed view

Some of these views are configurable. The configuration is done via the link “Configuration” of the admin bar.

Composite view

The composite view is made up of a set of orderable blocks.

_images/edit-composite-section-en.png

Description:

  1. Current resource is a section
  2. The edit mode is activated
  3. It is possible to order and add boxes into the composite view
  4. A button allows you to modify every box of the composite view

Here is a picture of different types of items that can be ordered:

Logo Type Description
_images/html_content.png Content HTML content area
_images/box_contact.png Contact Contact form to collect users’ messages.
_images/box_feed.png Content feed Displays a set of news (news), web pages and/or sections of a given container according to various criteria.
_images/gallery.png Gallery Image Gallery, it displays thumbnails of the images.
_images/map_box.png Map Displays a location on Google Maps or OpenStreetMap.
_images/slideshow.png Slideshow Slideshow of a set of images.

Feed view

This view displays a page of a set of news (news), web pages and/or sections of a given container. Here are configurable the number of items displayed, the sort criteria, the display template and a subset of defined keywords (tags) which can be filtered.

Configure and manage my website

Log on as administrator

You’ve probably received by email your username and password. If it is not the case, ask the site administrator to register you.

The first step to change your website is to identify you. You can login via the link “Log In ” at the top of the page.

This page will ask you to enter your email and password. If you forgot your password, you can reset it by checking the “I forgot my password” box.

The control panel

The whole configuration of your website is achieved in the control panel of your website.

When you are logged in as an administrator, you can click on the icon “Control panel” from the first admin bar:

_images/control_panel_view-en.png

From this control panel you can:

  • Manage users and their rights
  • Create new users
  • Modify the list of virtual hosts
  • Configure security policy
  • Modify the list of available languages and the default language
  • Change contact options
  • Modify the theme and CSS
  • Modify page 404 of the site (page displayed when a user tries to access a page that does not exist)
  • Modify the robots.txt file
  • Manage the list of tags
  • Set up SEO (Search Engine Optimization) information
  • Visualize broken links, orphan resources and the history of changes of your site

Manage the theme

In the theme, you can:

  • Change the favicon and the logo of your website
  • Choose the skin used
  • Change the site’s stylesheet (CSS)
  • Modify the main menu
  • Modify the footer of the site

Edit main menu

Coming soon ...

Change the look

Choosing the skin and CSS

Manage content on my site

Add content

To add content to your site, simply create a new resource. The menu is always available in the admin bar.

_images/add-ressource.png

The list of different types of resources available will be displayed:

_images/type-ressources.png

Once the resource type is selected, the add form is displayed:

_images/add-ressource-form.png

This form contains important information:

  1. The type of the selected resource
  2. The description of the resource type selected

You must enter two fields:

  1. The title of the resource. This field is required.
  2. You must select from the dropdown list, the location where you want to add your resource.

In the text box, you can enter the name of the resource. This is not mandatory, since if the name is not seized, it will be automatically calculated from the title captures. Example:

  • title -> Name
  • “My Blue Car” -> “my-car-blue”

Add a news

Adding a new news is very simple.

_images/add-news-en.png

Here are the two steps:

  1. Click the “Add a new resource” of the admin bar
  2. Select the resource type “News”

HTML Editor

TinyMCE

Tags

A tag is a lexical marker used to pool resources with something in common. For example you can group news speaking of events around Paris with the tag “Paris”. A web page will be automatically built and will include all items with that tag. The URL of this page will be like:

http://www.example.com/tags/paris

It is possible to associate tags to resources of type:

  • Webpage
  • Section

The list of tags is configured via the Tag tab of the admin bar:

_images/tags.png

From this configuration view you can:

  • Add new tags
  • List all existing tags
  • Publish or unpublish tags
  • Remove tags
  • Show the number of resources associated with each tag
  • List the resources associated to any tag

In a web page and in a section, a tag selector is available:

_images/selection-tags-en.png

Simply select a tag and click the “>” button to add the tag to the web page. The button “»” allows you to associate all the tags to the current web page.

Advanced views

Some resources hold advanced views:

View Description
Links Coming soon ...
Backlinks Coming soon ...
Commit Log History of changes to the resource.
Subscriptions Manage users notified in case of change of the resource.

My site and SEO

ITWS is is natively optimized for SEO.

In this part of the documentation we will present some actions that will help you further to improve your SEO:

  • Sitemap.xml Coming soon ...
  • Robots.txt Coming soon ...
  • Vue SEO Coming soon ... (Google key / Yahoo key /) Google Webmaster tools

Vocabulary

Here are definitions of words or phrases that we use in this documentation.

CMS

CMS means Content Management System (Management System content).

A resource

In ITWS, a resource means almost any object made available to users.

Workflow

A workflow defines the states of a resource and transitions between these states (private, pending publication, published).

SEO

Search Engine Optimization.

About

This documentation was written by:

  • Sylvain Taverne
  • Nicolas Deram