7. Applicazioni web e CMS

Edizione 2013-14
Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
7. Le applicazioni Web e i CMS
Roberto Polillo

2
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il
sito del corso, con il materiale completo, si trova in
www.corsow.wordpress.com . Data la rapida evoluzione della rete, il corso
viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons
“Attribuzione - Non commerciale - Condividi allo stesso modo – 3.0”
(http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e
alle screen shots, i cui diritti restano in capo ai rispettivi proprietari,
che, ove possibile, sono stati indicati. L'autore si scusa per eventuali
omissioni, e resta a disposizione per correggerle.
R.Polillo - Marzo 2014
Queste slides

Applicazioni Web
 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"
3

Applicazioni Web: script client-side
4
HTTP
internet
Browser
Web
server
HTML con script
client-side
HTML con programmi
client-side
Esecutore dei
programmi client-side
Esempi:
• Javascript (script interpretati) con librerie DOM
• Applet Java (codice precompilato interpretato
da JVM (Java Virtual Machine)
• Ajax (rende asincrona l'interazione col server)
AJAX Engine

Programmazione lato client
 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
5

Esempi
<html>
<head> …. </head>
<body>
….
<script type="text/javascript">
Document.write('Hello World')
</script>
…..
</body>
</html>
6
<applet
code="Hello class" width="200" hight="200">
</applet>

Applet Java: esempio
7

AJAX (Asynchronous JavaScript and XML)
8
Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

Applicazioni Web: script server-side
(pagine dinamiche)
9
HTTP
internet
Browser
Web
server
HTML con programmi
server- e client-side
HTML con script
client-side
Esempi:
•script PHP (Personal Home Page Tools)
•script JSP (Java Server Pages)
•Servlet Java
•…
Codice generato
server-side
Esecutore di
programmi server-side
Codice server-side

La trasmissione dei dati di input
10
HTTP
Web
server
HTML
HTTP e HTML forniscono degli strumenti per richiedere dati
all'utente e trasmetterli al Web server
GET (URL)
1
HTML
PUT
2
Nome:
OK
3
5
GET URL', Nome=mario
4
Scrive "Mario"
e preme OK
6
Elaborazione dati e
produzione / invio di
una nuova pagina

<form method="get" action=http://www.google.com/search>
<input type="text" name="querystring">
<input type="submit" name="button1" value="Google Search">
</form>
Form: esempio
11
bla bla
querystring=bla+bla&button1=Google+SearchAl server

Architetture a più livelli ("multi-tier")
12
HTTP
internet
Browser
Web
server HTML con script
client-side
Pagine generate
dinamicamente
Application
server
db
server
Data base

Come installare un sito Web?
13
HTTP
internet
Browser
Web
server
Pagine
web
Editor
HTTP
FTP
HTML
Es.:
Dreamweaver
Una soluzione elementare

Content Management Systems (CMS)
14
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
Lettore
Un'applicazione che permette di costruire e
installare le pagine, e di servirle ai lettori

15
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
Lettore
Browser
Editor

Browser
16
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
Autore
Lettore
Browser
Amministratore

17
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
Browser
Autore
Lettore
Browser
Amministratore
Templates
Materiale autore
Materiale amministratore

CMS: tipologie
18
Codice proprietario Codice aperto
(open source)
Codice
preinstallato
Codice da
installare
“Online site builders”
Es.:
blogger (Google)
Weebly, Webs,
Ning, Socialgo, …
Es.:
www.wordpress.com
….
Es.:
wordpress
Joomla
drupal

Online site builders
 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, …
19R.Polillo -
Marzo 2014

CMS open source
 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
20R.Polillo -
Marzo 2014

WordPress
 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
21R.Polillo -
Marzo 2014

Blog iniziale:
tema di default
22

Temi: strutture tipiche
R.Polillo -
Marzo 201423
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne

Altro tema predefinito (2 colonne)
24

Altro tema predefinito:
2 colonne
25

26

27

Esempi realizzati con WordPress
Versione .com:
www.corsow.wordpress.com
Versione scaricabile:
http://www.rpolillo.it
http://www.stylenest.co.uk
http://mosaic-consulting.com
http://b5media.com
28

Wordpress: elementi base
 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
29

Articoli
R.Polillo -
Marzo 201430
 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

Pagine
R.Polillo -
Marzo 201431
 Contenuti statici
 Più livelli gerarchici
 Possono contenere testi e inserti multimediali (foto, video,
audio, pdf)
 Commenti abilitabili

Temi
R.Polillo -
Marzo 201433
 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

Plugin
R.Polillo -
Marzo 201434
 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

Plugin: esempi
R.Polillo -
Marzo 201435
 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

Plugin: esempi
R.Polillo -
Marzo 201436
 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

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)
NB: Il backoffice è disponibile in moltissime lingue
37R.Polillo -
Marzo 2014

Dove installare il vostro blog
R.Polillo -
Marzo 201438
Potete usare per esempio www.altervista.org
 Servizio di hosting gratuito, italiano
www.yourname.altervista.org

Altervista: due tipi di servizi
R.Polillo -
Marzo 201439
Massima flessibilità
Massima semplicità

Lavoro individuale
 Installate il vostro blog Wordpress su un servizio di
hosting gratuito (es.: www.altervista.org) e iniziate
a sperimentarlo
40

7. Applicazioni web e CMS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 7. Applicazioni web e CMS

Ähnlich wie 7. Applicazioni web e CMS (20)

Mehr von Roberto Polillo

Mehr von Roberto Polillo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

7. Applicazioni web e CMS