13/02/12  

1  

Prof.  Emanuele  Papo4o  

Cos’è  una  rete?    Si   ha   una   rete   quando   Almeno   due   computer     interconnessi   tra   loro  

formano  una  rete  

  In  aree  ben  delimitate  (LAN,ufficio,  palazzo)    In  aree  geografiche  molto  vaste  (WAN,  paese,regione,  conLnente)  

  In   una   archite-ura   Host   (server)/client   più   computer   accedono   a  servizi  e  risorse  distribuite  (client)  da  un  computer  dedicato  a  svolgere  parLcolari  compiL  (Host):    amministrazione    condivisione  di  file    condivisione  di  stampanL    condivisione  di  applicaLvi    fornitura  di  servizi  

13/02/12  

2  

L.A.N  LAN  (Local  Area  Network):  rete  in  un'area  locale    Un  insieme  di  computer  collegaL  tramite  cavi  e  apparaL  di  rete  in  cui  i  daL  

transitano  senza  a4raversare  linee  telefoniche    Computer  sistemaL  all'interno  di  un'area  ristre4a,  per  esempio  in  un  edificio  

(spesso  per  condividere  le  risorse  fisiche)  

 

WAN  (Wide  Area  Network):  rete  in  un'area  estesa  (rete  geografica)    Rete  informaLca  usata  per  conne4ere  insieme  più  reL  locali  (LAN)  in  modo  

che  un  utente  di  una  rete  possa  comunicare  con  utenL  di  un'altra  rete    Connessione:  tramite  linee  telemaLche  (modem  e  linee  telefoniche)    Internet  è  una  WAN  per  eccellenza  

W.A.N.  

13/02/12  

3  

L’accesso  ad  Internet  

Utente Client

Rete internet Server internet

Modem

Linea telefonica

Internet…esiste  dal…?    1969   -‐   Il   progenitore   della   rete   Internet   è   considerato   il  proge4o   ARPANET,   finanziato   dalla   Advanced   Research  Projects   Agency   (ARPA),   una   agenzia   del   DiparLmento   della  Difesa  statunitense.    

  La   rete   venne   fisicamente   costruita   nel   1969   collegando  qua4ro  nodi:   l'Università  della  California  di   Los  Angeles,   l'SRI  di   Stanford,   l'Università   della   California   di   Santa   Barbara,   e  l'Università  dello  Utah.    

  La  posta  ele4ronica   fu   inventata  da  Ray  Tomlinson  nel  1971.  L'anno   seguente   Arpanet   venne   presentata   al   pubblico,   e  Tomlinson   ada4ò   il   suo   programma  per   funzionarvi:   divenne  subito  popolare.    

13/02/12  

4  

Internet…esiste  dal…?    In   pochi   anni,   ARPANET   allargò   i   suoi   nodi   oltreoceano,  contemporaneamente   all'avvento   del   primo   servizio   di   invio  pacched  a  pagamento:  Telenet    

  L'espansione  proseguì  sempre  più  rapidamente,  tanto  che  il  26  marzo   del   1976   la   regina   Elisabe4a   II   d'Inghilterra   spedì  un'email  alla  sede  del  Royal  Signals  and  Radar  Establishment.  

  Gli  EmoFcon  vennero   isLtuiL   il  12  aprile  1979,  quando  Kevin  MacKenzie   suggerì   di   inserire   un   simbolo   nelle   mail   per  indicare  gli  staL  d'animo  ;-‐)    

  Tu4o   era   pronto   per   il   passaggio   ad   Internet.   Definendo   il  Transmission  Control  Protocol   (TCP)  e   l'Internet  Protocol   (IP),  diedero   il   via  ufficialmente  ad   Internet   come   l'insieme  di   reL  connesse  tramite  quesL  protocolli.  

Come  funziona  internet  

  INTERNET  interconne4e  migliaia  di  so4oreL  di  computer  Questo  è  reso  possibile  dalla  condivisione  di  un  insieme  di  regole   comuni;   il   "protocollo   di   comunicazione”  conosciuto   come:   TCP/IP   (Transfert   Control   Protocol   /  Internet  Protocol)  

  Il   TCP/IP   divide   l’informazione   in   pacched   è   la  ricostruisce  a  desLnazione  

13/02/12  

5  

Pacched    I   daL   e   i  messaggi   trasmessi   tra   i   computer   collegaL   in   rete  vengono  suddivisi  in  tante  piccole    parL  de4e  paccheI.  

