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 della seconda parte).
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.
Tab General
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).
Tab Contest
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.
Tab Comments
opzione per includere commenti nella pagina del concorso. E anche possibile aggiungere i commenti raggruppandoli in schede. Va bene Komento come impostazione.
Tab Images
è 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.
Tab Permissions
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.
