Social network: quali sono i moduli necessari per realizzarne uno con Drupal

11 dicembre 2009 – DrupalCamp Crema

+Social network: quali

sono i moduli necessari per realizzarne uno con

DrupalDavide Michel Morelli aka ZioBudda

2

Prima di iniziare ci sono due cose da dire:

- come esempio è stato preso il portale fitnesspeople.itio sono della scuola di pensiero che per capire qualche cosa si devono fare degli esempi concreti. Altrimenti restano solamente una serie diinformazioni poco contestualizzate

- le slide sono volutamente discorsive. Non c'è peggior slide di quelle che non si possono riutilizzare se non si ha memoria di quello che il relatore ha detto, magari N mesi fa.

Ora possiamo partire.

Social Network Site - ZioBudda

3Social Network Site - ZioBudda

I moduli per la realizzazione di un social network site si possono idealmente dividere in 4 macro gruppi:

quelli dedicati agli utenti

quelli dedicati alla grafica

quelli dedicati alla propaganda del sito

quelli dedicati alla programmazione del sito

In questo talk non posso inserire tutti i moduli che si possono trovare in rete,ma permettetemi di presentarvi quelli che io considero i più funzionali allo scopo.

Ma ancor prima datemi del tempo per fare alcune importanti precisazioni.

4

I moduli dedicati alla grafica esistono ?

Dipende da cosa si intende per grafica:

se intendiamo uno slideshow nella galleria fotografica di un utente, allora si esistono

se intendiamo la possibilità di themizzare l'output di una vista allora non esistono. Per questo basta Drupal.

Ci sono poi i moduli che forniscono delle funzionalità che per essere utilizzate richiedono un approccio grafico. E ci sono quelli che per essere utilizzati richiedono solo un link.

Ad esempio..


5

... quelli che non hanno una vera pertinenza grafica ma che la richiedono per essere utilizzati

I messaggi privatiNon si può pensare ad un sito di tipo sociale senza tener conto della necessità di avere la possibilità di spedire in formato privato dei messaggi agli altri utenti

L'invito ad altri amiciTutto si può dire, ma il più grande mezzo pubblicitario è il passa parola. Un amico che parla di un sito ci spinge sempre a provarlo. Specialmente se tratta di un argomento che ci interessa.

Le relazioni di amiciziaUna volta iscritti ad un sito dobbiamo coltivare il “nostro essere” all'interno del sito e quale modo migliore se non quello di crearci una cerchia di amici ?


6

... e quelli che non richiedono nulla di grafico

sottoscrizioneper rimanere aggiornati su quello che avviene all'interno di un gruppo o su quello che scrive un utente basta, oltre ad installare il modulo adeguato, cliccare su un semplice link. Non servono fuochi d'artificio o palle che girano. Basta una scritta ben chiara

stampa della paginaanche se basta il menu apposito del browser un link diretto da farcliccare all'utente è sicuramente più funzionale. E poi volete metterela possibilità di creare un aspetto grafico diverso per il foglio stampato. Ma non stiamo sforando nella grafica ? Si, ma questo è un terzo tipo di modulo. E direi di non mettere troppa carne al fuoco


7

I moduli dedicati all'utente esistono ?

Ovviamente si, ma molti si fondono con quelli dedicati alla usabilità o alla funzionalità avanzata.

Un esempio che li racchiude entrambi sono i gruppi di discussione o organic group: è un modulo ovviamente dedicatoall'utente del sito, ma se male utilizzato pregiudica l'usabilità del sito: non mettere da nessun parte un link dedicato all'inserimento di un nuovo contenuto nel gruppo è uno sbaglio molto grave. Metterlo solo in punto migliora un po' l'usabilità, metterlo sempre dove ci sono i messaggi di un gruppo migliora di molto l'usabilità. E nel contempo saperlo utilizzare in modoavanzato migliora anche la funzionalità del sito: per inserire un nuovo contenuto in gruppo senza far selezionare all'utente il gruppo destinatario del nuovo post basta aggiungere il seguente testo all'url di inserimento nuovo contenuto (GID è il group ID):

?gids[]=GID


8

Il link per inserire un nuovo messaggio nel gruppo: facile da trovare e semprepresente

9

L'inserimento di un nuovo messaggio senza ?gids[]=GID

L'inserimento di un nuovo messaggio con ?gids[]=GID (notate l'assenza del box dedicato ai gruppi)


10

Sono stato chiaro ?

Attenzione; sempre più spesso funzionalità e usabilità andranno a braccetto.

