Tuto vidéo : comment créer un concours photo/video dans Joomla!

Dans ce tutoriel nous allons couvrir un exemple pratique d'organisation de concours photo et vidéo, via des votes des visiteurs, sur un site Internet Joomla!^®. Nous donnerons aussi des conseils et des astuces, ainsi que des réglages fins pour la configuration de NorrCompetition.

Ce guide pas à pas comprend de la vidéo (voir à la fin de l'article).

Ce tutoriel est disponible dans d'autres langues :

• Anglais
• Bulgare
• Russe
• Turc

Télécharger NorrCompetition

Table des matières

1. Préparation du travail
2. Structure du concours
3. Ajouter un concours
4. Options globales
   1. Onglet général
   2. Onglet concours
   3. Onglet commentaires
   4. Onglet images
   5. Onglet permissions
5. Ajouter des participations
   
6. Concours actifs
7. Convertir les visiteurs en utilisateurs
8. Options de vote
9. Gestion des concours actifs
10. Modération des modifications
11. Notifications additionnelles
12. Résultats à afficher
    1. Grand Prix
    2. Grouper les gagnants
13. Autres fonctionnalités
14. Conclusion
15. Guide vidéo

Préparation du travail

Tout d'abord, vous allez devoir télécharger le paquet d'installation NorrCompetition. Naviguez vers la page des produits.

Après avoir acheté le produit, vous rendez-vous dans la section My Downloads sur le site NorrNext.

Il y a une liste d'extensions associées avec NorrCompetition disponibles pour le téléchargement. Il y a le composant lui-même et ses modules (comme les modules de participations, concours ou résultats, par exemple) ainsi que des plugins (recherche et des plugins de sitemap). Après avoir récupéré toutes les extensions complémentaires, naviguez vers le panneau d'administration de Joomla!.

Le composant et ses compléments s'installent comme n'importe quelle extension typique de Joomla!. NorrCompetition est également traduit dans de nombreuses langues et vous pouvez télécharger la traduction dont vous avez besoin ou traduire l'extension dans une nouvelle langue via Transifex. La liste de toutes les traductions disponibles se trouve ici.

Un nouveau menu avec les items NorrCompetition sera créé à la fin de l'installation du composant. Une approche similaire se retrouve dans Kunena (cela fait gagner du temps et permet de voir quelles sont les fonctions disponibles en front-end). Après la première installation, un message est affiché vous invitant à installer des données d'exemple (20Mo de données seront téléchargées depuis un serveur externe). Sinon, vous pouvez passer à l'étape suivante. Si vous suivez ce tutoriel vous n'aurez pas besoin des données d'exemple, par conséquent vous pouvez vous rendre sur le tableau de bord du composant puisqu'il est toujours plus intéressant de comprendre par soi-même comment le composant fonctionne et d'évaluer ainsi l'ergonomie du produit.

Le composant a la structure suivante :

Catégories. Cela ne demande pas d'explications.
Champs. Champs personnalisés qui seront affectés à des concours. Vous pouvez créer un titre, une zone de texte, une case à cocher, etc. NorrCompetition utilise ses propres champs qui ne sont pas associés avec les champs personnalisés de Joomla!.
Concours. Les concours sont de 3 types : photo, vidéo et simple. Vous ne pouvez pas changer le type si le concours est créé puisque les participations sont associées avec le concours. Il y a une série de réglages groupés dans des onglets, donc vous pouvez configurer le concours selon vos besoins. Invités et utilisateurs enregistrés soumettent des participations via le formulaire de participation. Le concours est soit actif, soit terminé.
Participations. Les participations sont appelées les items du composant. La participation apparaîtra dans le concours après approbation d'un administrateur.

Vous devriez travailler sur la structure dans l'ordre suivant : la catégorie devrait être créée en premier, puis vous ajouterez les champs nécessaires. Ensuite, il est temps de créer un concours et de choisir dans quelle catégorie le concours sera affecté et quels champs doivent être ajoutés.

Il est possible de passer outre la plupart des paramètres via les réglages du concours. De cette façon, les paramètres sont réglés par défaut via les options globales du composant, mais si vous avez besoin de régler quelques paramètres sur mesure, cela se fait via les réglages du concours. Par exemple, un nombre de participations par rangée ou des permissions : seuls les utilisateurs enregistrés sont autorisés à soumettre des participations dans le premier concours, mais dans le second, même les invités peuvent soumettre des participations, et ainsi de suite.

Vous avez le choix entre les types de champ suivants durant l'ajout :

• Titre. Il s'agit du titre ou du nom de la participation. Une mention "nom" ne convient pas toujours pour votre contenu puisque les participations peuvent être des personnes et des objets inanimés (expositions, marques de voiture, images, etc) ou même le surnom d'un animal de compagnie et il peut y avoir une nécessité à utiliser différents titre pour chaque concours au sein d'un même site. Par exemple, il vaut mieux utiliser nom pour "Miss Univers" et marque pour "Meilleure Voiture" comme titre.
• Texte. Champ de texte. Il y a un filtre disponible pour ce champ.
• Zone deTexte. En sélectionnant filtre SafeHTML, vous retirez des balises et des attributs dangereux. L'option Filtres Texte permet d'insérer n'importe quel bout de code, y compris des galeries, des Google Maps, etc.
• Calendrier.
• Case à cocher.
• URL.

Vous pouvez rendre le champ obligatoire ou masquer son nom dans le front-end.

Le composant est conçu pour fournir le maximum de confort dans le déroulement de la configuration et est focalisé sur les fonctionnalités des concours pour permettre à l'intégrateur d'avoir le choix d'utiliser des extensions tierces pour des fonctionnalités additionnelles (authentification par les réseaux sociaux, profil d'utilisateur, assignation de scores pour des actions, etc). Par conséquent, un profil d'utilisateur peut être conçu pour utiliser les fonctions standards de Joomla!, et donc utiliser des extensions tierces comme EasySocial, l'authentification par les réseaux sociaux peut être assurée par Akeeba Social Login ou Slogin, etc. Nous en reparlerons plus bas.

