Slides dal corso di Laboratorio Internet, prof.R.Polillo, Università di Milano Bicocca, A.A.2010-11

1. 3. SITE BUILDER 2.0
Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Accademico 2010-11

2. Web site builders: tipi
 On-line web site builders
 Off-line web site builders
http://en.wikipedia.org/wiki/Website_builder
2
R.Polillo - Ottobre 2010

3. On-line Web site builders
 Applicazioni proprietarie, che permettono di costruire e
pubblicare siti web
 Il sito viene costruito interamente on-line, senza
necessità di programmazione
 Può essere personalizzato in vari modi: scelta del tema
grafico, uso di widget, …
 A volte si può personalizzare il codice o modificare i
CSS
 Di solito, servizio base gratuito + servizi “premium” a
pagamento mensile
3
R.Polillo - Ottobre 2010

4. On-line site builders da noi utilizzati
 www.weebly.com
Applicazione base gratuita, servizi premium
 www.webs.com
Applicazione base gratuita; servizi premiun
Inoltre, online social network builders:
 www.ning.com
Solo servizi premium
 www.socialgo.com
Applicazione base gratuita; servizi premium

4
R.Polillo - Ottobre 2010

5. www.weebly.com
 Facilissimo da usare, personalizzazione con drag&drop
 Da fine 2006, ora più di un milione di utenti
 Anche funzioni di blog, e-commerce, adsense
 È possibile editare il codice HTML e i CSS del sito
 Problema: non esiste gestione dei ruoli per il backoffice
 http://en.wikipedia.org/wiki/Weebly
5
R.Polillo - Ottobre 2010

6. Esempi (da questo corso)
 www.comproj.weebly.com
(Info in http://www.tangonet.it/esempio-di-uso-di-weebly-il-sito-della-
cooperativa-comunita-progetto )
6
R.Polillo - Ottobre 2010

7. Template dimostrativo per ONG
R.Polillo - Ottobre 2010
7
http://prototipoong.weebly.com
 Semplice sito statico con menu gerarchico a sx
 Blog (per News)
 Donazioni online
 Photo gallery
 Download documenti PDF
 Cerca nel sito
 Google map
 Share buttons
 form su mail dell’amministratore
 Fan page su Facebook e canale Youtube
Descrizione del template in http://www.tangonet.it/profili-e-template-per-i-
siti-web-delle-ong

8. Esempi
 http://david.weebly.com
Il blog del creatore di Weebly
 http://golf4acure.weebly.com/
 http://video.weebly.com
 Mia prova:
http://robertop.weebly.com
8
R.Polillo - Ottobre 2010

9. www.webs.com
 Molto facile da usare
 Hosting della versione base gratuita: spazio e
banda limitati, non ad-free
 Servizi premium a pagamento (da 5 a 20 USD
al mese circa)
 Dal 2001, ora più di 20 milioni di siti
9
R.Polillo - Ottobre 2010

10. www.webs.com : site builder
10
R.Polillo - Ottobre 2010

11. www.webs.com: funzioni
 Blog
 Forum
 Members (semplice social network)
 Upload di files, foto, video, …
 E-commerce (shopping cart, pagamento via Paypal)
 Site statistics
 Vari widgets
 Molti temi predefiniti
 Alcuni temi wireframe (molto importanti per la nostra
metodologia):
 Blank Centered (navigazione orizzontale centrata)
 Blank Top (navigazione orizzontale)
 Blank Left (navigazione verticale sinistra)
 Blank Right (navigazione verticale destra)
11
R.Polillo - Ottobre 2010

12. Temi: esempio
12
R.Polillo - Ottobre 2010

13. Template dimostrativo per ONG
R.Polillo - Ottobre 2010
13
http://www.prototipoong.webs.com
 Sito piuttosto complesso con menu gerarchico orizzontale
 Blog (per News)
 Donazioni online ed e-commerce
 Eventi
 Photo gallery
 Form
 Rivista on line con issuu
 Cerca nel sito
 Google map per i progetti
 Share buttons
 Fan page su Facebook , canale Youtube, pagina twitter e flickr
 Social network con n ning
Descrizione del template in http://www.tangonet.it/profili-e-template-per-i-siti-web-delle-ong

14. www.ning.com
R.Polillo - Ottobre 2010
14
 Template dimostrativo per ONG:
http://prototipoong.ning.com
 Descrizione del template in
http://www.tangonet.it/profili-e-template-per-i-siti-
web-delle-ong

15. Off-line Web site builders
 Si deve scaricare il software e installarlo su un
server (proprio o di un provider)
 Si rivolgono a utenti più esperti, e sono più