Indirizzo destinatario

Numero d’ordine

Pacchetto

Dati

I n   q u e s t o   m o d o   i  pacched  possono   seguire  l inee   di   trasmissione  diverse,

e  inviaL  in  maniere  più  facile  e  veloce  essendo  di  dimensioni  rido4e.  

Trasferimento  pacche4o  

IP: 255.34.32.3 Castelfranco Veneto

IP: 25.234.34.6

Numero d’ordine: 1

Pacchetto

Dati: 01010111

IP: 25.234.34.6

Numero d’ordine: 1

Pacchetto

Dati: 01010111

IP: 25.234.34.6

Numero d’ordine: 1

Pacchetto

Dati: 01010111

IP: 25.234.34.6

Numero d’ordine: 1

Pacchetto

Dati: 01010111

IP: 25.234.34.6

Numero d’ordine: 2

Pacchetto

Dati: 01110001

IP: 25.234.34.6 New York

Dato

IP: 25.234.34.6

Numero d’ordine: 1

Pacchetto

Dati: 01110001

13/02/12  

6  

Gli  indirizzi  di  Internet   Ma  come  fanno  i  computer  a  trovare  le  strada  giusta  per  ogni  messaggio?  

  A   questo   fine   viene   impiegato   uno   schema   di  indirizzamento  dei  computer  collegaL  in  rete  

 Ogni  host  è  dotato  di  un  suo  indirizzo  univoco,  cosLtuito  da   una   sequenza   di   qua4ro   numeri   da   0   a   255  denominato  indirizzo  IP  

Gli  indirizzi  di  Internet   Grazie   agli   indirizzi   IP   ogni   computer,   e   dunque   ogni  utente   della   rete,   è   in   grado   di   individuare   un   nodo   in  parLcolare  tra  milioni  e  milioni,  e  di  inviargli  daL  

 Ma  se  i  computer  si  trovano  perfe4amente  a  loro  agio  nel  gesLre  numeri,  lo  stesso  non  può  dirsi  degli  esseri  umani  

  Per   questo   al   sistema   di   indirizzi   numerici   è   stato  affiancato  un  sistema  di  nomi  simbolici,  assai  più  facili  da  ricordare  per  noi  esseri  umani  

13/02/12  

7  

I  nomi  in  internet    Tale   sistema   si   chiama  DNS   (Domain  Name  Service),   e   i  nomi   assegnaL  ai   computer   su   Internet   sono  ded  nomi  di  dominio    

  Essi  sono  composL  da  sequenze  di  cara4eri  alfanumerici  divise  da  punL  

I  nomi  in  internet   Ogni  suddivisione  idenLfica  in  modo  gerarchico  

  il  singolo  host    la  so4orete  (o  dominio)  di  cui  fa  parte    e  così  via  a  salire  di  livello  fino  ad  arrivare  ad  una  delle  macrosezioni  (o  domini  di  primo  livello)      in  cui  Internet  è  stata  suddivisa  

   

13/02/12  

8  

I  nomi  in  internet    Ogni  computer  è  localizzato  nella  rete  da  un  indirizzo  rappresentato  da  una  

sequenza  di  4  gruppi  di  cifre  alla  quale  è  associato  un  nome  con  la  stru4ura    

  Il  DNS  è  un  servizio  che  perme4e  di  associare  l’indirizzo  IP  numerico  con  il  suo  nome  

  Far  parlare  due  computer  in  rete  è  un  po’  come  effe4uare  una  telefonata…  

0423483930   0422748389  

93.95.217.12  

www.isFtutorosselli.net  72.14.234.104  

www.google.it  

Come  si  fa  a  vedere  tu4o  questo?    www.who.is    Andare  in  start    esegui    cmd    

 usiamo  il  comando  ping  

13/02/12  

9  

Servizi  internet  e  Web    email   Motori  di  ricerca    FTP  (upload  e  download)   WWW,  la  Grande  Ragnatela  Mondiale,  è  un  servizio  di  Internet  consistente   nella   possibilità   di   navigare   ed   usufruire   di   un  insieme  vasLssimo  di  contenuL  mulLmediali  

  Commercio  ele4ronico    E-‐learning:  imparare  sfru4ando  la  rete  internet  e  la  diffusione  di  informazioni  a  distanza  

 Web   2.0   spiccato   livello   di   interazione   sito/utente:   blog,  forum,  chat  e  social  network  

