Créer un site internet avec AtikTeam

Le module optionnel de site web public vous permet de gérer votre site internet public directement depuis AtikTeam.

Mise en place

Activation

Tout d’abord, vous devez passer commande de ce module optionnel pour qu’il apparaîsse dans l’interface.

Le site web sera géré au sein d’un espace projet, c'est pourquoi il est recommandé de commencer par ouvrir un nouvel espace projet, qui sera par exemple nommé « site public ».

Depuis la configuration de ce projet, vous pouvez alors activer le module de projet « Site web public ». Un nouvel onglet de projet, Site public va alors apparaître.

Principes

AtikTeam va alors vous permettre de gérer le contenu de votre site public. Vous commencerez par y contruire une structure en rubriques/sous-rubriques, multilingue si vous le souhaitez.

Les rubriques vont ensuite fonctionner comme des dossiers dans lesquels vous pourrez mettre des ressources spécialisées :

  • des articles (auteur, date de publication …)
  • des évènements (dates de l’évènement)
  • des newsletters (automatiquement envoyées par email aux abonnés)
  • de simples pages, pour ajouter du contenu dans le site en dehors de la structure principale

Habillage

L’habillage de votre site public fonctionnera avec les technologies standards HTML/CSS/JavaScript. Pour en savoir plus, consultez la documenation sur les réglages du site ci-dessous.

Adresse internet

Vous pouvez utiliser un domaine que vous possédez pour votre site AtikTeam. Pour en savoir plus, consultez la documenation sur les réglages du site ci-dessous.

Fonctionnement des rubriques

Le module de site public vous permet de structurer votre site internet en rubriques et en sous rubriques. Pour ajouter une rubrique, il suffit de cliquer sur le bouton « Nouvelle rubrique ». Les informations demandées sont alors :

  • le « nom du menu », ce qui apparaîtra dans le menu de navigation
  • le « titre » sera affiché en haut de la page
  • le « contenu » constituera le corps de la page.

Il est, de plus, possible de créer un site multilingue en fournissant les variantes dans différentes langues.

Les sous-rubriques

Pour créer une sous-rubrique, il suffit de cliquer sur la rubrique parente, puis sur le bouton « Nouvelle sous-rubrique ». En régle générale, les sous-rubriques fonctionnent comme les rubriques.

Organisation

L’ordre d’apparition des rubriques dans le menu sera le même que dans AtikTeam. Pour changer cet ordre, les rubriques peuvent être déplacées par simple cliquer-déposer.

Rangement des ressources

Après création, les rubriques servent également de dossiers de rangement pour organiser les autres ressources (articles, évènements, pages, newsletters …).

Les ressources d'un site public

En plus des rubriques, un site public peut contenir différentes ressources, qui sont des pages spécialisées grâce à des informations supplémentaires :

  • des articles, munis des auteurs, d’un résumé, de la date de publication … ;
  • des évènements, avec les dates clefs ;
  • des newsletters, automatiquement envoyées par email aux abonnés.

Il est également possible de créer de simples pages, pour ajouter du contenu dans le site en dehors de la structure principale des rubriques.

Rangement de la ressource

Chaque ressource est rangée dans une rubrique de votre choix. Cette information pourra être utilisée plus tard lors de l’affichage.

Principe de rédation - modération - publication

Tous les collaborateurs peuvent rédiger des ressources, pour les proposer à la modération puis à la publication. Lors de sa création, la ressource se trouve dans un état « non-publiée ». Un chef de projet peut alors la vérifier, la rectifier au besoin, puis la publier. Ce n’est qu’après publication que la ressource apparaîtra sur le site public.

Affichage de la ressource sur le site public

Les ressources créées deviennent accessibles, après publication, par deux moyens. Le premier est simplement l’utilisation de liens wiki entre les pages. Le second, généralement plus intéressant, est l’utilisation d’une balise d’affichage automatique, à insérer dans le contenu d’une rubrique à l’endroit désiré. Par exemple, vous pouvez demander une liste de tous les articles de la rubrique courante avec la balise :

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