Nell'esempio dei gruppi di discussione appena visto, l'inserimento del link che porta l'utente ad inserire un nuovo posto all'interno di un gruppo può anche essere visto come un aumento dell'usabilità del sito.


11

E siamo così giunti all'elenco dei moduli, con l'aggiunta di una piccola descrizione, altrimenti uno screenshot del comando ls la vi sarebbe bastato :D

Come abbiamo visto riuscire a dividere per bene i moduli nelle 4 macro aree definite all'inizio è molto difficile. E' meglio proporli per affinità partendo da una pagina e vedendo quali sono i moduli utilizzati.

Home page.. ops.. Front page stiamo arrivando...

Social Network Site – ZioBudda

13

In questa prima parte della front page l'unico modulo utilizzato è “views”. La possibilità di customizzazione di questo modulo è una vera manna dal cielo.

Lo slideshow è una vista con del codice JS che crea l'effetto di sfumatura

Il box delle ultime notizie è una vista

Il box degli ultimi iscritti è una vista

Ed anche nella prossima immagine, che raffigura la seconda parte della front page, è quasi tutto realizzato con il modulo views.


15

Per farvi capire il livello di customizzazione del modulo views vi presento i due file che permettono di visualizzare il blocco degli utenti di FP.

Nel secondo file è presente la variabile $fields. Questa variabile contiene il risultato fornito dal modulo views per una particolare riga.

I nomi dei campi sono decisi sempre dal modulo views e per conoscerli basta editarela vista e cliccare sul link “Theme: information” (o “Tema: informazioni” se avete abilitatola lingua italiana).


16

<div class="BoxNewVerde"> <h2><?php echo t("Ultimi iscritti a FitnessPeople"); ?></h2> <! Contenitore Box Sfumatura Grigio >

<div class="ContBoxGrigio bgSfumaGrigio"> <?php foreach ($rows as $id => $row): ?> <?php print $row; ?> <?php endforeach; ?>

<img height="1" width="100" class="spacer" alt="image" src="/sites/fitnesspeople.it/themes/fp_001/images//spacer.gif"/>

</div></div>

viewsviewunformattedlastuserblock1.tpl.php


17

<?phpif (!isset($GLOBALS['userDelta'])) { $GLOBALS['userDelta'] = 0; } else $GLOBALS['userDelta']++; }if (($GLOBALS['userDelta'] % 4) != 3) { $margin = "marginDest";} else { $margin = ""; }?><div class="FotoNewIscritto <?php echo $margin; ?>">

<a href="<?php echo url('user/'.$fields['uid']>content); ?>"> <img height="60" width="80" alt="image" src="/

<?php echo $fields['picture']>raw; ?>"/> <p><?php echo $fields['name']>content; ?></p> </a></div>

../themes/fp_001/viewsviewfieldslastuserblock1.tpl.php (END)


18

Sempre nella seconda parte della front page è presente un blocco dedicato alle ultime attività effettuate dagli utenti all'interno del sito. Questo viene creato in automatico dal modulo “activity” insieme all'uso del modulo user activity.

Ed altri moduli che utilizzano activity sono: Activity history, Comment activity, Favorite Nodes activity, Flag activity, Node activity, OG activity, User relationships activity, Voting activity.

A questo punto partendo dalla home page possiamo andare a visionare quali sonogli altri moduli utilizzati, partendo dal blocco delle notizie.

E' già stato detto che tale blocco viene creato dal modulo “views”, quindi premendo idealmente sulla prima notizia vediamo quali moduli si possonoutilizzare per rendere la visione della notizia più interessante per l'utente, saltando la realizzazione visiva e soffermandoci solo nella parte bassa dove sono presenti dei moduli aggiuntivi.


19

Voto medio: modulo fivestars il quale a suo vota richiede il modulo Voting Api Share: modulo addthisbottone facebook: nessun modulo in particolare, è il widget fornito da facebookStampo la notizia: modulo printInvio via email: modulo print


20

Come ho detto all'inizio ci sono moduli che offrono più funzionalità come ad esempio il modulo print, che permette di mandare in stampa la pagina (permettendo anche di customizzare la grafica) e di mandare una email ad un amico indicandogli un postinteressante; giocando con i CSS la grafica della pagina di invio può diventare:


21

Ritornando alla figura della parte bassa di una notizia, si può vedere in basso il form di inserimento dei commenti: modulo “comment”.

