SITE WEB TAGCLe guide complet

tagc-dev.univ-amu.fr

Fabienne Lacoude – Nov. 2016

PRISE EN MAIN

2

ACCÉDER À VOTRE SITE WEB

3

APPARENCE DU SITE EN MODE CONNECTÉ

4

Page d’accueil intranet

A la connexion, les utilisateurs identifiés AMU ou membres du site sont automatiquement

redirigés vers la page d’accueil de l’intranet (type de contenu private content)

APPARENCE DU SITE EN MODE ADMINISTRATEUR

5

Barre

d’administration

En mode administrateur, certains éléments apparaissent dans l’environnement graphique

de la page

Barre d’administration

Liens contextuels sur certains éléments

6

En tant qu’administrateur, vous pouvez :

• Créer, modifier et supprimer tout types de pages

• Ajouter des blocs et les positionner dans certaines régions

• Ajouter des liens dans des menus existants

• Ajouter des membres dans l’espace réservé et compléter leurs fiches profil

• Effectuer des demandes d’assistance

En tant qu’administrateur, vous ne pouvez pas :

• Modifier l’apparence du site (couleurs, polices et taille des texte…)

• Créer des menus

• Changer les éléments de l’entête de votre site (logo, nom du site…)

• Changer l’arrière-plan de votre site

VOS DROITS

ACCÈS À L’ASSISTANCE

7

En tant qu’administrateur, vous pouvez accéder directement à l’assistance en ligne

(tickets) et à la documentation via le bloc assistance gestionnaires de la page

d’accueil.

Onglet assistance dans la barre d’administration

ACCÈS À L’ÉTAT DES LIENS

8

En tant qu’administrateur, vous pouvez accéder à une état des liens de votre site via

le lien Etat des liens de la barre d’administration. Cet outil liste à un instant les liens

qui pointent vers une erreur 301 ou 404 et vous permet de les réparer facilement

Onglet Etat des liens dans la barre d’administration

L’ÉDITEUR DE CONTENU

9

La barre d’outils de l’éditeur de contenus contient tous les outils permettant de mettre en

forme le contenu des pages web.

Ensemble des boutons de la barre d’outil de l’éditeur de contenus

gras italique Liste

numéroté

e

Liste à

pucesInsertion

de lienInsertion

d’imag

e

Alignement

des imagesNiveaux de titreTablea

u

Suppressi

on de lienInsertion

d’une

vidéo

Citation

10

Au dessous de la zone de Contenu, une case à cocher permet de configurer une Google Map

dans la limite d’une carte par page.

INSERTION D’UNE GOOGLE MAP

Méthode 1Entrer directement les coordonnées GPS et le

niveau de zoom

Méthode 2

Chercher l’adresse dans Set Map Marker,

zoomer au bon niveau avec + ou - puis

insérer la carte avec Insert map.

11

MOTEUR DE RECHERCHE

Votre site est équipé d’un moteur de recherche interne qui indexe vos contenus public. En tant

qu’admin site vous avez également accès à la recherche dans les noms utilisateurs

STRUCTURE DU SITE

12

PAGE D’ACCUEIL

13

PAGE D’ACCUEIL – ZONE D’ENTÊTE

14

Carrousel

Logo + Menu

Bloc axes

Bloc citation

15

Bloc articles A la Une

PAGE D’ACCUEIL – ZONE ÉVÈNEMENTIELLE

PAGE D’ACCUEIL – ZONE PUBLICATIONS

16

Bloc Dernières publications

PAGE D’ACCUEIL – ZONE BLOC IMAGES

17

Blocs images

PAGE D’ACCUEIL – ZONE DE PIED DE PAGE

18

Zone pied de page

• Espace réservé

Connexion/déconne

xion

Enregistrer une

publication

Intranet

Accès au profil

• Contacts

NAVIGATION

19

Le menu principal est présent sur toutes les pages du site. Il comporte 4 rubriques :

• Accueil : retour à la page d’accueil. Doit rester en première position

• Laboratory : rubrique donnant accès aux pages statiques d’information sur le TAGC

MENU PRINCIPAL

20

• Directory : lien vers l’annuaire interne des chercheurs

• Contact : formulaire de contact