Il s’agit simplement d’un raccourci pour la balise plus explicite suivante :

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

Pour étendre le champ aux articles de la rubrique courante et à ceux de ses sous-rubriques, vous pouvez utiliser le paramètre scope=tree :

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

Pour étendre le champ à toutes les rubriques du site, vous pouvez utiliser le paramètre scope=website :

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

Billet de blog

Le billet de blog offre un moyen publication simple permettant d’animer votre site par des actualités régulières. Les informations clefs sont :

  • la langue
  • l’auteur (optionnel)
  • la date de publication
  • le titre du billet
  • le contenu du billet

Création d'un billet de blog

Choisissez la rubrique dans laquelle vous souhaitez ranger le billet de blog, et cliquez sur Rédiger un billet.

Le champ réservé à l’auteur offre une aide à la saisie grâce aux comptes des utilisateurs de l’application. Si possible, l’article affichera ensuite automatiquement la photo de l’auteur principal. Sinon, le nom que vous avez saisi sera affiché tel quel.

Affichage des billets de blog

Dans le site public, vous pouvez afficher une liste automatique des billets de blog en utilisant la balise suivante, à taper dans le contenu d’une rubrique.

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

Les billets seront listés automatiquement du plus réçent au plus ancien.

Vous pouvez limiter le nombre de billets affichés dans la liste avec le paramètre data-param-limit, par exemple pour afficher les 3 derniers billets :

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

Vous pouvez également couper automatiquement le résumé du billet dans la liste avec le paramètre data-param-truncate, par exemple pour limiter à 50 caractères :

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

Les options sont cumulables.

Articles

Les articles sont des publications, dont les informations clefs sont :

  • la langue
  • les auteurs principaux
  • les autres auteurs
  • le titre de l’article
  • une illustration
  • le résumé du contenu de l’article
  • le contenu, corps de l’article

Création d'un article

Choisissez la rubrique dans laquelle vous souhaitez ranger l’article, et cliquez sur Rédiger un article.

Les champs réservés aux auteurs offrent une aide à la saisie grâce aux comptes des utilisateurs de l’application. Si possible, l’article affichera ensuite automatiquement la photo de l’auteur principal.

Affichage des articles

Dans le site public, vous pouvez afficher une liste automatique des articles de la rubrique en utilisant la balise suivante, à taper dans le contenu d’une rubrique.

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

Évènements

Les évènements sont des ressources munis de date de début et de fin. Ces informations seront utilisées pour actualiser automatiquement le contenu du site web.

Création d'un nouvel évènement

Un nouvel évènement est créé par le bouton Ajouter un évènement.

Affichage des évènements

Afficher le prochain évènement de la rubrique :

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

Afficher la liste des évènements à venir :

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

Afficher la liste des évènements passés :

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

Vous pouvez limiter le nombre d’évènements affichés avec le paramètre data-param-limit, par exemple pour afficher les 3 prochains évènements :

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

Newsletters

Les Newsletters sont des documents automatiquement envoyés à une liste d’abonnés. Les visiteurs du site peuvent s’abonner directement en déposant une adresse email, et la liste des abonnés peut être complétée directement dans AtikTeam.

Création d'une newsletter

Pour créer une nouvelle Newsletter, cliquez sur le bouton Rédiger une Newsletter. Conformément au principe de modération/publication, la lettre ne sera pas expédiée immédiatement.

Expédition de la newsletter

Pour expédier la lettre, il suffit de la publier.

Affichage de la newsletter

Les newsletters expédiées peuvent être listées dans une rubrique avec la balise suivante.

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

De plus, vous pouvez introduire un champ d’inscription à la newsletter avec la balise suivante.

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

Pages

Les pages sont des ressources simples, sans information complémentaire. Elles sont destinées à contenir l’information que vous ne souhaitez pas mettre dans une rubrique.

Création d'une page sur votre site internet