Pensez à la structure du concours

Quel sujet choisir pour organiser le concours ? Cela dépend de votre imagination. Nous vous donnons une liste de possibilités comme :
Miss Région (et les gagnantes groupées par ville), groupes de musique (cela convient pour des clubs et des bars), cuisine nationale (meilleurs plats de restaurant), voiture de l'année, performances sur la glace, dessins d'enfants, exposition de peintures, danses, animal du mois, meilleur court métrage ou film d'étudiants, bande annonce de l'année, livre favori et beaucoup d'autres. Par conséquent, l'éventail d'utilisation varie depuis les communautés locales,  les institutions éducatives et les clubs jusqu'aux sites portail des villes et le web2.0.

Prenons comme exemple un site web dédié aux bars et à la vie nocturne de la ville. Il contient des annonces et un agenda, des nouvelles et des rapports, et maintenant il propose des concours.

Nous avons créé les concours et les champs suivants :

Miss du mois - la plus charmante visiteuse du club (concours)

• Nom - titre
• Club - texte (champ de texte)
• Date - calendrier
• Trouvez-moi sur les réseaux sociaux - une URL vers le profil de l'utilisateur sur les réseaux sociaux

Mister du mois - la meilleure image masculine (concours)

• Les champs sont les mêmes que pour le concours précédent

Spectacle du mois - meilleure performance en public de groupes (concours)

• Groupe - titre
• Club - texte (champ de texte)
• Description - zone de texte

Art Alternatif - un concours avec des images artistiques faites en studio / "Cosplay"

• Titre - titre
• Modèle - texte
• Photographe - texte
• Maquillage - texte
• Description - zone de texte
• Trouvez-nous sur les réseaux sociaux - URL
• Accepter les Conditions Générales - case à cocher

Voici comment cela se passe - les deux premiers concours concernent la vie nocturne : vous pouvez visiter les sites web de clubs et de bars ou les réseaux sociaux, prendre des photos des visiteurs les plus impressionnants à votre choix et soumettre des participations dans le concours concerné pour rendre le vote plus actif. Adaptez le titre du concours en fonction de l'idée du site (personne du mois, etc). N'oubliez pas le nom du club et l'URL de la personne dont la photo à été prise (optionnel).

