0
Edizione 2013-14
Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso ...
2
Queste slides fanno parte del corso “Strumenti e applicazioni del Web”. Il
sito del corso, con il materiale completo, si...
Applicazioni Web
 Oltre che "navigare", l'utente deve poter
"interagire" con un sito, fornendo dei dati che il
sito elabo...
Applicazioni Web: script client-side
4
HTTP
internet
Browser
Web
server
HTML con script
client-side
HTML con programmi
cli...
Programmazione lato client
 JavaScript (creato da Netscape, 1995)
Semplice linguaggio di scripting, inserito nel codice H...
Esempi
<html>
<head> …. </head>
<body>
….
<script type="text/javascript">
Document.write('Hello World')
</script>
…..
</bo...
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-app...
Applicazioni Web: script server-side
(pagine dinamiche)
9
HTTP
internet
Browser
Web
server
HTML con programmi
server- e cl...
La trasmissione dei dati di input
10
HTTP
Web
server
HTML
HTTP e HTML forniscono degli strumenti per richiedere dati
all'u...
<form method="get" action=http://www.google.com/search>
<input type="text" name="querystring">
<input type="submit" name="...
Architetture a più livelli ("multi-tier")
12
HTTP
internet
Browser
Web
server HTML con script
client-side
Pagine generate
...
Come installare un sito Web?
13
HTTP
internet
Browser
Web
server
Pagine
web
Editor
HTTP
FTP
HTML
Es.:
Dreamweaver
Una solu...
Content Management Systems (CMS)
14
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
...
Content Management Systems (CMS)
15
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
...
Browser
Content Management Systems (CMS)
16
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Da...
Content Management Systems (CMS)
17
HTTP
internet
Browser
Web
server
Pagine generate
dinamicamente
CMSdb
server
Data base
...
CMS: tipologie
R.Polillo - Marzo 2014
18
Codice proprietario Codice aperto
(open source)
Codice
preinstallato
Codice da
in...
Online site builders
 Applicazioni proprietarie che permettono di costruire e
pubblicare siti web interamente on-line, se...
CMS open source
 Si deve scaricare il software e installarlo su un server
(proprio o di un provider)
 Si rivolgono a ute...
WordPress
 Il CMS open source più diffuso
 Nato per realizzare blog nel 2003 sulla base di un
precedente sistema del 200...
Blog iniziale:
tema di default
22
R.Polillo - Marzo 2014
Temi: strutture tipiche
R.Polillo -
Marzo 201423
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3...
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
ht...
Wordpress: elementi base
 Articoli (post)
Titolo, autore, data, categorie, tag, [commenti]
 Pagine (pagine statiche)
 P...
Articoli
R.Polillo -
Marzo 201430
 Sono i post del blog
 Possono contenere testi e inserti multimediali (foto, video,
au...
Pagine
R.Polillo -
Marzo 201431
 Contenuti statici
 Più livelli gerarchici
 Possono contenere testi e inserti multimedi...
R.Polillo - Marzo 201432
Temi
R.Polillo -
Marzo 201433
 Tema: codice predefinito che descrive l’apparenza grafica (e
altro) del sito
 Numerosissi...
Plugin
R.Polillo -
Marzo 201434
 Sono il punto di forza di WordPress
 Permettono di estenderne le funzionalità in modo
m...
Plugin: esempi
R.Polillo -
Marzo 201435
 Authors Widget
Widget per selezionare i post per autore
 Author exposed
Pop-up ...
Plugin: esempi
R.Polillo -
Marzo 201436
 Ultimate Google Analytics
Attiva Google Analytics sul sito
 All In One SEO Pack...
Back-office: ruoli
 Amministratore (administrator)
Può fare tutto (possono esserci più amministratori)
 Editore (editor)...
Dove installare il vostro blog
R.Polillo -
Marzo 201438
Potete usare per esempio www.altervista.org
 Servizio di hosting ...
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 in...
Upcoming SlideShare
Loading in...5
×

7. Applicazioni web e CMS

1,423

Published on

Slides delle lezioni del corso di Strumenti e applicazioni Web per il corso di laurea magistrale in teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 20 marzo 2014

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,423
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "7. Applicazioni web e CMS"

  1. 1. 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. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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>
  7. 7. Applet Java: esempio R.Polillo - Marzo 2014 7
  8. 8. AJAX (Asynchronous JavaScript and XML) R.Polillo - Marzo 2014 8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
  9. 9. 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
  10. 10. 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
  11. 11. <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+SearchAl server
  12. 12. 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
  13. 13. Come installare un sito Web? 13 HTTP internet Browser Web server Pagine web Editor HTTP FTP HTML Es.: Dreamweaver Una soluzione elementare
  14. 14. 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. 15. Content Management Systems (CMS) 15 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Lettore Browser Editor
  16. 16. Browser Content Management Systems (CMS) 16 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Autore Lettore Browser Amministratore
  17. 17. Content Management Systems (CMS) 17 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Browser Autore Lettore Browser Amministratore Templates Materiale autore Materiale amministratore
  18. 18. CMS: tipologie R.Polillo - Marzo 2014 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Blog iniziale: tema di default 22 R.Polillo - Marzo 2014
  23. 23. Temi: strutture tipiche R.Polillo - Marzo 201423 Header Colonna 1 Colonna 2 [Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne
  24. 24. Altro tema predefinito (2 colonne) 24 R.Polillo - Marzo 2014
  25. 25. Altro tema predefinito: 2 colonne 25 R.Polillo - Marzo 2014
  26. 26. Altro tema predefinito (3 colonne) 26 R.Polillo - Marzo 2014
  27. 27. Altro tema predefinito (3 colonne) 27 R.Polillo - Marzo 2014
  28. 28. 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 R.Polillo - Marzo 2014 28
  29. 29. 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 R.Polillo - Marzo 2014
  30. 30. 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
  31. 31. Pagine R.Polillo - Marzo 201431  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili
  32. 32. R.Polillo - Marzo 201432
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Altervista: due tipi di servizi R.Polillo - Marzo 201439 Massima flessibilità Massima semplicità
  40. 40. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×