Cliquez sur Rédiger une page pour créer une nouvelle page.

Affichage des pages de votre site internet

L’accès aux pages se fait par l’utilisation de liens wiki. Il suffit donc de copier le lien wiki de la nouvelle page, et de le coller dans une rubrique. Vous pouvez également lister toutes les pages de la rubrique avec la balise suivante.

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

Configurer votre site internet

Vous pouvez configurer votre site internet en différents points, notamment pour choisir son apparence.

Tous les réglages ci-dessous sont accessibles depuis l’onglet Site public de votre projet.

Informations générales

Vous pouvez choisir le titre de votre site internet, ainsi que le nom de domaine et la langue de navigation par défaut. Pour cela cliquez sur le lien configuration du site dans la colonne de droite.

Pour que le nom de domaine fonctionne, vous devez au préalable avoir configuré vos DNS (voir plus bas).

En-tête et pied de page

Vous pouvez spécifier un bloc de HTML à insérer avant le contenu des pages (en-tête) et un autre bloc HTML à insérer après le contenu des pages (pied de page). Vous êtes libre de mettre ce que vous souhaitez dans ces blocs.

Parfois, vous voudrez faire référence à des documents externes (images, fichiers etc.). Dans ce cas, vous pouvez utiliser le prefix **data_dir* * .Ladressedevotredocumentexterne“ logo.png” seraitdoncdata_dir/logo.png”. La mise en ligne de ces fichiers est expliquée un peu plus bas (ressources statiques).

Vous pouvez également faire référence à une page de votre site internet, dans l’en-tête comme dans le pied de page. Pour cela, vous pouvez utiliser le prefix **site_root* * .Parexemple, pourfaireunlienversunepagedecopyright, vouspouvezinsérersite_root/content/2-copyright”.

Ressources statiques

Vous pouvez envoyer des ressources statiques (typiquement des images), pour pouvoir les utiliser dans les en-tête et pied-de-page. Pour ajouter une image, vous devez cliquer sur le lien ressources statiques, puis envoyer votre nouveau fichier. Chaque fichier doit avoir un nom unique pour y faire référence dans le HTML (voir ci-dessus).

Habillage / CSS / JavaScript

L’habillage de votre site public fonctionnera avec les technologies standards HTML/CSS/JavaScript. À partir de vos rubriques et de vos ressources, des pages HTML seront générées, et leurs éléments seront dôtés de classes explicites. Vous pourrez donc construire votre feuille de style CSS, qui décrira l’habillage visuel de votre site Internet. Vous pourrez également utiliser des fonctions JavaScript.

Structure HTML

La structure HTML du site est automatique, et tend à être le plus neutre possible, reflétant uniquement la structure des pages. Les classes CSS devront s’appuyer sur cette structure.

CSS

Vous pouvez télécharger le CSS de votre site, ou envoyer un nouveau CSS, à partir du lien ressources statiques. Vous pouvez également envoyer un CSS spécial pour les navigateurs défectueux.

Depuis votre CSS, vous aurez peut-être besoin de faire référence à des ressources statiques (images etc.). Pour ce faire, le plus simple sera d’utiliser le préfix relatif : ../data/ . Par exemple, pour référencer “logo.png”, mentionnez simplement ”../data/logo.png”.

JavaScript

JQuery et Underscore sont fournis par défaut, dans des versions assez réçentes. Vous pouvez ajouter votre code JavaScript.

Nom de domaine (DNS)

Pour que votre site internet réponde à votre adresse DNS ( www.exemple.com ), vous devez configurer vos DNS pour créer un alias CNAME vers public.atikteam.com. Cette configuration s’effectue auprès de votre prestataire de nom de domaine.

Lorsque la modification sera prise en compte, vous pourrez ensuite entrer votre adresse ( www.exemple.com ) dans la configuration du site public sur AtikTeam.

Attention : par conception, les changements de réglages sur les DNS mettent plusieurs heures à s’appliquer.