Le 3^ème concours est consacré à des concerts live enregistrés dans un club musical/bar local. Il aidera des nouveaux groupes à obtenir plus d'attention et de reconnaissance. Ils peuvent aider à promouvoir le concours en plaçant des annonces dans les canaux de leurs réseaux sociaux. Comme résultat, chaque groupe attirera ses fans pour voter et votre audience augmentera. Nous avons aussi ajouté deux nouveaux champs : le nom du club et une description (pour fournir une courte information à propos du concert).

Et, pour terminer, Art Alternatif - un concours spécial pour lequel des personnes créatives soumettent des participations avec leur propres images. De belles photo de sessions réalisées par un photographe professionnel, un bon maquillage et quelque chose fait main (vêtements, accessoires, etc). Images gothiques, steampunk ou cosplay - une façon expressive d'attirer l'attention des gens. Vous pouvez examiner les canaux des réseaux sociaux en relation avec ces sujets et inviter des personnes créatives à participer. C'est le seul concours dans notre exemple où les utilisateurs sont autorisés à soumettre des participations. C'est pourquoi nous avons ajouté le champ de case à cocher permettant aux  utilisateurs d'accepter les Conditions d'Utilisations.

Nous avons aussi créé 2 catégories pour les concours affichés ci-dessous : Divertissement et Images.

Voici à quoi le nouveau mode champs ressemble :

Bien, les champs ont été ajoutés :

Ajouter un concours

Maintenant il est temps d'ajouter un concours :

Tous les paramètres sont groupés par onglets. Dans le premier onglet, vous pouvez introduire un titre et une description complète (il est possible de jouer sur le formatage du texte ou d'insérer une image si l'éditeur WYSIWYG est activé). Plus loin, sélectionnez la catégorie et le type. Choisissez Divertissement ou Image pour la catégorie et le type devrait être Image, Video ou Simple. Vous pouvez sélectionner le type une fois durant la création du concours. Choisissons Photo.

Choisissez la date de Début et de Fin du concours. Quand la date de Fin est dépassée, le status changera automatiquement d'actif à terminé et les résultats seront affichés sur la page du concours. Il est recommandé de lire le tutoriel suivant (en anglais) : Different scenarios of voting contests.

Maintenant passez à l'onglet Champs et sélectionnez quels champs doivent être assignés à ce concours.

N'oubliez pas, le Titre est toujours un champ obligatoire puisque le système doit indiquer un titre pour la participation en front-end.

L'onglet suivant que nous devons configurer est Options de disposition. Ici ce gère la mise en page du concours.

Tous les paramètres sont pris depuis les options globales, mais il est possible de régler des paramètres personnalisés pour chaque concours et en fin de compte passer outre aux réglages. Nous avons besoin d'un compte à rebours affichant le nombre de jours avant que le vote commence. Réglez Compte à rebours du début du vote sur Afficher.

Nous effecturons des manipulations similaires avec le concours Mister du Mois (type: Photo), donc nous ne verrons pas cela en détail.

Maintenant il est temps d'essayer des concours vidéo. Créons un 4^ème concours intitulé "Concert Live du Mois", puis sélectionnons type vidéo et assignons les champs associés (en fonction de la structure ci-dessus). NorrCompetition peut lire les URLs de plateformes vidéo variées. A côté de Youtube, il y a divers services comme Vimeo, Instagram, etc.
Nous ajouterons des participations un peu plus tard.

Et le concours le plus intéressant - Art Alternatif. A l'inverse des précédents, la particularité de ce concours est de permettre à des utilisateurs de soumettre des participations. Ces participations sont introduites via un formulaire spécial depuis le front-end. Après approbation par l'administrateur, les participations apparaîtront dans le concours. Les utilisateurs ne sont pas autorisés à soumettre des participations par défaut, mais nous allons régler les bonnes permissions en passant outre les options globales. Allez dans Concours > onglet Permissions, trouvez les 4 premiers paramètres (Créer,Créer Avant que le Concours commence, etc) et réglez-les sur Autorisé.

Options globales du composant

Passons maintenant aux options globales. On y accède par le bouton Paramètres dans le coin supérieur droit du panneau d'administration du composant.

Onglet Général

