5. Applicazioni Web e CMS

Edizione 2012-13

Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

Corso di Strumenti e applicazioni del Web

5. Applicazioni Web e CMSRoberto Polillo

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 2013

3

Applicazioni Web: script client-side


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


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

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

Applicazioni Web: script server-side (pagine dinamiche)


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


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


11

bla bla

querystring=bla+bla&button1=Google+Search

Al server

http://www.google.com/search

Architetture a più livelli ("multi-tier")


12

HTTPinternet

Browser

Web server HTML con script

client-side

Pagine generate dinamicamente

Applicationserver

dbserver

Data base

Come installare un sito Web?


13

HTTPinternet

Browser

Web server

Pagine web

Editor

HTTP

FTP

HTML

Es.: Dreamweaver

Una soluzione elementare

Content Management Systems (CMS)


14

HTTPinternet

Browser

Web server


CMS dbserver

Data base

Lettore

Un'applicazione che permette di costruire e installare le pagine, e di servirle aai lettori



15

HTTPinternet

Browser

Web server


CMS dbserver

Data base

Lettore

Browser

Editor

Browser



16

HTTPinternet

Browser

Web server


CMSdbserver

Data base

Autore

Lettore

Browser

Amministratore



17

HTTPinternet

Browser

Web server


CMSdbserver

Data base

Browser

Autore

Lettore

Browser

Amministratore

Templates

Materiale autore

Materiale amministratore

CMS

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 sourceil codice è disponibile e modificabile spesso con licenze gratuite


18

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 2013

http://www.blogger.com/

http://www.weebly.com/

http://www.webs.com/

http://www.ning.com/

http://www.socialgo.com/

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


http://www.wordpress.org/

http://www.wordpress.com/

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


Blog iniziale:tema di default

22


Temi: strutture tipicheR.Polillo -

Marzo 201323

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 www.umanofoundation.orghttp://www.stylenest.co.uk http://mosaic-consulting.comhttp://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

TemiCodice che descrive l’apparenza grafica (e altro) del sito; possono essere cambiati con un clic

29


ArticoliR.Polillo -

Marzo 201330

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 201331

Contenuti statici Più livelli gerarchici Possono contenere testi e inserti multimediali (foto, video,

audio, pdf) Commenti abilitabili

TemiR.Polillo -

Marzo 201333

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 201334

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 201335

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 201336

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


Dove installare il vostro blogR.Polillo -

Marzo 201338

Potete usare per esempio www.altervista.org Servizio di hosting gratuito, italiano www.yourname.altervista.org

Altervista: due tipi di serviziR.Polillo -

Marzo 201339

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/

Lavoro individuale

Installate il vostro blog Wordpress su un hoster gratuito (es.: www.altervista.org) e iniziate a svilupparlo


40

5. Applicazioni Web e CMS

Education

Transcript of 5. Applicazioni Web e CMS