7. Applicazioni web e CMS

54 %
46 %
Information about 7. Applicazioni web e CMS
Education

Published on March 20, 2014

Author: rpolillo

Source: slideshare.net

Description

Slides delle lezioni del corso di Strumenti e applicazioni Web per il corso di laurea magistrale in teoria e tecnologia della comunicazione - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 20 marzo 2014

Edizione 2013-14 Università degli Studi 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 Queste slides fanno parte 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

Applicazioni Web  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 2014 3

Applicazioni Web: script client-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

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

Esempi <html> <head> …. </head> <body> …. <script type="text/javascript"> Document.write('Hello World') </script> ….. </body> </html> R.Polillo - Marzo 2014 6 <applet code="Hello class" width="200" hight="200"> </applet>

Applet Java: esempio R.Polillo - Marzo 2014 7

AJAX (Asynchronous JavaScript and XML) R.Polillo - Marzo 2014 8 Da leggere: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

Applicazioni Web: script server-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

La trasmissione dei dati 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

<form method="get" action=http://www.google.com/search> <input type="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

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

Come installare un sito Web? 13 HTTP internet Browser Web server Pagine web Editor HTTP FTP HTML Es.: Dreamweaver Una soluzione elementare

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

Content Management Systems (CMS) 15 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Lettore Browser Editor

Browser Content Management Systems (CMS) 16 HTTP internet Browser Web server Pagine generate dinamicamente CMSdb server Data base Autore Lettore Browser Amministratore

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

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

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

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

WordPress  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 21R.Polillo - Marzo 2014

Blog iniziale: tema di default 22 R.Polillo - Marzo 2014

Temi: strutture tipiche R.Polillo - Marzo 201423 Header Colonna 1 Colonna 2 [Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne

Altro tema predefinito (2 colonne) 24 R.Polillo - Marzo 2014

Altro tema predefinito: 2 colonne 25 R.Polillo - Marzo 2014

Altro tema predefinito (3 colonne) 26 R.Polillo - Marzo 2014

Altro tema predefinito (3 colonne) 27 R.Polillo - Marzo 2014

Esempi realizzati con WordPress 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

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

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

Pagine R.Polillo - Marzo 201431  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili

R.Polillo - Marzo 201432

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

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

Plugin: esempi R.Polillo - Marzo 201435  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

Plugin: esempi R.Polillo - Marzo 201436  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

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

Dove installare il vostro blog R.Polillo - Marzo 201438 Potete usare per esempio www.altervista.org  Servizio di hosting gratuito, italiano www.yourname.altervista.org

Altervista: due tipi di servizi R.Polillo - Marzo 201439 Massima flessibilità Massima semplicità

Lavoro individuale  Installate il vostro blog Wordpress su un servizio di hosting gratuito (es.: www.altervista.org) e iniziate a sperimentarlo R.Polillo - Marzo 2014 40

Add a comment

Related presentations

Related pages

Windows Web App Gallery - Umbraco CMS

Umbraco CMS è il framework ... 7.4.3: Release Date: 29/04 ... Scopri in che modo Microsoft Web App Gallery può aiutarti a condividere le tue applicazioni ...
Read more

Ciclo di sviluppo di applicazioni web su CMS: Web-Cat e ...

Roberto Maselli - Ciclo di sviluppo di applicazioni web su CMS: Web-Cat e Joomla: Analisi comparativa di jetzt kaufen. ISBN: 9783639774375, ...
Read more

Webapp | Applicazioni-web | HTML.it

Applicazioni Web ; Web application ... Consente di creare direttamente online applicazioni per dispositivi iOS ed Android. Web Publishing; Totali: ...
Read more

cblu.net Programmatore freelance PHP | Applicazioni web e ...

Programmatore freelance PHP | Applicazioni web e CMS | Cblu.net. WEB SEARCH | KEYWORD ANALYZER. www.cblu.net ... A B C D E F G H I J K L M N O P Q R S T U ...
Read more

Manuale della distribuzione in rete di applicazioni Web ...

6.7 Applicazione Web non rimossa ... sente di ridurre l'utilizzo delle risorse e il numero di query effettuate dal server di applicazioni Web sul server CMS.
Read more

Checkout in Magento | CMS, Magento | HTML.it

Configurare la fase di checkout in Magento che permette di finalizzare l'acquisto di un prodotto ... Responsive Web Design; Development; CMS; Guide; Guida ...
Read more

Windows Web App Gallery - Gallery

Orckestra CMS Foundation is a fully featured free open source web ... (CMS), which enables you to build Web sites and powerful ... Concrete5 5.7.5.7 9/15 ...
Read more

iDVR-PRO CMS - Software Informer. An app to view and ...

iDVR-PRO CMS (iDVR-PRO CMS.exe). iDVR-PRO CMS is a program used on a Windows PC to view and manage multiple iDVR-PRO surveillance DVRs.
Read more