WWW  (World  Wide  Web)   Sito   internet   o   web   o   www:   insieme  delle   pagine   che   si   riferiscono   ad   uno  stesso   utente,   argomento   o   azienda,  registrate  su  un  server  internet  

 Browser:   programma   che   gli   utenL  internet   usano  per   visualizzare   le   pagine  (es.   internet   explorer,   mozilla   firefox,  google  chrome,  safari,  opera)  

13/02/12  

10  

SiL  web    Pagine  web:  documenL  pronL  per  essere  registraL  su  un  server  internet  

  Residenza   delle   pagine   web   su   un   server   (internet  provider)  

 URL   (Uniform   Resource   Locator)   è   una   sequenza   di  cara4eri   che   idenLfica   univocamente   l'indirizzo   di   una  risorsa  in  Internet    h4p://www.visualroute.it/strumenL/traceroute.asp    

 Cosa  serve?    HW  e  SW  per  le  pagine  web    PC,  collegamento  a  internet,  periferiche  mulLmediali    Editor  di  testo    oppure  web  editor  (dreamweaver,  prodod  open  source)  

  Browser    Programma   di   grafica   per   modificare   immagini   (paint,  gimp,  photoshop,  ecc.)  

    Porgramma   Filezilla   per   effe4uare   FTP   (File   Transfer  Protocol):  upload  e  download  del  sito    

13/02/12  

11  

Il  linguaggio  HTML   Hyper  Text  Markup  Language    Linguaggio  per  scrivere  pagine  web   Non  è  un  linguaggio  di  programmazione,  ma  piu4osto  di  un  linguaggio  di  forma4azione  di  una  pagina  

  Testo  +  codici  (tag)    Il  browser  interpreta  i  codici  contenuL  nel  testo  HTML  e  li  trasforma   in   comandi   per   la   costruzione   della   pagina   in  forma  grafica  

  I  tesL  scrid  in  HTML  hanno  estensione  .html    o  .htm  nel  nome  del  file  

I  tag  HTML    Stru4ura  generale  di  un  tag  HTML  

 ………..      Per  esempio:  

………..      Tu4o  quello  che  viene  scri4o  tra  le  B  sarà  trasformato  in  grasse4o,  ma  lo  rivedremo  meglio  in  seguito!  

13/02/12  

12  

Visualizzare  il  codice  HTML    Tag=  codici  distribuiL  all’interno  del  testo  e  racchiusi  tra  una  coppia  di  segni    

  QuesL  sono  i  codici  che  consentono  al  browser  la  formazione  della  pagina  in  formato  grafico.  

Dal  menù  pagina    selezionare  HTML  

Stru4ura  documento  HTML        inizio  del  documento      intestazione  del  documento,  informazioni  

   sulle  cara-erisFche  della  pagina  …  …            fine  intestazione        corpo  del  documento,  il  testo  della  pagina  con  

   i  paragrafi  e  i  link  …  …      fine  corpo  documento      fine  del  documento  

13/02/12  

13  

Intestazione  del  documento    …     conLene   una   serie   di   informazioni   necessarie  al  browser  per  una  corre4a  interpretazione  del  documento,   ma   non   visualizzate   all'interno  dello  stesso:   Lpo  di  HTML  supportato   Ltolo  della  pagina   parole  chiave  (per  motori  di  ricerca)   link  base  di  riferimento   sLli  (comandi  di  forma4azione)  

 …     ElemenL  principali:   DOCTYPE   TITLE   META  

13/02/12  

14  

 …     Pagina web di prova ..............

DOCTYPE    

 fornisce   informazioni   sul   Lpo   di   documento  visualizzato  

 deve   essere   il   primo   elemento   ad   aprire   il  documento    

 non  è  obbligatorio  

13/02/12  

15  

META     fornisce  meta-‐informazioni  sul  contenuto  del  documento    usate  dai  motori  di  ricerca  per  classificare  il  documento    non  è  obbligatorio  per  il  corre4o  funzionamento  del  sito  

TITLE  Pagina web di prova   Titolo  della  pagina    Compare  sulla  barra  del  Ltolo  della  finestra  del  browser   Usato  dai  motori  di  ricerca   Usato  nella  visualizzazione  di  “bookmark”  (siL  preferiL)  

13/02/12  

16  

Corpo  del  documento      …     Memorizza   il   contenuto   del   documento   (la   parte  visualizzata  all’utente  del  browser)  

 ……        gli   a4ribuL   di     configurano   alcuni   parametri   di  visualizzazione  del  documento  

