Nel presente tutorial, grazie ad alcuni esempi pratici, vedremo come organizzare un concorso fotografico e video in un sito web realizzato con Joomla. Per realizzare il concorso utilizzeremo l’estensione NorrCompetition della NorrNext di cui analizzeremo le funzionalità e la configurazione per la messa a punto del nostro concorso.
Questa guida passo a passo include anche un tutorial video (disponibile alla fine dell'articolo).
Il tutorial è disponibile anche in altre lingue:
Iniziamo
Prima di tutto, è necessario scaricare il componente NorrCompetition dal sito della NorrNext nella relativa pagina.
Dopo aver acquistato il componente, bisogna andare nella pagina My Downloads del sito NorrNext.
Oltre al componente NorrCompetition sono disponibili per il download vari moduli (modulo schede, modulo concorsi, modulo risultati, etc) e anche diversi plugin (plugin di ricerca, plugin sitemap, etc). Una volta scaricato tutto ciò di cui abbiamo bisogno, raggiungiamo il pannello di amministrazione del nostro sito Joomla e procediamo all’installazione seguendo la consueta procedura di installazione delle estensioni in Joomla.
NorrCompetition è tradotto in varie lingue. Su Transifex è possibile scaricare le traduzioni disponibili o realizzare una nuova traduzione. L’elenco aggiornato delle traduzioni disponibili è consultabile alla seguente URL: https://www.norrnext.com/norrcompetition-localisations
Durante la fase di installazione viene aggiunto automaticamente un menu NorrCompetition al nostro sito Joomla. Tale caratteristica consente di guadagnare tempo inserendo le principali funzionalità del componente nel front-end del sito. Inoltre, la prima volta che si installa NorrCompetition verrà proposta anche l’installazione di un set di dati di esempio (si tratta di un file di circa 20 MB di dati che vengono scaricati da un server esterno). Se non si è interessati ai dati di esempio si può tranquillamente ignorare questo passaggio. Per seguire il presente tutorial non è necessario installare i dati di esempio. A questo punto raggiungiamo la dashboard di NorrCompetition per capire come funziona il componente e valutarne l'usabilità.
NorrCompetition ha la seguente struttura:
Categorie. Contengono le informazioni generali.
Campi. Si tratta di campi personalizzati che possono essere assegnati ai vari concorsi. Possiamo inserire un titolo, un'area di testo, una casella di controllo etc. NorrCompetition dispone di suoi campi specifici che non dipendono dai campi personalizzati di Joomla.
Concorsi. I concorsi sono di tre tipologie: foto, video e semplici. Non è possibile modificare la tipologia di un concorso esistente poiché le singole schede sono associate ai relativi concorsi. Grazie alle tante impostazioni presenti nelle varie tabs è possibile personalizzare ciascun concorso in base alle proprie esigenze. Possiamo autorizzare, ad esempio, i visitatori e gli utenti registrati ad inserire le proprie schede dal front-end tramite un modulo di iscrizione. Il concorso può avere due status: in corso o completato.
Schede. Le schede sono gli elementi fondamentali del componente. Le schede diventano visibili nei concorsi in seguito all'approvazione da parte dell'amministratore.
La schema di lavoro da seguire è il seguente: prima di tutto bisogna inserire una categoria, in secondo luogo bisogna inserire i campi personalizzati. Infine va inserito un concorso, stabilendo a quale categoria assegnarlo e i campi personalizzati da associargli.
Nelle impostazioni di ogni singolo concorso è possibile sovrascrivere le impostazioni di default di NorrCompetition. In questo modo è possibile impostare i parametri di default tramite le opzioni globali del componente, ma se è necessario personalizzare alcuni parametri è possibile farlo tramite le impostazioni del singolo concorso. Ad esempio, potremmo aver bisogno di autorizzazioni diverse: in un concorso possono inserire le proprie iscrizioni solo gli utenti registrati, mentre in un altro concorso possono inserire le proprie iscrizioni anche gli utenti non registrati e così via.
È necessario impostare la tipologia dei campi personalizzati in fase di configurazione dei singoli campi:
Titolo. Si tratta del nome della scheda. Il termine "nome" non è sempre adatto al contenuto poiché le iscrizioni possono essere relative a persone oppure cose (mostre, marchi automobilistici, immagini, etc) o il nomignolo del proprio animale domestico e potrebbe essere necessario utilizzare un titolo diverso per ogni concorso all'interno di uno stesso sito web. Ad esempio, è meglio usare come titolo “nome” per il concorso "Miss Universo" e “marchio” per in concorso "Le migliori auto".
Testo. Campo di inserimento. È disponibile un filtro per questo campo.
Area di testo. È possibile selezionare il filtro SafeHTML per rimuovere tag e attributi non sicuri. Se selezioni Filtri di testo puoi incorporare snippets di codice come ad esempio Google Maps.
Calendario.
Casella di controllo.
URL.
Possiamo decidere se impostare i campi come obbligatori o facoltativi ed è anche possibile non visualizzare alcuni campi nel front-end.
NorrCompetition è progettato per offrire il massimo comfort durante il flusso di lavoro pertanto si focalizza essenzialmente sui concorsi e qualora si abbia bisogno di funzionalità aggiuntive (autorizzazioni social, profili utenti, assegnazione di punteggi, etc) bisogna installare delle estensioni di terze parti. Ad esempio, un profilo utente può essere realizzato utilizzando le funzionalità standard di Joomla, oppure utilizzando estensioni come EasySocial. Le autorizzazioni social possono essere gestite utilizzando estensioni come Akeeba Social Login o Slogin. Ne parleremo in seguito.
Progettare la struttura di un concorso
Che concorsi possiamo organizzare? Dipende dalla nostra fantasia. A titolo di esempio possiamo suggerire: Miss regione (e raggruppare le vincitrici per città), gruppo musicale (ottimo per i clubs e i locali), cucina nazionale (i migliori piatti di un ristorante), auto dell'anno, spettacoli su ghiaccio, dipinti per bambini, mostre fotografiche, balli, animali domestici del mese, miglior cortometraggio o film per studenti, trailer dell'anno, libro preferito. Comunità locali, istituzioni educative, clubs, locali, portali, siti web: tutti possono organizzare un proprio concorso.
Prendiamo come esempio un sito web dedicato ai locali e alla vita notturna di una città. Un sito del genere conterrà annunci, un calendario degli eventi, una sezione notizie. Con NorrCompetition è possibile ampliare le funzionalità del sito sito organizzando dei concorsi.
Abbiamo pensato di organizzare i seguenti concorsi, di cui illustreremo la struttura:
Miss del mese - la più affascinante visitatrice dei club (concorso)
- Nome - titolo
- Club - testo (campo di input)
- Data - calendario
- Trovami sui social media: un URL per il profilo dell'utente nei social media
Mister del mese - la migliore immagine maschile (concorso)
- I campi sono gli stessi del concorso precedente
Spettacolo dal vivo del mese - migliore esibizione di band dal vivo (concorso)
- Band - titolo
- Club - testo (campo di input)
- Descrizione - area di testo
Arte alternativa - un concorso con immagini artistiche
- Titolo - titolo
- Modello: testo
- Fotografo - testo
- Trucco - testo
- Descrizione - area di testo
- Trovami sui social media - URL
- Accetta il regolamento - casella di controllo
I primi due concorsi sono dedicati alla vita notturna. Si possono visitare i siti web dei locali e dei clubs o i social media e selezionare le foto delle persone che piacciono di più e proporle per il concorso. In questo caso è possibile modificare il titolo del concorso per renderlo più attinente (ad esempio: persona del mese). Si possono anche aggiungere altri campi come il nome del locale e l’URL della persona ritratta nella foto (questo campo può essere facoltativo).
Il terzo concorso è dedicato alle esibizioni dal vivo nei locali e nei clubs della propria città. Un concorso del genere aiuterà le nuove band a farsi conoscere. Promuovendo il concorso nei canali social delle band e dei locali, ogni band attirerà i propri fans facendo aumentare le visite al sito del concorso. Abbiamo aggiunto due nuovi campi in questo caso: nome e descrizione del club (per fornire le informazioni sugli spettacoli).
Infine, Alternative Art - un concorso speciale al quale possono partecipare persone creative che inviano le foto delle proprie opere. Una sessione fotografica realizzata da un fotografo professionista, un buon trucco, qualcosa di fatto a mano (un vestito, degli accessori, ecc.). Un concorso nel quale dare libero sfogo alla creatività per attirare l'attenzione della gente. Si possono anche visitare i canali social relativi a questi argomenti e invitare le persone creative a partecipare al concorso. Tra gli esempi suggeriti, questo è l'unico concorso in cui gli utenti possono inserire proprie schede. Ecco perché abbiamo aggiunto una campo casella di controllo per l’accettazione del Regolamento.
Abbiamo inserito anche due ulteriori categorie per raggruppare i concorsi sopra elencati: Entertainment e Image.
A questo punto possiamo vedere un esempio d'inserimento di un nuovo campo personalizzato:
Nell'immagine sottostante l'elenco dei campi:
Inserire un concorso
Vediamo come inserire un concorso:
I vari parametri sono raggruppati in tabs. Nella prima tab Contest, bisogna inserire il titolo del concorso e la descrizione completa (possiamo formattare facilmente il testo e\o inserire un'immagine se l’editor è in modalità WYSIWYG). Poi bisogna selezionare la categoria e la tipologia del concorso. La categoria potrebbe essere Entertainment o Image e la tipologia potrebbe essere Photo, Video o Simple. La tipologia si seleziona solo una volta nella fase di inserimento di un nuovo concorso e non può essere modificata in seguito. In questo caso va bene Photo come tipologia.
Ora impostiamo la data di inizio e la data di scadenza del concorso. Alla scadenza, lo status del concorso passerà automaticamente da in corso a completato e saranno visualizzati i risultati del concorso. Per approfondimenti vi consigliamo la lettura del tutorial: Differenti scenari di concorso con NorrCompetition.
A questo punto ci spostiamo nella tab Fields per impostare i campi da associare a questo concorso.
Da tenere presente che il campo Titolo è sempre obbligatorio perché ogni scheda inserita deve avere un titolo.
La tab successiva da impostare è Layout Options per gestire il layout del concorso.
Le impostazioni di default vengono ereditate dalle opzioni globali, ma possono essere personalizzate per ogni singolo concorso, sovrascrivendo appunto le impostazioni generali. Nel caso in cui abbiamo bisogno di un conto alla rovescia che indichi il numero di giorni prima dell'inizio della votazione, sarà sufficiente impostare il timer di avvio della votazione su Mostra.
Visto che le impostazioni del concorso Mister del mese (tipologia: Photo) sono simili non è necessario esaminarle.
Ora vediamo come inserire un concorso di video. Inseriamo, quindi, un quarto concorso che denominiamo Spettacolo dal vivo del mese, quindi selezioniamo la tipologia Video e assegniamo i campi associati (secondo le modalità viste in precedenza). NorrCompetition supporta ed elabora vari provider video come: Youtube, Vimeo, Instagram. Inseriremo le schede per questo concorso in seguito.
Il concorso più interessante è Arte alternativa, che, a differenza dei precedenti, permette agli utenti di inserire le proprie schede. Queste schede possono essere inserite tramite un modulo dal front-end del sito. Dopo l'approvazione da parte dell'amministratore, le schede saranno visibili nel concorso. Per impostazione predefinita gli utenti non sono autorizzati a inserire proprie schede, ma modificando opportunamente i permessi degli utenti sarà possibile l’inserimento delle schede dal front-end.
La procedura è la seguente: Concorso Arte Alternativa > tab Permissions, e impostiamo su Consentito per gli utenti registrati i primi 4 parametri (Crea, Crea prima dell'inizio del concorso, Crea dopo l’inizio del concorso e Crea dopo l’inizio della votazione).
Opzioni globali del componente
Ora esaminiamo le opzioni globali. Si raggiungono cliccando sul pulsante Opzioni in alto a destra nel pannello di amministrazione del componente.
In questa tab possiamo impostare il template (ad esempio bootstrap3) e troviamo il parametro Notifiche sulle schede.
Di cosa si tratta? Consente all’amministratore del sito di ricevere delle notifiche quando un utente inserisce una nuova scheda dal front-end. Una volta che la scheda è approvata e pubblicata, l’utente che l’ha inserita avrà la possibilità di modificare la voce dal front-end e aggiornare i dati (cambiando ad esempio foto e\o descrizione) Automaticamente la scheda verrà sospesa e dovrà essere nuovamente sottoposta a verifica da parte di un amministratore. Se si vuole che l’amministratore verifichi le schede prima della loro pubblicazione allora bisogna attivare tale parametro. Questa opzione ha 2 parametri: notifiche su nuove voci e notifiche su voci modificate.
Pulsante Condividi: per impostare i pulsanti social di condivisione (è supportato anche Open Graph).
Parametro numero iscrizioni - specifica il numero di schede che un concorrente può presentare per un concorso. Proviamo a impostarlo su 3.
Altre foto: questo parametro consente di aggiungere più foto anche nei concorsi di tipologia video, trasformando le foto in una mini-galleria. Un parametro magico! Lo imposteremo su "Sì".
Opzioni di voto: modificare i parametri di default in base alle proprie esigenze.
opzione per includere commenti nella pagina del concorso. E anche possibile aggiungere i commenti raggruppandoli in schede. Va bene Komento come impostazione.
è possibile impostare le dimensioni delle immagini che NorrCompetition genera automaticamente: miniature, immagini medie e immagini grandi. E’ anche possibile impostare larghezza e altezza personalizzate delle immagini nei singoli concorsi. In questo modo sarà possibile avere concorsi con diverse dimensioni delle immagini. Ad esempio, in alcuni concorsi, potremmo avere bisogno di foto verticali e orizzontali in altri concorsi.
possiamo impostare le autorizzazioni dei vari gruppi di utenti, quali azioni consentire e quali azioni vietare. Per impostazione predefinita, ad esempio, non è consentito votare. Selezioniamo il Gruppo di utenti registrati e impostiamo il parametro Vota su Consentito. da questo momento in poi gli utenti registrati possono votare le schede del concorso.
Inserimento delle schede
Aggiungiamo un po di schede dal back-end del sito. Ecco come appare il form:
Come detto in precedenza gli utenti registrati possono inserire le schede dal front-end. Nell'immagine sottostante come appare in questo caso il form:
Sono visualizzati tutti i campi personalizzati che abbiamo assegnato al concorso inclusa la casella di controllo "Accetto le condizioni del servizio".
La scheda inserita, come detto, deve essere verificata e approvata da un amministratore per poter essere pubblicata. Gli utenti possono inserire anche dei concorsi dal front-end (anche i concorsi devono essere verificati e approvati dall'amministratore del sito).
Di seguito la pagina Le mie schede nel front-end:
L’elenco delle schede di un utente, con la possibilità di modificare qualsiasi scheda e il pulsante per inserire una nuova scheda. Molto semplice e pulito come layout.
Concorsi in corso
Una volta inseriti tutti i dati necessari è possibile lanciare il concorso e promuovere il sito. Ecco come appare la pagina di un concorso in corso:
Ecco come appare una singola scheda:
Conversione dei visitatori in utenti
A questo punto la struttura è stata completata, le schede inserite e la votazione avviata. Ora è il momento di apportare delle modifiche per rendere il sito più user-friendly.
Considerando che solo gli utenti registrati possono votare nei 3 concorsi che abbiamo inserito, la prima cosa da fare è permettere ai visitatori di registrarsi al sito semplificando al massimo il processo di registrazione. Tale semplificazione è possibile ricorrendo ad una estensione di terze parti come Akeeba SocialLogin o Slogin assicurandoci che le icone dei social media siano presenti nel modulo di login.
Possiamo anche modificare il messaggio di default "Non hai il permesso di votare" con un messaggio personalizzato utilizzando la tecnica dell'override della lingua di Joomla.
Andiamo in Estensioni > Lingue > Override > Nuovo.
Cerchiamo la costante COM_COMPETITION_VOTE_ERROR_NO_PERMISSIONS, e impostiamo il nuovo messaggio: "Per votare, accedi al sito utilizzando un account social"
Opzioni di voto
E’ di fondamentale importanza impostare le opzioni di voto in base ai requisiti del concorso. Per farlo bisogna andare in Opzioni > Tab Contest > Voting options.
E’ possibile impostare la frequenza di voto, il numero massimo di voti per scheda (ad esempio la possibilità per un utente di votare più volte per la stessa scheda), e vari altri parametri di controllo per proteggersi dai voti falsi.
I suddetti parametri possono essere modificati anche nelle impostazioni del singolo concorso.
Gestione dei concorsi attivi
Bene, tutti i compiti necessari sono stati svolti e la votazione è in corso. In che modo vengono gestiti e moderati i concorsi? Fortunatamente, non è difficile.
In precedenza abbiamo detto che NorrCompetition può inviare notifiche sulle nuove schede inserite e sulle schede modificate. Per ricevere le notifiche bisogna abilitarle nelle impostazioni globali.
Inoltre, nella dashboard del componente si può visionare l’elenco delle schede in sospeso. Facendo clic su uno degli elementi in sospeso, passeremo alla modalità di modifica della scheda e vedremo la tabella di confronto tra vecchi contenuti e contenuti modificati. Se tutto va bene, possiamo pubblicare la scheda.
Moderazione delle schede modificate
L'utente, come detto in precedenza, può modificare le proprie schede dal front-end, ad esempio modificando la descrizione (non dimenticare di impostare i permessi in modo tale da poter modificare le schede). Appena modificata, la scheda automaticamente verrà sospesa e non sarà più visibile nel front-end fino a quando non verrà esaminata dall'amministratore del sito. Vorrei approfondire questo aspetto nel dettaglio.
Le schede modificate appaiono come visualizzate nell'immagine sottostante nell’elenco generale delle schede nel back-end del sito:
Viene visualizzata un'icona speciale che indica la scheda come modificata dall'utente.
Editando la scheda entriamo nella modalità di confronto divisa in due parti: a sinistra sono visibili i vecchi contenuti e a destra i contenuti modificati. Inoltre i media e i campi che sono stati modificati dall'utente sono evidenziati in giallo. Il moderatore può apportare modifiche anche ai campi.
Se tutto va bene, è sufficiente impostare su Confermato il parametro nella parte inferiore della pagina e fare clic su Salva. La scheda sarà nuovamente pubblicata e visibile nel front-end.
Notifiche addizionali
Le due tipologie di notifiche di default sono utili per l'amministratore del sito. Potrebbe esserci bisogno anche di ulteriori notifiche per segnalare specifici eventi ai concorrenti. E’ possibile farlo installando il plugin Notifiche di NorrCompetition, fornito come estensione aggiuntiva di base.
Il plugin Notifiche invia notifiche via e-mail per i seguenti eventi:
- Scheda pubblicata
- Scheda sospesa
- Scheda approvata
- Scheda non approvata
- Scheda rifiutata (inserita nel cestino)
- La scheda ha ottenuto un voto (qualcuno ha votato per la scheda)
Queste notifiche vengono incontro alle esigenze degli utenti.
Visualizzazione dei risultati
Raggiunta la data di scadenza, lo status del concorso automaticamente passa a “completato”. Di conseguenza, gli utenti non possono più votare e il layout dell’elenco delle schede cambia aspetto.
Lo status di Gran Prix
Il termine Grand Prix (dal francese) designa il premio più importante assegnato al vincitore di un concorso o ad un concorso.
NorrCompetition è progettato per assegnare lo status di Grand Prix a una sola scheda per concorso. Al di là dei risultati delle votazioni, la scheda con lo status di Grand Prix verrà sempre visualizzata per prima.
Infatti, l'amministratore del sito può assegnare lo status di Grand Prix ad una scheda in base alle simpatie della redazione o dei membri della giuria.
Raggruppare i vincitori
Può essere interessante raggruppare e visualizzare un elenco di schede a partire dalla valutazione più alta verso quella più bassa, ma ... A seconda del concorso, potrebbe sorgere l’esigenza di raggruppare i vincitori per criteri specifici. Ad esempio, raggruppare le schede per città o per età: visualizzare 3 vincitori di New York e di seguito 3 vincitori di Los Angeles e così via. Se abbiamo aggiunto il campo città in fase di progettazione del concorso, NorrCompetition può ordinare i risultati usando questa caratteristica.
Per implementare questi risultati bisogna editare il concorso e andare in Opzioni layout e impostare i parametri di interesse nella sezione Opzioni completate:
Schede per risultato: il numero di schede con il punteggio più alto al termine del concorso. Di default il valore è 3 ma può essere modificato.
Raggruppamento per campo: serve a selezionare il campo che verrà utilizzato per raggruppare le schede al termine del concorso. Negli esempi utilizzati nel nostro sito può essere una città o un club.
Schede per campo: questo parametro verrà descritto di seguito. Per ora impostiamolo a 3.
Di seguito proponiamo un esempio di schema di visualizzazione dei vincitori.
Il vincitore con lo status di Grand Prix (ricordiamo che a qualsiasi scheda può essere assegnato tale status) ha la massima priorità e differisce visivamente dalle altre. Se si seleziona il raggruppamento per campo, vedremo un elenco di vincitori in base ai valori del campo selezionato, altrimenti verranno visualizzate tutte le schede.
Ulteriori funzionalità
Ci sono funzionalità o trucchi interessanti?
Contenuti multilingua. Il componente supporta i contenuti multilingua. Si possono tradurre i titoli dei concorsi, le categorie, i campi personalizzati e la descrizione del Grand Prix. I dati delle schede non possono essere tradotti perché in una situazione reale renderebbe il processo di inserimento della scheda più difficile per gli utenti finali che non vogliono tradurre i propri dati nelle altre lingue disponibili.
Guadagnare. Utilizzando il plugin AUP per NorrCompetition, si possono impostare delle regole, assegnare dei punteggi e porre dei limiti alle azioni che possono essere eseguite. Per esempio possiamo assegnare un punteggio di -1 al voto. L'utente dovrà pertanto acquistare dei crediti per votare le schede. Se vogliamo attivare questa funzionalità dobbiamo installare anche un plugin per AUP per processare i pagamenti.
Un altro modo per guadagnare. Possiamo impostare dei gruppi NorrCompetition che consentono di votare solo agli utenti appartenenti a questi gruppi e si installa una estensione Joomla per la sottoscrizione di abbonamenti. A questo punto le possibilità di guadagnare diventano molte. Un esempio: possiamo offrire piani tariffari per un periodo di tempo specificato (5 giorni, 2 settimane, 3 mesi e così via). Effettuato il pagamento, l'utente verrà assegnato al gruppo utenti NorrCompetition. In questo modo l'utente potrà votare le schede e inserire le proprie schede. Scaduto l'abbonamento, l'utente verrà assegnato nuovamente al gruppo utenti registrati e dovrà acquistare un nuovo l'abbonamento.
Conclusioni
Le funzionalità di NorrCompetition sono sufficientemente ampie da poter soddisfare le esigenze di varie tipologie di concorso. Inoltre, la possibilità di personalizzare le varie impostazioni consente di adattare il componente alle proprie esigenze.
Il componente ha un'interfaccia intuitiva e viene fornito con vari temi. E’ facile sovrascrivere i temi appoggiandosi ai templates di Joomla. Il codice è pulito e compatibile 100% con Joomla. Possiamo abilitare i commenti e possiamo aggiungere ulteriori funzionalità installando i vari plugins disponibili. Inoltre, gli sviluppatori, possono realizzare il proprio plugin utilizzando le API di NorrCompetition e l’ampia documentazione fornita.
Buona fortuna con la realizzazione dei vostri concorsi utilizzando NorrCompetition!
Guida video
https://www.youtube.com/watch?v=HC8myH3n4V4
