5. Applicazioni Web e CMS

1,126 views
1,097 views

Published on

Slides dalle lezioni del corso di "Strumenti e applicazioni del Web", Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione del 19 marzo 2013.
Vedi anche www.corsow.wordpress.com

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

No Downloads
Views
Total views
1,126
On SlideShare
0
From Embeds
0
Number of Embeds
532
Actions
Shares
0
Downloads
61
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

5. Applicazioni Web e CMS

  1. 1. Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazioneCorso di Strumenti e applicazioni del Web5. Applicazioni Web eCMSRoberto Polillo Edizione 2012-13
  2. 2. Applicazioni Web3  Oltre che "navigare", lutente 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. 3. Applicazioni Web: script client-side4 AJAX Engine HTML con script client-side Browser internet HTTP Web server HTML con programmi client- side Esempi: •Javascript (script interpretati) con librerie Esecutore dei DOM programmi client- •Applet Java (codice precompilato side interpretato da JVM (Java Virtual Machine) •Ajax (rende asincrona linterazione col
  4. 4. Programmazione lato client5  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 dellinterfaccia 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 lutente e il dialogo con il web server R.Polillo - Marzo 2013
  5. 5. Esempi6 <html> <head> …. </head> <body> …. <script type="text/javascript"> <applet Document.write(Hello World) code="Hello class" width="200" hight="200"> </script> </applet> ….. </body> </html> R.Polillo - Marzo 2013
  6. 6. Applet Java: esempio7 R.Polillo - Marzo 2013
  7. 7. AJAX (Asynchronous JavaScript and XML)8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications R.Polillo - Marzo 2013
  8. 8. Applicazioni Web: script server-side (pagine dinamiche)9 Codice server-side HTML con programmi server- e client-side Browser internet HTTP Web server HTML con script Esecutore di client-side programmi server- side Esempi: Codice generato •script PHP (Personal Home Page Tools) server-side •script JSP (Java Server Pages) •Servlet Java •…
  9. 9. La trasmissione dei dati di input10 HTTP e HTML forniscono degli strumenti per richiedere dati allutente e trasmetterli al Web server Elaborazione dati e Scrive produzione / invio di HTML "Mario" e una nuova pagina preme OK GET URL, 3 Nome=mario Nome: 5 OK 1 GET (URL) 4 6 HTTP 2 Web PUT server HTML
  10. 10. Form: esempio11 <form method="get" action=http://www.google.com/search> <input type="text" name="querystring"> <input type="submit" name="button1" value="Google Search"> </form> bla bla Al server querystring=bla+bla&button1=Google+S earch R.Polillo - Marzo 2013
  11. 11. Architetture a più livelli ("multi-tier")12 Data base Browser internet HTTP db Application Web server server server HTML con script client-side Pagine generate dinamicamente
  12. 12. Come installare un sito Web?13 Pagine Una soluzione elementare web Es.: FTP Dreamweave r Browser Edito r internet HTTP HTTP Web server HTML
  13. 13. Content Management Systems (CMS)14 Unapplicazione che permette di costruire e Data base installare le pagine, e di servirle aai lettori Browser internet HTTP db CMS Web server server Lettor e Pagine generate dinamicamente
  14. 14. Content Management Systems (CMS)15 Data base Browser internet HTTP db CMS Web server server Lettor e Browser Pagine generate dinamicamente Editor
  15. 15. Content Management Systems (CMS)16 Browser Data base Amministrato Browser re internet HTTP db CMS Web server server Lettor e Browser Pagine generate dinamicamente Autore
  16. 16. Content Management Systems (CMS)17 Templates Browser Data base Materiale autore Materiale amministratore Amministrato Browser re internet HTTP db CMS Web server server Lettor e Browser Pagine generate dinamicamente Autore
  17. 17. CMS18 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 source il codice è disponibile e modificabile spesso con licenze gratuite R.Polillo - Marzo 2013
  18. 18. Online site builders 19R.Polillo - Marzo 2013  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, …
  19. 19. CMS open source 20R.Polillo - Marzo 2013  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
  20. 20. WordPress 21R.Polillo - Marzo 2013  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 lecosistema  Facile da usare, può essere personalizzato anche in modo molto sofisticato (HTML, PhP, MySQL)  http://en.wikipedia.org/wiki/WordPress
  21. 21. 22 Blog iniziale: tema di default R.Polillo - Marzo 2013
  22. 22. Temi: strutture tipiche 23R.Polillo - Marzo 2013 Header 1, 2 o 3 colonne [Menu orizzontale] Colonna 1 Colonna 2 [Colonna 3] Footer
  23. 23. 24 Altro tema predefinito (2 colonne) R.Polillo - Marzo 2013
  24. 24. 25 Altro tema predefinito: 2 colonne R.Polillo - Marzo 2013
  25. 25. 26 Altro tema predefinito (3 colonne) R.Polillo - Marzo 2013
  26. 26. 27 Altro tema predefinito (3 colonne) R.Polillo - Marzo 2013
  27. 27. Esempi realizzati con WordPress28 Versione .com: www.corsow.wordpress.com Versione scaricabile: http://www.rpolillo.it www.umanofoundation.org http://www.stylenest.co.uk http://mosaic-consulting.com http://b5media.com R.Polillo - Marzo 2013
  28. 28. Wordpress: elementi base29  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 R.Polillo - Marzo 2013
  29. 29. Articoli 30R.Polillo - Marzo 2013  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
  30. 30. Pagine 31R.Polillo - Marzo 2013  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili
  31. 31. 32 R.Polillo - Marzo 2013
  32. 32. Temi 33R.Polillo - Marzo 2013  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
  33. 33. Plugin 34R.Polillo - Marzo 2013  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
  34. 34. Plugin: esempi 35R.Polillo - Marzo 2013  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
  35. 35. Plugin: esempi 36R.Polillo - Marzo 2013  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
  36. 36. Back-office: ruoli 37R.Polillo - Marzo 2013  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
  37. 37. Dove installare il vostro blog 38R.Polillo - Marzo 2013 Potete usare per esempio www.altervista.org  Servizio di hosting gratuito, italiano  www.yourname.altervista.org
  38. 38. Altervista: due tipi di servizi 39R.Polillo - Marzo 2013 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/
  39. 39. Lavoro individuale40  Installate il vostro blog Wordpress su un hoster gratuito (es.: www.altervista.org) e iniziate a svilupparlo R.Polillo - Marzo 2013

×