Site internet UNASACEM

Site internet UNASACEM Documentation Unasacem GuideWeb - Gérer les activités Correspondants Philippe Labrot Mail philippe-labrot@orange.fr Date de création du document 11/07/2013 Référence Document Unasacem-GuideWeb-Gerer_les_activites Version 3 1

Evolutions Version Emplacement Modifications principales apportées 1 Création 2 Insertion d image Modifier les champs d un formulaire Alignement d un texte autour d une image Précisions sur champ «remarque» Exemple de message d inscription ANNEXE 3 Activités/Champs de Description + Les formulaires d inscription Exemples de Types de champ Précisions sur les conditions d accès au formulaire d inscription 2

INTRODUCTION... 4 PRINCIPES DE BASE IMPORTANT!... 4 VOS OUTILS AU QUOTIDIEN... 5 CONNEXION A L'INTERFACE D ADMINISTRATION DE JOOMLA!... 5 EDITEUR HTML... 6 LES ACTIVITES... 8 ACCEDER A LA PAGE DE L ACTIVITE... 8 SAUVEGARDER... 9 CHAMPS DE DESCRIPTION... 9 TEXTE DE PRESENTATION DE L ACTIVITE... 11 INSERTION D IMAGE... 11 TELECHARGEMENT D IMAGE... 13 INSERTION DE FICHIER... 13 TELECHARGEMENT DE FICHIER... 14 SUPPRESSION D IMAGE OU DE FICHIER... 14 LES INSCRITS... 16 CONSULTER LA LISTE DES INSCRITS ET MODIFIER LE STATUT DE L INSCRIPTION... 16 EXPORTER LA LISTE DES INSCRITS... 17 LES FORMULAIRES D INSCRIPTION... 17 MODIFIER LES CHAMPS D UN FORMULAIRE... 18 CONSULTER LES ENREGISTREMENTS... 23 FAIRE LE COMPTE-RENDU DE VOTRE MANIFESTATION... 24 ANNEXE : EXEMPLES DE TYPE DE CHAMP D UN FORMULAIRE... 25 TYPE DE CHAMP : RADIO... 25 TYPE DE CHAMP : CHECKBOX... 26 TYPE DE CHAMP : SELECT... 27 3

Introduction Ce guide est destiné à vous enseigner comment réaliser les opérations qui sont dévolues au gestionnaire web de manifestations. Les webmasters de l UNASACEM se seront préalablement chargés de : - Introduire sur le site la page de présentation de l activité (votre manifestation) - Introduire un formulaire d inscription pour l activité - Créer un(des) compte(s) d administration pour le(s) gestionnaire(s) - Mettre en place un groupe de gestionnaire de la manifestation - Donner les droits et communiquer aux gestionnaires leur identifiant/mot de passe - Définir «l affichage» sur le site Vous n aurez donc que les opérations suivantes à réaliser sans vous préoccuper de «l affichage» sur le site de l UNASACEM : Présenter votre manifestation (activité) Présenter votre formulaire d inscription Gérer les inscriptions Faire un compte-rendu de votre manifestation (activité) Les icônes ci-dessous sont utilisés dans ce document pour attirer l attention sur un point particulier. Donne une information complémentaire qui n est pas nécessaire pour la compréhension du concept présenté, Message d alerte : il est préférable de lire attentivement cette remarque avant de passer à la suite, Pour illustrer ce propos, voici un message véridique Une foire aux problèmes/solutions rencontrés a été mise en place sur le site de l UNASACEM, dans la partie http://www.alpha-sierra.org/unasacem/gestion/kitweb Principes de base Important! Vous devez avoir à l esprit que le site internet a 2 facettes : l interface client (ce que voit l agent) et l interface d administration. C est cette dernière qui vous intéresse car c est par son intermédiaire que vous allez créer et publier vos informations. La pré-visualisation de votre travail ne pourra être possible que si vous avez un compte CLAS, sauf si votre page est accessible par tous, c.a.d. sans besoin d être connecté via le CLAS. 4

