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&agrave; 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