flessibili
 Possonono essere proprietari o open source,
gratuiti o a pagamento
15
R.Polillo - Ottobre 2010

16. Off-line site builders da noi utilizzati
 www.wordpress.org
Gratuito, open-source, molto semplice da usare,
molto ricco di widget e plugin pronti all’uso
Lo consigliamo per questo corso!
 www.joomla.org
Gratuito, open-source, più complesso da usare.
16
R.Polillo - Ottobre 2010

17. WordPress
 Blog publishing and content managemet
system, open source e gratuito
 Nato a fine 2003 sulla base di un precedente
sistema nato nel 2001
 Probabilmente blog builder più diffuso
 Facile da usare, può essere personalizzato
anche in modo molto sofisticato
 http://en.wikipedia.org/wiki/WordPress
17
R.Polillo - Ottobre 2010

18. WordPress: possibilità
 Versione online su www.wordpress.com
Hosting gratuito, personalizzazioni molto limitate
Sconsigliabile
 Versione scaricabile da www.wordpress.org , da
installare su proprio server (o su proprio provider)
Completamente personalizzabile, consigliato
 Versione multiblog www.mu.wordpress.com
Piattaforma sofisticata di multi-blogging
18
R.Polillo - Ottobre 2010

19. Esempio: http://www.prototipoong.ilbello.com
R.Polillo - Ottobre 2010
19
• Articoli (post)
• Pagine

20. Articoli
R.Polillo - Ottobre 2010
20
 Sono i post del blog
 Possono contenere testi e inserti multimediali (foto, video,
audio, pdf)
 Presentati in ordine cronologico (di solito), di solito (ma non
sempre) in home
 Generano feed RSS
 Commenti abilitabili
 Categorie e tag
 Scrivibili da più autori
 Pubblici, protetti da psw, privati
 Pubblicazione programmabile (quando)
 Possono essere usati per le news
 Un solo blog (nuova versione: multi-blog)

21. Scrittura di articoli: interfaccia
R.Polillo - Ottobre 2010
21

22. Pagine
R.Polillo - Ottobre 2010
22
 Contenuti statici
 Più livelli gerarchici
 Possono contenere testi e inserti multimediali (foto,
video, audio, pdf)
 Commenti abilitabili
 Templates (Archivio, Link, personalizzabile)

23. Temi
R.Polillo - Ottobre 2010
23
 Tema: codice predefinito che descrive l’apparenza
grafica (e altro) del sito
 Numerosissimi temi predefiniti, di ogni tipo, gratuiti o a
pagamento
 L’adozione di un tema non richiede scrittura di codice
 Si può cambiare tema con un clic
 Esempi:
 www.rpolillo.it
 www.tangonet.it
 www.labtango.wordpress.com

24. Temi tipici
R.Polillo - Ottobre 2010
24
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne

25. Versione base:
Blog di default
/ tema di default
25
R.Polillo - Ottobre 2010

26. Widgets
R.Polillo - Ottobre 2010
26
 Widget = window gadget
termine generico che denota un elemento grafico dell’interfaccia
utente (dal Progetto Athena,1988)
 Wordpress fornisce molti widget, tipicamente per
personalizzare la barra laterale, senza scrivere codice
Esempi:
• Articoli recenti
• Categorie
• Link
• Archivi
• Calendario
• Tag cloud
• Cerca
• Commenti recenti
• Testo
• Meta www.tangonet.it

27. Blog di default
/ altro tema predefinito
27
R.Polillo - Ottobre 2010

28. Blog di default
/ altro tema predefinito
28
R.Polillo - Ottobre 2010

29. Blog di default
/ altro tema predefinito
29
R.Polillo - Ottobre 2010

30. Blog di default
/ altro tema predefinito
30
R.Polillo - Ottobre 2010

31. Back-office
R.Polillo - Ottobre 2010
31
 Viene personalizzato a seconda dei ruoli
dell’utente
 Si può scegliere la lingua, fra un insieme molto
ampio

32. Back-office: ruoli
 Amministratore (administrator)
Può fare tutto (possono esserci più amministratori)
 Editore (editor)
Ha ampi poteri, ma solo sui contenuti: articoli, pagine,
categorie, commenti (non può intervenire su temi, plugin,
widget)
 Autore (author)
Può scrivere, cancellare e modificare articoli e caricare file, e
approvare e modificare i commenti agli articoli. Non può
intervenire sugli articoli di altri autori.
 Collaboratore (contributor)
Può creare articoli, ma non può pubblicarli (devono essere
approvati da un editore o amministratore)
32
R.Polillo - Ottobre 2010

