Downloaded 53 times
![Temi: strutture tipiche
25
Header
Colonna 1 Colonna 2 [Colonna 3]
Footer
[Menu orizzontale]
1, 2 o 3
colonne](https://image.slidesharecdn.com/20151029-webapp-cms-151028071853-lva1-app6892/85/07-Web-apps-e-CMS-25-320.jpg)
Uploaded byGiuseppe Vizzari
07 - Web apps e CMS
Il documento presenta un corso sulle applicazioni web e i sistemi di gestione dei contenuti (CMS), evidenziando l'evoluzione del web e l'importanza dell'interazione utente-sito. Viene descritto il funzionamento di script client-side e server-side, le tecnologie AJAX e i vari tipi di CMS, includendo esempi pratici come WordPress, Joomla e Drupal. Il materiale è aggiornato annualmente e pubblicato sotto una licenza Creative Commons, con indicazioni sui diritti delle immagini utilizzate.
More Related Content
Similar to 07 - Web apps e CMS
07 - Web apps e CMS
- 1. Università degli Studidi Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Corso di Strumenti e applicazioni del Web 7. Le applicazioni Web e i CMS Giuseppe Vizzari Edizione 2015-16
- 2. Queste slide Queste slidefanno parte del corso “Strumenti e applicazioni del Web”. Il sito del corso, con il materiale completo, si trova in strumentiapplicazioniweb.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 shot, 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.
- 3. Applicazioni Web • Oltreche "navigare", l'utente deve poter "interagire" con un sito, fornendo dei dati che il sito elaborerà fornendo le risposte opportune • Nell’impostazione del Web 2.0 l’idea è che l’utente deve poter contribuire o addirittura costruire un sito web • Non solo "Web site" ma "Web application" 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 (Sandbox). • 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 5
- 6. Applicazioni Web: scriptclient-side 6 HTTP internet Browser Web server HTML con script client-side Esecutore dei programmi client-side Sandbox: in questo contesto, si intende un meccanismo per mantenere separati gli script dalle risorse del client (memoria, memoria persistente). Non è detto che i diversi esecutori di script client-side siano davvero efficaci in questo senso… sistemi open source danno maggiore affidabilità (trasparenza) AJAX Engine
- 7. Esempi <html> <head> …. </head> <body> …. <scripttype="text/javascript"> Document.write('Hello World') </script> ….. </body> </html> 7 <applet code="Hello class” width="200" hight="200"> </applet>
- 8.
- 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 11 bla bla querystring=bla+bla&button1=Google+SearchAl server
- 12. AJAX (Asynchronous JavaScriptand XML) 12Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
- 13. Architetture a piùlivelli ("multi-tier") 13 HTTP internet Browser Web server HTML con script client-side Pagine generate dinamicamente Application server db server Data base
- 14. Come “installare” unsito Web? 14 HTTP internet Browser Web server Pagine web Editor HTTP FTP HTML Es.: Dreamweaver Una soluzione elementare
- 15. Content Management Systems (CMS) 15 HTTP internet Browser Web server Paginegenerate dinamicamente CMSdb server Data base Lettore Un'applicazione che permette di costruire e installare le pagine, e di servirle ai lettori
- 16. Content Management Systems (CMS) 16 HTTP internet Browser Web server Paginegenerate dinamicamente CMSdb server Data base Lettore Browser Editor
- 17. Browser Content Management Systems (CMS) 17 HTTP internet Browser Web server Paginegenerate dinamicamente CMSdb server Data base Autore Lettore Browser Amministratore
- 18. Content Management Systems (CMS) 18 HTTP internet Browser Web server Paginegenerate dinamicamente CMSdb server Data base Browser Autore Lettore Browser Amministratore Templates Materiale autore Materiale amministratore
- 19. CMS: tipologie 19 Codice proprietarioCodice aperto (open source) Codice preinstallato (server di terza parte) Codice da installare (necessità di un server) “Online site builders” Es.: blogger (Google) Weebly, Webs, Ning, Socialgo, … Es.: www.wordpress.com …. Es.: wordpress Joomla drupal (ne esistono, ma sono molto meno interessanti… esempio: il sito di Ateneo)
- 20. CMS: tipologie 20 Codice proprietarioCodice aperto (open source) Codice preinstallato (server di terza parte) Codice da installare (necessità di un server) “Online site builders” Es.: blogger (Google) Weebly, Webs, Ning, Socialgo, … Es.: www.wordpress.com …. Es.: wordpress Joomla drupal (ne esistono, ma sono molto meno interessanti…) Domanda legittima, anzi, quasi obbligatoria… come si collocano i cosidetti Wiki in questo schema? Ne riparleremo…
- 21. 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, … 21
- 22. CMS open source •Sideve 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 R.Polillo - Marzo 2015 22
- 23. WordPress •Il CMS opensource 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 23
- 24. Blog iniziale: tema didefault 24
- 25. Temi: strutture tipiche 25 Header Colonna1 Colonna 2 [Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne
- 26. Altro tema predefinito(2 colonne) 26
- 27. Altro tema predefinito: 2colonne 27
- 28. Altro tema predefinito(3 colonne) 28
- 29. 29 Altro tema predefinito(3 colonne)
- 30. Esempi realizzati conWordPress Versione .com: •https://strumentiapplicazioniweb.wordpress.com/ •http://www.corsow.wordpress.com Versione scaricabile: •http://www.rpolillo.it •http://www.stylenest.co.uk •http://mosaic-consulting.com 30