5. Applicazioni Web e CMS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

5. Applicazioni Web e CMS

on

  • 1,111 views

Slides dalle lezioni del corso di "Strumenti e applicazioni del Web", Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13 ...

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

Statistics

Views

Total Views
1,111
Views on SlideShare
604
Embed Views
507

Actions

Likes
1
Downloads
54
Comments
0

1 Embed 507

http://corsow.wordpress.com 507

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5. Applicazioni Web e CMS Presentation Transcript

  • 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. 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. 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. 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. 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. Applet Java: esempio7 R.Polillo - Marzo 2013
  • 7. AJAX (Asynchronous JavaScript and XML)8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications R.Polillo - Marzo 2013
  • 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. 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. 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. 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. 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. 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. Content Management Systems (CMS)15 Data base Browser internet HTTP db CMS Web server server Lettor e Browser Pagine generate dinamicamente Editor
  • 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. 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. 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. 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. 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. 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. 22 Blog iniziale: tema di default R.Polillo - Marzo 2013
  • 22. Temi: strutture tipiche 23R.Polillo - Marzo 2013 Header 1, 2 o 3 colonne [Menu orizzontale] Colonna 1 Colonna 2 [Colonna 3] Footer
  • 23. 24 Altro tema predefinito (2 colonne) R.Polillo - Marzo 2013
  • 24. 25 Altro tema predefinito: 2 colonne R.Polillo - Marzo 2013
  • 25. 26 Altro tema predefinito (3 colonne) R.Polillo - Marzo 2013
  • 26. 27 Altro tema predefinito (3 colonne) R.Polillo - Marzo 2013
  • 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. 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. 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. Pagine 31R.Polillo - Marzo 2013  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili
  • 31. 32 R.Polillo - Marzo 2013
  • 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. 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. 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. 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. 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. 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. 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. Lavoro individuale40  Installate il vostro blog Wordpress su un hoster gratuito (es.: www.altervista.org) e iniziate a svilupparlo R.Polillo - Marzo 2013