Slides dalle lezioni del corso di "Strumenti e applicazioni del Web", Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione del 19 marzo 2013.
Vedi anche www.corsow.wordpress.com
1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
5. Applicazioni Web e
CMS
Roberto Polillo
Edizione 2012-13
2. Applicazioni Web
3
Oltre che "navigare", l'utente deve poter
"interagire" con un sito, fornendo dei dati che il
sito elaborerà fornendo le risposte opportune
Non solo "Web sites" ma "Web applications"
R.Polillo - Marzo 2013
3. Applicazioni Web: script client-side
4
AJAX Engine
HTML con script
client-side
Browser
internet
HTTP
Web
server HTML con
programmi client-
side
Esempi:
•Javascript (script interpretati) con librerie Esecutore dei
DOM programmi client-
•Applet Java (codice precompilato side
interpretato da JVM (Java Virtual Machine)
•Ajax (rende asincrona l'interazione col
4. Programmazione lato client
5
JavaScript (creato da Netscape, 1995)
Semplice linguaggio di scripting, inserito nel codice HTML e (standardizzato da
ECMA col nome di ECMAScript)
Interpretato da una Javascript Engine
DOM (Document Object Model)
Librerie di funzioni associate a Javascript, per la manipolazione delle pagine e degli
elementi dell'interfaccia del browser
Applet Java (Java: linguaggio a oggetti creato da Sun, 1995)
Programmi già compilati in codice intermedio ("bytecode"), che viene eseguito da
una Java Virtual Machine.
Devono essere inviati dal server, e quindi per motivi di sicurezza non hanno accesso
al file system del client.
AJAX (Asynchronous JavaScript and XML)
Un gruppo di tecnologie e metodi che rendono asincrone la gestione della
interazione con l'utente e il dialogo con il web server
R.Polillo - Marzo 2013
7. AJAX (Asynchronous JavaScript and XML)
8
Da leggere:
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
R.Polillo - Marzo 2013
8. Applicazioni Web: script server-side
(pagine dinamiche)
9
Codice server-side
HTML con
programmi server- e
client-side
Browser
internet
HTTP
Web
server HTML con script
Esecutore di client-side
programmi server-
side
Esempi:
Codice generato
•script PHP (Personal Home Page Tools) server-side
•script JSP (Java Server Pages)
•Servlet Java
•…
9. La trasmissione dei dati di input
10
HTTP e HTML forniscono degli strumenti per
richiedere dati all'utente e trasmetterli al Web server
Elaborazione dati e Scrive
produzione / invio di HTML "Mario" e
una nuova pagina preme OK
GET URL', 3
Nome=mario Nome:
5
OK
1 GET (URL) 4
6
HTTP 2
Web PUT
server HTML
10. Form: esempio
11
<form method="get" action=http://www.google.com/search>
<input type="text" name="querystring">
<input type="submit" name="button1" value="Google Search">
</form>
bla bla
Al server querystring=bla+bla&button1=Google+S
earch
R.Polillo - Marzo 2013
11. Architetture a più livelli ("multi-tier")
12
Data base
Browser
internet
HTTP
db Application Web
server server server HTML con script
client-side
Pagine generate
dinamicamente
12. Come installare un sito Web?
13
Pagine Una soluzione elementare
web
Es.:
FTP Dreamweave
r
Browser Edito
r
internet
HTTP
HTTP
Web
server HTML
13. Content Management Systems (CMS)
14
Un'applicazione che permette di costruire e
Data base installare le pagine, e di servirle aai lettori
Browser
internet
HTTP
db CMS Web
server server Lettor
e
Pagine generate
dinamicamente
14. Content Management Systems (CMS)
15
Data base
Browser
internet
HTTP
db CMS Web
server server Lettor
e
Browser
Pagine generate
dinamicamente
Editor
15. Content Management Systems (CMS)
16
Browser
Data base
Amministrato
Browser re
internet
HTTP
db CMS Web
server server Lettor
e
Browser
Pagine generate
dinamicamente
Autore
16. Content Management Systems (CMS)
17
Templates Browser
Data base
Materiale autore
Materiale
amministratore Amministrato
Browser re
internet
HTTP
db CMS Web
server server Lettor
e
Browser
Pagine generate
dinamicamente
Autore
17. CMS
18
Due grandi classi di soluzioni:
Proprietarie
spesso preistallati, offrono servizi online per la costruzione
interattiva di siti, senza necessità di programmazione:
"online site builder"
Open source
il codice è disponibile e modificabile spesso con licenze
gratuite
R.Polillo - Marzo 2013
18. Online site builders
19
R.Polillo -
Marzo
2013
Applicazioni proprietarie che permettono di costruire e
pubblicare siti web interamente on-line, senza necessità di
programmazione
Il sito può essere personalizzato in vari modi: scelta del tema
grafico, uso di widget, … A volte si può personalizzare il codice
o modificare i CSS
Quasi sempre a pagamento (canone mensile), a volte servizi di
base gratuiti
Esempi:
Per blog: www.blogger.com (di Google, gratuito), …
Per siti: www.weebly.com, www.webs.com, …
Per social networks: www.ning.com, www.socialgo.com, …
19. CMS open source
20
R.Polillo -
Marzo
2013
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
Esempi:
WordPress (www.wordpress.org)
Molto semplice da usare, molto ricco di plugin pronti all’uso.
Esiste anche una versione online semplificata: www.wordpress.com
(funzionalmente limitata, molto diffusa: http://en.wordpress.com/stats/ )
Joomla (www.joomla.org)
Più complesso
Drupal (www.drupal.org)
Più complesso
20. WordPress
21
R.Polillo -
Marzo
2013
Il CMS open source più diffuso
Nato per realizzare blog nel 2003 sulla base di un
precedente sistema del 2001, ora permette di
realizzare anche siti molto sofisticati
Grande community che ne sviluppa l'ecosistema
Facile da usare, può essere personalizzato anche in
modo molto sofisticato (HTML, PhP, MySQL)
http://en.wikipedia.org/wiki/WordPress
21. 22
Blog iniziale:
tema di default
R.Polillo - Marzo 2013
23. 24
Altro tema predefinito (2
colonne)
R.Polillo - Marzo 2013
24. 25
Altro tema
predefinito: 2
colonne
R.Polillo - Marzo 2013
25. 26
Altro tema predefinito (3 colonne)
R.Polillo - Marzo 2013
26. 27
Altro tema predefinito (3
colonne)
R.Polillo - Marzo 2013
27. Esempi realizzati con WordPress
28
Versione .com:
www.corsow.wordpress.com
Versione scaricabile:
http://www.rpolillo.it
www.umanofoundation.org
http://www.stylenest.co.uk
http://mosaic-consulting.com
http://b5media.com
R.Polillo - Marzo 2013
28. Wordpress: elementi base
29
Articoli (post)
Titolo, autore, data, categorie, tag, [commenti]
Pagine (pagine statiche)
Plugin
Permettono di aggiungere funzionalità (es. widget) in
modo immediato, senza programmazione
Temi
Codice che descrive l’apparenza grafica (e altro) del
sito; possono essere cambiati con un clic
R.Polillo - Marzo 2013
29. Articoli
30
R.Polillo -
Marzo
2013
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
Hanno categorie e tag
Commenti abilitabili
Scrivibili da più autori
Pubblici, protetti da psw, privati
Pubblicazione programmabile (quando)
Generano feed RSS
30. Pagine
31
R.Polillo -
Marzo
2013
Contenuti statici
Più livelli gerarchici
Possono contenere testi e inserti multimediali (foto, video,
audio, pdf)
Commenti abilitabili
32. Temi
33
R.Polillo -
Marzo
2013
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
33. Plugin
34
R.Polillo -
Marzo
2013
Sono il punto di forza di WordPress
Permettono di estenderne le funzionalità in modo
molto facile e ampio
Ce ne sono migliaia, bisogna cercarli e provarli
34. Plugin: esempi
35
R.Polillo -
Marzo
2013
Authors Widget
Widget per selezionare i post per autore
Author exposed
Pop-up sul post con scheda autore
Enhanced Categories
Widget per selezionare i post per categorie gerarchiche
Flexo Archives
Widget per selezionare i post per data
SuperTag Widget
Widget per gestione di Tag Cloud
WP-Contact Form
Form per contatti via email
35. Plugin: esempi
36
R.Polillo -
Marzo
2013
Ultimate Google Analytics
Attiva Google Analytics sul sito
All In One SEO Pack
Definizione dei meta-tag per i motori di ricerca
Google Translator
Widget per tradurre le pagine in 32 lingue
Wp Geo
Localizza il post su una mappa Google Map
PollDaddy Polls&Ratings
Gestione questionari on-line e user-rating
AddToAny: Share/Bookmarks/Email Button
Share buttons per moltissimi siti
Dynamic Headers by Nicasio Design
Immagine di testata variabile
Slickr Flickr
Photo gallery da flickr
36. Back-office: ruoli
37
R.Polillo -
Marzo
2013
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)
NB: Il backoffice è disponibile in moltissime lingue
37. Dove installare il vostro blog
38
R.Polillo -
Marzo
2013
Potete usare per esempio www.altervista.org
Servizio di hosting gratuito, italiano
www.yourname.altervista.org
38. Altervista: due tipi di servizi
39
R.Polillo -
Marzo
2013
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/
39. Lavoro individuale
40
Installate il vostro blog Wordpress su un hoster
gratuito (es.: www.altervista.org) e iniziate a
svilupparlo
R.Polillo - Marzo 2013