Ci sono poi le notizie che possono essere collegate tra loro ed il fornire tale informazioniall'utente finale permette di creare una sorta di percorso guidato. Ci sono due tipi di moduli che effettuano questa operazione: quelli tutti automatici come Similar By Terms e quelli che permettono all'utente che inserisce la notizia di decidere quali sono i contenuti collegabili, come Related Items.

Una cosa che l'utente finale non vede, ma che riguarda le notizie è la possibilitàdi scriverle in un certo momento e vederle pubblicate ad un orario ed un giorno prefissato. Questo è fatto tramite l'uso del modulo “scheduler”.


22

Ed una cosa che si vede solamente nei sorgenti della pagina, ma che risulta molto utile quando dobbiamo far analizzare le nostre pagine ad un motore di ricerca sono i tag “description” e “keywords” che vengono gestiti per singola pagina dal modulo “nodewords”.

Rimanendo nel campo dei motori di ricerca l'url della pagina non è il solito node/XXX, ma è costruito ad arte per essere maggiormente indicizzabile tramite il modulo pathauto. E questo è possibile solamente se sono attivi i “Clean urls” nella impostazione di drupal.

Sempre per i motori di ricerca è attivo il modulo global_redirect che permette direindirizzare ogni visita ad un url del tipo node/XXX a quella del suo alias creato con path_auto. In questo modo i motori di ricerca non vedranno un doppio contenuto uguale. Questo è anche un tipico caso di dipendenza di moduli: senza path_auto, global_redirect non avrebbe di che esistere.


23

E continuando nel campo dei motori di ricerca ci sono tre moduli attivi che pur avendopoco impatto sull'utente ne hanno molto in un ottica SEO:

xmlsitemap: crea automaticamente una mappa del sito seguendo le specifiche ufficiali. A questo devono essere attivati i moduli dedicati alla mappa di ogni singolotipo di dato: XML sitemap node, XML sitemap taxonomy e XML sitemap user.

google_analitycs: le statistiche di accesso ed uso sono il primo passo per verificarela bontà delle proprie decisioni

google_adsense: non si vive senza della pubblicità che porta introiti per coprire lespese.


24

Tornando alla home (12) e proseguendo verso destra abbiamo il blocco degli utentiregistrati al sito. Abbiamo già detto che è realizzato tramite l'uso del modulo views.Facciamo un passo indietro e vediamo quali sono i moduli che possono essere utilizzati al momento della registrazione di un nuovo utente:

profile: modulo dedicato alla creazione di campi dedicati al profilo di un utente. Trai campi creati è possibile scegliere quelli che devono essere presentati e compilatinella fase di registrazione

captcha: non penso di dover spiegare cosa è

term of use: permette di definire un testo da presentare all'utente che si vuole registrare, insieme ad un checkbox che deve essere selezionato per far si che la procedura di registrazione venga fatta partire.


25

Una volta che l'utente si logga nel sito viene portato nella sua pagina del profilo :


26

Ci sono due moduli utilizzati in questa pagina:

activity che abbiamo già incontrato nella front page, e che in questa pagina ci permette di vedere solo le attività dell'utente del profilo che stiamo guardando

Il secondo è sulla colonna di destra ed è “user_visits”: questo modulo permette di visualizzare gli ultimi utenti che hanno visionato il profilo dell'utente attualmentecollegato.

Come si può vedere ancora una volta, tutta la pagina del profilo utente pur utilizzandomoduli standard di drupal e solo pochi moduli aggiuntivi, viene creata graficamente accattivante sfruttando il sistema di theming di drupal.

Rimanendo in questa pagina e guardando la parte alta troviamo il menu dell'utente,menù sempre presente quando l'utente è autenticato e non anonimo.


27

In questa immagine troviamo altri moduli:

amici: viene usato il modulo “user_relationships” che permette di creare relazionitra gli utenti. In questo sito in particolare ci sono due tipi di relazioni: amici e fan.

Guestbook: manco a dirlo il nome del modulo che si occupa di questa funzionalità èproprio “guestbook”

Messaggi: il modulo è “privatemsg”.


28

Ma per i messaggi ci sono dei moduli aggiuntivi per potenziarne le funzionalità:

block user messages: blocca la ricezione di messaggi da parte di un utente

Privatemsg Email Notification permette di ricevere messaggi di posta indicanti un nuovo messaggio privato

Privatemsg filter: permette di creare dei filtri sui messaggi, come ad esempio l'uso dei tag per differenziare i vari messaggi.

Legati ai messaggi, ma invisibili all'utente si devono utilizzare i moduli

