5. Applicazioni Web e CMS
Download as PPT, PDF2 likes933 views
Il documento discute le applicazioni web e i CMS, evidenziando l'importanza della possibilità di interazione degli utenti con i siti. Viene presentata una panoramica delle tecnologie client-side e server-side, come JavaScript, AJAX e PHP, e vengono confrontati i sistemi di gestione dei contenuti open source e proprietari. Infine, si approfondiscono le funzionalità di WordPress, compresi i temi, i plugin e la gestione degli utenti.
![Temi: strutture tipiche
23
R.Polillo -
Marzo
2013
Header
1, 2 o 3
colonne
[Menu orizzontale]
Colonna 1 Colonna 2 [Colonna 3]
Footer](https://image.slidesharecdn.com/5-cms-130320034942-phpapp02/85/5-Applicazioni-Web-e-CMS-22-320.jpg)
![Wordpress: elementi base
29
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](https://image.slidesharecdn.com/5-cms-130320034942-phpapp02/85/5-Applicazioni-Web-e-CMS-28-320.jpg)
5. Applicazioni Web e CMS
- 1. Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 5. Applicazioni Web e CMS Roberto Polillo Edizione 2012-13
- 2. Applicazioni Web 3 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 2013
- 3. Applicazioni Web: script client-side 4 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 l'interazione col
- 4. Programmazione lato client 5 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 2013
- 5. Esempi 6 <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: esempio 7 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 input 10 HTTP e HTML forniscono degli strumenti per richiedere dati all'utente 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: esempio 11 <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 Un'applicazione 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. CMS 18 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 19 R.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 20 R.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 21 R.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 l'ecosistema 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 23 R.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 WordPress 28 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 base 29 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 30 R.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 31 R.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 33 R.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 34 R.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 35 R.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 36 R.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 37 R.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 38 R.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 39 R.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 individuale 40 Installate il vostro blog Wordpress su un hoster gratuito (es.: www.altervista.org) e iniziate a svilupparlo R.Polillo - Marzo 2013