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 documentation 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 documentation 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. L’adresse de votre document externe “logo.png” serait donc « $data_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. Par exemple, pour faire un lien vers une page de copyright, vous pouvez insérer « $site_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 (http://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 (http://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