Sélectionnons un thème approprié (p.e. bootstrap3) et cherchons Notifications dans le paramètre des Participations.
Qu'est-ce que c'est ? Un administrateur du site peut recevoir des notifications quand un utilisateur soumet une participation en front-end. Si la participation a été approuvée et publiée, le participant aura la possibilité de modifier la participation en front-end et de mettre à jour les données (changer la photo ou la description), mais de cette façon, la participation sera dépubliée et un administrateur devra la valider à nouveau. C'est bien ainsi puisque l'administrateur du site doit contrôler les changements de participations. Donc, cette option a 2 paramètres : notifications sur les nouvelles participations et notifications sur les participations modifiées. Réglons ces deux paramètres.

Bouton de partage - boutons des réseaux sociaux pour partager les pages (Open Graph est implémenté) - ajoutons tous les boutons de réseaux sociaux disponibles.

Onglet Concours

Le paramètre de nombre de participations - précise le nombre de participations qu'un participant est autorisé à soumettre dans un concours. Réglons-le sur 3.

• Photos additionnelles - ce paramètre permet d'ajouter des photos additionnelles même dans in concours de type vidéo, affichant les photos dans une mini-galerie. Un paramètre  magique ! Nous le règlerons sur "Oui".
• Options de vote - ici nous avons les réglages standards, mais vous pouvez ajuster les paramètres.

Onglet commentaires

Il y a une option pour inclure des commentaires sur la page de participation. A propos, il est possible d'ajouter des commentaires variés groupés en onglets. Choisissons Komento pour le moment.

Onglet Images

Ici nous devons régler les paramètres pour la taille des images à générer par le composant : vignettes, moyennes et grandes images. A ce propos, il est possible de régler une largeur et hauteur sur mesure pour ces images dans le mode d'édition du concours. Cela permet de créer des concours avec des tailles différentes pour les images. Par exemple, dans certains cas, vous pouvez avoir besoins de photos verticales et horizontales dans différents concours.

Onglet Permissions

Ici nous décidons quel groupe d'utilisateurs doit avoir des permissions sur des actions spécifiques. C'est important puisque le vote n'est pas autorisé par défaut. Passons le groupe Invité et sélectionnons le groupe Enregistrés et réglons Vote sur Autorisé.

Maintenant les utilisateurs enregistrés sont autorisés à voter pour les participations.

Ajouter des participations

Vous pouvez ajouter la moitié des participations via le back-end. Cela ressemble à cela :

Vous souvenez-vous qu'il y avait une mention plus haut que les utilisateurs enregistrés sont à même de soumettre des participations via le front-end ? Ci-dessous se trouve la capture d'écran de ce à quoi cela ressemble :

Ici nous voyons tous les champs personnalisés que nous avons assignés au concours, y compris la case à cocher "Accord avec les Conditions d'Utilisation".

Dès que la participation est envoyée, elle doit être approuvée par le modérateur et après cela, elle apparaîtra dans le concours. A propos, l'utilisateur peut créer des concours depuis le front-end (ils sont aussi modérés par l'administrateur du site). Mais nous n'en avons pas besoin dans cette étude de cas.
Voici à quoi ressemble la page Mes participations :

C'est une liste des participation d'un utilisateur, avec la possibilité de modifier n'importe quelle entrée et d'en ajouter une nouvelle. Tout est simple et propre.

Concours actif dans le front-end

Bien, toutes les données nécessaires sont prêtes, nous pouvons lancer le concours et faire une promotion importante pour le site. Voici à quoi ressemble un concours actif :

Convertir les visiteurs en utilisateurs

Bien, la structure a été créée, les participations ont été ajoutées et le vote a commencé. Maintenant il est temps d'ajouter diverses améliorations pour rendre le site plus "user-friendly".

Puisque seuls les utilisateurs enregistrés peuvent voter dans 3 des concours que nous avons créés, la première priorité est de fournir une authentification via les réseaux sociaux pour permettre aux utilisateurs de s'inscrire/se connecter au site en quelques clics et de voter, sans l'ennuyeux processus d'enregistrement standard avec la confirmation du compte via email, etc. Pour une telle fonction, une extension tierce est requise. Utilisez Akeeba SocialLogin ou Slogin et assurez-vous que les icônes des réseaux sociaux sont apparues dans votre module de connexion.