RUBRIQUE LABORATORY

21

Cette rubrique accessible depuis le menu principal a vocation à donner accès aux sous-

rubriques d’information sur le TAGC.

• Research axis : deux axes de recherche du laboratoire

• Publications : liens vers les publications importées depuis HAL AMU

• Education : page sur les activités de formation du laboratoire

LES TYPES DE CONTENU

22

LES 9 TYPES DE CONTENU DE VOTRE SITE

Type Description

Article Permet de rédiger les actualités affichées en page d’accueil

Carrousel Permet d’ajouter des images au diaporama de la page d’accueil

Galerie Permet de présenter des images sous forme de galeries photos

Private content Permet de publier un contenu accessible aux utilisateurs autorisés (par défaut, les personnels AMU)

Public content Permet de publier un contenu accessible à tous

Evénement agenda Permet d’annoncer les prochains événements sont une forme d’agenda

Webform Permet de concevoir des formulaires (contact, inscriptions…)

23

Votre site web prévoit 7 types de contenus différents selon la nature des informations à

publier

24

ARTICLE

Les contenus de type article permettent de publier des actualités. Les articles sont

composés d’un titre, d’une description et/ou d’une image. On peut également y ajouter

des dates de début et de fin, les associer à différents thèmes et y joindre des fichiers.

Un aperçu des 8 premiers articles apparaît en page d’accueil : l’ordre tient compte de la

date de l’évènement et de la date de mise en ligne de l’article. S’il y a plus de 8 articles,

les plus anciens sont accessibles par une pagination.

Aperçu de l’article en page d’accueilArticle

25

CARROUSEL

Les carrousels également appelés diaporamas ou slideshows permettent de présenter

des informations sous forme d'images défilantes placées dans un large espace en tête

de page. La carrousel s’affiche en page d’accueil du site.

Aperçu d’un slide du carrousel en page d’accueil (avec titre)

Aperçu d’un slide du carrousel en page d’accueil (sans titre)

26

GALERIE

Le type de contenu galerie vous permet de présenter des événements sous forme

d'albums photos. Les images sont affichées sous forme de miniatures et s’ouvrent en

plein écran au clic.

Aperçu d’une galerie photo

PRIVATE CONTENT

Le type de contenu private content permet de présenter du contenu plutôt statique, sujet à

peu de mises à jour, dont on souhaite restreindre la visibilité à certains publics.

Par défaut, ces pages ne sont accessibles qu’aux personnels AMU authentifiés. Il est également

possible de restreindre leur accès uniquement à certains personnels ou étudiants désignés.

Visibilité d’un contenu private content

27

28

PUBLIC CONTENT

Le type de contenu public content est dédié aux pages statiques

Elles sont accessibles à tous contrairement aux pages private content qui ne sont

accessibles qu’aux utilisateurs autorisés (membres du site).

Le public content prévoit un titre et/ou un body (contenu principal) et/ou des images

et/ou des blocs

Le corps d’une page public content peut comporter des éléments de différents types :

texte, liens, images, vidéos, tableaux, Google map

29

WEBFORM

Votre site web vous offre la possibilité de mettre en place des formulaires sur votre site

grâce au type de contenu webform. Toutes les données collectées au travers des

formulaires sont consultables via l’interface d’administration de votre site et exportables

au format Excel. Vous pouvez donc facilement archiver et exploiter ces données.

L’ANNUAIRE

30

31

L’ANNUAIRE (DIRECTORY)

L’annuaire des chercheurs est accessible depuis le menu principal (directory). Il est

alimenté par les fiches profils renseignées par les membres. Il propose un filtre (ou

facette) par statut (status). D’autres facettes peuvent être ajoutées (axes, education)

Se connecter

Cliquer sur My profile

Aller sur Edit puis

renseigner son profil

RENSEIGNER SON PROFIL

7

L’annuaire est alimenté avec les fiches membres. Chaque membre du site connecté peut

renseigner son profil. Attention, pour pouvoir renseigner son profil, l’utilisateur

doit être membre du site

LES PUBLICATIONS

33

34

LES PUBLICATIONS

Le catalogue des publications du laboratoire est accessible depuis le menu principal,