Vos outils au quotidien Connexion à l'interface d administration de Joomla! Pour accéder au panneau d'administration de Joomla!, utilisez l'adresse de votre site internet suivie par "/administrator", soit taper : http://www.alpha-sierra.org/unasacem/administrator Cela vous amène à la page de connexion de Joomla qui se présente de cette façon : Ecran de Login de Joomla! Tapez votre identifiant et votre mot de passe et cliquez sur «Connexion» pour accéder à la page d'accueil de l'administration de Joomla! Cette page d'accueil vous donne un accès rapide aux fonctions qui vous sont nécessaires. Vous pouvez y retourner à tout moment en cliquant dans le menu «Site» sur l'option «Panneau d administration». La page d'accueil de l'administration Joomla! 5

Intéressons nous à la partie droite ci-dessous. Le bouton vous permet de visualiser à tout moment les pages du site dans une autre fenêtre que celle de l administration. Pour cela, une connexion via le site de votre CLAS avec vos identifiants du CLAS est nécessaire (vous êtes alors connecté en temps que membre du CLAS et non pas gestionnaire!). L icône vous indique combien de personnes sont connectés sur le site de l UNASACEM (en temps qu administrateur ou tout simplement agent). Cliquez sur et vous saurez qui est connecté. En tant que gestionnaire de manifestation, vous apparaîtrez avec le Groupe «Association» comme ci-dessous : Pour vous déconnecter, préférez à une fermeture trop rapide de la fenêtre. Editeur HTML La barre d'outils située en haut des zones de textes permettent de modifier leur mise en forme pour ajouter gras, italique, souligné, liste à puce, etc... La liste déroulante "Styles" regroupe les styles qui défini dans le gabarit. L'application d'un style sur un texte sélectionné peut produire toutes sortes de résultats: changer la couleur, la taille, ajouter une image de fond et bien d'autres choses encore. Il suffit de sélectionner le texte dont vous voulez changer la présentation à l'aide de la souris et de sélectionner le style à lui appliquer à l'aide de liste déroulante. Vous verrez immédiatement les modifications à l'écran. A coté des "Styles" vous avez une autre liste déroulante baptisée "Format" qui permet de spécifier le type d'information que vous êtes en train d'écrire par exemple vous pouvez indiquer que le texte sélectionné est un paragraphe, un titre principal, un titre secondaire, etc. La façon dont le texte sera alors formaté dépend des paramètres de votre gabarit. Les autres options de la barre d'outils sont en tous points similaires à celles que vous pouvez trouver dans la plupart des traitements de texte. 6

7

Les activités L activité dont vous êtes gestionnaire aura été crée par les webmasters de l UNASACEM, avec peu ou pas de renseignements. En tant que gestionnaire, vous allez pouvoir la modifier et la personnaliser suivant votre choix. Accédez par «Composant / Activités» (ce qui vous amènera vers la liste des activités vous pouvez ensuite, éventuellement, les filtrer par section et/ou catégorie, c.a.d. par année dans votre cas). Une liste d onglets va vous permettre d accéder à l ensemble des informations caractérisant une activité (Evènements et Participants). Accéder à la page de l activité Pour y accéder activité, cliquez sur l onglet «Evènements» puis, sur le Titre de l activité (ou cocher la case de début de ligne puis ). 8

La page est alors découpée en plusieurs parties. Sauvegarder La sauvegarde de toute modification est possible de deux façons : Vous sauvegarderez et sortirez de la page Vous sauvegarderez et resterez dans la page pour continuer vos modifications. Cela peut-être intéressant si vous voulez prévisualiser la page web. Champs de description Dans la partie gauche et haute, on trouve une partie descriptive et d organisation établie par les webmasters de l UNASACEM. Ne pas modifier les champs suivants car ils ont été mis en place par les webmasters pour «l affichage» sur le site. Vous pouvez en revanche modifier le Titre et l alias de la manifestation si vous le souhaitez Vous avez le choix de publier ou non votre page sur le site. 9

