Create a website with AtikTeam

The optional public website module allows you to manage and author a public website internet directly from your AtikTeam. It is perfectly secure, you and only you choose what to publish and how.

Setting up

Activation

First, you need to order this optional module for it appears in the interface.

The website will be managed within a project area, which is why it It is recommended to start by opening a new project space, which for example, will be named “public site”.

From project settings, you can then activate the project module “Public website”. A new project tab, Public site will then appear.

Principles

AtikTeam will then allow you to manage the content of your website. You will start by building a structure sections / sub-sections, multilingual if you wish.

Specialized resources can be published in these sections :

  • articles (author, date of publication …)
  • events (dates of the event)
  • newsletters (automatically sent by email to subscribers)
  • simple pages, to add content to the site outside of the main structure

Layout

The look of your public site will work with the technologies HTML / CSS / JavaScript standards. To learn more, check out the documentation on the site settings below.

Internet address

You can use a domain that you own for your website. For more information, see the documentation on website settings below.

How sections work

The public site module allows you to structure your website in sections and subsections. To add a section, it Just click on the “New section” button. The requested information is then:

  • the “menu name”, which will appear in the navigation menu
  • the “title” will be displayed at the top of the page
  • the “content” will be the body of the page.

It is also possible to create a multilingual website by providing variants in different languages.

Subsections

To create a subsection, simply click on the parent section, then the “New subsection” button.

Organization

The order of appearance of the items in the menu will be the same as in AtikTeam. To change this order, topics can be moved by simply clicking and dragging.

Storage of resources

After creation, the sections also serve as folders for storage to publish and organize other resources (articles, events, pages, newsletters …).

The resources of a public site

In addition to topics, a public site may contain different resources, which are specialized pages with added information :

  • articles, with authors, a summary, the date of publication …
  • events, with key dates
  • newsletters, automatically sent by email to subscribers

It is also possible to create simple pages, to add content in the site outside the main structure of sections.

Storage of the resource

Each resource is stored in a topic of your choice. This information may be used later for listing and display.

Principle of redaction - moderation - publication

All coworkers can write resources and propose them for moderation, and to publication. When created, the resource is in an “unpublished” state. A project manager can then check it, rectify it if necessary, then publish. Only after publication will the resource appear on the public site.

Displaying the resource on the public site

The resources created become accessible, after publication, by two means. The first is simply the use of wiki links between pages. The second, usually more interesting, is to use automatic listing tags, that will link resources automatically at the desired location. For example, you can request a list of all articles from the current section with the tag:

<div data-content="articles.show"></div>

It’s just a shortcut for the more explicit tag :

<div data-content="articles.show" data-param-scope="folder"></div>

To extend the scope to articles in the current section and to those of its subsections, you can use the parameter scope=tree :

<div data-content="articles.show" data-param-scope="tree"> </div>

To extend the scope to all sections of the site, you can use the parameter scope=website:

<div data-content="articles.show" data-param-scope="website"> </div>

Blog post

The blog post offers a simple way to publish to animate your site by regular news. Information Keys are:

  • language
  • author (optional)
  • date of publication
  • post title
  • post content

Creating a blog post

Choose the section in which you wish to store the ticket blog, and click Write a blog post.

The author’s field provides help with data entry using accounts of the users of the application. If possible, the article will then automatically display the author’s profile picture. Otherwise, the name you entered will be displayed as is.

Viewing blog posts

In the public site, you can view an automatic list of blog posts using the following tag, to type in the content of a topic.

<div data-content="posts.show"> </div>

Blog losts will be automatically listed from most recent to the olders.

You can limit the number of blog posts displayed in the list with the parameter data-param-limit, for example to display the 3 last blog posts only:

<div data-content="posts.show" data-param-limit="3"> </div>

You can also automatically truncate the blog post summary in the list with the parameter data-param-truncate, for example limit to 50 characters:

<div data-content="posts.show" data-param-truncate="50"> </div>

All options are cumulative.

Articles

Articles are publications whose key information is:

  • language
  • main authors
  • other authors
  • title of the article
  • a picture
  • summary of the content of the article
  • full content, body of the article

