Applicazioni basate sulle tecnologie web Realizzare siti web

Applicazioni basate sulle tecnologie web
Le tecnologie web di cui abbiamo parlato sin qui
architettura client-server, HTTP, HTML, fogli di stile, linguaggi di scripting
client-side come Javascript o server-side come PHP, tecnologie come le
Java Servlet, AJAX e le Open API, ...
possono essere utilizzate direttamente, per costruire siti,
servizi e applicazioni Web, o (molto più spesso)
indirettamente, per costruire strumenti che a loro volta
supportano la costruzione di siti e applicazioni Web
Alcuni esempi: motori di ricerca, sistemi per la
costruzione/gestione di blog, social app, Content Managment
Systems sistemi di ee-commerce
Systems,
commerce, ...
tecnologie
Web
a.a. 2015/16
usate per
costruire
strumenti
(CMS, ecc...)
usati per
costruire
usate per costruire
siti, servizi
e app Web
Tecnologie Web
1
Realizzare siti web - I
Per realizzare un sito (servizio/app) web:
1. Scegliere una modalità di hosting
2. Registrare il dominio
3. Progettare il sito (servizio/app)
4. Creare i contenuti (e pianificarne la gestione successiva)
5. Realizzare il sito (servizio/app) e testarlo
6. Promuovere il sito (servizio/app)
[Burigat, 2012] S. Burigat, Corso di commercio elettronico, a.a. 2012/2013,
Di di Matematica
Dip.
M t
ti e Informatica,
I f
ti Università
U i
ità di Udi
Udine:
users.dimi.uniud.it/~stefano.burigat/materialeEC_2012.htm
a.a. 2015/16
Tecnologie Web
2
1
Realizzare siti web - II
1. Scegliere una modalità di hosting:

Sitebuilder service: spazio su disco + servizi per la
realizzazione del sito (es. hosting.aruba.it,
it.altervista.org/crea sito gratis.php)
it.altervista.org/crea-sito-gratis.php)

ISP hosting service: spazio su disco + software (Web
Server, interpreti, DBMS, ...) fornito da un Internet
Service Provider; la progettazione e la realizzazione del
sito sono demandate all'azienda

Web hosting service: spazio su disco + software + servizi
vari (design e realizzazione del sito, statistiche, …) forniti
da un'azienda specializzata (software house/web agency)

Self-hosting: gestione del sito totalmente interna
all'azienda; richiede hardware/software e personale
dedicato
a.a. 2015/16
Tecnologie Web
3
Realizzare siti web - III
2. Registrare il dominio (www.mysite.com)

la registrazione di un nome di dominio viene generalmente
fatta attraverso un Internet Service Provider o una software
house/web agency ed ha un costo fisso annuale
(generalmente molto basso)

suggerimenti per la scelta del nome di dominio:
 scegliere un nome facile da ricordare
 evitare numeri e caratteri speciali (a meno che non
facciano parte del brand)
 registrare
it
anche
h nomii simili,
i ili se possibile
ibil (es.
( Gogle)
G l )
 registrare più domini di primo livello (.it, .com, .org,
.biz, ...)
a.a. 2015/16
Tecnologie Web
4
2
Realizzare siti web - IV
3. Progettare il sito (servizio/app)
4. Creare i contenuti (e pianificarne la gestione successiva)
 Architettura dell'Informazione (AI)
obiettivo pprincipale
p = organizzazione
g
((logica)
g ) dei
contenuti, al fine di renderli facilmente reperibili; es.
struttura delle voci di menu, sotto-menu, ecc.
 Layout e grafica
coerenti con l'AI e con l'immagine dell'azienda
 Contenuti veri e propri
informazioni veicolare attraverso testi ed elementi
multimediali (immagini
(immagini, video,
video ...))
 Aggiornamento
una volta creati, i contenuti dovranno essere
costantemente aggiornati! occorre prevedere figure e
modalità di tale aggiornamento...
a.a. 2015/16
Tecnologie Web
5
Realizzare siti web - V
5. Realizzare il sito (servizio/app) e testarlo

scegliere gli strumenti per realizzare il sito
 CMS [[vedi slide successive]]