Si vous ne publiez pas, vous ne pourrez pas prévisualiser votre page, sauf si votre page a été rendue publique par les webmasters. Seule une publication peut vous permettre d accéder au formulaire d inscription Dans la partie droite figurent d autres champs. D abord, les champs dates et heure de début et date et heure de fin (les heures sont facultatives), Ne pas modifier le groupe de gestionnaire de cette activité car il a été mis en place par les webmasters. Il permet à ce groupe de gérer les inscriptions de cette activité. Les champs liés à l inscription (un agent peut il s inscrire?, jusqu à quand?, via un formulaire*?, peut-il se désinscrire?) Ne pas activer la désincription (cela vous facilitera votre gestion) Vous verrez le nom du formulaire qui a été attaché à votre activité. Voir Formulaire d inscription pour toute modification. Vous pouvez choisir de ne pas associer de formulaire. Eventuellement l association d une image à cette activité (l affiche d un festival, un logo, ) 10

La notion de récurrence : une activité peut se recréer elle-même suivant une fréquence que vous établissez (gain de temps!). Cette opération de duplication est automatique et a lieu lors de la clôture de l activité initiale. La notion de méta donnée n est pas importante dans votre situation Non présenté Texte de présentation de l activité Dans la suite de la partie gauche se trouve la description de l activité et c est là que vous allez intervenir grandement afin d y insérer votre présentation, à l aide de l éditeur HTML. Vous disposez de deux parties : - Description - En savoir plus Dans la partie «Description», vous devez décrire succinctement votre activité et inviter le lecteur intéressé à plus de détails dans la partie «En savoir plus», qu il devra cliquer pour la visualiser. Vous pouvez insérer des images ou des fichiers dans le texte décrivant votre activité. Insertion d image L ensemble des objets (images ou fichiers) de votre activité sont, et doivent être positionnés dans un répertoire dédié /année/activité. Pour insérer une image, positionnez dans le texte votre curseur à l endroit désiré et cliquez sur le bouton en bas à gauche de l éditeur. Dans la fenêtre qui s ouvre, sélectionnez le répertoire où doivent se trouver vos images, soit /année/activité (exemple : /2009/course_a_pied), puis l image à insérer et cliquez sur «Insérer». 11

Vous pouvez prédéfinir la position du texte autour de l image insérée en précisant votre choix dans «Aligner» L image se retrouve automatiquement dans votre article. Vous pouvez modifier les attributs de l image en cliquant sur l icône dans la barre de boutons de l éditeur. Si vous ne disposez pas encore d images, rendez-vous paragraphe suivant pour le téléchargement d image. 12

Téléchargement d image Si vous ne disposez pas d images dans votre répertoire dédié /année/activité, vous pouvez aussi via ce bouton, importer une image depuis votre ordinateur vers le serveur, puis l insérer dans votre texte. Se positionner dans le répertoire dédié de votre activité /année/activité avant tout téléchargement. Après avoir sélectionné votre image sur votre ordinateur, lancer le transfert. Insertion de fichier Pour insérer un lien vers un fichier (word, pdf, image, ou autre), positionnez dans le texte votre curseur à l endroit désiré et cliquez sur le bouton en bas à gauche de l éditeur. Dans la fenêtre qui s ouvre, sélectionnez le répertoire où doivent se trouver vos fichiers, soit /année/activité (exemple : /2009/course_a_pied), puis le fichier à insérer et cliquez sur «Insérer». 13

Vous pouvez, à coté du fichier, insérer l icône de type de fichier, éventuellement la taille, la date. Vous pouvez lui donner une légende (ou nom) qui apparaîtra dans le texte, qui remplacera alors le nom du fichier (pas toujours très explicite). Si vous ne disposez pas encore de fichiers, rendez-vous paragraphe suivant pour le téléchargement de fichier. Téléchargement de fichier Si vous ne disposez pas de fichiers dans votre répertoire dédié /année/activité, vous pouvez aussi via ce bouton, importer un fichier depuis votre ordinateur vers le serveur, puis l insérer dans votre texte. Se positionner dans le répertoire dédié de votre activité /année/activité avant tout téléchargement. Suppression d image ou de fichier Si vous n avez plus besoin d une image ou d un fichier, le sélectionner et cliquer sur 14

