SlideShare uma empresa Scribd logo
1 de 39
Baixar para ler offline
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
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
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
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
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
Applet Java: esempio
7




                           R.Polillo - Marzo 2013
AJAX (Asynchronous JavaScript and XML)
8




    Da leggere:
    http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
                                                                      R.Polillo - Marzo 2013
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
    •…
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
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
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
Come installare un sito Web?
13



             Pagine           Una soluzione elementare
              web

                                                         Es.:
                                           FTP           Dreamweave
                                                         r
                                            Browser   Edito
                                                      r
                              internet
                      HTTP
                             HTTP
              Web
             server                      HTML
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
Content Management Systems (CMS)
15




     Data base




                                                     Browser

                                          internet
                                         HTTP
       db        CMS     Web
     server             server                                 Lettor
                                                               e
                                                     Browser


                       Pagine generate
                       dinamicamente

                                                               Editor
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
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
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
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, …
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
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
22




     Blog iniziale:
     tema di default
                       R.Polillo - Marzo 2013
Temi: strutture tipiche
 23
R.Polillo -
  Marzo
  2013




                                Header
                                                              1, 2 o 3
                                                              colonne
                           [Menu orizzontale]




               Colonna 1       Colonna 2        [Colonna 3]




                                 Footer
24




     Altro tema predefinito (2
     colonne)
                                 R.Polillo - Marzo 2013
25
     Altro tema
     predefinito: 2
     colonne




                      R.Polillo - Marzo 2013
26




     Altro tema predefinito (3 colonne)



                                          R.Polillo - Marzo 2013
27




     Altro tema predefinito (3
     colonne)
                         R.Polillo - Marzo 2013
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
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
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
Pagine
 31
R.Polillo -
  Marzo
  2013




                 Contenuti statici
                 Più livelli gerarchici
                 Possono contenere testi e inserti multimediali (foto, video,
                  audio, pdf)
                 Commenti abilitabili
32   R.Polillo - Marzo 2013
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
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
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
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
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
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
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/
Lavoro individuale
40


        Installate il vostro blog Wordpress su un hoster
         gratuito (es.: www.altervista.org) e iniziate a
         svilupparlo




                                                    R.Polillo - Marzo 2013

Mais conteúdo relacionado

Mais procurados

Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the WebClaudio Gandelli
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...DrupalDay
 
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chromeSviluppare estensioni per google chrome
Sviluppare estensioni per google chromeMarco Vito Moscaritolo
 
Progettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax
Progettazione e sviluppo di applicazioni web 2.0 con PHP e AjaxProgettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax
Progettazione e sviluppo di applicazioni web 2.0 con PHP e AjaxGiovanni Cappellini
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 

Mais procurados (11)

couchbase mobile
couchbase mobilecouchbase mobile
couchbase mobile
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
HTML5
HTML5HTML5
HTML5
 
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the WebHands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
 
Net core base
Net core baseNet core base
Net core base
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
 
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chromeSviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
 
Html5
Html5Html5
Html5
 
Progettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax
Progettazione e sviluppo di applicazioni web 2.0 con PHP e AjaxProgettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax
Progettazione e sviluppo di applicazioni web 2.0 con PHP e Ajax
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Lamp Ld2008
Lamp Ld2008Lamp Ld2008
Lamp Ld2008
 

Destaque

7. Dal web 1.0 al web 2.0
7. Dal web 1.0 al web 2.07. Dal web 1.0 al web 2.0
7. Dal web 1.0 al web 2.0Roberto Polillo
 
Gt briefing march 2015 upstarts- driving the entrepreneurial economy
Gt briefing march 2015   upstarts- driving the entrepreneurial economyGt briefing march 2015   upstarts- driving the entrepreneurial economy
Gt briefing march 2015 upstarts- driving the entrepreneurial economyTracey Keys
 
IMPRESS HISTORIA DE INTERNET
IMPRESS HISTORIA DE INTERNETIMPRESS HISTORIA DE INTERNET
IMPRESS HISTORIA DE INTERNETcapitansalami65
 
