Alessandro Canepa (@canepa)

W W W
orld

ide

eb

il web, la sua storia, come
“funziona”, e come progettare e
gestire un s...
Internet = Web
(la risposta è NO)

❖

❖

Il World-Wide Web (WWW o più semplicemente il Web) è quello
che evoca per molti l...
Un pochino di storia…
Dal telefono..
❖

in origine la telefonia era basata sulla commutazione di circuito, ovvero i due
punti di una conversazio...
..a internet
❖

le moderne telecomunicazioni sono basate sulla commutazione di pacchetto, che
suddivide un messaggio in pa...
Cronistoria
Internet negli anni ‘90
Come funziona
Caratteristiche principali del Web
❖

Il web è stato concepito con i seguenti elementi:!
❖

URL che identificano le risorse...
Le URL
❖

Uniform Resource Locator o URL è una sequenza di
caratteri che identifica univocamente l'indirizzo di una
risorsa...
HTTPS
❖

HyperText Transfer Protocol over
Secure Socket Layer (HTTPS) è il
risultato dell'applicazione di un
protocollo di...
DNS - l’elenco telefonico di Internet
❖

Ogni nodo raggiungibile su internet ha un indirizzo IP:!
❖

IPV4: es. 31.13.86.16...
i cookies
❖

i cookies HTTP sono righe di testo usate per eseguire autenticazioni automatiche,
Tracciatura di sessioni e m...
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>
</hea...
Javascript
<!DOCTYPE html>
<html>
<body>
<h1>Esempio di Javascript</h1>
<p id="demo">
Con JavaScript si può cambiare lo
st...
Cosa succede quando si visita un sito - 1/1

http://www.ilsole24ore.com/
No.

Time
207
512
3093

3084

Source

24.900.801....
Cosa succede quando si visita un sito - 2/2
❖

Abbiamo digitato: www.ilsole24ore.com!

❖

Il nostro browser ha fatto 309 r...
il Responsive Web Design (RWD)
❖

E’ una tecnica di Web design per la realizzazione di siti
web in modo che le pagine adat...
Esempio di RWD
La progettazione di un sito web
Il processo di sviluppo
Pianificazione
e strategia

Strategia
contenuti
Alberatura
contenuti

Ricerca su!
utenti

Wireframe...
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à sui
social

Content
Strategy

Fix e
Redesign

Atti...
Ruoli

Tecnici

Editoriali

Analisi statistica

Social
Domande?
Grazie
Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare  e gestire un sito
Upcoming SlideShare
Loading in...5
×

Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito

214

Published on

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 sito

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
214
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Lezione alla LUMSA - il web, la sua storia, come “funziona”, e come progettare e gestire un sito

  1. 1. Alessandro Canepa (@canepa) W W W orld ide eb il web, la sua storia, come “funziona”, e come progettare e gestire un sito
  2. 2. 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
  3. 3. Un pochino di storia…
  4. 4. 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
  5. 5. ..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. Ciao C i C a a o i o Ciao
  6. 6. Cronistoria
  7. 7. Internet negli anni ‘90
  8. 8. Come funziona
  9. 9. 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
  10. 10. 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)
  11. 11. 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.
  12. 12. 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
  13. 13. 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:! ❖ ❖ 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;! ❖ ❖ Nome/valore è una variabile ed un campo obbligatorio;! 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
  14. 14. Com’è fatta una pagina web ❖ Una pagina è composta da:! ❖ HTML! ❖ CSS! ❖ Javascript
  15. 15. HTML <!DOCTYPE html> <html> <body> <h1>Titolo</h1> <p>Un paragrafo</p> </body> </html>
  16. 16. 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>
  17. 17. 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>
  18. 18. Cosa succede quando si visita un sito - 1/1 http://www.ilsole24ore.com/ No. Time 207 512 3093 3084 Source 24.900.801.000 192.168.0.8 Des.na.on Protocol 149.3.177.21 HTTP Length 179 Info GET  /tbr?client=navclient-­‐ auto&ch=8c3d3365e&features=Rank&q=info:w ww.ilsole24ore.com%2F%3Frefresh_ce  HTTP/ 1.1   GET  /v53.js  HTTP/1.1   GET  /cgi-­‐bin/m?rnd=1382768342630&ci=ilsole-­‐ it&cg=0&cc=0&ts=v53.js&sr=1680x1050&cd=2 4&lg=it-­‐IT&je=y&ck=y&tz=2&si=h[p%3A// www.ilsole24ore.com/%3Frefresh_ce&rp=   HTTP/1.1   GET  /b/ss/s24onewsprod,s24oglobal/1/H.23.8/ s49257079439894? AQB=1&ndh=1&t=26%2F9%2F2013%208%3A1 9%3A2%206%20-­‐120&ce=UTF-­‐8&ns=ilsole24or e&pageName=N24%3Ahome %3Ahome&g=h[p%3A%2F %2Fwww.ilsole24ore.com%2F %3Frefresh_ce&cc=EUR&ch=N24%3Ahome&ev ents=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 MOLTO! 25.328.381.000 192.168.0.8 212.155.198.30 HTTP 422 27.770.645.000 192.168.0.8 212.155.198.30 HTTP 679 27.761.479.000 192.168.0.8 66.117.29.35 HTTP 770
  19. 19. 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.ilsole24or e.com, twimg.com, google.com,
  20. 20. 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
  21. 21. Esempio di RWD
  22. 22. La progettazione di un sito web
  23. 23. Il processo di sviluppo Pianificazione e strategia Strategia contenuti Alberatura contenuti Ricerca su! utenti Wireframe Design grafico Sviluppo Copywriting Test
  24. 24. la ricerca su utenti (personas)
  25. 25. la ricerca sugli utenti dalle statistiche
  26. 26. Wireframe in bozza
  27. 27. Wireframe
  28. 28. l’alberatura dei contenuti
  29. 29. il design
  30. 30. La gestione di un sito web
  31. 31. Il processo di gestione Pianificazione e strategia! editoriale Attività sui social Content Strategy Fix e Redesign Attività redazionale Analisi statistiche
  32. 32. Ruoli Tecnici Editoriali Analisi statistica Social
  33. 33. Domande?
  34. 34. Grazie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×