Maintenant, remplaçons le message "vous n'avez pas la permission de voter" par un message personnalisé qui est une incitation à ce que le visiteur s'enregistre d'abord sur le site. Cela se fait très facilement via la substitution de langue de Joomla!.

Allez dans Extensions > Langues > Substitutions > Nouveau.

Essayez une recherche sur la valeur pour récupérer la constante requise (COM_COMPETITION_VOTE_ERROR_NO_PERMISSIONS), entrez la nouvelle substitution et sauvegardez. Maintenant nous avons le nouveau message: “Pour voter pour la participation, veuillez vous enregistrer sur le site en utilisant votre compte de réseau social.”

Options de vote

La possibilité de régler les options de vote en fonction des spécificités du concours est un moment très important. Vous devez aller dans Options > onglet Concours > Options de votes.

Réglez la Fréquence de Vote, le Maximum de Votes par Participation auquel un utilisateur est autorisé par participation (p.e. la possibilité de voter à nouveau), et différents paramètres de vérification pour fournir une protection contre les votes frauduleux, etc.
Traditionnellement, ces paramètres sont modifiables dans les réglages du concours.

Gestion des concours actifs

Bien, toutes les tâches nécessaires ont été faites et le vote est en cours. A quoi les processus de gestion des concours et de la modération ressemblent-ils ? Heureusement, ce n'est pas difficile.

Nous avons mentionné plus haut que NorrCompetition envoie des notifications relatives aux participations nouvelles ou modifiées par défaut. Pour obtenir un tel résultat vous devriez ajouter ces options dans les réglages globaux.

Aussi, il y a une liste des participations en attente dans le tableau de bord du composant. En cliquant sur n'importe quel item en attente nous passerons en mode édition et verrons un tableau de comparaison avec le contenu ancien et modifié. Si tout est bon nous pouvons publier la participation.

Modération des modifications de participation

L'utilisateur peut modifier la participation en éditant et changeant certaines données depuis le front-end. Par exemple la zone de texte avec la description (n'oubliez pas de régler les permissions permettant de modifier les participations). De cette façon, la participation sera bloquée et deviendra indisponible dans le concours jusqu'à ce qu'elle soit revue par un administrateur du site. Je voudrais creuser ceci un peu plus en détail.

La participation modifiée dans la liste des participations ressemble à ceci :

Une icône spéciale apparaît, qui marque la participation comme modifiée par l'utilisateur.

Passer en mode d'édition et vous verrez un mode de comparaison mode divisé en deux parties : la partie de gauche représente l'ancien contenu et le contenu modifié est affiché sur le côté droit. Les media et les champs qui ont été changés par l'utilisateur sont marqués avec une couleur jaune. Le Modérateur peut aussi modifier des champs.

Si tout est bon - réglez seulement le paramètre sur Confirmé au bas de la page et cliquez sur Sauvegarder. Cette participation est apparue à nouveau dans le concours.

Notifications additionnelles

Deux évènements de notification standards aide l'administrateur du site avec la modération. Mais il est parfois aussi nécessaire de notifier le participant à propos de certaines actions. Pour obtenir ce résultat, vous devrez installer le plugin NorrCompetition Notifications qui vient en complément du noyau.

Ce plugin envoie des notifications par email à propos des actions suivantes :

