3. Site builders 2.0

3. SITE BUILDER 2.0

Corso Laboratorio Internet – Prof. Roberto Polillo

Università degli Studi di Milano Bicocca – Anno Accademico 2010-11

R.Polillo - Ottobre 2010

2

Web site builders: tipi

On-line web site builders Off-line web site builders

http://en.wikipedia.org/wiki/Website_builder

http://en.wikipedia.org/wiki/Website_builder


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


4

On-line site builders da noi utilizzati

www.weebly.comApplicazione base gratuita, servizi premium

www.webs.comApplicazione base gratuita; servizi premiun

Inoltre, online social network builders: www.ning.com

Solo servizi premium www.socialgo.com

Applicazione base gratuita; servizi premium

http://www.weebly.com/

http://www.webs.com/

http://www.ning.com/

http://www.socialgo.com/


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


http://en.wikipedia.org/wiki/Weebly


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 )

http://www.comproj.weebly.com/

http://www.tangonet.it/esempio-di-uso-di-weebly-il-sito-della-cooperativa-comunita-progetto

http://www.tangonet.it/esempio-di-uso-di-weebly-il-sito-della-cooperativa-comunita-progetto


7

Template dimostrativo per ONG 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

http://prototipoong.weebly.com/

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

http://david.weebly.com/

http://golf4acure.weebly.com/

http://video.weebly.com/

http://robertop.weebly.com/


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



10

www.webs.com : site builder



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)


12

Temi: esempio



13

Template dimostrativo per ONG 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


http://www.prototipoong.webs.com/



14

www.ning.com

Template dimostrativo per ONG:http://prototipoong.ning.com


http://www.ning.com/

http://prototipoong.ning.com/




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


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’usoLo consigliamo per questo corso!

www.joomla.org Gratuito, open-source, più complesso da usare.

http://www.wordpress.org/

http://www.joomla.org/


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

http://en.wikipedia.org/wiki/WordPress


18

WordPress: possibilità

Versione online su www.wordpress.comHosting gratuito, personalizzazioni molto limitateSconsigliabile

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

http://www.wordpress.com/

http://www.wordpress.org/

http://www.mu.wordpress.com/


19

Esempio: http://www.prototipoong.ilbello.com

• Articoli (post)• Pagine

http://www.prototipoong.ilbello.com/


20

Articoli

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



22

Pagine

Contenuti statici Più livelli gerarchici Possono contenere testi e inserti multimediali

(foto, video, audio, pdf) Commenti abilitabili Templates (Archivio, Link, personalizzabile)


23

Temi

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

http://www.rpolillo.it/

http://www.tangonet.it/

http://www.labtango.wordpress.com/


24

Temi tipici

Header

Colonna 1 Colonna 2 [Colonna 3]

Footer

[Menu orizzontale]

1, 2 o 3 colonne

Versione base:Blog di default / tema di default



26

Widgets

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 codiceEsempi:

• Articoli recenti• Categorie• Link• Archivi• Calendario

• Tag cloud• Cerca• Commenti recenti• Testo• Meta www.tangonet.it

http://www.tangonet.it/

Blog di default / altro tema predefinito


31

Back-office

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)


33

Plugin

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

Authors Widget vers.1.7Widget per selezionare i post per autore

Author exposed ver.1.0Pop-up sul post con scheda autore

Enhanced Categories vers.2.2Widget per selezionare i post per categorie gerarchiche

Flexo Archives vers.1.0.13Widget per selezionare i post per data

SuperTag Widget vers.1.3Widget per gestione di Tag Cloud


35


Google Translator vers.0.0.2Widget per tradurre le pagine in 32 lingue

Google Ajax Translator vers.0.5.1Google translate sui singoli post (funziona?)

Wp Geo vers.3.1.4Localizza il post su una mappa Google Map

PollDaddy Polls&RatingsGestione questionari on-line e user-rating

AddToAny: Share/Bookmarks/Email Button vers.9.9.5Share buttons per moltissimi siti

Fixed social buttons vers.2.4.4.8Social button vari

Dynamic Headers by Nicasio Design vers.3.5.1Immagine di testata variabile

Slickr FlickrPhoto gallery da flickr


36


I Maters WP Faq vers.0.1Per la gestione delle FAQ

Page links to vers.2.3Associa link ai tab del menu principale

Tal.ki Embeddedable Forum vers.1.1.5Forum (con diverse limitazioni)

WP-Contact Form vers.1.5.1.1Form per contatti via email

Wp-User onlineMostra utenti online

Ultimate Google AnalyticsAttiva Google Analytics sul sito


38

Altri plugin consigliati

All In One SEO PackDefinizione dei meta-tag per i motori di ricerca

NextGEN GalleryPhoto gallery

WordPress.com StatsAnalisi del traffico semplificata

Contact Form 7Definizione contact form

Bad BehaviorAnti-spam

WordPress Mobile PackInterfaccia mobile (anche per back-office)

GD Star RatingGestione user-rating di articoli, commenti e pagine

Viper’s Video QuicktagsFacilita l’inserimento dei video nei post

SociableShare 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

http://newmusicnation.com/

http://alexking.org/

http://mosaic-consulting.com/

http://b5media.com/

http://hotair.com/

http://mommycast.com/

http://ewebscapes.com/


40

Dove installare il sito

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 Servizio di hosting gratuito, italiano Un milione di siti ospitati Possibile accettare pubblicità, con

revenue sharing www.yourname.altervista.org

http://www.altervista.org/

http://www.yourname.altervista.org/


42

Altervista: due tipi di servizi

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/

http://it.altervista.org/come-fare-blog.php

http://blog.altervista.org/it/differenze-tra-alterblog-e-altersito-con-wordpress/


43

Altervista: nome di dominio

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_secondo_livello#Come_faccio_a_registrare_un_dominio.3F

http://www.miosito.it/

http://it.altervista.org/wiki/index.php/FAQ_Domini_di_secondo_livello%23Come_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

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.

3. Site builders 2.0

Education

Transcript of 3. Site builders 2.0