rubrique Laboratory > Publications. Il est auto alimenté avec les données provenant

d’HAL AMU. Il affiche les publications par année. Chaque publication intègre une

description détaillée et un lien vers sa source. Dans l’annuaire (Directory), chaque fiche

de membre affiche les publications associées.

Page Publications avec filtres par années

Détail d’une publicationAffichage des publications

sur une fiche membre

35

PUBLICATIONS PAR AUTEUR

Le catalogue des publications est alimenté avec des données provenant du dépôt HAL

AMU. Ce dépôt peut présenter des formes auteurs multiples pour un même auteur.

Chaque auteur peut donc, lorsqu’il renseigne son profil, renseigner les différentes

formes auteurs connues pour ses publications afin de s’assurer que la totalité de sa

production est bien récupérée. S’il connaît son identifiant HAL, il peut également le

renseigner ce qui garantit l’exhaustivité des données récupérées.

Exemple formes auteurs multiples sur HAL AMU

Identifiants multiples sur la fiche profil du membre Champ identifiant HAL

LA GESTION DES UTILISATEURS

36

LES MEMBRES DU SITE

Le site du TAGC est doté d’un annuaire interne alimenté par les profils des membres du

site. Deux procédures distinctes existent pour affilier des personnes au statut de Membre

du site. Ces procédures ne fonctionnent que pour les personnels AMU

Méthode 1

Alimentation automatique depuis l’annuaire AMU

Un module permet de récupérer automatiquement

tous les personnels du laboratoire dans l’annuaire

AMU et de les affilier automatiquement comme

membres.

L’annuaire comprend donc a minima cette liste de

personnels avec leurs informations de base.

A charge pour eux ou pour les admin site de détailler

les profils pour enrichir l’annuaire

Méthode 2

Alimentation manuelle

L’onglet People de la barre d’administration

vous donne accès à toutes les personnes

s’étant connectées au moins une fois

sur le site.

Vous pouvez ensuite accéder à leur profil

et les affilier manuellement comme

membres

7

Cette opération n’étant effectuée qu’une seule

fois à la mise en production, il conviendra de

réaliser une procédure manuelle pour les profils

n’ayant pas été importés

AFFILIER MANUELLEMENT LES MEMBRES DU SITE

7

Si l’assignation automatique n’a pas fonctionné et qu’un personnel du laboratoire

n’est pas présent dans l’annuaire, vous pouvez affilier manuellement une personne

comme membre du site pour lui donner à son profil. Attention, la personne doit s’être

connectée au moins une fois pour pouvoir réaliser cette procédure

Se connecter

Cliquer sur My profile

Aller sur Edit puis

Renseigner son profil

RENSEIGNER SON PROFIL

7

Chaque membre du site peut renseigner son profil pour enrichir l’annuaire (Directory)

RENSEIGNER SON PROFIL - HAL

7

Chaque profil présente les publications associées à son auteur. Le catalogue des

publications est alimenté avec des données provenant du dépôt HAL AMU. Ce dépôt peut

présenter des formes auteurs multiples pour un même auteur. Chaque auteur peut

donc, lorsqu’il renseigne son profil, renseigner les différentes formes auteurs connues

pour ses publications afin de s’assurer que la totalité de sa production est bien récupérée.

S’il connaît son identifiant HAL, il peut également le renseigner ce qui garantit

l’exhaustivité des données récupérées.

Exemple de formes auteurs multiples sur HAL AMU

Identifiants multiples sur la fiche profil du membre Champ identifiant HAL

GÉRER LE CONTENU

Ajout, modification et suppression de

pages sont les trois opérations de base

de la gestion de contenus

41

42

Contenu > Ajouter du contenu >

Sélectionner le type de contenu

approprié

Renseigner tous les champs

disponibles pour le type de contenu

choisi

Renseigner les différents paramètres liés

à votre contenu

• Paramètres du menu

• Paramètres des chemins d’URL

• Publié/non publié

AJOUTER DU CONTENU

43

Cocher fournir un lien

de menu

Choisir le titre du lien

de menu. En général

identique au titre de

la page

Choisir le parent pour

définir à quel niveau

d’arborescence se

situera votre page

AJOUTER DU CONTENU > PARAM. DU MENU