• Participation publiée
• Participation dépubliée
• La participation a été approuvée
• La participation n'a pas été approuvée
• La participation a été rejetée (envoyée à la corbeille)
• La participation a reçu une voix (quelqu'un a voté pour la participation)

Ces notifications couvrent parfaitement les besoins des utilsateurs.

Concours terminé. Résultats à afficher

Donc, la Date de Fin de Vote est dépassée et le concours a changé son statut pour celui de terminé. Comme résultat, les utilisateurs n'ont plus la possibilité de voter et la mise en page de la liste des participations a changé.

Un statut de Grand Prix

Le terme Grand Prix désigne le prix principal donné au gagnant du concours ou de la compétition.
Le composant est conçu pour assigner le statut de Grand Prix à une seule participation par concours. Quels que soient les résultats, la participation ayant le statut de Grand Prix est toujours affichée la première.

Comme résultat, l'administrateur du site peut accorder le statut de Grand Prix à la participation en fonction des sympathies de l'équipe éditoriale ou des membres du jury.

Grouper les gagnants par champs personnalisés

Il est agréable de résumer et de voir une liste des participations depuis les meilleurs scores vers les plus bas, mais... en fonction du concours, il est aussi possible de grouper les gagnants par champs. Par exemple, pour grouper les participations par ville ou par âge. Vous pouvez afficher 3 gagnants de New York, puis en-dessous 3 gagnants de Los Angeles, etc. La ville est un champ que nous avons ajouté précédemment et NorrCompetition trie les résultats en utilisant la méthode qui a été décrite.

Pour obtenir ce résultat, veuillez modifier le concours concerné > Options de présentation et trouver les paramètres affichés sous le titre Options terminées :

Participations par Résultat - le nombre de participations avec les plus hauts scores qui sont affichées dans le concours terminé. Habituellement, cette valeur est 3 (peut être changé), mais toutes les autres participations sont affichées en-dessous.
Groupement des champs - sélectionnez le champ qui sera utilisé pour grouper les participations quand le concours est terminé. Ceci devrait être ville ou club en suivant notre exemple de site.
Participations par champs - ce paramètre sera décrit plus bas. Fixons-le également à 3.

Les gagnants sont affichés selon le schéma suivant :
Le gagnant avec le statut Grand Prix (si une participation a un tel statut) a la priorité la plus haute et diffère visuellement des autres. En-dessous nous voiyons les gagnants indépendamment des champs. Mais si Groupement des champs est sélectionné, alors nous verrons une liste des gagnants suivant les valeurs prises par le champ et dans un ordre descendant. Si le groupement n'est pas sélectionné, alors toutes les participations seront affichées.

Autres fonctionnalités du composant

Y-a-t'il d'autres fonctionnalités ou astuces intéressantes ?

Contenu Multilingue. Le composant fournit du contenu multilingue. Il est possible de traduire les titres des concours, les catégories et les champs, ainsi que la description du Grand Prix. Les données des participations ne peuvent pas être traduites parce que dans une situation réelle cela rendra le processus de soumission plus difficile pour l'utilisateur final qui ne se souciera pas de traduire son contenu dans les autres langues disponibles.

Monétisation. Vous pouvez jeter un oeil sur le plugin AUP pour NorrCompetition - utilisant ces règles, il est possible d'assigner des points AUP pour l'accomplissement de certaines actions et de fixer des limites. P.e. pour assigner 1 point pour un vote, l'utilisateur devra acheter des points pour voter pour les participations. Un plugin de paiement pour AUP pourra aussi être nécessaire.

Un moyen alternatif de monétisation. Réglez les permissions NorrCompetition permettant aux groupes d'utilisateurs spécifiés de voter et seuls les utilisateurs de ces groupes pourront accomplir des actions comme voter. Ensuite vous aurez besoin d'une extension d'abonnements pour Joomla!. Cela ouvre une large gamme de monétisation - vous pouvez créer quelques plans tarifaires pour une période temps spécifique (5 jours, 2 semaines, 3 mois, etc). Après un paiement réussi, l'utilisateur sera assigné au groupe d'utilisateur spécifié (que nous avons déjà configuré dans NorrCompetition). L'utilisateur devra voter pour des participations, soumettre des participations, etc. Quand l'abonnement prend fin, l'utilisateur sera assigné à nouveau dans le groupe Enregistrés et devra racheter un abonnement.

Conclusion

Les fonctionnalités de NorrCompetition sont assez larges et conviennent pour l'organisation de divers concours et votes. De plus, ses options flexibles permettent d'adapter le composant à vos besoins.

Le composant a un interface convivial et vient avec plusieurs thèmes différents - il est facile de modifier un thème via le template de Joomla!. Le code est propre et 100% natif Joomla!. Vous pouvez aussi activer des commentaires, certaines fonctions sont incluses via des plugins. Si vous êtes un développeur, vous pouvez créer votre propre plugin en utilisant l'API du composant et une documentation très complète.

Bonne chance dans la mise sur pied de vos concours par votes en utilisant NorrCompetition !

Télécharger NorrCompetition