lezione alla lumsa - il web, la sua storia, come “funziona”, e come progettare e gestire un...
DESCRIPTION
Lezione come ospite al corso di Comunicazione d'impresa, marketing e nuovi media del Prof. Botti - il web, la sua storia, come “funziona”, e come progettare e gestire un sitoTRANSCRIPT
![Page 1: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/1.jpg)
Alessandro Canepa (@canepa)
WorldWideWeb
il web, la sua storia, come “funziona”, e come progettare e gestire un sito
![Page 2: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/2.jpg)
Internet = Web (la risposta è NO)
❖ Il World-Wide Web (WWW o più semplicemente il Web) è quello che evoca per molti la parola “internet”
❖ Ma il Web è solo un sottoinsieme di Internet
![Page 3: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/3.jpg)
Un pochino di storia…
![Page 4: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/4.jpg)
Dal telefono..❖ in origine la telefonia era basata sulla commutazione di circuito, ovvero i due
punti di una conversazione erano fisicamente connessi ❖ questo rendeva complicato tenere conversazioni simultanee ❖ non era molto efficiente perché anche il silenzio veniva trasmesso
![Page 5: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/5.jpg)
..a internet❖ le moderne telecomunicazioni sono basate sulla commutazione di pacchetto, che
suddivide un messaggio in parti più piccole (detti pacchetti) prima di inoltrarle attraverso la rete al destinatario. Ogni pacchetto inviato da una stazione (nodo) segue un proprio percorso di rete per raggiungere il nodo di destinazione finale, il quale provvederà a riordinare i pacchetti e ricostruire il messaggio di partenza. Questa tecnica ottimizza l'impiego della rete, perché permette a più stazioni la trasmissione di diversi messaggi sullo stesso canale.
CiaoC i
a oCiao
C
i
a
o
![Page 6: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/6.jpg)
Cronistoria
![Page 7: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/7.jpg)
Internet negli anni ‘90
![Page 8: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/8.jpg)
Come funziona
![Page 9: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/9.jpg)
Caratteristiche principali del Web❖ Il web è stato concepito con i seguenti elementi:!
❖ URL che identificano le risorse !
❖ Il protocollo HTTP per definire come devono avvenire le richieste e le risposte!
❖ Un Web server che risponde alle richieste HTTP con risorse residenti es.:!
❖ file HTML, CSS e Javascript!
❖ Immagini e file!
❖ Un browser per eseguire richieste HTTP
![Page 10: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/10.jpg)
Le URL❖ Uniform Resource Locator o URL è una sequenza di
caratteri che identifica univocamente l'indirizzo di una risorsa in Internet!
❖ Esempio: http://www.lumsa.it/fabio-botti!
❖ Come è formata una URL:!❖ protocollo://<username:password@>nomehost<:porta></percorso><?
querystring><#ancora>!❖ Protocollo: HTTP, HTTPS, FTP, MMS;!❖ Nomehost: Rappresenta l'indirizzo fisico del server su cui risiede la risorsa e può essere
costituito da un nome di dominio o direttamente da un Indirizzo IP - (www.lumsa.it);!❖ Porta: indica al sistema operativo dell'host remoto la porta del processo server al quale
affidare la richiesta. Questo parametro viene usato solo se si utilizza una porta non conforme allo standard;!
❖ Percorso: percorso che identifica la risorsa (/fabio-botti)
![Page 11: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/11.jpg)
HTTPS❖ HyperText Transfer Protocol over
Secure Socket Layer (HTTPS) è il risultato dell'applicazione di un protocollo di crittografia asimmetrica al protocollo di trasferimento di ipertesti HTTP. !
❖ Viene utilizzato per garantire trasferimenti riservati di dati nel web, in modo da impedire intercettazioni dei contenuti che potrebbero essere effettuati tramite la tecnica di attacco del man in the middle.
![Page 12: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/12.jpg)
DNS - l’elenco telefonico di Internet❖ Ogni nodo raggiungibile su internet ha un indirizzo IP:!
❖ IPV4: es. 31.13.86.16!
❖ IPV6: es. 2a03:2880:2110:df07:face:b00c::1!
❖ Visto che sarebbe poco pratico ad esempio scrivere 31.13.86.16 per andare su www.facebook.com, è stato concepito il servizio DNS che traduce i nome in indirizzi IP. DNS è un sofisticato elenco distribuito e federato.!
❖ I nomi gestiti dai DNS vengono chiamati domini
![Page 13: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/13.jpg)
i cookies❖ i cookies HTTP sono righe di testo usate per eseguire autenticazioni automatiche,
Tracciatura di sessioni e memorizzazione di informazioni specifiche riguardanti gli utenti che accedono a un sito web.!
❖ Nel cookie solitamente possiamo trovare sei attributi:!
❖ Nome/valore è una variabile ed un campo obbligatorio;!
❖ Scadenza (expiration date) è un attributo opzionale che permette di stabilire la data di scadenza del cookie. I cookie con scadenza “now” sono detti di sessione, quelli con scadenza “never” sono detti permanenti;!
❖ Modalità d'accesso (HttpOnly) rende il cookie invisibile a javascript e altri linguaggi client-side presenti nella pagina;!
❖ Sicuro (secure) indica se il cookie debba essere trasmesso criptato con HTTPS;!
❖ Possono essere di Prima Parte (cioè del sito visitato) o di Terza Parte
![Page 14: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/14.jpg)
Com’è fatta una pagina web
❖ Una pagina è composta da:!
❖ HTML!
❖ CSS!
❖ Javascript
![Page 15: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/15.jpg)
HTML
<!DOCTYPE html> <html> <body> <h1>Titolo</h1> <p>Un paragrafo</p> </body> </html>
![Page 16: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/16.jpg)
CSS<!DOCTYPE html> <html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;} </style> </head> <body> <h1>Tutti gli elementi di titolo 1 saranno rossi</h1> <h2>Tutti gli elementi di titolo 1 saranno blu</h2> <p>Il testo dei paragrafi sarà verde</p> </body> </html>
![Page 17: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/17.jpg)
Javascript<!DOCTYPE html> <html> <body> <h1>Esempio di Javascript</h1> <p id="demo"> Con JavaScript si può cambiare lo stile di un elemento HTML. </p> <script> function myFunction() { x=document.getElementById("demo") // Individua l’elemento x.style.color="#ff0000"; // Cambia lo stile } </script> <button type="button" onclick="myFunction()">Fai click!</button> </body> </html>
![Page 18: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/18.jpg)
Cosa succede quando si visita un sito - 1/1
No. Time Source Des.na.on Protocol Length Info
207 24.900.801.000 192.168.0.8 149.3.177.21 HTTP 179
GET /tbr?client=navclient-‐auto&ch=8c3d3365e&features=Rank&q=info:www.ilsole24ore.com%2F%3Frefresh_ce HTTP/1.1
512 25.328.381.000 192.168.0.8 212.155.198.30 HTTP 422 GET /v53.js HTTP/1.1
3093 27.770.645.000 192.168.0.8 212.155.198.30 HTTP 679
GET /cgi-‐bin/m?rnd=1382768342630&ci=ilsole-‐it&cg=0&cc=0&ts=v53.js&sr=1680x1050&cd=24&lg=it-‐IT&je=y&ck=y&tz=2&si=h[p%3A//www.ilsole24ore.com/%3Frefresh_ce&rp= HTTP/1.1
3084 27.761.479.000 192.168.0.8 66.117.29.35 HTTP 770
GET /b/ss/s24onewsprod,s24oglobal/1/H.23.8/s49257079439894?AQB=1&ndh=1&t=26%2F9%2F2013%208%3A19%3A2%206%20-‐120&ce=UTF-‐8&ns=ilsole24ore&pageName=N24%3Ahome%3Ahome&g=h[p%3A%2F%2Fwww.ilsole24ore.com%2F%3Frefresh_ce&cc=EUR&ch=N24%3Ahome&events=event1&c1=N24%3Ahome%3Ahome&v1=D%3Dc1&c2=N24%3Ahome%3Ahome&v2=D%3Dc2&c3=N24%3Ahome%3Ahome&v3=D%3Dc3&c4=N24%3Ahome%3Ahome&c9=N24%3Ahome&v9=D%3Dc9&c11=8%3A00AM&v11=D%3Dc11&c12=Saturday&v12=D%3Dc12&c13=Weekend&v13=D%3Dc13&c14=Repeat&v14=D%3Dc14&c15=Not%20logged%20in&v15=D%3Dc15&c38=N24%3Ahome%3Ahome&c39=9&c49=D%3Ds_vi&v49=D%3DpageName&v50=D%3Dch&c52=13092013&h1=N24%2Chome&s=1680x1050&c=24&j=1.7&v=Y&k=Y&bw=1467&bh=865&p=Plugin%20applet%20Java%3BQuickTime%20Plug-‐in%207.7.3%3BDefault%20Browser%20Helper%3BGoogle%20Talk
MOLTO!http://www.ilsole24ore.com/
![Page 19: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/19.jpg)
Cosa succede quando si visita un sito - 2/2❖ Abbiamo digitato: www.ilsole24ore.com!
❖ Il nostro browser ha fatto 309 richieste a 13 server di 8 domini diversi!
❖ Abbiamo ricevuto 12 cookies da 7 domini diversi
ilsole24ore.com,
149.3.177.21,
212.155.198.30,
66.117.29.35,
cs107.wac.edgecastcdn.net,
ec2;50;19;249;42.compute;1.amazonaws.com,
host36.97;45;212.ilsole24ore.com,
twimg.com,
google.com,
![Page 20: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/20.jpg)
il Responsive Web Design (RWD)❖ E’ una tecnica di Web design per la realizzazione di siti
web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell'ambiente nei quali vengono visualizzati!
❖ Riduce al minimo all'utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.!
❖ Consente la fruizione dello stesso contenuto dai vari device, evitando di doverlo gestire in contesti diversi
![Page 21: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/21.jpg)
Esempio di RWD
![Page 22: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/22.jpg)
La progettazione di un sito web
![Page 23: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/23.jpg)
Il processo di sviluppo
Pianificazione e strategia
Ricerca su!utenti
WireframeDesign grafico
Sviluppo
Test
Alberatura contenuti
Strategia contenuti
Copywriting
![Page 24: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/24.jpg)
![Page 25: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/25.jpg)
la ricerca su utenti (personas)
![Page 26: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/26.jpg)
la ricerca sugli utenti dalle statistiche
![Page 27: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/27.jpg)
Wireframe in bozza
![Page 28: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/28.jpg)
Wireframe
![Page 29: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/29.jpg)
l’alberatura dei contenuti
![Page 30: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/30.jpg)
il design
![Page 31: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/31.jpg)
La gestione di un sito web
![Page 32: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/32.jpg)
Il processo di gestione
Pianificazione e strategia!editoriale
Attività redazionale
Content Strategy
Attività sui social
Analisi statistiche
Fix e Redesign
![Page 33: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/33.jpg)
Ruoli
Tecnici Editoriali Social
Analisi statistica
![Page 34: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/34.jpg)
Domande?
![Page 35: Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito](https://reader030.vdocuments.site/reader030/viewer/2022020307/559aadca1a28abf2688b4657/html5/thumbnails/35.jpg)
Grazie