Conscious Success: The Inner Game of Personal Achievement
Conscious Success: The Inner Game of Personal AchievementConscious Success: The Inner Game of Personal Achievement
Conscious Success: The Inner Game of Personal AchievementHelen Kerrison
 
Modelos administrativos
Modelos administrativosModelos administrativos
Modelos administrativoselvira230379
 
조직개발과 성인학습
조직개발과 성인학습조직개발과 성인학습
조직개발과 성인학습조현경
 
Wellness final 4.1.2013
Wellness final 4.1.2013Wellness final 4.1.2013
Wellness final 4.1.2013rohit_1991
 
5. Feed, tweet e aggregatori
5. Feed, tweet e aggregatori5. Feed, tweet e aggregatori
5. Feed, tweet e aggregatoriRoberto Polillo
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)Roberto Polillo
 
10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)Roberto Polillo
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorioRoberto Polillo
 
Article réduire l'absentéisme
Article réduire l'absentéismeArticle réduire l'absentéisme
Article réduire l'absentéismeGroupeSofaxis
 

Destaque (20)

20. Wiki e wikipedia
20. Wiki e wikipedia20. Wiki e wikipedia
20. Wiki e wikipedia
 
7. Dal web 1.0 al web 2.0
7. Dal web 1.0 al web 2.07. Dal web 1.0 al web 2.0
7. Dal web 1.0 al web 2.0
 
Gt briefing march 2015 upstarts- driving the entrepreneurial economy
Gt briefing march 2015   upstarts- driving the entrepreneurial economyGt briefing march 2015   upstarts- driving the entrepreneurial economy
Gt briefing march 2015 upstarts- driving the entrepreneurial economy
 
IMPRESS HISTORIA DE INTERNET
IMPRESS HISTORIA DE INTERNETIMPRESS HISTORIA DE INTERNET
IMPRESS HISTORIA DE INTERNET
 
Conscious Success: The Inner Game of Personal Achievement
Conscious Success: The Inner Game of Personal AchievementConscious Success: The Inner Game of Personal Achievement
Conscious Success: The Inner Game of Personal Achievement
 
Modelos administrativos
Modelos administrativosModelos administrativos
Modelos administrativos
 
조직개발과 성인학습
조직개발과 성인학습조직개발과 성인학습
조직개발과 성인학습
 
Wellness final 4.1.2013
Wellness final 4.1.2013Wellness final 4.1.2013
Wellness final 4.1.2013
 
5. Feed, tweet e aggregatori
5. Feed, tweet e aggregatori5. Feed, tweet e aggregatori
5. Feed, tweet e aggregatori
 
6. Introduzione al web
6. Introduzione al web6. Introduzione al web
6. Introduzione al web
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)
 
Cancer treatment
Cancer treatmentCancer treatment
Cancer treatment
 
6. Ricercare nel Web
6. Ricercare nel Web6. Ricercare nel Web
6. Ricercare nel Web
 
10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)
 
Up to date in erfelijke kanker (2013)
Up to date in erfelijke kanker (2013)Up to date in erfelijke kanker (2013)
Up to date in erfelijke kanker (2013)
 
Knowledge and information management by individuals
Knowledge and information management by individualsKnowledge and information management by individuals
Knowledge and information management by individuals
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
 
Best Bourbons
Best BourbonsBest Bourbons
Best Bourbons
 
1.Introduzione al corso
1.Introduzione al corso1.Introduzione al corso
1.Introduzione al corso
 
Article réduire l'absentéisme
Article réduire l'absentéismeArticle réduire l'absentéisme
Article réduire l'absentéisme
 

Semelhante a 5. Applicazioni Web e CMS

Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internetdadahtml
 
Architetture web - Linguaggi e standard - Web server, application server, dat...
Architetture web - Linguaggi e standard - Web server, application server, dat...Architetture web - Linguaggi e standard - Web server, application server, dat...
Architetture web - Linguaggi e standard - Web server, application server, dat...Fulvio Corno
 
