il Web – parte 1

Formazione aziendale

Differenza tra Internet e Web

1. Principali servizi su Internet

2. Cos’è Internet

3. Cos’è il Web - keywords

4. Brevissimi cenni storici

1. Principali servizi su Internet

World Wide Web Webcast Web Radio

Motori di ricerca File sharing Blog

FTP Chat E-Commerce

Gopher Podcast E-Learning

E-Mail IPTV E-Government

Mailing list Forum E-health

Newsgroup VoIP Home banking

Telnet Streaming Multiplayer

World Wide Web Webcast Web Radio

Motori di ricerca File sharing Blog

FTP Chat E-Commerce

Gopher Podcast E-Learning

E-Mail IPTV E-Government

Mailing list Forum E-health

Newsgroup VoIP Home banking

Telnet Streaming Multiplayer

2. Cos’è Internet

Internet (dal latino inter, "tra" e dall'inglese net, "rete", tra la rete) è una rete di computer mondiale ad accesso pubblico attualmente rappresentante il principale mezzo di comunicazione di massa.

computer + browser Internet service provider = Internet

Ciò è reso possibile da una suite di protocolli di rete chiamata "TCP/IP" dal nome dei due principali - il TCP e l'IP - la "lingua" comune con cui i computer di Internet si interconnettono e comunicano tra loro indipendentemente dalla loro architettura hardware e software.

linea di telecomunicazione dedicata linea telefonica > Rete Tel. Generale

(ADSL, HDSL, VDSL, GPRS, HSDPA, ecc.) (POTS, ISDN, GSM, UMTS, ecc.)

Cos’è Internet

Costituita da alcune centinaia di milioni di computer collegati tra loro con i più svariati mezzi trasmissivi (es.: doppino, fibra ottica, etc.), Internet è anche la più grande rete di computer attualmente esistente, motivo per cui è definita "rete delle reti" o "rete globale“, collegando tra loro reti di tipo LAN, MAN e WAN (Local/Metropolitan/Wide Area Network).

I suoi utenti, in costante crescita, nel 2008 hanno raggiunto quota 1,5 miliardi e, visto l'attuale ritmo di crescita, si prevede che saliranno a 2,2 miliardi nel 2013.

Rete Telefonica

Internet Voip

Con il miglioramento della tecnologia VoIP, Internet soppianterà la Rete Tel. inglobandola in sé, in quanto basata

sulla più efficiente tecnica della commutazione di pacchetto (≠ c. di circuito)

3. Cos’è il Web

“Il World Wide Web

ha le potenzialità per svilupparsi in una

enciclopedia universale che copra tutti i campi

della conoscenza e in una biblioteca completa di

corsi per la formazione”

Richard Stallman

Prima pagina del Web

Cos’è il Web

Il World Wide Web -WWW oWeb - anche conosciuto come Grande Ragnatela Mondiale, è un servizio di Internet consistente nella possibilità di navigare e usufruire di un insieme di contenuti multimediali e di ulteriori servizi accessibili a tutti o a una parte selezionata degli utenti di Internet.

Caratteristica principale del Web è che i suoi contenuti sono tra loro collegati (ipertesto > link). E i suoi servizi possono essere resi disponibili dagli stessi utenti di Internet. Per quanto riguarda i contenuti quindi, essendo Internet una rete di computer ad accesso pubblico, il Web possiede la straordinaria peculiarità di offrire a chiunque la possibilità di diventare editore e, con una spesa estremamente esigua, di raggiungere un pubblico potenzialmente vastissimo distribuito in tutto il mondo.

Contenuti, servizi

Marketing

Cos’è il Web

Il Web è stato inizialmente implementato da Tim Berners-Lee, mentre era ricercatore al CERN, e da un suo collega, Robert Cailliau, e oggi gli standard su cui è basato, in continua evoluzione, sono mantenuti dal World Wide Web Consortium (W3C).

La nascita del Web risale al 6 agosto 1991, giorno in cui Berners-Lee mise on-line su Internet il primo sito Web. Inizialmente utilizzato solo dalla comunità scientifica, il 30 aprile 1993 il CERN decide di rendere pubblica la tecnologia alla base del Web Era del Web

Primo server web - CERN

implementazione funzionamento

Standard:

HTML - linguaggio di markup

HTTP - protocollo di rete

URL - schema identificazione

Contenuti distribuiti su più computer nel Pianeta

pagina web : URL nel browser web richiesta al web server

indirizzo IP > Domain Name System (DNS) pacchetti dal server web.

il testo HTML di una pagina è richiesto per primo e subito interpretato dal browser web che, successivamente, richiede eventuali immagini o file.

Una volta ricevuti i file, il browser formatta la pagina sullo schermo seguendo le specifiche HTML, CSS, o di altri linguaggi.

Cos’è il Web - keywords

4. Brevissimi cenni storici 1960 Avvio delle ricerche di ARPA, progetto del Ministero della Difesa degli Stati Uniti

1967 Prima conferenza internazionale sulla rete ARPANET

1969 Collegamento dei primi computer tra 4 università americane

1971 La rete ARPANET connette tra loro 23 computer. Ray Tomlinson inventa l’e-mail

1972 Nascita dell'InterNetworking Working Group, organismo incaricato della gestione di Internet; Ray Tomlinson propone l'utilizzo del segno @ per separare il nome utente da quello della macchina

1973 La Gran Bretagna e la Norvegia si uniscono alla rete con un computer ciascuna

1979 Creazione dei primi Newsgroup (forum di discussione) da parte di studenti americani

1981 Nasce in Francia la rete Minitel. In breve tempo diventa la più grande rete di computer dopo gli USA

1982 Definizione del protocollo TCP/IP e della parola "Internet"

1983 Appaiono i primi server dei nomi dei siti

1984 La rete conta ormai mille computer collegati

1985 Sono assegnati i domini nazionali: .it per l'Italia, .de per la Germania, .fr per la Francia, ecc.

1986 Viene lanciato LISTSERV, il primo software per la gestione di una mailing list; In aprile, da Pisa, sede del Centro Nazionale Universitario di Calcolo Elettronico (Cnuce), viene realizzata la prima connessione Internet dall'Italia con gli Stati Uniti

1987 Sono connessi 10 mila computer; Viene registrato “cnr.it”, il primo dominio con la denominazione geografica dell'Italia

1989 Sono connessi 100mila computer

1990 Scomparsa di ARPANET; apparizione del linguaggio HTML

1991 Il CERN (Centro Europeo di Ricerca Nucleare) di Ginevra annuncia la nascita del World Wide Web

1992 Un milione di computer sono connessi alla rete

1993 Apparizione del primo browser pensato per il web, Mosaic

1996 Sono connessi 10 milioni di computer

1999 Gli utenti di Internet sono 200 milioni in tutto il mondo

2008 Gli utenti di Internet sono circa 600 milioni in tutto il mondo

2009 Gli utenti di Internet sono circa 1 miliardo in tutto il mondo

2010 Internet - nato per scopi militari - viene candidato al Nobel per la Pace

Brevissimi cenni storici

Da Arpanet a Internet (anni 70 e 80)

Brevissimi cenni storici

Rete Internet, 1982 World Wide Web screenshot, 1991

Da Internet al WWW (anni 80 e 90)

Il WWW oggi intorno a Wikipedia

Le caratteristiche del Web

1. Risoluzione monitor

2. Dimensione siti

3. Differenza browser - statistiche

4. Formati immagine (jpg, gif, png, bmp) - immagini non visualizzabili

5. Concetto di risoluzione (web vs. carta) - dimensioni e misure delle immagini

Le risoluzioni standard o modalità video sono combinazioni di parametri utilizzate dall'industria elettronica per definire l'interfaccia video del computer.

Tali parametri di solito sono:

- risoluzione dei display (specificata dalla larghezza e altezza in pixel),

- profondità di colore (in bit),

- velocità di refresh (refresh rate, espressa in hertz).

La continua evoluzione dell'elettronica e della tecnologia di visualizzazione aumenta sempre più la definizione, la superficie visualizzabile e le dimensioni stesse degli schermi.

Fino al 2003, la maggior parte dei monitor aveva un Aspect ratio di 4:3, alcuni di 5:4. Dal 2003 al 2006 si sono resi disponibili vari monitor con un rapporto di risoluzione di 16:10, inizialmente sui laptop e poi sui monitor per PC.

Questo cambiamento è dovuto sia al fatto che con questo rapporto si vedono meglio film e giochi ma soprattutto le attività di videoscrittura ne hanno tratto beneficio potendo visualizzare due pagine A4 affiancate; anche il CAD ha potuto sfruttare lo spazio in più per la visualizzazione dei menù a fianco del disegno grafico. La Video Electronics Standards Association (VESA) ha definito diversi standard video, mentre gli ergonomici sono definiti dal TCO.

1. Risoluzione monitor

Risoluzioni video più comuni nei PC che si sono evoluti dall'originale IBM PC, più alcune che sono supportate da altri tipi di computer come ad esempio gli Apple

Significato prefissi nel nome delle risoluzioni

Risoluzione monitor - legenda

Tipi di interfacce video per PC

Sebbene i prefissi comuni super S e ultra U non indicano una specifica variazione alla risoluzione

standard, i prefissi hanno uno specifico significato:

Quarter (Q) - Un quarto della risoluzione di base.

Wide (W) - Risoluzione più ampia di quella base, di cui mantiene il numero di righe, che permette un Aspect ratio di 16:9 o 16:10.

Quad(ruple) (Q) - Quattro volte i pixel della risoluzione di base ossia due volte in orizzontale e due volte in verticale il numero di pixel.

Hexadecatuple (H) - Sedici volte i pixel della risoluzione di base ossia quattro volte in orizzontale e quattro volte in verticale il numero di pixel.

eXtended (X).

Questi prefissi possono anche combinarsi come, ad esempio, in WQXGA o WHUXGA.

Nella tabella precedente è riportato anche il tipo di interfaccia video che permette di collegare

un monitor a un PC e visualizzare la risoluzione indicata secondo le seguenti specifiche:

CGA - Interfaccia dedicata digitale Color Graphics

Adapter.

VGA standard - VGA originale o superiore (VESA VGA).

Non ancora supportata

Una risoluzione di 640x480 indica che l'immagine sul monitor è formata da 640 colonne e 480 righe. Nel caso dei monitor LCD o al plasma l'immagine verrà riadattata alla risoluzione dello schermo. Nel caso di un monitor a tubo catodico, l'immagine verrà proiettata solo se rientra nel range di risoluzione minima e massima, altrimenti non sarà visualizzata.

Anno High+ 1024 x 768

800 x 600

640 x 480

Unkn.

2010 76% 20% 1% 0% 3%

2009 57% 36% 4% 0% 3%

2008 38% 48% 8% 0% 6%

2007 26% 54% 14% 0% 6%

2006 17% 57% 20% 0% 6%

2005 12% 53% 30% 0% 5%

2000 4% 25% 56% 11% 4%

Anno 16.777.216 65.536 256

2010 97% 3% 0%

2009 95% 4% 1%

2008 90% 8% 2%

2007 86% 11% 2%

2006 81% 16% 3%

2005 72% 25% 3%

2000 34% 54% 12%

Statistics are important information. What you can read from the statistics below

is that most users are using a screen resolution of 1024x768 pixels or higher,

with a color depth of at least 65K

The current depht color trend is that most computers use 24 or 32 bits hardware to

display 16.777.216 different colors. Older computers often use 16 bits display hardware. Very old computers uses 8 bits

2. Dimensione siti statistiche > www.w3schools.com

3. Differenza browser

Problemi di visualizzazione sito Utilizzo browser senza supporto

La visualizzazione del sito web con browser diversi è un problema che affligge tanti webmaster, in quanto, un sito visto correttamente ad esempio con Firefox, a volte con Internet Explorer o con Chrome può avere dei problemi.

I problemi di visualizzazione ci sono quasi sicuramente se al sito si accede con un browser un po’ datato tipo Internet Explorer 6; questo è dovuto al fatto che tempo fa i produttori di browser, per interesse personale, non si adattavano completamente agli standard internazionali stabiliti per il web, inserendo proprietà css e html valide solo per il loro browser.

Questo è per il webmaster un problema da non sottovalutare, in quanto l'utente che si collega al sito utilizzando un browser vecchio, se non ha una corretta visualizzazione del sito web, difficilmente tornerà a vederlo.

Pur avendo Microsoft fissato al 13 Luglio 2010 la data con la quale terminerà il supporto al browser Internet Explorer 6, insieme al Service Pack 2 di Windows XP sia in versione Home che Professional, tanti utenti continueranno ancora ad utilizzare IE6 e SP2 sottovalutando il rischio nell'utilizzare applicazioni che non hanno più supporto (non verranno più rilasciati aggiornamenti sulla sicurezza di questi prodotti).

Differenza browser - statistiche > www.w3schools.com

è interessante vedere le statische d' uso dei browser su NetMarketShare o su W3Counter. Da queste statistiche si può affermare che non possiamo sottovalutare la visualizzazione

del sito web né con altri browser, né con altre versioni, in particolare con IE6 ed IE7

Anno IE FF CHR SAF OPE

2010 Sept

31.1%

45.1% 17.3% 3.7% 2.2%

2009 Jan

44.8% 45.5% 3.9% 3.0% 2.3%

2008 Aug

51.0%

43.7% - (3.1%)

2.6% 2.1%

2007 Nov

56.0%

36.3% MOZ 1.2%

1.8% 1.6%

2004 Nov

76.2% -(16.6%)

16.5% (3.4%)

NET 1.7%

1.6%

2003 Mar

88.0%

- 4.2% 3.4% 1.2%

2002 Nov

83.4%

AOL 5.2%

-

8.0% -

Anno Tot IE9 IE8 IE7 IE6

2010 Sept

31.1%

0.2% 17.3 % 8.0% 5.6%

2009 Dec

37.2% - 13.5% 12.8% 10.9%

2008 Dec

46.0%

- IE7 26.1%

IE6 19.6 %

IE5 0.3 %

Anno Tot FF 4.0 FF 3.6 FF 3.5 FF 3.0

2010 Sept

45.1% 0.8% 35.3% 5.6% 2.9%

2009 Dec

46.4% - FF 3.5 33.3%

FF 3.0 11.2%

FF 2.0 1.2 %

2008 Dec

44.7% -

FF 3.0 38.1%

FF 2.0 6.2%

FF 1.5 0.1%

Variabili per l’utente

Differenza browser

Variabili per il webmaster

Gratuità

Compatibilità col proprio pc

Visualizzazione appropriata dei propri siti

Rispetto della privacy

Sicurezza (informatica)

Gestione dei propri dati di navigazione

Personalizzazione

Velocità (download, searching e loading)

Pesantezza e crashing

Scelta della lingua

Assistenza / FAQ / Forum

Accessibilità

Usabilità, user experience

(Codice aperto)

Differenti layout di un sito

Differenti standard dei b.

Differenti codici e linguaggi

Differenti versioni di uno stesso browser

Differenti sistemi operativi

Differenti risoluzioni e dimensioni monitor utente

Differenti caratteristiche del pc e tipologie di connessione

http://opentochoice.org/it/

4. Formati immagine In cosa differiscono le tre immagini mostrate sotto? Nel formato. L'immagine sulla sinistra è in

formato GIF, quella al centro in formato JPEG e quella sulla destra in formato PNG.

Figura 1: tre immagini simili... ma non identiche!

Senza entrare nel merito dei dettagli tecnici della compressione, soffermiamoci sul fatto che esistono due tipi di compressione delle immagini:

- Compressione priva di perdita di dati. Quando il file viene visualizzato dopo la modifica, ciascun pixel si trova di nuovo allo stesso posto, all'interno dell'immagine.

- Compressione con perdita di dati. A modifica avvenuta, il file appare qualitativamente inferiore, in maniera proporzionale al tipo di compressione a cui si è fatto ricorso.

La scelta del formato migliore per il proprio lavoro va effettuata sulla base dei seguenti criteri.

Messo a punto da JPEG (Joint Photographic Expert Group), questo formato consente di visualizzare fino a 16,7 milioni di colori. Non è possibile creare animazione, né definire colori trasparenti. La compressione comporta la perdita di dati, come è mostrato nella figura seguente. Nell'immagine sulla destra, una compressione elevata evidenzia la perdita di dati associata a questo tipo di formato.

Figura 3: il formato JPG può comportare una perdita significativa di dati

La perdita di qualità è legata a un livello di compressione particolarmente elevato (un rapporto di 50:1). È chiaro che una compressione minore inciderebbe in maniera meno significativa sul livello di qualità. È possibile eliminare del tutto la compressione selezionando un livello pari a zero, ma ciò comporta tempi di scaricamento inevitabilmente maggiori! Come regolarsi dunque sull'impiego del formato JPEG?

Il formato è adatto per le fotografie a colori.

Non è invece adatto a immagini contenenti elementi tipografici o geometrici.

È inutilizzabile per la creazione di profili o animazioni.

Formati immagine - jpg

Originariamente creato per CompuServe, questo formato è soggetto a una compressione che non comporta alcuna perdita di dati. Un ulteriore vantaggio consiste nella possibilità di creare animazione all'interno del formato, rendendo trasparente uno dei colori della composizione. Ciò può essere utile per creare profili di immagini.

L'inconveniente è che il formato GIF memorizza solo 256 colori. Di conseguenza, le sottili ombreggiature all'interno di un'immagine vengono rese come bande di diversa densità. Nella figura successiva, l'immagine sulla sinistra ha una sfumatura realizzata con l'uso di 16,7 milioni di colori; in quella sulla destra, la stessa sfumatura è realizzata con soli 256 colori (formato GIF). Figura 2: i 256 colori del formato GIF non consentono di ottenere sfumature di standard soddisfacenti Come valutare il ricorso al formato GIF?

Il formato è adatto a pulsanti e intestazioni (la qualità degli elementi tipografici resta invariata), GIF animati, profili, fotografie in bianco e nero (che presentano 256 livelli di grigio).

Non è invece adatto alle fotografie a colori.

Formati immagine - gif

Il formato PNG (Portable Network Graphics), di più recente sviluppo, non presenta gli inconvenienti dei due formati precedenti, riunendone piuttosto tutti i vantaggi. Consente una visualizzazione da 256 a 16,7 milioni di colori, può essere compresso senza generare alcuna perdita di dati, e supporta 256 livelli di trasparenza. L'aspetto negativo è limitato all'impossibilità di creare animazioni.

Figura 4: il quasi perfetto formato PNG

Compatibilità. Solo i browser più recenti supportano PNG (e sono quindi in grado di visualizzare l'immagine soprastante). Per questa ragione, i webmaster tendono a evitarne l'uso. È indubbio, tuttavia, che si tratti di un formato destinato al successo.

Formati immagine - png

Formati immagine - bmp

Il formato BMP (mappa di bit) è lo standard delle immagini (ossia il formato originale) di Windows. Si tratta di un formato non compresso che supporta le gestioni di colore RGB, scala di colore, scala di grigio. Non supporta il canale Alpha (=trasparenza).

Formati immagine - immagini non visualizzabili

A chi non è capitato di aprire una pagina web nella quale non vengono visualizzate le immagini o dove al loro posto si notano delle “x rosse”? O di vederle magari distorte, sbiadite, spixelate? E le animazioni? Perché non sono riprodotte normalmente?

Possibili strategie tecniche per la risoluzione:

1. Pulizia della cache dei files temporanei Internet.

2. Verifica delle impostazioni di Internet.

3. Verifica dell’integrità controlli ActiveX, Applets e Plug-in.

4. La pagina Web include un tipo di immagine non supportato

dal browser, per formato, per dimensione o per pesantezza.

5. La casella di controllo Mostra immagini nelle Opzioni non

è selezionata.

6. L'immagine viene visualizzata in base a uno script, a un

controllo ActiveX, a un cookie, a un'applet Java o a

informazioni di riferimento HTTP, e si è impostato il blocco

di una o più di tali funzionalità sul computer o sulla rete.

7. Il browser non è in grado di determinare il set di caratteri

(denominato anche tabella codici o codifica) utilizzato nella

pagina Web, oppure manca o è danneggiato un file o una

chiave del Registro di sistema necessaria per la

visualizzazione della pagina Web con il suo set di caratteri.

8. Cercare e installare eventuali aggiornamenti.

9. La Java Virtual Machine è installata?

10.Macromedia Flash Player è installato?

11.Reinstallazione del browser.

12.Non corretto caricamento delle immagini sul sito.

Non dimenticare mai di usare l'ALT TEXT cioè il testo alternativo da visualizzare al posto dell'immagine: - nei browser che non la supportano - per i non vedenti che utilizzano sintetizzatori vocali con browser in modalità testo - per l’indicizzazione da parte di alcuni motori di ricerca che usano il testo come parole chiave

5. Concetto di risoluzione (web vs. carta)

La risoluzione delle immagini

La dimensione del file di un'immagine è proporzionale alla sua dimensione in pixel, il numero di pixel visualizzato per unità di lunghezza in un'immagine viene chiamato risoluzione dell'immagine. La risoluzione delle immagini viene misurata in pixel per pollice. Nel web la risoluzione dell'immagine è condizionata dalla risoluzione del monitor.

Risoluzione del monitor

Il numero di pixel visualizzati per unità di lunghezza sul monitor variano a seconda della macchina che stai usando:

PC: ha una risoluzione del monitor pari a 96 dpi (punti per pollice)

Mac: ha una risoluzione del monitor pari a 72 dpi

Se si considera che la risoluzione usata per la stampa è di 300 pixel per pollice, si capisce quanto sia differente preparare un'immagine per il web piuttosto che per la stampa.

3 tipi di misure per la dimensione dell’immagine:

la conta dei pixel (es: 3000 x 2000 pixel)

la dimensione fisica (es: 20 cm x 30 cm)

la risoluzione (es: 300 pixel per pollice, ppi)

I pixel. Quando un’immagine viene mostrata a video, l’unica cosa che conta è la dimensione in pixel (es:1600 x 1200). Tutti gli altri dati presenti nel file vengono ignorati. Quando un’immagine supera le dimensioni dello schermo, IE la ridimensiona per mostrarla intera. Quindi il modo di controllare la dimensione di un’immagine a video è cambiarne l’altezza e/o la larghezza in pixel.

La dimensione fisica. È la misura dei lati dell'immagine stampata, espressa in cm o in pollici.

Pixel per Inch. Pixel per inch -pixel per pollice- si utilizza per la stampa, non per il monitor.

Dot Per Inch. DPI significa dots per inch -cioè punti per pollice- ed è una proprietà della stampante e del suo driver di stampa, non dell'immagine. Ci dice quanto possono essere spaziate le gocce d'inchiostro sulla carta, quanto vicini vogliamo porre i pixel: gli standard a questo proposito stabiliscono che nella stampa a getto d’inchiostro la densità è di 300 dpi per l’alta qualità (a 240 dpi avete ancora ottimi risultati).

Concetto di risoluzione - dimensioni e misure delle immagini

Chiara Tuoni

Grazie dell’attenzione