Messaging Privatemsg, che a sua volta richiede Messaging, il quale è utilizzato da altri moduli.


29

Ritornando al menu dell'utente, ho lasciato volutamente indietro il link ai gruppi.

OG: acronimo di Organic Group. Sono gruppi di discussione. Si diversificano dal solito forum perchè l'utente si deve iscrivere al gruppo per poter inserire un nuovomessaggio, mentre il forum è per definizione un luogo aperto a tutti gli utenti del sito.

Notate la scritta “Sono iscritto”: questa fa parte della customizzazione grafica cheviene effettuata dal programmatore del sito.


30

Anche il modulo OG utilizza altri moduli per aumentare le proprie funzionalità:

Organic groups statistics: fornisce alcune statistiche sul gruppo che l'utente sta visionando.

Organic groups actions: permette di definire delle azioni da effettuare sui gruppi

Organic Groups Notifications: permette all'utente di essere informato sui cambiamentiin un gruppo

Organic groups Views integration: lega i gruppi al modulo views. Se installate OGdovete installare anche questo. Non è un obbligo di drupal, solo MIO :D


31

Rimanendo nel campo dell'utente del sito web ci sono altri moduli che vengono utilizzati, senza però presentare funzionalità aggiuntive:

bettermessages: i messaggi dedicati all'utente e contenuti all'interno della variabile $message sono presentati all'interno di false finestre che rimangono in primo piano finoa quando l'utente non clicca su un link di chiusura.


32

E ci sono quelli che offrono funzionalità aggiuntive riguardanti un ampio spretto di tipi di contenuto, come ad esempio il modulo “notifications” che permette all'utente disottoscrivere una notifica di cambiamento legata ad un post, ad un utente o ad un tipo di contenuto. Per ogni nuovo elemento di uno di queste tre tipologie, l'utente vieneavvisato via email o messaggio privato.

Ma rimaniamo nelle pagine interne: nel lato destro di ogni pagina c'è un box riguardante gli ultimi utenti che hanno visitato il nostro profilo. Ad ogni utente è associato il proprio avatar, ridimensionato per entrare correttamente nella grafica del box. Per fare questo è stato utilizzato il modulo imagecache, che permette di creare versioni modificate di una immagine. Ad esempio per creare una galleria fotografica e mostrare all'utente solo delle anteprime. A sua volta questo modulo dipende daImageApi e Image Api GD2.


33

A tutti i moduli presentati qui fino ad ora ci sono quelli che potremmo considerare deicomprimari:

BlogContactContent translationHelpLocaleMenuPathPHP FilterSearchStatisticsTaxonomyUpload


34

E siamo infine giunti a quei moduli che non hanno un diretto contatto con l'utente finale,ma che servono per il corretto funzionamento del sito o per il suo sviluppo

Administration menu: tutta la pagina di amministrazione (e non solo) in un semplice ed usabile menu.

Token: permette di definire delle stringhe da utilizzare nelle costruzione di frasi che richiedono un valore particolare, come [yyyy] per indicare l'anno attuale a 4 cifre.

Devel e Devel themer: se volete creare un sito con Drupal non potrete fare a meno di questi due moduli.


35

Ed eccoci così giunti alla fine di questo talk.

Abbiamo visto quali sono i moduli alla base di un buon social network site, ma per mancanza di tempo non abbiamo potuto vedere cosa c'è dietro a tutto questo: il theming di drupal: l'abito non fa il monaco. Ma aiuta a sembrarlo.

Ci sono poi i moduli che non sono ancora attivi su FP, ma che sono già pronti per l'uso come shoutbox, facebook connect, openid connect, e tanti altri. In questeslide ho preferito soffermarmi su quelle che sono le carattaristiche attuali e non le nuove funzionalità che ancora non sono attive. Ma alla fine i moduli nominati inqueste slide sono quelli che un po' tutti i social network site dovrebbero avere.


36

Come ultima slide permettetemi di presentarmi:

Davide Michel Morelli aka ziobuddaDavide per i parentiMichel per gli amiciZioBudda per gli utenti di PCBEEEP per i nemici :D

Freelancer, sviluppo siti web e applicazioni web dinamiche su piattaforma LAMP

Tel: 0200619074 Cellulare: 3939890025Email: [email protected]: zio_budda icq: 58351764twitter : ziobuddaBlog: http://www.ziodrupal.net


mailto:[email protected]

Social network: quali sono i moduli necessari per realizzarne uno con Drupal

Technology

Transcript of Social network: quali sono i moduli necessari per realizzarne uno con Drupal