0
3. SITE BUILDER 2.0
Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Acc...
Web site builders: tipi
 On-line web site builders
 Off-line web site builders
http://en.wikipedia.org/wiki/Website_buil...
On-line Web site builders
 Applicazioni proprietarie, che permettono di costruire e
pubblicare siti web
 Il sito viene c...
On-line site builders da noi utilizzati
 www.weebly.com
Applicazione base gratuita, servizi premium
 www.webs.com
Applic...
www.weebly.com
 Facilissimo da usare, personalizzazione con drag&drop
 Da fine 2006, ora più di un milione di utenti
 A...
Esempi (da questo corso)
 www.comproj.weebly.com
(Info in http://www.tangonet.it/esempio-di-uso-di-weebly-il-sito-della-
...
Template dimostrativo per ONG
R.Polillo - Ottobre 2010
7
http://prototipoong.weebly.com
 Semplice sito statico con menu g...
Esempi
 http://david.weebly.com
Il blog del creatore di Weebly
 http://golf4acure.weebly.com/
 http://video.weebly.com
...
www.webs.com
 Molto facile da usare
 Hosting della versione base gratuita: spazio e
banda limitati, non ad-free
 Serviz...
www.webs.com : site builder
10
R.Polillo - Ottobre 2010
www.webs.com: funzioni
 Blog
 Forum
 Members (semplice social network)
 Upload di files, foto, video, …
 E-commerce (...
Temi: esempio
12
R.Polillo - Ottobre 2010
Template dimostrativo per ONG
R.Polillo - Ottobre 2010
13
http://www.prototipoong.webs.com
 Sito piuttosto complesso con ...
www.ning.com
R.Polillo - Ottobre 2010
14
 Template dimostrativo per ONG:
http://prototipoong.ning.com
 Descrizione del t...
Off-line Web site builders
 Si deve scaricare il software e installarlo su un
server (proprio o di un provider)
 Si rivo...
Off-line site builders da noi utilizzati
 www.wordpress.org
Gratuito, open-source, molto semplice da usare,
molto ricco d...
WordPress
 Blog publishing and content managemet
system, open source e gratuito
 Nato a fine 2003 sulla base di un prece...
WordPress: possibilità
 Versione online su www.wordpress.com
Hosting gratuito, personalizzazioni molto limitate
Sconsigli...
Esempio: http://www.prototipoong.ilbello.com
R.Polillo - Ottobre 2010
19
• Articoli (post)
• Pagine
Articoli
R.Polillo - Ottobre 2010
20
 Sono i post del blog
 Possono contenere testi e inserti multimediali (foto, video,...
Scrittura di articoli: interfaccia
R.Polillo - Ottobre 2010
21
Pagine
R.Polillo - Ottobre 2010
22
 Contenuti statici
 Più livelli gerarchici
 Possono contenere testi e inserti multim...
Temi
R.Polillo - Ottobre 2010
23
 Tema: codice predefinito che descrive l’apparenza
grafica (e altro) del sito
 Numerosi...
Temi tipici
R.Polillo - Ottobre 2010
24
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne
Versione base:
Blog di default
/ tema di default
25
R.Polillo - Ottobre 2010
Widgets
R.Polillo - Ottobre 2010
26
 Widget = window gadget
termine generico che denota un elemento grafico dell’interfac...
Blog di default
/ altro tema predefinito
27
R.Polillo - Ottobre 2010
Blog di default
/ altro tema predefinito
28
R.Polillo - Ottobre 2010
Blog di default
/ altro tema predefinito
29
R.Polillo - Ottobre 2010
Blog di default
/ altro tema predefinito
30
R.Polillo - Ottobre 2010
Back-office
R.Polillo - Ottobre 2010
31
 Viene personalizzato a seconda dei ruoli
dell’utente
 Si può scegliere la lingu...
Back-office: ruoli
 Amministratore (administrator)
Può fare tutto (possono esserci più amministratori)
 Editore (editor)...
Plugin
R.Polillo - Ottobre 2010
33
 Sono il punto di forza di WordPress
 Permettono di estenderne le funzionalità in
mod...
Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
34
 Authors Widget vers.1.7
Widget per selezionare i post per autore
...
Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
35
 Google Translator vers.0.0.2
Widget per tradurre le pagine in 32 ...
Alcuni plugin sperimentati
R.Polillo - Ottobre 2010
36
 I Maters WP Faq vers.0.1
Per la gestione delle FAQ
 Page links t...
R.Polillo - Ottobre 201037
Altri plugin consigliati
R.Polillo - Ottobre 2010
38
 All In One SEO Pack
Definizione dei meta-tag per i motori di ricerc...
Esempi di applicazioni evolute
 http://newmusicnation.com
 http://alexking.org
 http://mosaic-consulting.com
 http://b...
Dove installare il sito
R.Polillo - Ottobre 2010
40
 Su un proprio server  e dopo?
 Su un server del cliente  lo sa ge...
Esempio: www.altervista.org
R.Polillo - Ottobre 2010
41
 Servizio di hosting gratuito, italiano
 Un milione di siti ospi...
Altervista: due tipi di servizi
R.Polillo - Ottobre 2010
42
Massima flessibilità
Massima semplicità
(vedi http://it.alterv...
Altervista: nome di dominio
R.Polillo - Ottobre 2010
43
 Posso registrare un dominio del tipo:
www.miosito.it
a pagamento...
Una introduzione a Wordpress
 Tiziano Fogliata
Crea il tuo blog con WordPress
HOEPLI Informatica, 2010 (€19,90)
Consiglia...
Queste slides…
R.Polillo – Ottobre 2010
45
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non c...
Upcoming SlideShare
Loading in...5
×

3. Site builders 2.0

2,847

Published on

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

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,847
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "3. Site builders 2.0"

  1. 1. 3. SITE BUILDER 2.0 Corso Laboratorio Internet – Prof. Roberto Polillo Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. www.webs.com : site builder 10 R.Polillo - Ottobre 2010
  11. 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. 12. Temi: esempio 12 R.Polillo - Ottobre 2010
  13. 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. 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. 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. 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. 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. 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. 19. Esempio: http://www.prototipoong.ilbello.com R.Polillo - Ottobre 2010 19 • Articoli (post) • Pagine
  20. 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. 21. Scrittura di articoli: interfaccia R.Polillo - Ottobre 2010 21
  22. 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. 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. 24. Temi tipici R.Polillo - Ottobre 2010 24 Header Colonna 1 Colonna 2 [Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne
  25. 25. Versione base: Blog di default / tema di default 25 R.Polillo - Ottobre 2010
  26. 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. 27. Blog di default / altro tema predefinito 27 R.Polillo - Ottobre 2010
  28. 28. Blog di default / altro tema predefinito 28 R.Polillo - Ottobre 2010
  29. 29. Blog di default / altro tema predefinito 29 R.Polillo - Ottobre 2010
  30. 30. Blog di default / altro tema predefinito 30 R.Polillo - Ottobre 2010
  31. 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. 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. 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. 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. 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. 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. 37. R.Polillo - Ottobre 201037
  38. 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. 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. 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. 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. 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. 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. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×