Edizione Risorse di Rete e Web 2.0 per il lavoro Sociale Corso di Studio in Servizio Sociale Le applicazioni Web e i CMS (Content Managment System) Antonio Capodieci

Queste slides… 2 Queste slides fanno parte del corso “Risore di Rete per il Web 2.0”. Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non commerciale - Condividi allo stesso modo Italia”: NOTA: Al materiale hanno contribuito in molti, studenti, amici e la rete. Ove possibile ne ho indicato la fonte; segnalatemi eventuali dimenticanze, sarò lieto di correggerle appena possibile. Molte slide sono tratte dal materiale didattico del Prof. Roberto Polillo dell’Università Milano Bicocca, pubblicato secondo analoga licenza.

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" 3

Applicazioni Web: script client-side 4 HTTP Utente del blog 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 5

Esempi …. …. Document.write('Hello World') ….. 6

Applet Java: esempio 7

AJAX (Asynchronous JavaScript and XML) 8 Da leggere:

Applicazioni Web: script server-side (pagine dinamiche) 9 HTTP Utente del blog 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 Utente del blog 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: esempio 11 bla querystring=bla+bla&button1=Google+Search Al server

Architetture a più livelli ("multi-tier") 12 HTTP Utente del blog 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 Utente del blog internet Browser Web server Pagine web Editor HTTP FTP HTML Es.: Dreamweaver Una soluzione elementare

Content Management Systems (CMS) 14 HTTP Utente del blog internet Browser Web server Pagine generate dinamicamente CMS db 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 Utente del blog internet Browser Web server Pagine generate dinamicamente CMS db server Data base Lettore Browser Editor

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

Content Management Systems (CMS) 17 HTTP Utente del blog internet Browser Web server Pagine generate dinamicamente CMS db server Data base Browser Autore Lettore Browser Amministratore Templates Materiale autore Materiale amministratore

CMS: tipologie 18 Codice proprietari o Codice aperto (open source) Codice preinstallato Codice da installare “Online site builders” Es.: blogger (Google) Weebly, Webs, Ning, Socialgo, … Es.: …. 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: (di Google, gratuito), … Per siti: … Per social networks: … 19

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 ( Molto semplice da usare, molto ricco di plugin pronti all’uso. Esiste anche una versione online semplificata: (funzionalmente limitata, molto diffusa: )  Joomla ( Più complessowww.joomla.org  Drupal ( Più complessowww.drupal.org 20

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) 

Blog iniziale: tema di default 22

Temi: strutture tipiche 23 Header Colonna 1Colonna 2[Colonna 3] Footer [Menu orizzontale] 1, 2 o 3 colonne

Altro tema predefinito (2 colonne) 24

Altro tema predefinito: 2 colonne 25

Altro tema predefinito (3 colonne) 26

Altro tema predefinito (3 colonne) 27

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 28

Articoli 29  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 30  Contenuti statici  Più livelli gerarchici  Possono contenere testi e inserti multimediali (foto, video, audio, pdf)  Commenti abilitabili

31

Temi 32  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 33  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 34  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

Plugin: esempi 35  Ultimate Google Analytics Attiva Google Analytics sul sito  All In One SEO Pa ck 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/ 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 36

Dove installare il vostro blog 37 Potete usare per esempio  Servizio di hosting gratuito, italiano

Altervista: due tipi di servizi 38 Massima flessibilità Massima semplicità

Il CMS in pratica  Installalliamo il nostro blog Wordpress su lo utiliziamo 39

Buon lavoro! 40