Downloaded 56 times
![Temi: strutture tipiche
R.Polillo -
Marzo 201423
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne](https://image.slidesharecdn.com/7-140320035846-phpapp02/75/7-Applicazioni-web-e-CMS-23-2048.jpg)
![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](https://image.slidesharecdn.com/7-140320035846-phpapp02/75/7-Applicazioni-web-e-CMS-29-2048.jpg)
Uploaded byRoberto Polillo
7. Applicazioni web e CMS
Il documento descrive le applicazioni web e i content management systems (CMS), evidenziando l'importanza dell'interazione utente-sito e delle tecnologie client-side come JavaScript e AJAX. Viene analizzata la differenza tra soluzioni proprietarie e open source per la creazione di siti web, con focus su WordPress come CMS molto diffuso. Infine, il documento illustra le principali funzionalità di WordPress, come articoli, pagine, temi e plugin.
More Related Content
Similar to 7. Applicazioni web e CMS
7. Applicazioni web e CMS
- 1. Edizione 2013-14 Università degliStudi 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 fannoparte 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 Oltreche "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: scriptclient-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> …. <scripttype="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 JavaScriptand XML) R.Polillo - Marzo 2014 8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
- 9. Applicazioni Web: scriptserver-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 deidati 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> <inputtype="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 unsito 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 CMSopen 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 didefault 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: 2colonne 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 conWordPress 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 - Marzo201432
- 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 - Marzo201435 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 - Marzo201436 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 ilvostro blog R.Polillo - Marzo 201438 Potete usare per esempio www.altervista.org Servizio di hosting gratuito, italiano www.yourname.altervista.org
- 39. Altervista: due tipidi servizi R.Polillo - Marzo 201439 Massima flessibilità Massima semplicità
- 40. Lavoro individuale Installateil vostro blog Wordpress su un servizio di hosting gratuito (es.: www.altervista.org) e iniziate a sperimentarlo R.Polillo - Marzo 2014 40