Informatica Chiara Calamanti - Università Politecnica delle Marche - Dipartimento di Ingegneria dell' Informazione - Portale docenti
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Informatica
Chiara Calamanti
Università Politecnica delle Marche - Dipartimento di Ingegneria dell’ Informazione
c.calamanti@staff.univpm.it
World Wide Web
Una definizione di World Wide Web « L’universo dell’informazione globale accessibile tramite rete» (T. Bernars-Lee, l’inventore del WWW o Web)
Prima di affrontare il tema del web… •IPERTESTO •MULTIMEDIALITA’
Ipertesto
Un ipertesto è formato da un insieme di documenti,
collegati tra loro tramite riferimenti ipertestuali,
denominati link.
Parti di testo collegate tra loro logicamente.
Ipertesto
Documento informatizzato costituito da diverse porzioni di testo.
I collegamenti permettono all’utente di passare da una parte all’altra del testo.
Struttura reticolare che permette al lettore di organizzare la lettura di blocco
in blocco
Attuando quindi una navigazione o scansione non lineare
Ipertesto • È un testo digitale • È composto da più parti che sono testi digitali (chiamati nodi o topics o blocchi di testo) • Le parti sono in relazione tramite connessioni digitali detti collegamenti o link • La struttura dell’ipertesto determina il modo in cui se ne può fruire, chiamata navigazione • La struttura è legata a un autore/gruppo di autori che hanno scritto/scelto i testi e li hanno collegati tra loro. Ciò nonostante si parla si struttura aperta in quanto il lettore può passare da un ipertesto all’altro
Ipertesto • È un testo digitale • È composto da più parti che sono testi digitali (chiamati nodi o topics o blocchi di testo) • Le parti sono in relazione tramite connessioni digitali detti collegamenti o link • La struttura dell’ipertesto determina il modo in cui se ne può fruire, chiamata navigazione • La struttura è legata a un autore/gruppo di autori che hanno scritto/scelto i testi e li hanno collegati tra loro. Ciò nonostante si parla si struttura aperta in quanto il lettore può passare da un ipertesto all’altro
Struttura di un ipertesto - NODI
I nodi sono da considerare come le unità minimali di informazione con le
seguenti caratteristiche:
• Autonomia
• CompletezzaStruttura di un ipertesto - NODI
Struttura lineare
Struttura circolare
Struttura gerarchicaIpertesto • È un testo digitale • È composto da più parti che sono testi digitali (chiamati nodi o topics o blocchi di testo) • Le parti sono in relazione tramite connessioni digitali detti collegamenti o link • La struttura dell’ipertesto determina il modo in cui se ne può fruire, chiamata navigazione • La struttura è legata a un autore/gruppo di autori che hanno scritto/scelto i testi e li hanno collegati tra loro. Ciò nonostante si parla si struttura aperta in quanto il lettore può passare da un ipertesto all’altro
Ipertesto - COLLEGAMENTI Classificazione dei collegamenti: 1. Collegamenti interni ed esterni al nodo 2. Collegamenti che puntano a nodi all’interno dello stesso sito o ad altri siti 3. Collegamento di navigazione e attivazione 4. Collegamenti testuali e procedurali 5. Collegamenti associativi, strutturali e sitografici
Ipertesto - COLLEGAMENTI Classificazione dei collegamenti: 1. Collegamenti interni ed esterni al nodo Esempio: https://rb.gy/dn7wp5 • LINK INTERNI che puntano da una porzione di testo si un certo blocco a un’altra nello stesso blocco. • LINK ESTERNI che puntano una porzione di testo di un certo blocco ad un altro blocco di testo.
Ipertesto - COLLEGAMENTI Classificazione dei collegamenti: 1. Collegamenti interni ed esterni al nodo 2. Collegamenti che puntano a nodi all’interno dello stesso sito o ad altri siti Esempio: https://www.unimc.it/it/ateneo Nodi all’interno dello stesso sito a cui appartiene il nodo di partenza e collegamenti che puntano ad altri siti.
Ipertesto - COLLEGAMENTI
Classificazione dei collegamenti:
1. Collegamenti interni ed esterni al nodo
2. Collegamenti che puntano a nodi all’interno dello stesso sito o ad altri siti
3. Collegamento di navigazione e attivazione
Classificazione in base al tipo di interattività che suscita il collegamento.
A. Transizione predeterminata: quella che consente lo spostamento tra
una pagina e l’altra. Già definita a priori dall’autore.
B. Transizione dinamica: passaggio che avviene solo in funzione delle
scelte dell’autore ma anche del contesto, delle opzioni utente, della
elaborazione del programma.
MODULO DI RICERCA
http://docenti.unimc.it/Ipertesto - COLLEGAMENTI
Classificazione dei collegamenti:
1. Collegamenti interni ed esterni al nodo
2. Collegamenti che puntano a nodi all’interno dello stesso sito o ad altri siti
3. Collegamento di navigazione e attivazione
4. Collegamenti testuali e procedurali
A. Procedurali: hanno sede nella cosiddetta cornice ipertestuale.
Esempio: Comando «BACK» Comando «Contattaci» e le strutture di
navigazione tipo il MENU.
B. Testuali: quelli che hanno sede nel testo vero e proprio e che in
qualche misura sono caratterizzati dall’unicità dell’esperienza.Ipertesto - COLLEGAMENTI
Classificazione dei collegamenti:
1. Collegamenti interni ed esterni al nodo
2. Collegamenti che puntano a nodi all’interno dello stesso sito o ad altri siti
3. Collegamento di navigazione e attivazione
4. Collegamenti testuali e procedurali
5. Collegamenti associativi, strutturali e sitografici
A. Link associativo: collegamento testuale
B. Link strutturale: indirizza a una sezione dell’ipertesto;
C. Link sitografico: è di solito ospitato in elenchi che puntano a siti esterni
che hanno affinità con quello che ospita i link.Multimedialità Documento multimediale: un’opera nella quale ci sia una compresenza di una molteplicità (multi) di mezzi (media) di comunicazione diversi, quali testo, grafica, animazione e suono. Diversi tipi: • Debole • Intrinseca • Additiva • Nativa
Multimedialità Nel regolamento del Ministero della Pubblica Istruzione pubblicato con il Decreto 139 del 22 Agosto 2007, laddove si descrivono gli assi culturali e nello specifico quello dei linguaggi, con l’obiettivo di fare acquisire allo studente la conoscenza e consapevole fruizione di molteplici forme espressive verbali e non verbali, e più in particolare la padronanza della lingua italiana, la conoscenza di almeno una lingua straniera e un adeguato utilizzo delle tecnologie informatiche. In riferimento a questo ultimo tema si indica che, fra le competenze di base da acquisire a conclusione dell'obbligo di istruzione debba rientrare la competenza «Utilizzare e produrre test multimediali» fondata sulla capacità di «elaborare prodotto multimediali (testi,immagini,suoni) anche con tecnologie digitali».
World Wide Web
IPERTESTUALITA’
IPERMEDIALITA’
MULTIMEDIALITA’
World Wide WebWorld Wide Web - definizione
«L’universo dell’informazione globale accessibile tramite rete» (T. Bernars- Lee,
l’inventore del WWW o Web).
Il Web è un sistema ipermediale, distribuito globalmente che supporta accessi
interattivi a risorse e servizi.
- Ipermediale: diverse forme di rappresentazione delle risorse (testo, audio,
video,…) tra loro collegate
- Distribuito globalmente: risorse distribuite e scalate su l’intera internet.
NOTA:
Il Web non è sinonimo di Internet, ma rappresenta un’applicazione
dell’infrastruttura Internet!!!!World Wide Web - storia 1989: un gruppo di ricercatori informatici del CERN di Ginevra (tra cui T. Berners-Lee e R. Cailliau) furono incaricati di realizzare un meccanismo di collaborazione scientifica in un contesto internazionale 1991: il gruppo mostrò (con scarso successo) il primo prototipo dell’applicazione realizzata secondo il paradigma client-server: World Prototipo composto di: • un server che spediva risorse memorizzate localmente a chiunque lo richiedesse secondo il protocollo stabilito, e che memorizzava risorse spedite da remoto, senza autorizzazione o verifica • un editor di testi parzialmente WYSIWYG che permetteva di visualizzare documenti ipertestuali e di modificarli, creando link e blocchi di testo
World Wide Web - definizione I principali competitor del Web su Internet erano: • FTP: protocollo di scambio di file (no visualizzazione) • WAIS: server con notevoli potenzialità di ricerca su documenti di solo testo • Gopher: meccanismo di organizzazione di documenti di testo in gerarchie distribuite su più server 1992: l’NCSA (National Centre for Supercomputing Applications) esaminò il prototipo di WWW e decise di realizzarne una versione propria
World Wide Web - definizione • Berners-Lee e Cailliau fondarono il W3C per mantenere il controllo sull’evoluzione del Web • Microsoft, dopo una falsa partenza, realizzò un browser Web (Internet Explorer) ed un server Web (Microsoft Internet Information Server) 1997: nascita di XML; caso unico nella storia dell’informatica, sembra accontentare tutti (fornitori di contenuti, sviluppatori di applicazioni Web, progettisti di DBMS, ...) 1998: Netscape rilasciò il codice sorgente di Navigator – Progetto mozilla.org per sfruttare gli stessi principi di organizzazione della comunità Linux per un browser freeware
World Wide Web – fattori • autorialità (singolo emittente) • argomento di comunicazione (tema) • strategia argomentativa (layout) • destinatario (chi è l’obiettivo del sito) • collocazione fisica (server web) • collocazione virtuale (l’indirizzo web)
World Wide Web – sito responsive o
mobile?
Ormai la navigazione su smartphone e tablet cresce quasi
esponenzialmente, e dunque di pari passo l’importanza di avere siti web
“mobile-friendly”.
- scegliere di avere un sito web responsive o una versione mobile
separata?World Wide Web – sito responsive o mobile? I siti di vecchio stampo possono essere modificati e diventare mobile friendly in due modi: • con il design responsive: lo stesso sito serve computer e dispositivi mobili, usa lo stesso codice html, lo stesso indirizzo di pagina, ma ha una visualizzazione differente a seconda della grandezza del display • con la versione mobile del sito: il sito mobile è distinto, ha un diverso indirizzo di pagina e codice html, in base al dispositivo utilizzato per la connessione il sistema indirizza alla versione corretta del sito
World Wide Web – sito responsive
Un sito web responsive si definisce tale quando si presenta con un contenuto
dinamico che cambia, le immagini si ridimensionano e gli spazi prendono la
giusta forma in base alle esigenze.
Caratteristiche:
• Un solo sito, tanti dispositivi::
garanzia di assicurare una ottima “user-experience” su tanti (diciamo
pure tutti) dispositivi e per qualsiasi risoluzione di schermo. La qual cosa
è importantissima essendo impossibile prevedere che device o che
risoluzione avranno gli utenti che accedono al tuo sito web.
• I siti con versione mobile hanno URL differenti e differente HTML. (Quindi
richiede una nuova indicizzazione sui motori di ricerca).
• Inoltre un sito «desktop» fornisce, solitamente una migliore user
experience e per questo motivo molto spesso è preferita
• Esempio: https://www.adidas.it/World Wide Web – sito responsive
World Wide Web – sito mobile A differenza del responsive la creazione di siti web aziendali per mobile permette di ottimizzare il sito per smartphone e tablet, offrendo agli utenti un’esperienza specifica. Nella versione mobile il sito viene adattato alla caratteristiche specifiche dello strumento e alle esigenze degli utenti. Il sito per mobile non è la copia esatta di quello desktop (pur, ovviamente, richiamandolo), ma una versione ideata per garantire agli utenti una migliore fruizione dei contenuti da smartphone. Esempio: https://www.adidas.it/mobileapps
Domande • Cos’è la homepage? • Cos’è un splash page? • Cos’è un portale? • Cos’è un servizio web?
Esempio: Homepage https://www.trenitalia.com/
Esempio: Homepage https://www.unimc.it/it
Splash Page • Pre-home: Esempio: https://www.henrytimi.com/
Portale • Orizzontale o generalista: quando i portali si rivolgono a un’utenza eterogenea e veicolano informazioni sui temi più disparati, ma tipicamente di intrattenimento, informazione e pubblica utilità. • Verticale: quando l’utenza e le informazioni a essa destinate fanno riferimento a specifici settori mercelogici, aree di interesse, tematiche o zone geografiche.
Portale • Orizzontale o generalista: quando i portali si rivolgono a un’utenza eterogenea e veicolano informazioni sui temi più disparati, ma tipicamente di intrattenimento, informazione e pubblica utilità. Esempio: https://www.msn.com/it-it/ • Verticale: quando l’utenza e le informazioni a essa destinate fanno riferimento a specifici settori merceologici, aree di interesse, tematiche o zone geografiche. Esempio: https://www.gazzetta.it/Tennis/
Servizio Web • Motori di ricerca: Google, Yahoo, Bing…. • Aste online: eBay… • Vendita online: IBS, Zalando… • Intermediazione commerciale online: PayPal… • Posta elettronica: Yahoo, Gmail…
Tipologie siti:
• Siti istituzionali: (enti pubblici, università, ecc.)
❖ https://www.unimc.it/it
❖ http://www.registroimprese.it/
❖ https://www.comune.macerata.it/
• Siti aziendali: (business to consumer b2c e business to businessb2b)
❖ https://www.garofoli.com/it/
❖ https://www.tods.com
❖ https://www.frau.it
• Siti personali: (… anche i blog)
❖ https://ninofezzacinereporter.altervista.org/biografia/#
❖ http://www.gerypalazzotto.it/
❖ https://diariodisiria.com/about-me/
❖ https://invececoncita.blogautore.repubblica.it/Funzioni siti: • Funzione informativa: il sito è orientato a mettere a disposizione dell’utente dati, informazioni, notizie; Il centro della comunicazione è il referente, il contesto. • Funzione conativa: il sito è orientato a convincere il fruitore, per condizionare le scelte; Il centro di comunicazione è il destinatario. • Funzione emotiva: il sito è pensato per mettere in luce il punto di vista di chi comunica; Il centro di comunicazione è l’emittente.
Pagina statica Pagina statica: quando esiste una pagina sul server redatta dall’autore. ESEMPI: https://ninofezzacinereporter.alte rvista.org/la-coppia-indiana-che- fa-lezione-in-strada-per-i- bambini-poveri-rimasti-senza- scuola-a-causa-della-pandemia/ https://www.unimc.it/it/didattica
Pagina dinamica: quando la pagina viene
generata da un programma a partire dalle
descrizioni parziali disponibili nel server e
Pagina dinamica da informazioni attinente da un archivio.
Esempi:
http://docenti.unimc.it/
https://www.ibs.it/libri-vintageStatica o dinamica? I siti web possono essere statici o dinamici: • pagine statiche : HTML • pagine dinamiche (generate on the fly) - elementi dinamici (script) - CMS (Content Management Systems) - file temporanei
Protocolli - HTTP
Esistono tre standard principali per il web (gestiti dal W3C):
• HTTP (HyperText Transfer Protocol) - protocollo di rete per lo
scambio di messaggi con architettura client/server
• un utente specifica un link o utilizza un motore di ricerca e il
browser invia la richiesta ad un server
• la richiesta viene gestita tramite DNS e grazie
all’infrastruttura direte (TCP/IP)
• quando il server risponde, il browser formatta la pagina,
ricostruisce l’ipertesto (link) e gestisce i contenuti
multimediali
• il browser può quindi richiedere nuovi dati per visualizzare la
pagina o invocare programmi (JavaScript, ecc.)Protocolli - HTTP • Ogni volta che viene visitata una pagina il client cede delle informazioni al server • le informazioni vengono memorizzate in file di log e vengono usate per ottimizzare i processi e a fini statistici • le statistiche sui siti web sono gestite anche dal W3C: GlobalWebStats (http://www.w3counter.com/globalstats.php)
Protocolli - HTTP • Esistono altri tipi di comunicazione: tecnologie push • feed RSS (Really Simple Syndication): l’utente fa unabbonamento a un feed RSS e viene aggiornato senza che ne faccia richiesta esplicita (ad es. le news) • podcasting usa la stessa tecnologia dei feed RSS ma permette la diffusione di materiale video e audio • feed RSS e podcasting permettono di aggregare le notizie e scaricarle automaticamente sul dispositivo connesso a Internet senza dover visitare tutti i siti web (ad es. Repubblica)
Protocolli - HTML • Il linguaggio HTML (HyperText Markup Language) - linguaggio di marcatura per implementare le pagine web • Prevede l’uso di marche (tags) doppie o singole ➢ formattazione (anche se spesso si usano fogli di stile css) ➢ struttura del documento ➢ link ipertestuali ➢ aggiunta di oggetti multimediali
Protocolli - HTML Esistono altre tecnologie, che si affiancano all’HTML, per ovviare la sua povertà espressiva: • JavaScript: linguaggio di scripting per scrivere programmi che vengono interpretati ed eseguiti dal browser • Java: linguaggio di programmazione, vengono aggiunti alle pagine HTML programmi pre-compilati (applet) che possono essere eseguiti solo se sul client è presente il Java Runtime Environment (JRE) • Flash: gestione dei contenuti multimediali (immagini e filmati) • XML: eXtensible Markup Language, è più espressivo di HTML eviene solitamente usato per l’archiviazione di testi su web
Protocolli - URL URL (Uniform Resource Locator) è un indicatore univoco di una risorsa web protocollo://hostname:porta/pathname?query#frammento • protocollo (http, https, ftp) • hostname (indirizzo ip o nome indirizzo) • porta (opzionale, se omesso viene impostata la porta di default del protocollo) • pathname (percorso all’interno del filesystem del server) • query (informazioni parametriche per la generazione di pagine dinamiche) • frammento (indica un punto preciso della pagina)
Protocolli - URL
Esempi:
https://www.youtube.com/watch?v=UfNcVZHB13w
Quando gli indirizzi sono troppo lunghi si possono usare:
• Alias
• URL shorteners :
https://bitly.com/
goo.gl
https://tinyurl.com/Protocolli - URL E si l’indirizzo di una pagina cambia? • PURLs (Persistent URLs) assicura che una pagina sia sempre raggiungibile dall’esterno anche se il suo URL cambia
Come si accede ad un sito web? • Direttamente: scrivendo l’indirizzo nel browser • Indirettamente: seguendo un link presente in un altro sito • Tramite un motore di ricerca: seguendo una delle pagine elencate grazie ad una ricerca La maggior parte degli accessi avviene tramite motore di ricerca
Come funziona un motore di ricerca?
• cerca in tutti i siti del web
• cerca nel web tutti i siti che contengono le parole chiave
• cerca nell’archivio dei siti web
• dice automaticamente in quali siti è presente la parola
chiave(sfruttando altri programmi)
• NESSUNA DI QUESTE RISPOSTE!!!!Come funziona un motore di ricerca? Ricerca: - input: lista di parole chiave - output: lista di collegamenti Data una parola chiave, viene effettuata una ricerca testuale Ricerca avanzata: • operatori logici (AND, OR, (NOT=-)) • uso dei doppi apici (“ ”) • Lingua • Date • tipo di dato (immagini, video, ecc.)
Come funziona un motore di ricerca? Come funziona in realtà un motore di ricerca? • i risultati riguardano solo parte del web • la richiesta di un utente viene tradotta in una query ad un database dove sono presenti informazioni di un certo numero di pagine web precedentemente catalogate • l’interrogazione viene fatta tramite l’attivazione di un programma di gestione di un archivio • questa ricerca locale garantisce tempi di risposta molto brevi La pagina generata da un motore di ricerca è statica o dinamica?
Come funziona un motore di ricerca?
L’archivio di ricerca viene costruito tramite spider (o crawler,
robot,bot)
• sfrutta una lista di indirizzi noti
• esplora, analizza e indicizza le pagine
• durante la visita vengono identificati i link esterni per le
successive esplorazioni
• la fase di indexing serve a identificare le parole chiave (anche
grazie ai tag HTML)
• l’attività dello spider è continua, asincrona (rispetto alle
richieste)e ciclica
Cos’è la copia cache di una pagina web?Cache Una cache è un archivio di file temporanei che vengono utilizzati per velocizzare l’esperienza dell’utente. Nel caso dei browser web, è una memoria temporanea del computer dove vengono salvati i file dei siti web aperti in particolare: loghi ed immagini. Lo scopo è quello di velocizzare il tempo di caricamento dello stesso sito quando si andrà di nuovo a visitarlo.
Motori di ricerca - ranking RANKING: ordinamento dei risultati. • rilevanza • popolarità Sponsored links (a pagamento) : sono collegamenti per i quali qualcuno paga il motore di ricerca affinché siano proposti con evidenza quando gli utenti cercano certe parole chiave di interesse per il committente dello sponsored link.
Motori di ricerca Riassumendo, un motore di ricerca consiste di: • un archivio • un programma di interrogazione • un programma di scansione e indicizzazione La qualità di un motore di ricerca è data dall’ampiezza del suo archivio, dalla pertinenza dei risultati e dall’ordinamento proposto
Motori di ricerca
• metamotori: fondono le ricerche effettuate con più
motori di ricerca generalisti
(http://www.metacrawler.com/)
• plurimotori: esecuzione parallela senza fusione dei
risultati
• clusterizzatori: cercano di individuare cluster nei risultat
icercando concetti significativi per la ricerca
(http://search.yippy.com)
• motori specialistici:
➢ Google Books
➢ Google ScholarWorld Wide Web - evoluzione • Una classificazione “ufficiale” dell’evoluzione del Web: – Web 1.0 – Web 1.5 – Web 2.0 Una classificazione “alternativa” dell’evoluzione del Web: – Prima generazione – Seconda generazione –Terza generazione – Servizi Web e Web semantico – Non solo evoluzione delle applicazioni ma anche prestazioni
World Wide Web – da web 1.0 a web 2.0 Web 1.0: modello di interazione statico Semplice consultazione e fruizione di contenuti statici Web 1.5: modello di interazione dinamico Consultazione e fruizione di contenuti dinamici Web 2.0: applicazioni online che permettono uno spiccato livello di interazione sito-utente – Termine coniato da T. O’Reilly e D. Dougherty nel 2004 – Blog, forum, chat, sistemi quali Wikipedia, YouTube, Flickr, Facebook, Myspace, Gmail, ... – Fruizione e creazione/modifica di contenuti multimediali
World Wide Web – da web 1.0 a web 2.0
Struttura WWW:
• Pagine web:
• testo, audio, grafica, immagini, filmati. Le immagini per essere
riconosciuti dal browser devono essere in formati standard (jpg,
gif, png). Per visualizzare altri formati è necessario installare plug-
in: Acrobat Reader, QuickTime, FlashPlayer)
• Collegamenti
• Le pagine sono distribuite su Server web o Server http
• L’utente naviga usando client detti browser (Firefox, Chrome, Safari,
Opera…..)WEB 2,0 Riguarda i siti web in cui vengono condivise le informazioni e c’è interazione tra gli utenti (e i siti che vengono visitati) • Facebook • Twitter • LinkedIn (endorsement) Come sono costituiti? • Profilo personale • Rete di contatti Altre applicazioni: • Google Drive, Instagram, Foursquare • Blog • applicazioni Wiki (es. Wikipedia) • TripAdvisor, Booking, Amazon, eBay (recommender systems)
INTERNET https://www.internetfestival.it/programma/ FESTIVAL
Puoi anche leggere