44

Par défaut « Générer

automatiquement l’alias d’URL » est

coché. L’alias se génère

automatiquement selon le titre de la

page et de sa place dans

l’arborescence. Ici, la page

présentation prend l’alias

linstitut/presentation car elle

appartient à la rubrique L’institut et

son titre est présentation

Il est aussi possible de

personnaliser l’alias d’URL

pour le rendre plus court

par exemple. Ici psnm au

lieu de plasticite-

systemes-nerveux-

musculaires

AJOUTER DU CONTENU > PARAM . DES CHEMINS D’URL

45

Par défaut « Publié » est coché.

Décocher Publier pour passer le

statut de la page en Non publié

Ne rien toucher aux

autres options

AJOUTER DU CONTENU > PUBLIÉ/NON PUBLIÉ

EDITER DU CONTENU

46

Possibilité de filtrer par type de contenu

Lien « Edit » en face de chaque contenu

Méthode 1 Méthode 2

Via le lien Contenu de la barre

d’administration

Via l’onglet Edit de la page

SUPPRIMER DU CONTENU

Via la vue d’ensemble des contenus

dans l’onglet Contenu de la barre

d’administration

Possibilité de filtrer par type de

contenu

Puis Actions > Supprimer

Possibilité de supprimer plusieurs contenus en

même temps en cochant les différents contenus

puis tout en bas de la page, menu déroulant

Bulk operations

47

DÉPUBLIER DU CONTENU

Via la vue d’ensemble des contenus dans l’onglet Contenu de la barre

d’administration

48

La visibilité du contenu dépubliéLe contenu dépublié reste accessible depuis la vue d’ensemble des contenus mais il devient invisible pour les utilisateurs. Il n’apparaît plus non plus dans le(s) menu(s) au(x)quel il était

rattaché.

Sélectionner tous les contenus à dépublier > Liste déroulante Bulk operations >

Unpublish > Appliquer

LA NAVIGATION

La navigation regroupe tous les éléments

qui permettent de circuler d’une page à

l’autre dans le site. Elle s’articule

principalement autour du menu principal

49

50

LE MENU PRINCIPAL

Votre site est structuré autour du menu principal. Vous ne pouvez pas ajouter de

nouvelle rubrique dans le menu principal mais vous pouvez ajouter des sous-rubriques

dans la rubrique « Laboratory ».

Le menu est déroulant : les niveaux secondaires apparaissent au passage de la souris

AccessibilitéLes menus déroulants sont plus difficilement accessibles pour les personnes malvoyantes, ayant des problèmes de mobilité, des déficits cognitifs ou intellectuels…Il est donc conseillé de ne pas utiliser plus d’un niveau de sous-menu

Créer ou éditer une page.

Dans la zone Paramètres du menu > Cocher "Fournir un lien de menu"

RATTACHER UNE PAGE A LA RUBRIQUE « LABORATORY »

Sélectionner « Laboratory » comme élément parent

POSITIONNER UNE PAGE DANS LE MENU LABORATORY

Roue dentée > Lister les liens

Déplacer les éléments en cliquer-déposer pour en edit l’ordre

Enregistrer

LES BLOCS

53

54

PRINCIPES DE BASE

Structure > Blocs > Ajouter un bloc

Choisir les paramètres de région

First top content

Second top content

Highlighted (Mis en évidence)

Content

Footer (Pied de page)

Copyright

Choisir les paramètres de visibilité :

lister les alias des pages sur

lesquelles le bloc doit être

positionné, <front> étant la page

d’accueil

55

BLOCS – RÉGIONS FIRST ET SECOND TOP CONTENT

Région first top content : permet de positionner 1 ou plusieurs blocs côte à côte en entête de la page

Région second top content : permet de positionner de 1 ou plusieurs blocs côte à côte en entête de la page

56

BLOCS – RÉGION MIS EN ÉVIDENCE

Région Mis en évidence : permet de positionner 1 bloc en entête de la page de la largeur de la page

57

BLOCS – RÉGIONS FOOTER ET COPYRIGHT

Région Footer: permet de positionner 1 ou plusieurs blocs dans la zone de pied de page