33. Plugin
R.Polillo - Ottobre 2010
33
 Sono il punto di forza di WordPress
 Permettono di estenderne le funzionalità in
modo molto facile e ampio
 Disponibili migliaia (?) di plugin
 Bisogna cercarli e provarli

34. Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
34
 Authors Widget vers.1.7
Widget per selezionare i post per autore
 Author exposed ver.1.0
Pop-up sul post con scheda autore
 Enhanced Categories vers.2.2
Widget per selezionare i post per categorie gerarchiche
 Flexo Archives vers.1.0.13
Widget per selezionare i post per data
 SuperTag Widget vers.1.3
Widget per gestione di Tag Cloud

35. Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
35
 Google Translator vers.0.0.2
Widget per tradurre le pagine in 32 lingue
 Google Ajax Translator vers.0.5.1
Google translate sui singoli post (funziona?)
 Wp Geo vers.3.1.4
Localizza il post su una mappa Google Map
 PollDaddy Polls&Ratings
Gestione questionari on-line e user-rating
 AddToAny: Share/Bookmarks/Email Button vers.9.9.5
Share buttons per moltissimi siti
 Fixed social buttons vers.2.4.4.8
Social button vari
 Dynamic Headers by Nicasio Design vers.3.5.1
Immagine di testata variabile
 Slickr Flickr
Photo gallery da flickr

36. Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
36
 I Maters WP Faq vers.0.1
Per la gestione delle FAQ
 Page links to vers.2.3
Associa link ai tab del menu principale
 Tal.ki Embeddedable Forum vers.1.1.5
Forum (con diverse limitazioni)
 WP-Contact Form vers.1.5.1.1
Form per contatti via email
 Wp-User online
Mostra utenti online
 Ultimate Google Analytics
Attiva Google Analytics sul sito

37. R.Polillo - Ottobre 201037

38. Altri plugin consigliati
R.Polillo - Ottobre 2010
38
 All In One SEO Pack
Definizione dei meta-tag per i motori di ricerca
 NextGEN Gallery
Photo gallery
 WordPress.com Stats
Analisi del traffico semplificata
 Contact Form 7
Definizione contact form
 Bad Behavior
Anti-spam
 WordPress Mobile Pack
Interfaccia mobile (anche per back-office)
 GD Star Rating
Gestione user-rating di articoli, commenti e pagine
 Viper’s Video Quicktags
Facilita l’inserimento dei video nei post
 Sociable
Share buttons per post
NB: Questi plugin sono
consigliati nel libro:
Tiziano Fogliata, Crea il tuo
blog con WordPress,
HOEPLI Informatica, 2010
(non li ho provati)

39. Esempi di applicazioni evolute
 http://newmusicnation.com
 http://alexking.org
 http://mosaic-consulting.com
 http://b5media.com
 http://hotair.com
 http://mommycast.com
 http://ewebscapes.com
39
R.Polillo - Ottobre 2010

40. Dove installare il sito
R.Polillo - Ottobre 2010
40
 Su un proprio server  e dopo?
 Su un server del cliente  lo sa gestire?
 Utilizzando un servizio di hosting
 a pagamento
 gratuito  suggerito
 La registrazione di un proprio dominio è
comunque a pagamento

41. Esempio: www.altervista.org
R.Polillo - Ottobre 2010
41
 Servizio di hosting gratuito, italiano
 Un milione di siti ospitati
 Possibile accettare pubblicità, con revenue
sharing
 www.yourname.altervista.org

42. Altervista: due tipi di servizi
R.Polillo - Ottobre 2010
42
Massima flessibilità
Massima semplicità
(vedi http://it.altervista.org/come-fare-blog.php )
Differenze, vantaggi e svantaggi in
http://blog.altervista.org/it/differenze-tra-alterblog-e-altersito-con-wordpress/

43. Altervista: nome di dominio
R.Polillo - Ottobre 2010
43
 Posso registrare un dominio del tipo:
www.miosito.it
a pagamento (circa 10 Euro all’anno)
 http://it.altervista.org/wiki/index.php/FAQ_Domini_di_sec
ondo_livello#Come_faccio_a_registrare_un_dominio.3F

44. Una introduzione a Wordpress
 Tiziano Fogliata
Crea il tuo blog con WordPress
HOEPLI Informatica, 2010 (€19,90)
Consigliato per questo corso
44
R.Polillo - Ottobre 2010

45. Queste slides…
R.Polillo – Ottobre 2010
45
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, per esempio a scopo didattico,
senza necessità di preventiva autorizzazione.
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile. L’autore si scusa per eventuali omissioni,
e resta a disposizione per correggerle.