testare il sito con diversi browser e diversi dispositivi
(tablet, smartphone, ...)
Il tutto (3, 4, 5)... tenendo conto di Accessibilità e Usabilità!!!
a.a. 2015/16
Tecnologie Web
6
3
Realizzare siti web: usabilità - I
Usabilità = l'efficacia, l'efficienza e la
soddisfazione con cui specifici utenti
raggiungono specifici obiettivi in
particolari ambienti [ISO - 9241-11, 1998]
Definizione di Nielsen
[J. Nielsen, Web Usability, Apogeo, 2000]
 un prodotto è usabile quando:
 il suo uso è facile da apprendere e da ricordare
 induce pochi errori d'interazione (e non gravi)
 consente un utilizzo efficiente
 è piacevole da usare
Donald A. Norman,
La caffettiera del
masochista, Giunti
Editore, 1996
• Esempio di principio fondamentale di usabilità: un sito web
usabile non deve sovraccaricare cognitivamente l'utente  x es.
deve utilizzare una chiara gerarchia visiva (cose più importanti in
rilievo), minimizzare il "rumore" (evitare il sovraffollamento della
pagina), rendere gli elementi nella pagina facilmente identificabili
a.a. 2015/16
Tecnologie Web
7
Realizzare siti web: accessibilità - I
Accessibilità = la capacità di un sito web di essere acceduto
efficacemente [...] da utenti diversi in differenti contesti.
Rendere un sito web accessibile significa permettere l'accesso
all'informazione contenuta nel sito anche a persone con
di bili à fi
disabilità
fisiche
i h di di
diverso tipo
i e a chi
hi dispone
di
di strumentii
hardware e software limitati [www.w3c.it/it/7/l-accessibilit-.html]
• Esempi di applicazione dei principi di accessibilità:
– tutte le informazioni rilevanti devono essere disponibili ad uno
screen reader (strumento utilizzati dai non-vedenti per accedere
al web)
(es audio)
– fornire CAPTCHA non solo visivi (es.
Riferimenti bibliografici:
 W3C Web Content Accessibility Guidelines (WCAG) 2.0:
www.w3.org/TR/WCAG20
 Crevola A. e Gena C., Web Design, Citta Studi Edizioni, 2006
a.a. 2015/16
Tecnologie Web
8
4
Realizzare siti web - VI
6. Promuovere il sito (servizio/app)



SEO [vedi slide successive]
connessione
i
con profili
fili suii social
i l
... ogni azione di marketing che si ritiene efficace!
a.a. 2015/16
Tecnologie Web
9
Content Management Systems - I
Un CMS (Content Management System)...
non è "nient'altro" che un'applicazione Web basata sulle
tecnologie web di cui abbiamo parlato sin qui (architettura
client-server, HTTP, HTML, fogli di stile, linguaggi di
scripting client-side come Javascript o server-side come PHP,
tecnologie come le Java Servlet, AJAX e le Open API, ...)
NB: osservate ciò che vedete quando utilizzate un CMS:
form, invio request con parametri, esecuzione di un
programma server-side che accede (in lettura e scrittura) ad
un database,
database invio response
response...
tecnologie
Web
a.a. 2015/16
usate per
costruire
CMS
Tecnologie Web
usati per
costruire
siti, servizi
e app Web
10
5
Content Management Systems - II
• CMS (Content Management System) = software che supporta
la creazione (eventualmente collaborativa), l'organizzazione e
la gestione di contenuti di vario genere...
• I CMS sono usati per la gestione di siti/servizi/app web di
diverso tipo (forum, blog, social, servizi di condivisione, ...)
• Esistono CMS specializzati per la creazione/gestione di una
specifica tipologia di app e CMS "generali" (che vedremo...)
es. di CMS per creare e gestire blog(*): Google Blogger 
www.blogger.com; Io Bloggo  www.iobloggo.com; Altervista 
it.altervista.org/crea-blog-gratis.php)
(*) blog = web app che permette ad un autore di pubblicare
contenuti (post) su una pagina web (anche senza conoscere HTML)
e ai lettori di pubblicare commenti
 esempi di blog...
