Edizione 2013-14
Università degli Studi di Milano BicoccaDipartimento 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"
R.Polillo - Marzo 2014
3
Applicazioni Web: script client-side
R.Polillo - Marzo 2014
4
HTTPinternet
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
R.Polillo - Marzo 2014
5
Esempi
<html> <head> …. </head> <body> …. <script type="text/javascript"> Document.write('Hello World') </script> ….. </body></html>
R.Polillo - Marzo 2014
6
<applet code="Hello class" width="200" hight="200"> </applet>
Applet Java: esempio
R.Polillo - Marzo 2014
7
AJAX (Asynchronous JavaScript and XML)
R.Polillo - Marzo 2014
8
Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
Applicazioni Web: script server-side (pagine dinamiche)
R.Polillo - Marzo 2014
9
HTTPinternet
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 diprogrammi server-side
Codice server-side
La trasmissione dei dati di input
R.Polillo - Marzo 2014
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
35
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
R.Polillo - Marzo 2014
11
bla bla
querystring=bla+bla&button1=Google+Search
Al server
Architetture a più livelli ("multi-tier")
R.Polillo - Marzo 2014
12
HTTPinternet
Browser
Web server HTML con script
client-side
Pagine generate dinamicamente
Applicationserver
dbserver
Data base
Come installare un sito Web?
R.Polillo - Marzo 2014
13
HTTPinternet
Browser
Web server
Pagine web
Editor
HTTP
FTP
HTML
Es.: Dreamweaver
Una soluzione elementare
Content Management Systems (CMS)
R.Polillo - Marzo 2014
14
HTTPinternet
Browser
Web server
Pagine generate dinamicamente
CMS dbserver
Data base
Lettore
Un'applicazione che permette di costruire e installare le pagine, e di servirle ai lettori
Content Management Systems (CMS)
R.Polillo - Marzo 2014
15
HTTPinternet
Browser
Web server
Pagine generate dinamicamente
CMS dbserver
Data base
Lettore
Browser
Editor
Browser
Content Management Systems (CMS)
R.Polillo - Marzo 2014
16
HTTPinternet
Browser
Web server
Pagine generate dinamicamente
CMSdbserver
Data base
Autore
Lettore
Browser
Amministratore
Content Management Systems (CMS)
R.Polillo - Marzo 2014
17
HTTPinternet
Browser
Web server
Pagine generate dinamicamente
CMSdbserver
Data base
Browser
Autore
Lettore
Browser
Amministratore
Templates
Materiale autore
Materiale amministratore
18
CMS: tipologie
R.Polillo - Marzo 2014
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.:wordpressJoomladrupal
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
R.Polillo - Marzo 2014
Temi: strutture tipicheR.Polillo -
Marzo 201423
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3 colonne
Altro tema predefinito (2 colonne)
24
R.Polillo - Marzo 2014
Altro tema predefinito: 2 colonne
25
R.Polillo - Marzo 2014
Altro tema predefinito (3 colonne)
26
R.Polillo - Marzo 2014
Altro tema predefinito (3 colonne)
27
R.Polillo - Marzo 2014
Esempi realizzati con WordPress
Versione .com:www.corsow.wordpress.com Versione scaricabile:http://www.rpolillo.it http://www.stylenest.co.uk http://mosaic-consulting.comhttp://b5media.com
R.Polillo - Marzo 2014
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
TemiCodice che descrive l’apparenza grafica (e altro) del sito; possono essere cambiati con un clic
29
R.Polillo - Marzo 2014
ArticoliR.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
PagineR.Polillo -
Marzo 201431
Contenuti statici Più livelli gerarchici Possono contenere testi e inserti multimediali (foto, video,
audio, pdf) Commenti abilitabili
R.Polillo - Marzo 201432
TemiR.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
PluginR.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: esempiR.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: esempiR.Polillo -
Marzo 201436
Ultimate Google AnalyticsAttiva Google Analytics sul sito
All In One SEO PackDefinizione 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&RatingsGestione 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 FlickrPhoto 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 blogR.Polillo -
Marzo 201438
Potete usare per esempio www.altervista.org Servizio di hosting gratuito, italianowww.yourname.altervista.org
Altervista: due tipi di serviziR.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
R.Polillo - Marzo 2014
40
Top Related