15

Les inscrits Vous ne pouvez visualiser sur la page web de la manifestation que les agents ayant effectué une inscription. Le site tel qu'il est conçu par le prestataire ne permet pas, à l heure actuelle, de visualiser sur cette page les (éventuels) autres membres inscrits de leur famille. Il n y a qu une seule façon de connaître la liste exacte des inscrits et de pouvoir l exploiter, c est d exporter la liste des inscrits. Consulter la liste des inscrits et modifier le statut de l inscription Vous allez ici consulter la liste des agents ayant effectué une inscription (cela peut correspondre à une inscription ou à plusieurs inscriptions famille). Vous modifierez ici le statut de l inscription de l agent et donc, par ricochet, pour l ensemble des personnes inscrites. Par abus de langage, on parlera d inscrit dans la suite. Pour consulter la liste des inscrits, cliquer sur l onglet «Participants» et choisissez l événement dans le menu déroulant ou, autre méthode, dans la liste des activités, cliquez dans la colonne tout à droite sur le nombre de participants. 16

Sur la page qui apparaît, vous pouvez : - cliquer sur le nom de l agent pour accéder à sa fiche (informations personnelles, professionnelles, ) - cliquer sur le statut de son inscription pour le modifier (modification tournante : Inscrit => A payé => Liste d attente => Retenu => Non retenu => Inscrit => ) - cliquer sur le lien «Cliquez-ici pour consulter les réponses du formulaire» pour accéder aux données saisies par les agents lors de leur inscription. Vous pourrez y voir la liste des personnes inscrites mais sans pouvoir facilement l exploiter. Exporter la liste des inscrits Pour exporter la liste des inscrits, rendez-vous sur l onglet «Participants», sélectionnez une activité et cliquez sur Export CSV. Le fichier s ouvre alors dans Excel et vous pouvez le sauvegarder. Les personnes inscrites par chaque agent (membres de sa famille) sont contenues dans la colonne «PersonnesInscrites». C est là que vous trouverez l ensemble des inscrits. Les formulaires d inscription 17

Un formulaire type aura été inséré par les webmasters de l UNASACEM, avec un nom suffisamment explicite votre activité (manifestation). Il contient des champs standards ainsi qu un bouton de soumission et des informations nécessaires. En effet certaines informations (le champ activiteid ainsi qu un script de liaison) sont indispensables à la création du «lien» activité / formulaire. Si ces informations ne sont pas dans le formulaire, l inscription de l agent lors de la soumission du formulaire ne se fera pas! Seule une publication de l événement peut vous permettre d accéder au formulaire d inscription Modifier les champs d un formulaire Il faut le faire avant d ouvrir les inscriptions, sinon vous vous exposez à des désagréments. Pour ajouter ou supprimer des champs d un formulaire, éditer le (cliquez sur le nom du formulaire). Vous arrivez sur un premier écran qui liste (à gauche) les informations du formulaire et à droite les champs associés. 18

Ne pas modifier les informations du formulaire (Onglet Editer formulaire) soit le titre et le nom. Si vous effectuez cette modification, vous devrez réaffecter le formulaire à votre activité. Vous pouvez personnaliser le message de retour (Onglet Merci) d inscription que va recevoir l agent en fin d inscription, en modifiant le texte. 19

Pour gérer les envois des messages, se rendre dans l onglet «Emails». - Dans le champ «Envoyer le mail à», doivent figurer la variable {email}, ainsi que les adresses mail des organisateurs et du coordonnateur de la discipline. La variable{email} correspond à l adresse de l agent récupéré automatiquement dans sa fiche. Il se peut que les webmasters se rajoutent temporairement pour vérifier du bon fonctionnement. - Dans le champ «Email data FROM», mettez votre adresse pour que l agent sache qui lui envoie le message (adresse mail). - Dans le champ «Email VAN naam», mettez un libellé pour que l agent sache qui lui envoie le message (DE : toto) - Dans le champ «Objet du mail», il est conseillé de faire une référence à l activité - Le Contenu du mail est à compléter. 20