Creating an article

Choose the section in which you wish to store the article, and click Write an article.

Authors fields provide help with data entry using accounts of the users of the application. If possible, the article will then automatically display the photo of the main author.

Displaying articles

In the public site, you can view an automatic list of articles in the topic using the following tag, to type in the content of a topic.

<div data-content="articles.show"> </div>

Events

Events are resources with start date and end. This information will be used to automatically refresh the content of the website.

Creating a new event

A new event is created by the button Add event.

Display events

View the next event of the section:

<div data-content="events.next"> </div>

See the list of upcoming events:

<div data-content="events.coming"> </div>

View the list of past events:

<div data-content="events.past"> </div>

You can limit the number of events displayed with the parameter data-param-limit, for example to display the next 3 events:

<div data-content="events.com" data-param-limit="3"> </div>

Newsletters

Newsletters are documents automatically sent to a list subscribers. Visitors to the site can subscribe directly from your website, entering an email address, and the list of subscribers can be completed directly in AtikTeam.

Creating a newsletter

To create a new Newsletter, click on the button New Newsletter. In accordance with the principle of moderation / publication, the letter will not be shipped immediately.

Newsletter Shipping

To send the letter, simply publish it.

Display the newsletter

Sent newsletters can be listed in a column with the following tag

<div data-content="newsletters.show"> </div>

In addition, you can enter a registration field for the newsletter with the following tag.

<div data-content="newsletters.subscribe"> </div>

Pages

Pages are simple resources without extra fields. They are intended to contain the information that you do not want to put in a section.

Creating a page on your website

Click Write a page to create a new page.

Displaying the pages of your website

Access to pages is best through the use of wiki links. Copy the wiki link from the new page, and paste it into a section. You can also list all the pages of the section with the following tag.

<div data-content="pages.show"> </div>

Configure your website

You can configure your website in different points, especially to choose its appearance.

All the settings below are accessible from the “Website settings” of your project

General informations

You can choose the title of your website, as well as the name domain and default navigation language. For this click on the Site configuration link in the right column.

For the domain name to work, you must first have configured your DNS (see below).

You can specify a block of HTML to insert before the content pages (header) and another HTML block to insert after the content of the pages (footer). You are free to put what you want in these blocks.

Sometimes you will want to refer to external documents (images, files etc.). In this case, you can use the prefix $data_dir. For instance, the address of your external document “logo.png” would be “$data_dir/logo.png”. Uploading such files is explained a little further down (static resources).

You can also refer to a page on your website, in the header as well as in the footer. For that, you can use the prefix $site_root. For example, to make a link to a copyright page you can insert “$site_root/content/2-copyright”.

Static Resources

You can upload static resources (typically images), for example to use them in the header and footer. To send an image, you must click on the link static resources, then send your file. Each file must have a unique name that you will reference in HTML (see above).

Markup / CSS / JavaScript

The look of your public site will work with the technologies HTML / CSS / JavaScript standards. From your topics and your resources, HTML pages will be automatically generated, and will be completed with explicit classes for markup. You can build your CSS stylesheet, which will describe the visual look of your site Internet, and reference content classes. You will also be able to use JavaScript functions.

HTML Structure

The HTML structure of the site is automatic, and tends to be the most neutral possible, reflecting only the structure of the pages. The CSS classes will have to rely on this structure.

CSS

You can download the CSS of your site, or send a new one CSS, from the link static resources. You can also send a special fallback CSS for old or defective browsers.

From your CSS, you may need to refer to static resources (images etc.). To do this, the simplest will be to use the relative prefix: ../data/…. For example, to reference logo.png, just type ../data/logo.png.

JavaScript

JQuery and Underscore are provided by default. You can add your own JavaScript code.

Domain Name (DNS)

To have your website respond to your DNS address (http://www.example.com), you need to configure your DNS and create a CNAME alias to public.atikteam.com. This configuration must be done with your domain name registrar.

When the change is taken into account, you must enter your address (http://www.example.com) in the configuration of the public site on AtikTeam.