Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un...
-
Upload
alessandro-canepa -
Category
Education
-
view
181 -
download
1
description
Transcript of Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un...
Alessandro Canepa (@canepa)
WorldWideWeb
il web, la sua storia, come “funziona”, e come progettare e gestire un sito
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
Un pochino di storia…
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
..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
Cronistoria
Internet negli anni ‘90
Come funziona
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
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)
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.
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
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
Com’è fatta una pagina web
❖ Una pagina è composta da:!
❖ HTML!
❖ CSS!
❖ Javascript
HTML
<!DOCTYPE html> <html> <body> <h1>Titolo</h1> <p>Un paragrafo</p> </body> </html>
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>
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>
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/
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,
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
Esempio di RWD
La progettazione di un sito web
Il processo di sviluppo
Pianificazione e strategia
Ricerca su!utenti
WireframeDesign grafico
Sviluppo
Test
Alberatura contenuti
Strategia contenuti
Copywriting
la ricerca su utenti (personas)
la ricerca sugli utenti dalle statistiche
Wireframe in bozza
Wireframe
l’alberatura dei contenuti
il design
La gestione di un sito web
Il processo di gestione
Pianificazione e strategia!editoriale
Attività redazionale
Content Strategy
Attività sui social
Analisi statistiche
Fix e Redesign
Ruoli
Tecnici Editoriali Social
Analisi statistica
Domande?
Grazie