Exemple Il est précisé ci-dessous le contenu exact de certains champs qui se sont pas totalement visibles : Envoyer le mail à : {email},pengwen@free.fr,yannick.danielou@meteo.fr, philippe-labrot@orange.fr,jakblanc@free.fr Objet du mail : Nouvelle inscription sur le site UNASACEM Course a pied 2009 / Lors de l inscription de Gwenola Joubel, le message suivant va donc être envoyé à la liste contenu dans «Envoyer le mail à :» : 21

Pour les champs, situés à droite dans la fenêtre, un clic sur l identifiant du champ vous permettra de le modifier, alors que un clic sur le bouton «Nouveau» permet d en introduire. Si vous modifiez l identifiant d un champ alors que le formulaire a déjà été utilisé pour des inscriptions, vous perdez ces données! Nous vous conseillons de rendre obligatoire tous vos champs. En effet, un champ "remarque" vide dans le formulaire décale les cellules lorsqu'on exporte le fichier des inscrits sous Excel. Vous pouvez pré-remplir un champ texte avec RAS, mais si vous avez un champ téléphone, laisser vide pour ne pas avoir une information partielle. La colonne Trier permet d organiser la présentation des champs (ordre) par clic sur les triangles verts (montant ou descendant), le rang étant indiqué à droite. Lors de la création ou modification d un champ, les informations à saisir sont peu nombreuses (même si un grand nombre d options vous sont proposées). Il sont listés ci-dessous : L identifiant du champ : unique pour le formulaire, et invisible pour l internaute, celui-ci doit toutefois être parlant car c est lui qui sera affiché lors de la consultation des données! Le nom du champ : visible par l internaute La description du champ : optionnel et visible par l internaute Le type de validation souhaitée (optionnel) : champs numériques, texte,. Le type de champ : texte simple, cases à cocher, liste déroulante (une aide explicative s affiche à droite de la page pour vous expliquer comment utiliser ce type de champ) Voir ANNEXE pour quelques exemples principaux Et éventuellement la valeur par défaut du champ (un pré-remplissage) 22

Pas de détails sur les options qui suivent car elles concernent les personnes maîtrisant le HTML et si ce n est pas votre cas, il est déconseillé d y mettre les doigts. Une pré visualisation du formulaire vous permet de le travailler à loisir. Consulter les enregistrements Pour consulter les résultats de saisie d un formulaire, cliquez sur le bouton «Consulter les données» de la page d accueil du composant puis sélectionnez votre formulaire. Un tableau s affiche avec en premier lieu le nom de l agent ayant rempli le formulaire (un clic sur le nom vous envoi vers la liste des personnes inscrites à l activité concernée), la date de saisie, puis une colonne par champ du formulaire (le titre de la colonne est l identifiant du formulaire). 23

Faire le compte-rendu de votre manifestation Votre manifestation s est déroulée. Vous allez donc pouvoir mettre en ligne un compte-rendu. Pour ce faire, vous allez remplacer le texte présentant votre activité par un texte qui relate son déroulement, les résultats, l ambiance. Accédez par «Composant / Activités» (ce qui vous amènera vers la liste des activités vous pouvez ensuite, éventuellement, les filtrer par section et/ou catégorie, c.a.d. par année dans votre cas). Modifiez à loisir la partie «Description» de la même manière que lorsque vous avez présenté votre activité (voir le paragraphe «Activité» correspondant). Votre compte-rendu sera donc en ligne sur le site au même endroit et aura remplacé (une fois sauvegardé) la présentation initiale. 24

ANNEXE : Exemples de Type de champ d un formulaire Type de champ : radio 25

Type de champ : checkbox 26

Type de champ : select 27