7. Applicazioni web e CMS

  • 1,201 views
Uploaded 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 …

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,201
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
44
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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. 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. 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. 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. 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. Applet Java: esempio R.Polillo - Marzo 2014 7
  • 8. AJAX (Asynchronous JavaScript and XML) R.Polillo - Marzo 2014 8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
  • 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. 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. <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. 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. Come installare un sito Web? 13 HTTP internet Browser Web server Pagine web Editor HTTP FTP HTML Es.: Dreamweaver Una soluzione elementare
  • 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. Content Management Systems (CMS) 15 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Lettore Browser Editor
  • 16. Browser Content Management Systems (CMS) 16 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Autore Lettore Browser Amministratore
  • 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. 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. 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. 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. 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. Blog iniziale: tema di default 22 R.Polillo - Marzo 2014
  • 23. Temi: strutture tipiche R.Polillo - Marzo 201423 Header Colonna 1 Colonna 2 [Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne
  • 24. Altro tema predefinito (2 colonne) 24 R.Polillo - Marzo 2014
  • 25. Altro tema predefinito: 2 colonne 25 R.Polillo - Marzo 2014
  • 26. Altro tema predefinito (3 colonne) 26 R.Polillo - Marzo 2014
  • 27. Altro tema predefinito (3 colonne) 27 R.Polillo - Marzo 2014
  • 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. 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. 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. Pagine R.Polillo - Marzo 201431  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili
  • 32. R.Polillo - Marzo 201432
  • 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. 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. 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. 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. 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. 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. Altervista: due tipi di servizi R.Polillo - Marzo 201439 Massima flessibilità Massima semplicità
  • 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