I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un...

15
I linguaggi del Web Ipertesto Browser WWW HTML CSS Javascript

Transcript of I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un...

Page 1: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

I linguaggi del Web

• Ipertesto

• Browser

• WWW

• HTML

• CSS

• Javascript

Page 2: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Un po’ di storia 1965 - Theodor Holm Nelson (1937)

(sociologo, filosofo e pioniere dell'informatica statunitense)

«Lasciate che io introduca il termine IPERTESTO per rappresentare un insieme di materiale scritto o figurato interconnesso in un modo così complesso da non poter essere rappresentato su carta. … IPER ha il significato di estensione[…], questo prefisso rappresenta l’impossibilità di rappresentare le informazioni contenute attraverso una rappresentazione lineare, come una stringa di testo»

I linguaggi del Web

Page 3: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Un po’ di storia 1989 – Tim Berners-Lee (1955) - informatico britannico, inventore del

World Wide Web, «ragnatela mondiale» - all’epoca ricercatore nei laboratori del CERN di Ginevra

1991 – primo sito web

1993 - Apparizione del primo browser pensato per il web, Mosaic.

http://info.cern.ch/hypertext/WWW/TheProject.html Pagina web STATICA

Attualmente i documenti HTML sono in grado di incorporare molte tecnologie, che offrono la possibilità di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica, interazioni dinamiche con l'utente, animazioni interattive e contenuti multimediali. Si tratta di linguaggi come CSS, JavaScript e jQuery, XML, JSON, o di altre applicazioni multimediali di animazione vettoriale o di streaming audio o video.

I linguaggi del Web

Page 4: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Un po’ di termini World Wide Web - sezione multimediale di Internet, che

gestisce un insieme incalcolabile di documenti di tipo ipertestuale e ipermediale (testi, immagini, video, suoini) organizzati in pagine di informazione, dette pagine web, create da aziende, enti pubblici e privati, e messe a disposizione degli utenti di tutto il mondo.

Ipertesto - nel Web è un insieme di documenti, residente su uno o più server della rete Internet, che ha la possibilità di essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link) realizzati mediante parole o immagini, sui quali occorre fare clic con il mouse

Internet (la rete delle reti) – una rete formata da un gruppo di calcolatori e apparecchiature varie, collegati da canali e dispositivi di comunicazione, che possono scambiarsi messaggi e condividere informazioni.

Browser – programma di navigazione che permette la consultazione di testi ipertestuali e ipermediali.

Linguaggio HTML (HyperText Markup Language) – linguaggio con cui sono realizzate le pagine web, in modo che possano essere correttamente interpretate dal browser e visualizzate in forma grafica.

I linguaggi del Web

Page 5: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Un po’ di termini Architettura Client/Server alcuni computer

chiamati server (servente) mettono a disposizione risorse e offrono servizi mentre altri, detti client (cliente o richiedente) li utilizzano.

I linguaggi del Web

Page 6: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Il linguaggio HTML Normali testi di caratteri, modificabili e

visibili con qualunque programma di trattamento dei testi (Word, Blocco note etc.).

Un documento in formato Web (estensione .htm o .html) può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi alla rete.

Sullo schermo viene visualizzata una pagina in formato grafico: la visualizzazione è il risultato di un’elaborazione del browser che interpreta i codici contenuti nel file e li trasforma in comandi per la costruzione della pagina.

I linguaggi del Web

Page 7: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Esempio

I linguaggi del Web

Page 8: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il
Page 9: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

I linguaggi del Web

Page 10: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Fogli di stile (CSS)

CSS (Cascading Style Sheet) –

documento in formato testuale

che definisce il controllo sulla

visualizzazione della pagina HTML

e sul suo layout, cioè la

disposizione degli elementi nella

pagina, con le caratteristiche

riguardanti i font, i colori, gli

allineamenti e le spaziature.

I linguaggi del Web

Page 11: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Fogli di stile (CSS)

I linguaggi del Web

Page 12: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Attività

I linguaggi del Web

Riprendiamo il nostro esercizio salvato in

prova.html e proviamo ad aggiungere dei

colori sui testi.

Page 13: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

La programmazione web Script – indica un testo che, anziché contenere una

descrizione o un messaggio, è formato dai comandi di un linguaggio, organizzati in una sequenza o in una selezione del tipo se… allora... oppure in una ripetizione.

Javascript – è un linguaggio interpretato, cioè non viene compilato, e ogni comando viene eseguito passo passo direttamente dal browser. In questo caso non stiamo creando un vero programma.

I Javascript possono essere inseriti nelle pagine HTML per diversi scopi: Gestire gli eventi che possono accadere durante la

consultazione delle pagine, provocati dall’utente con il clic del mouse o dalla navigazione all’interno di un sito;

Fornire messaggi di avvertimento o risposte alle scelte effettuate;

Acquisire le scelte dell’utente all’interno di un elenco e lanciare l’esecuzione dell’azione conseguente;

Controllare la validità dei dati inseriti in un modulo (form) prima dell’invio;

Apportare modifiche all’aspetto di una pagina web durante la sua visualizzazione con il browser.

I linguaggi del Web

Page 14: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

I linguaggi del Web

Page 15: I linguaggi del Web - omnicomprensivoatessa.gov.it · in forma grafica. I linguaggi del Web . Un po’ di termini ... costruzione della pagina. I linguaggi del Web . Esempio ... Il

Il computer non è una macchina intelligente

che aiuta le persone stupide,

anzi è una macchina stupida che funziona solo

nelle mani delle persone intelligenti.

- Umberto Eco -