Applicazioni RESTful con ASP.NET Web Api
Applicazioni RESTful con ASP.NET Web ApiApplicazioni RESTful con ASP.NET Web Api
Applicazioni RESTful con ASP.NET Web ApiPietro Libro
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Whymca
 
SVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROIDSVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROIDLuca Masini
 
Come funziona la navigazione Web
Come funziona la navigazione WebCome funziona la navigazione Web
Come funziona la navigazione Webextrategy
 
Web Project - LESSON 1
Web Project - LESSON 1Web Project - LESSON 1
Web Project - LESSON 1Yunikon Design
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOGiovanni Sacheli
 
Le Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
Le Applicazioni di Internet Web, FTP, Posta e App pr il MobileLe Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
Le Applicazioni di Internet Web, FTP, Posta e App pr il MobileI.S.I.S. "Antonio Serra" - Napoli
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013Massimo Caliman
 

Semelhante a 5. Applicazioni Web e CMS (20)

Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internet
 
Asp net (versione 1 e 2)
Asp net (versione 1 e 2)Asp net (versione 1 e 2)
Asp net (versione 1 e 2)
 
8. Architetture web
8. Architetture web8. Architetture web
8. Architetture web
 
8 Www2009 Parte2
8 Www2009 Parte28 Www2009 Parte2
8 Www2009 Parte2
 
Novità di Asp.Net 4.0
Novità di Asp.Net 4.0Novità di Asp.Net 4.0
Novità di Asp.Net 4.0
 
Wpo extended
Wpo extendedWpo extended
Wpo extended
 
Architetture web - Linguaggi e standard - Web server, application server, dat...
Architetture web - Linguaggi e standard - Web server, application server, dat...Architetture web - Linguaggi e standard - Web server, application server, dat...
Architetture web - Linguaggi e standard - Web server, application server, dat...
 
Web services
Web servicesWeb services
Web services
 
Applicazioni RESTful con ASP.NET Web Api
Applicazioni RESTful con ASP.NET Web ApiApplicazioni RESTful con ASP.NET Web Api
Applicazioni RESTful con ASP.NET Web Api
 
Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini Sviluppo di servizi REST per Android - Luca Masini
Sviluppo di servizi REST per Android - Luca Masini
 
SVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROIDSVILUPPO DI SERVIZI REST PER ANDROID
SVILUPPO DI SERVIZI REST PER ANDROID
 
Web dynpro for abap 01
Web dynpro for abap 01Web dynpro for abap 01
Web dynpro for abap 01
 
Come funziona la navigazione Web
Come funziona la navigazione WebCome funziona la navigazione Web
Come funziona la navigazione Web
 
Web Project - LESSON 1
Web Project - LESSON 1Web Project - LESSON 1
Web Project - LESSON 1
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
 
Le Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
Le Applicazioni di Internet Web, FTP, Posta e App pr il MobileLe Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
Le Applicazioni di Internet Web, FTP, Posta e App pr il Mobile
 
Spa with Blazor
Spa with BlazorSpa with Blazor
Spa with Blazor
 
World wide web
World wide webWorld wide web
World wide web
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013
Google App Engine Overview Seminario GDG Genova 4 Ottobre 2013
 

Mais de Roberto Polillo

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroRoberto Polillo
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsRoberto Polillo
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corsoRoberto Polillo
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniRoberto Polillo
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleRoberto Polillo
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'erroreRoberto Polillo
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)Roberto Polillo
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)Roberto Polillo
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)Roberto Polillo
 
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e seggRoberto Polillo
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sitesRoberto Polillo
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatoriRoberto Polillo
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla graficaRoberto Polillo
 

Mais de Roberto Polillo (20)

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuro
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerations
 
Conclusioni del corso
Conclusioni del corsoConclusioni del corso
Conclusioni del corso
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioni
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitale
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'errore
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
20. Social networks
20. Social networks20. Social networks
20. Social networks
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
16. Social media
16. Social media16. Social media
16. Social media
 

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