a.a. 2015/16
Tecnologie Web
11
Content Management Systems - III
A. Ferretti (su Il Fatto Quotidiano):
www.ilfattoquotidiano.it/blog/aferretti/
SEO Cafè di A. Sardo
andreasardo wordpress com
andreasardo.wordpress.com
a.a. 2015/16
Tecnologie Web
12
6
Content Management Systems - IV
I CMS tipicamente sono costruiti con tecnologie server-side
(PHP, Servlet, ...), eventualmente asincrone (AJAX), e si
appoggiano sempre su un database
 un CMS è un'applicazione
pp
web ((installata su un server)) che
si suddivide in due parti:
• Backend = da cui si gestisce il sito/servizio; viene utilizzata
dal web master per controllare e modificare aspetto e
funzionalità del sito e dagli autori per gestire i contenuti
• Frontend = visibile agli utenti finali (il sito/servizio web)
modifica...
difi
Server
(CMS)
a.a. 2015/16
client (accesso
al back-end)
client (accesso
al front-end)
gestione del
sito/servizio
visualizzazione
del sito/servizio
Tecnologie Web
13
Content Management Systems - V
Backend
((strumentii di
amministrazione e
gestione contenuti)
Frontend
(sito/servizio)
a.a. 2015/16
Tecnologie Web
14
7
Content Management Systems - VI
Funzionalità del backend:
• è molto importante separare:
– gli interventi sugli aspetti grafici e strutturali del sito
– l'aggiornamento
gg
dei contenuti
le due cose hanno cadenze temporali diverse, richiedono
competenze diverse  sono tipicamente fatte da persone
diverse
 Un CMS consente
– al web master di costruire (ed eventualmente modificare)
il template
p
del sito ((aspetti
p
grafici
g
e di layout:
y
colori,,
colonne, caratteri, ecc... + struttura dei contenuti)
– agli autori di inserire (ed aggiornare) i contenuti (news,
articoli, immagini, allegati, ...)
a.a. 2015/16
Tecnologie Web
15
Content Management Systems - VII
Principali vantaggi dell'uso di un CMS per la creazione e
gestione di un sito/servizio/app web:
• Possibilità di costruire e aggiornare un sito/servizo/app web
senza conoscere i linguaggi
g gg di programmazione
p g
e markup
p
(anche se questo è parzialmente falso... come diremo tra poco!)
• Manutenzione e aggiornamento del sito/servizio/app facilitati
(ci si dimentica spesso dell'importanza della manutenzione del
sito e dell'importanza dell'aggiornamento dei contenuti...)
• Separazione di codice di programmazione, grafica/layout
(template) e contenuti
 possibilità
ibili à di applicare
li
lo
l stesso template
l a contenutii
differenti (es: il layout viene automaticamente rispettato
quando si inseriscono nuovi contenuti)
 possibilità di utilizzare template differenti per un unico
contenuto
a.a. 2015/16
Tecnologie Web
16
8
Content Management Systems - VIII
• Disponibilità di funzionalità aggiuntive: i CMS includono
spesso dei componenti aggiuntivi (moduli, estensioni, plugin)
utili per inserire nel sito/servizio/app gallerie fotografiche,
forum, sondaggi, funzionalità di e-commerce, ecc...)
• Definizione di diversi profili di utenti, con diversi privilegi
(es: possibilità di modifica dei contenuti, del template, della
configurazione del CMS stesso, ecc...)
• Gestione multi-utente e redazione distribuita (in particolare,
essendo applicazioni web-based, l'interazione con il backend
avviene generalmente via browser  utenti anche dislocati in
sedi lontane tra loro possono aggiornare i contenuti e gestire il
sito/servizio/app con un semplice collegamento ad Internet)
• Sicurezza: i CMS offrono soluzioni ai principali problemi di
sicurezza (chi costruisce e gestisce il sito/servizio/app non deve
necessariamente essere un esperto di sicurezza...)
a.a. 2015/16
Tecnologie Web
17
Content Management Systems - IX
Principali limiti dei CMS:
• Rigidità: i CMS consentono generalmente di inserire i
contenuti in sezioni prestabilite dal template, collocate in zone
fisse della ppagina
g e con layout
y
ppreimpostati
p
 se un utente
vuole personalizzare queste impostazioni, posizionando i
contenuti a proprio piacimento o modificando le funzionalità
di alcune componenti, dovrà modificare direttamente il
codice sorgente del sistema stesso
 spesso le aziende decidono di affidarsi a programmi
progettati su misura, altamente personalizzati e specializzati
sulla base delle proprie esigenze
esigenze, realizzati da software
house/web agency specializzate
• Complessità: I CMS possono essere applicazioni molto
complesse e il loro utilizzo non è sempre così semplice!
a.a. 2015/16
Tecnologie Web
18
9
Content Management Systems - X
Spezziamo una lancia a favore dei CMS open source...
• offrono l'opportunità ad utenti e aziende di essere presenti
online con bassi investimenti (sono generalmente scaricabili
gratuitamente dal web)
• possono essere personalizzati con l'aggiunta di componenti
specifici (gratuiti o a pagamento)
• avendo a disposizione il codice sorgente, gli utenti più esperti
possono liberamente modificare il software in base alle
proprie esigenze
• in caso di problemi è possibile contare sulle community di
sviluppatori, in grado di fornire supporto generalmente
costante e tempestivo (tipicamente, più il sistema è diffuso,
più è ampia la comunità di sviluppatori)
a.a. 2015/16
Tecnologie Web
19
CMS: esempi - I
Alcuni esempi di CMS open source
[trovate un elenco più ricco nella tesi di Elisa Profico]
Wordpress [it.wordpress.org]
p
nasce come ppiattaforma pper la gestione
g
di blog.
g
Wordpress
E' scritto in PHP ed attualmente è forse il CMS più polare ed
utilizzato; ha una ricca documentazione online e la
community è una delle più attive.
Per gli utenti che non hanno familiarità con HTML o altri
linguaggi di programmazione web, Wordpress fornisce un
editor WYSIWYG (What You See Is What You Get) piuttosto
semplice da usare; anche il pannello di amministrazione
(backend) è semplice ed intuitivo; supporta anche la gestione
di contenuti multimediali ed offre un'ampia scelta di template
e componenti aggiuntivi
a.a. 2015/16
Tecnologie Web
20
10
CMS: esempi - II
Joomla! [www.joomla.it]
scritto in PHP, distribuito gratuitamente sotto licenza
GNU/GPL, è un CMS molto noto e molto usato; supporta la
gestione di molti aspetti di un sito web (aggiunta e modifica
di contenuti, creazione di gallerie di immagini, realizzazione
di sistemi di prenotazioni o vendita on-line) ed esiste una
comunità mondiale molto attiva (utilizzatori, designers,
traduttori e sostenitori) suddivisa in comunità nazionali, che
forniscono supporto e documentazione agli utilizzatori del
CMS.
Ci sono moltisimi template e componenti aggiuntivi
(estensioni) disponibili (sia gratuiti sia a pagamento)
a.a. 2015/16
Tecnologie Web
21
CMS: esempi - III
Drupal [drupal.org]
è un CMS caratterizzato da una comunità molto ampia e
attiva; è dotato di moltissimi moduli opzionali che
aggiungono molte caratteristiche interessanti come forum,
blog, profili, ecc... ed è particolarmente indicato per siti con
caratteristiche Web 2.0 e social.
Una delle caratteristiche più popolari di Drupal è il modulo
Taxonomy, che permette di strutturare tutti i tipi di contenuti
in categorie a livelli e tipologie multiple
Plone [plone.org]
è un CMS molto utilizzato soprattutto nella Pubblica
Amministrazione; è supportato da una community tra le più
grandi al mondo
a.a. 2015/16
Tecnologie Web
22
11
CMS: esempi - IV
OpenCMS [www.opencms.org]
è basato su tecnologie Java e XML, è compatibile sia con
ambienti open source (Linux, Apache, Tomcat, MySQL o
PostgreSQL) sia con ambienti proprietari (Windows, IIS,
Oracle).
Comprende una sezione per la creazione di template e rende
disponibili, oltre alle funzionalità di base, moduli ufficiali
aggiuntivi sia rilasciati dagli stessi sviluppatori del prodotto
sia da sviluppatori terzi (gestione articoli, funzionalità di
ricerca estese, form con invio di email)
Tra le funzionalità base offre un editor WYSIWYG per la
pubblicazione di pagine anche con layout complessi (senza
necessità di conoscenza del linguaggio HTML), un motore
di workflow (gestione di processi) con notifiche via e-mail e
un sistema di gestione delle versioni per tenere traccia delle
modifiche effettuate
a.a. 2015/16
Tecnologie Web
23
CMS: esempi - V
XOOPS [xoops.org]
acronimo di eXtensible Object Oriented Portal System, è
scritto in PHP e distribuito sotto licenza GNU/GPL; ha, tra i
suoi maggiori punti di forza, oltre alla semplicità
dell'interfaccia utente, la presenza di una struttura fortemente
modulare (si possono installare, attivare o disattivare
componenti in modo molto semplice, tramite il pannello di
amministrazione); è altamente personalizzabile
Concrete5 [www.concrete5.it]
è considerato un CMS ideale per chi non possiede ampie
competenze informatiche: ll'interfaccia
interfaccia di amministrazione
user-friendly consente di aggiungere, modificare ed
eliminare pagine dal proprio sito web in maniera molto
semplice
a.a. 2015/16
Tecnologie Web
24
12
CMS: come scegliere? - I
Se un'organizzazione decide di utilizzare un CMS, come fa a
scegliere?!? Esistono sostanzialmente 3 opzioni:
• realizzare (o commissionare) un CMS su misura
 vantaggi: probabilmente ben rispondente alle esigenze
dell'organizzazione
 svantaggi: alti costi di sviluppo; tempi di sviluppo lunghi
• acquistare un CMS proprietario
 vantaggi: collaudato, tempi di sviluppo brevi, assistenza
 svantaggi: poco personalizzabile, costi alti
• scegliere un CMS open source
 vantaggi: costi bassi, personalizzabile, supporto dalla
comunità di utenti e sviluppatori
 svantaggi: necessità di competenze tecniche per la
personalizzazione e la manutenzione
a.a. 2015/16
Tecnologie Web
25
CMS: come scegliere? - II
Alcuni ulteriori parametri significativi che possono orientare
la scelta del CMS:
• Costo
• Tipo di licenza
• Requisiti di sistema
caratteristiche del software necessarie al suo funzionamento;
dipendono, per es, dalla tecnologia su cui si basa il CMS:
linguaggio (PHP, Java, ...), tipo di DBMS, ecc...
• Sicurezza
tra le principali problematiche dei CMS (in particolare quelli
open source) c'è
c è il rischio di una alta vulnerabilità
(malintenzionati possono prendere il controllo del sito,
modificandone i contenuti, creando e rimuovendo utenti, ecc...);
una delle prime regole di sicurezza, è quella di aggiornare
frequentemente il CMS con le nuove versioni
a.a. 2015/16
Tecnologie Web
26
13
CMS: come scegliere? - III
• Supporto
la presenza di una community attiva consente di interagire con gli
sviluppatori in caso di problemi (bug o errori particolari del sistema),
ma anche per esigenze particolari
• Facilità d'uso
dell'interfaccia utente, delle modalità di inserimento dei contenuti e
della personalizzazione del template
• Disponibilità di applicazioni integrate e funzionalità
aggiuntive
• Flessibilità (personalizzabilità)
della gestione dei contenuti, dell'amministrazione e della
configurazione
fi
i
del
d l CMS
• Interoperabilità
possibilità di interagire con altri sistemi software (es. supporto alla
generazione di contenuti in formato RSS)
[Trovate un confronto dettagliato tra CMS nella tesi di E. Profico]
a.a. 2015/16
Tecnologie Web
27
Suggerimenti bibliografici
(oltre ai link segnalati nelle slide...)
• Elisa Profico, Marketing e comunicazione digitale: analisi dei
Content Management System Open Source e presentazione di un
caso d'uso in un contesto aziendale, Tesi di Laurea Mag. in
P d eO
Produz.
Organizzaz.
i
ddella
ll Comunicaz.
C
i
e della
d ll Conoscenza,
C
Univ. di Torino, a.a. 2011/12
[www.di.unito.it/~goy/materiale/1516/estrattoTesiProfico.pdf]
Capitoli suggeriti:
– Cap. 4 – Content Management System
– Cap. 5 – Analisi comparativa...
Un articolo interessante:
Cosimo Baviera, Professionalità nel web, giugno 2009
[www.joomla.it/articoli-della-community/3338-professionalita-nel-web.html]
a.a. 2015/16
Tecnologie Web
28
14