Région Copyright : permet de positionner 1 ou plusieurs blocs dans la zone inférieure du pied de page

LA GESTION DES FICHIERS

58

LA GESTION DES FICHIERS (1/3)

59

Uploader un fichier

Dans la zone Fichiers liés à la page,

uploader le ou les fichiers et enregistrer

Remplacer un fichier

Pour remplacer un fichier, dans la zone Fichiers liés à la page

cliquer sur Retirer, Enregistrer puis seulement après re-

uploader le fichier. Il est possible que le cache du navigateur

conserve la première image. Dans ce cas, faire ctrl+F5

Supprimer un fichier

Dans la zone Fichiers liés à la page

Cliquer sur Retirer puis Enregistrer

Comment transférer/supprimer des fichiers (document ou image) dans une page ?

LA GESTION DES FICHIERS (2/3)

60

Copier l’adresse du fichier

Clic droit sur le nom du fichier

Faire un lien vers le fichier

Sélectionner du texte ou une

image dans le contenu puis

cliquer sur l’icone de lien puis

coller l’adresse (Ctrl + V) au

niveau du champ URL

Enregistrer

Comment faire un lien vers un fichier ?

LA GESTION DES IMAGES

61

LES SOURCES

• La banque d’images Shutterstock : cette banque d'images propose des millions de

photographies, vecteurs et illustrations librement exploitables. Pour en bénéficier,

vous devez donc en faire la demande par ticket

• Les images produites en interne dans le respect du droit à l’image des personnes

identifiables sur les photographies.

62

INSERTION D’UNE IMAGE DANS UNE PAGE

63

Zone fichiers liés à la page > Images

Uploader le ou les fichiers dans la page et

enregistrer

Copier l’adresse de l’image par clic droit

sur le nom du fichier > Copier l’adresse

du lien

Cliquer sur l’icone d’insertion d’une

image puis coller l’adresse (Ctrl + V) au

niveau du champ URL

Upload d’un fichier

Icône d’insertion d’une image

Copier l’adresse du lienInsertion de l’image

LA GESTION DES VIDEOS

Toutes les pages public content ou private

content peuvent recevoir une ou plusieurs vidéos

provenant d’un hébergeur extérieur (Vimeo,

Youtube, Dailymotion…)

64

LA GESTION DES VIDÉOS

65

Il est possible d’insérer des vidéos issues d’un hébergeur comme YouTube ou Vimeo

dans n’importe quelle page public ou private content

YoutubeSur la vidéo Youtube faire partager puis intégrer > copier la totalité du code <iframe>Dans votre page web, cliquer sur l’icone de la vidéo et coller le code <iframe> dans le champ EmbedMedia

Vimeo

Sur la vidéo Vimeo faire partager puis copier la totalité du code <iframe>Dans votre page web, cliquer sur l’icone de la vidéo et coller le code <iframe> dans le champ EmbedMedia

LES FORMULAIRES

66

Les formulaires – ou webform – permettent de

collecter des données auprès des utilisateurs. Ces

données sont ensuite exploitables et exportables

au format excel

TYPE DE CHAMP EXEMPLE

• Les champs texte (texte court ou zone de

texte)

• Champ courriel

• Les listes de sélection

• Les fichiers joints

• Le champ Date

LES PRINCIPAUX TYPES DE CHAMPS

• Un formulaire est un espace de saisie dans l'interface utilisateur permettant de recueillir des

données. Il est constitué de zones de différentes natures appelées "champs"

67

ou

CONSULTATION ET EXPORT DES DONNÉES

68

Consulter les résultats en ligne via Soumissions/Analyse/Tableau

Ou télécharger au format Excel

Contenu > Webforms

LE MULTILINGUISME

69

PRINCIPES GÉNÉRAUX

Vous avez choisi de proposer votre site dans une seule langue : l’anglais

• Néanmoins, la traduction est possible pour :

- Certains types de contenu :

• public content

• article

• équipes de recherche

• séminaires

- les blocs

- les menus

70

LE RESPONSIVE

71

Dans un site dit responsive, la page html et la feuille de styles CSS intègrent directement les technologies permettant au site de s’adapter aux supports mobiles. Le thème utilisé sur nos sites web est aujourd’hui entièrement responsive

72