A4ribuL  di      BACKGROUND:  se4a  lo  sfondo    BGCOLOR:  se4a  il  colore  di  sfondo    TEXT:  se4a  il  colore  del  testo    LINK,   VLINK,   ALINK:   se4ano   il   colore   del   testo  corrispondente  ai  link:    LINK:  link  non  visitato    VLINK:  link  già  visitato    ALINK:  link  “advo”  

13/02/12  

17  

Colori  del  corpo:  formato  RGB    Esempio:  

   idenLco  a      

  Colori  in  formato  RGB  =  3  numeri  (componenL  rossa,  verde  e  blu)  

  ogni  colore  va  da  0  a  255  (FF  in  esadecimale)     es.  #000000  =  nero,  #FFFFFF  =  bianco,    #777777=  grigio,  #00FF00  =  verde,  #0000FF  =  blu  

Esempio:  

13/02/12  

18  

Header  i  paragrafi    ,,…,     Perme4ono  di  inserire  Ltoli  (o  intestazioni)  all’interno  del  documento  

  il  testo  tra  …  viene  evidenziato  dal  browser    6  livelli  di  Ltoli    6  differenL  livelli  di  enfaLzzazione  del  testo  

EnfaLzzare  il  testo     …  (bold):  

  perme4e  di  visualizzare  testo  in  nere4o     …    (italic):  

   perme4e  di  visualizzare  testo  in  corsivo     …    (underlined):  

   perme4e  di  so4olineare  il  testo    definiscono  a4ribuL  fisici  di  forma-azione  

13/02/12  

19  

Altri  Tag  di       …    riga  o  paragrafo  centrato  

  Tag  singoli:     

 paragrafo   
 ritorno  a  capo     linea  orizzontale  

Scriviamo  la  nostra  prima  pagina  web  1.  Aprire  Blocco  

note  in  accessori  e  scrivere  il  testo  con  i  tag  

2.  Dal  menù  File,  Salva  con  nome…  

3.  Salva  come:  tud  i  file  

4.  Assegnare  il  nome  prova.htm  

13/02/12  

20  

Visualizzazione  nel  browser   Aprire  il  file  prova.htm  dal  browser  (non  in  linea):  doppio  clic  sull’icona  

I  link  descrizione    

ad  esempio:  tutorosselli.net”>  clicca  qui  per  accedere  al  sito  della  scuola  

 Nella  pagina  web  la  frase  tra  i  tag    …    comparirà  colorata  e  so4olineata  

 

13/02/12  

21  

Cara4eri  speciali    Stringhe  parLcolari  che  all’a4o  dell’interpretazione  da  parte  del  browser  vengono  trado4e  con  i  cara4eri  desideraL,  ad  esempio:  

&lt  ;  <  &gt  ;  >  &  &  €    €  

Per  accentare  una  le4era  si  usa:  è    è  È    È    

         

Esempio  di  link  

13/02/12  

22  

Esempio  di  link  

Esempio  di  link  

13/02/12  

23  

Esempio  di  link  

Le  immagini       Per  esempio:     

Le  immagini  come  link    

13/02/12  

24  

Le  immagini    La  sintassi  per  l’inserimento  delle  immagini  è:  

 

  È  possibile,  nella  zona  indicata  con  parametri  nella  sintassi  del  tag,  specificare  una  delle  opzioni  per  l’allineamento  con  il  parametro  ALIGN:  

ALIGN  =  TOP  (allineamento  dell’immagine  vicino  al  bordo  sup.)  ALIGN  =  MIDDLE  (allineamento  dell’immagine  al  centro)  ALIGN  =  BOTTOM  (allineamento  dell’immagine  vicino  al  bordo  inf.  )  

Le  immagini    L’opzione  ALT  perme4e  di  visualizzare  un  testo  al  posto  dell’immagine  qualora  questa  non  possa  essere  visualizzata.  

Ad  esempio:  va”>  

13/02/12  

25  

Le  immagini   Un  accorgimento  che  serve  a  rendere  più  veloce  la  visualizzazione  delle  pagine  consiste  nell’indicare  le  misure  in  pixel  della  larghezza  e  dell’altezza.  

  Per  esempio:  va”  

width=“150”  height=“93”>  

Le  liste  puntate  e  numerate  

13/02/12  

26  

Le  Tabelle  

Link  tra  le  pagine