Comment communiquer avec UFOWEB UFOWEB, pour la communication des comités départementaux, des comités régionaux et des CNS 1
Formation animée par : ADCOSOFT Adrien COMLAN Lynda Kichenama UFOLEP Rosemary PAUL-CHOPIN 2
Au programme: Un peu d histoire l origine du projet, les objectifs, les points forts UFOWEB? la page d accueil, la page intérieure la page d administration Comment communiquer avec UFOWEB? annoncer un évènement, organiser relater l évènement, garder le contact 3
Origine du projet & présentation 4
Pourquoi UFOWEB? - Doter chaque entité d un site internet - Se rassembler autour d une même «identité web» - Mutualiser les moyens et les données - Améliorer la stratégie de communication 5
Les points forts d UFOWEB - Une maquette commune personnalisable - Simplicité, indépendance et autonomie - Une solution complète : page d accueil pré-formatée, formulaires, lettre d information, tous types de documents - Un travail collaboratif : gestion de site en équipe et par profil - Banque de contenus - Aide en ligne et équipe support 6
Le site public : la page d accueil Bandeau Haut: logo, menu, zone de recherche Espace à la Une, bandeau animé Espace Où pratiquer mon activité Espace Médiathèque Espace Événements Espace Publicité Espace Partenaires 7
Le site public : la page intérieure Bandeau Haut: logo, menu, zone de recherche Accès au menu des sous-rubriques Espace Image accueil Corps de la note: zone texte, image, vidéos... Espace Publicité Espace Événements 8
Le site d administration Les différents modules de la plate-forme d administration 9
Le site d administration Identification Identifiants et mot de passe L adresse email est nomenclaturée selon le type de l entité : cd.vaucluse@ufolep.org cr.bretagne@ufolep.org cns.football@ufolep.org mot de passe: il vous est fourni par l UFOLEP Nationale 10
Annoncer l évènement avec... les brèves les bandeaux les pages web les images, le texte, organiser sa page 11
Les brèves Description de l'évènement Lieu de l évènement Date de création de l évènement Date de début de l évènement Date de fin de l'évènement 12
Exercice : Les brèves Consignes : Créer une brève. Compléter les champs de la brève. Mettre en ligne la brève. Infos complémentaires : Titre : CYCLOCROSS Date debut : 06-02-2016/Date fin: 07-02-2016 Châpo : Génissac en Gironde 13
Les bandeaux Type du bandeau. Image à insérer dans le bandeau. Url (site ou vidéo) associé au bandeau. - Description de l'élément. 14
Exercice : Bandeau slide Accueil Consignes : Ajouter un bandeau Compléter les champs du bandeau Mettre en ligne le bandeau Infos complémentaires : Type bandeau : Slide Accueil Image: bandeau_slide_acc_570_250.jpg Cliquer sur Actif puis Enregistrer. 15
Les pages web (Notes) 1/7 - Les champs de la note à renseigner avant enregistrement. - Data_fed, Data_maquette, Pièce-jointe. - Barre d outils - Zone de saisie 16
Exercice : (Notes) 2/7 Consignes : Créer une note. Compléter les champs. Ajouter du texte dans la zone de saisie. Mettre une partie du texte en gras. Infos complémentaires : Sélectionner une partie du texte à mettre en gras. 17
Les pages web (Tableau) 3/7 Insérer un tableau Renseigner le nombre de colonnes/lignes. Renseigner la Marge int/extérieure. Aligner mon tableau dans la note et définir une bordure. Déterminer la largeur/hauteur du tableau. Modifier la couleur de fond et de bordure du tableau. 18
Les pages web (Cellules) 4/7 Modifier les propriétés d une cellule d un tableau. Modifier l alignement des éléments d une cellule. Déterminer la largeur/hauteur d une cellule. 19
Exercice : (tableau) 5/7 Consignes : Créer une note Compléter le champ chapô Insérer un tableau Mettre du texte dans le tableau Infos complémentaires : Tableau : 2 colonnes 1 ligne Largeur : 100% Marge ext/int : 10 Cellule droite/gauche : largeur 50% 20
Les pages web (Images) 6/7 Insérer une image, ajouter un titre et une description. Modifier la taille d une image si elle est trop grande dans l onglet Apparence. Déterminer l alignement d une image. Modifier la dimension d une image. 21
Exercice : Les pages web 7/7 Consignes : Créer une note. Insérer un tableau. Insérer une image dans la cellule droite du tableau. Ajouter du texte dans la cellule gauche du tableau. Infos complémentaires : Tableau 2 colonnes 1 ligne. Marge ext/int : 10 largeur tableau : 100% Largeur cellule gauche : 50% Largeur cellule droite : 50% Alignement cellule droite : centrer 22
PAUSE 23
Organiser l évènement avec... les formulaires créer un formulaire ajouter le formulaire à son site les pièces-jointes ajouter une pièce-jointe classique ajouter un DATAFED en pièce-jointe 24
Les formulaires 1/5: les modèles 25
Les formulaires 2/5: Les types de lignes et types de contrôles Types de ligne Types de contrôle 26
Les formulaires 3/5: Choisir le module Mon site Choisir opération Gestion des formulaires 27
Les formulaires 4/5: Ajouter un formulaire Paramétrage du formulaire : - Titre, description, choix du modèle, email du Gestionnaire nombre de groupes, création des lignes 28
Les formulaires 5/5: Cliquer sur le bouton Code DATAMAQUETTE Copier le code sélectionné Coller le code dans la zone de saisie de la note, puis visualiser le document 29
Exercice 1 : Les formulaires Consignes : Créer un Formulaire Voir l aperçu depuis la gestion des formulaires Infos complémentaires : Utiliser le modèle 2 Formulaire avec 2 groupes IDENTIFICATION et TOURNOI 1 liste déroulante pour la catégorie 1 bouton radio pour la Civilité Contrôle Obligatoire 30
Exercice 2 : Les formulaires Consignes : Insérer le formulaire dans une note Voir le document Infos complémentaires : Récupérer le code DATAMAQUETTE du formulaire Insérer le code dans une note Largeur 500 et Hauteur 600 31
Les pièces-jointes classiques Cliquer sur Ajouter un fichier joint Cliquer sur le bouton Parcourir pour sélectionner votre fichier sur votre disque dur Indiquer le libellé de votre piècejointe 32
Exercice : Les pièces-jointes Consignes : Ajouter une note Ajouter une pièce jointe Infos complémentaires : Insérer la pièce-jointe exemple_pdf.pdf 33
Les DATAFED Qu est-ce que c est? C est un contenu pré-rempli à votre disposition Différents types: texte, vidéo, image, formulaire, tableau Sous forme d un code à 10 chiffres: DATA_FED_XXXXXXXXXX S utilise dans une note Le contenu du DATA_FED s affiche sur le site public 34
Les DATAFED : http://www.tech.ufolep.org/catalogue Le Catalogue Barre de recherche Les rubriques Les DATAFED Le type : = document à télécharger = page web à insérer = page web spécifique 35
Les DATAFED de type pièce-jointe Copier le code DATAFED du document de type pièce-jointe sur le catalogue. Dans la note, cliquer sur Ajouter un DATAFED Coller le code DATAFED dans la zone de saisie. Votre DATAFED est ajouté en pièce-jointe. 36
Exercice : Les pièces-jointes Consignes : Ajouter une note Ajouter une pièce jointe classique Ajouter un DATAFED en piècejointe Infos complémentaires : Récupérer le Code DATAFED sur le catalogue : rubrique SPORT ET SOCIETE, DATAFED DOSSIER-3- INSERTION-GUIDE Insérer la pièce-jointe exemple_pdf.pdf 37
QUIZZ 38
A retenir avant d aller déjeuner Le site public et ses espaces La plate-forme d administration Ajouter une brève Ajouter un bandeau Ajouter une note Ajouter une image dans note Structurer la note avec des tableaux Créer un formulaire Insérer un formulaire dans une note Insérer des pièces jointes dans une note Ajouter un DATAFED en pièce-jointe 39
DÉJEUNER 40
Exercice Récapitulatif: Consignes : Créer une note. Ajouter un tableau à deux colonnes (texte à gauche et image à droite) Ajouter une pièce jointe Insérer un formulaire Infos complémentaires : Nom image : affichenationalccross2016.jpg Formulaire: le code DATA_MAQUETTE utilisé avant le déjeuner Pièce jointe : exemple_pdf.pdf 41
Les bonnes pratiques du web 1/2 Attention à ce que vous mettez en ligne Assurez vous que les informations mises en ligne peuvent être publiques Vérifiez la véracité des informations mises en ligne Une activité de 50 euros ne peut pas être en ligne à 5 euros Assurez vous d avoir tous les droits Les personnes qui ont accès au sites doivent être autorisées à diffuser de l information 42
Les bonnes pratiques du web 2/2 Attention à la taille, au poids, au format, à la qualité des images Ne pas mettre directement en ligne une vidéo mais faire un lien vers la vidéo Rédigez des textes clairs et sans fautes d orthographe Vérifiez les liens que vous intégrez sur un site : pas de liens cassés 43
Restituer l évènement avec... les images d accueil les diaporamas les vidéos 44
Restituer l évènement (Image d accueil) Créer une note. Ajouter une image de note. Le libellé accueil est prédéfini. 45
Exercice : Image d accueil Consignes : Créer une note. Ajouter une image de note. Enregistrer la note. Infos complémentaires : Nom image : bandeau_slide_acc_570_250.jpg. 46
Restituer l évènement (Les diaporamas) Créer une note. Cliquer sur Ajouter une image slide. Cliquer sur Parcourir pour sélectionner votre image sur vote disque dur Insérer le code DATA_MAQUETTE dans la zone de saisie 47
Exercice : Les diaporamas Consignes : Créer une note. Ajouter 3 pièces-jointes de type image slide. Enregistrer la note et la visualiser. Infos complémentaires : Noms des images : slide_1.jpg, slide_2.jpg et slide_3.jpg Ajouter le code DATA_MAQUETTE_UFOLEP_SLIDE _500_400 Le libellé des pièces-jointes est déjà inséré. 48
Restituer l évènement (Les vidéos) 1/3 Récupérer l url de la vidéo. Créer une nouvelle note. Cliquer sur Insérer un media. 49
Restituer l évènement (Les vidéos) 2/3 Choisir Type Iframe Mettre l Url de la vidéo ou d un fichier Déterminer la dimension de la vidéo Cliquer sur Insérer. 50
Exercices : Les vidéos 3/3 Consignes : Récupérer l url d une vidéo. Créer une note. Ajouter un média. Cliquer sur Insérer. Infos complémentaires : L url :https://youtu.be/ydlwqvcstaw Type de média : Iframe Dimensions : Choix de l utilisateur 51
La bibliothèque interne 1/3 La bibliothèque interne permet de réutiliser les images, pièces-jointes et documents mis en ligne sur le site. Créer une note. Cliquer sur voir la bibliothèque. Copier l Url de l'élément pour l utiliser. 52
La bibliothèque interne 2/3 53
Exercice : la bibliothèque interne 3/3 Consignes : Créer une note. Cliquer sur voir la bibliothèque. Copier l Url d un élément de la bibliothèque. Insérer l'élément dans la note. Infos complémentaires : Aller dans la bibliothèque. Récupérer une image déjà présente Cliquer sur insérer une image et coller l url copiée. Cliquer sur insérer. 54
Mise en ligne d une vidéo 1/3 Se connecter sur le site : http: //www.dailymotion.com/ Créer un compte, lequel créera une chaîne dailymotion liée. Une fois le compte créé, Insérer vos vidéo via le bouton Upload 55
Mise en ligne d une vidéo 2/3 Une fois la vidéo insérée, compléter les champs obligatoires indiqués par * Publier la vidéo sur DailyMotion Rechercher votre vidéo sur le site pour confirmation 56
Mise en ligne d une vidéo 3/3 Cliquer sur Export au-dessous de la vidéo. Récupérer le code HTML en entier Insérer le code dans l onglet source à l insertion de la vidéo dans la note sur le CMS 57
Exercice : Mise en ligne d une vidéo Consignes : Insérer une vidéo sur la chaîne dailymotion Publier la vidéo Récupérer le code HTML pour l intégration dans la note Insérer l'élément dans la note. Infos complémentaires : Vidéo : video.3gp Le code HTML est dans l onglet export sous la vidéo. 58
Exercice 1 Récapitulatif: Consignes : Créer une note. Ajouter une image accueil Ajouter un diaporama Ajouter une vidéo Infos complémentaires : Nom image : bandeau_slide_acc_570_250. Nom image slide : slide_1 à 6. Diaporamas : le code DATA_MAQUETTE_UFOLEP_SLIDE_500_400 Vidéo : https://youtu.be/ydlwqvcstaw 59
Garder le contact avec... la lettre d information générer la lettre d information diffuser la lettre d information 60
La lettre de d information(générer la lettre) 1/4 - Dans le module Mes articles et mes dossiers, rechercher votre document. - Ouvrez -le puis sélectionner l'opération "Générer la lettre d'information". 61
La lettre de d information(générer la lettre) 62
Exercice : Générer la lettre 2/4 Consignes : Rechercher le document créé. Sélectionner le document. Choisir l option Générer la lettre d information. Infos complémentaires : Afin de rechercher plus facilement le document : Nom de la note. Id de la note. Nom rubrique. 63
Ajouter un contact au groupe Newsletter (Affectation) 1/2 Dans le module "Mes groupes de contacts", cliquer sur "Recherche un groupe". Renseigner le nom du groupe puis cliquer sur Rechercher. Cliquer sur le groupe et choisir l option Ajout massif de contact newsletter. Renseigner l adresse email dans le champs liste des emails à rajouter puis valider. 64
Exercice : Ajouter un contact au groupe Newsletter 2/2 Consignes : Rechercher le groupe Newsletter Ajouter le contact au groupe Infos complémentaires : Contact : ufolep1@domaine.com Groupe : Newsletter 65
La lettre de d information(diffuser la lettre) 1/2 Toujours dans le module Mes articles et mes dossiers. Rechercher le document généré. Sélectionner l'opération "Diffuser". Choisir le groupe de diffusion puis "Valider". 66
Exercice : Diffuser la lettre 2/2 Consignes : Choisir l option Diffuser. Sélectionner le groupe d envoi. Cliquer sur valider. Infos Complémentaires : Groupe d envoi : Newsletter. 67
A retenir avant de partir Image d accueil Les diaporamas Mise en ligne des vidéos La bibliothèque interne Générer lettre d information Ajouter un contact au groupe Newsletter Diffuser la lettre d information 68
QUIZZ 69
TOUR DE TABLE 70
Pour nous contacter: Rosemary PAUL-CHOPIN DTNA En charge du pôle communication 01 43 58 97 77 rpaulchopin.laligue@ufolep-usep.fr Chargée de COMM: Noémie VINCENT 01 43 58 97 58 nvincent.laligue@ufolep-usep.fr 71
MERCI DE VOTRE ATTENTION 72