Lezione 2: I linguaggi della grafica web CORSO WEB DESIGN Lezione 2: I linguaggi della grafica web

Che cos’è un server Il server è il computer che consente a tutti coloro che sono connessi alla rete di utilizzare le risorse condivise (dati, programmi e dispositivi hardware). Quindi Il sito web o le pagine web di solito (anzi sempre), risiedono su un computer, chiamato anche "server" visto che 'serve' le pagine a chi le consulta. Sul server si trova il file in cui sono registrati tutti i dati che consentono agli utenti di accedere alla rete web

Internet URL= Uniform Resources Locator URL sta per Uniform Resource Locator ed è un path, cioè un percorso che indica in modo univoco dove è situata una risorsa. Ad esempio http://it.answers.yahoo.com indica al server dove deve andare a recuparare la pagina di yahoo answer, il server dopo averla trovata la invia al tuo browser (as esempio internet explorer o firefox) che infine te la visualizza.  

Internet http://www.disney.com/personaggi/pippo.html DIRECTORY FILE SERVER

I PROTOCOLLI Il protocollo è un metodo standard che permette la comunicazione tra i processi (eventualmente su terminali diversi), cioè un insieme di regole e procedure da rispettare per emettere e ricevere dei dati su una rete.

I PROTOCOLLI Su internet, i protocolli usati fanno parte di un insieme di protocolli collegati fra loro. Questa serie di protocollo si chiamaTCP/IP.  

I PROTOCOLLI Il Protocollo TCP TCP gestisce l'organizzazione dei dati e il controllo della trasmissione. Ridimensiona la grandezza dei dati da inviare, li spezzetta in pacchetti più piccoli e li ricompone nel momento in cui arrivano al computer di destinazione.  

I PROTOCOLLI Il Protocollo IP Il Protocollo IP trasmette i dati e gestisce il traffico fra i diversi computer collegati; impacchetta i dati in uscita e li invia scegliendo la strada migliore per arrivare a destinazione. Il Protocollo IP basa l’invio dei dati su di un sistema di indirizzi numerici univoci  

I PROTOCOLLI : HTTP FTP ARP ICMP TCP UDP SMTP Telnet NNTP

I PROTOCOLLI : HTTP scopo del protocollo HTTP è di permettere un trasferimento di file (essenzialmente in formato HTML) localizzati grazie ad una stringa di caratteri dettaURL tra un navigatore (il client) e un server web (detto http d sui terminali UNIX). NNTP

I PROTOCOLLI : SMTP protocollo SMTP (Simple Mail Transfer Protocol, tradotto Protocollo Semplice di Trasferimento della Posta) è il protocollo standard che permette di trasferire la posta da un server ad un altro con una connessione point to point.

I PROTOCOLLI : POP3 protocollo POP (Post Office Protocol tradotto con "protocollo dell'ufficio postale") permette come indicato dal suo nome di andare a recuperare la propria posta su un server remoto (server POP). E' necessario per le persone che, non essendo connesse in permanenza ad internet, devono consultare le proprie mail off-line.

Il formato JPG e il formato GIF I formati che vengono usati nel web supportati da tutti i browser sono di due tipi: JPEG e GIF. Li esamineremo velocemente entrambi. Un formato di file è semplicemente un modo per salvare le parti elettroniche che compongono i file di un computer. I diversi formati strutturano le varie parti in maniera differente.

Il formato JPG ,GIF e PNG I formati che vengono usati nel web supportati da tutti i browser sono di due tipi: JPEG e GIF. Un formato di file è semplicemente un modo per salvare le parti elettroniche che compongono i file di un computer. I diversi formati strutturano le varie parti in maniera differente.

Il formato jpeg La sigla JPEG o JPG è l'acronimo di Joint Photographic Experts Group. Questo tipo di immagine usa una compressione con perdita di dati. La perdita dei dati consiste nel fatto che alcuni dati che formavano la tua immagine vengono persi durante il processo di compressione. Questo corrisponde a una perdita di qualità nell'immagine, direttamente proporzionale al livello di compressione che sceglierai.

Possiamo dire che a bassi livelli di compressione la perdita di qualità è praticamente nulla e non si percepisce a occhio nudo, ma se aumentiamo il livello di compressione dobbiamo controllare che l'immagine sia comunque di buona qualità, perché la perdita di dati in questo caso può essere rilevante. Qualsiasi sia il numero di profondità dei colori dell'immagine sorgente il formato JPEG supporta colori a 24 bit. Questo tipo di formato va usato per immagini a tinte non piatte, cioè per immagini fotografiche o con immagini con sfumature leggere e continue.

Il formato Jpeg non è sicuramente adatto per il trattamento di immagini vettoriali o contenenti testo. Questo formato di esportazione (Jpeg) va usato per riportare sul web immagini ottenute tramite scansione di fotografie, e comunque per tutte quelle che necessitano di un numero di colori superiore a 256. Dato che il formato è a perdita di dati non è una buona soluzione salvare un'immagine JPEG da un'altra immagine JPEG. La cosa migliore è ottenere immagini JPEG dall'immagine originale.

Il formato gif La sigla GIF è acronimo di Graphic Interchange Format. Questo tipo di compressione, al contrario del JPEG non lavora a perdita di dati, ma può esportare solo immagini che contengono al massimo 256 colori. Se l'originale contiene un numero più elevato di colori, la perdita di qualità sarà significativa. Il formato GIF usa colori a 8 bit ed è efficace per comprimere immagini vettoriali, geometriche o testo.

Le immagini GIF ti permettono anche di creare delle piccole animazioni, le GIF ANIMATE, perché supportano anche fotogrammi multipli. I GIF animati si realizzano con semplici tool grafiche e con la tecnica del cartone animato.

Il formato png Il formato PNG è acronimo di Portable Network Graphic. Questo tipo di formato non è supportato da tutti i tipi di browser, ma è tuttavia possibile installare un plug-in per visualizzare le immagini PNG.

Questo formato supporta colori fino a 32 bit E' un tipo di compressione senza perdita di dati, anche per alte profondità di colore. Purtroppo però produce file di grandi dimensioni.

PNG-8 usa colori a 8 bit e presenta molte analogie con i file di tipo GIF. Risulta utile per la compressione di aree a tinta unita e mantiene i dettagli nitidi. . PNG-24 supporta colori a 24 bit e presenta molte analogie con i file di tipo JPEG. È adatto sia per le immagini fotografiche che per le immagini geometriche e in più ha il vantaggio di supportare la trasparenza anche su più livelli.

La risoluzione 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.

PC: ha una risoluzione del monitor pari a 96 dpi (punti per pollice) 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 comprende quanto sia differente preparare un'immagine per il web piuttosto che un'immagine che debba poi essere stampata. Intuitivamente si capisce che se un'immagine ha una risoluzione più alta della risoluzione del monitor, questa apparirà molto più grande delle sue dimensioni reali.

Suggerimenti Impostare sempre immagini con risoluzione a 72 dpi, in modo tale da permettere a tutti i tipi di computer di poterle visualizzare correttamente. Se si deve ridimensionare un'immagine, ricordarsi che nel passaggio da un'alta risoluzione a una bassa risoluzione non c'è sostanziale perdita di qualità, ma quando si cambia la risoluzione di un'immagine da una più bassa a una più alta il rischio è di perdere qualità dell'immagine

Concetti di base dell'HTML L’ HTML (Hyper Text Mark-up Language) nasce come linguaggio per la descrizione di testi strutturati. . Un file HTML non è altro che un file di testo che può essere creato con un comune editor testuale come il blocco note di windows

Concetti di base dell'HTML TAG (Markup TAGs = marcatori)= non sono altro che parole chiave contenute all'interno dei simboli "<" (maggiore) e ">" . I TAG forniscono le indicazioni per la formattazione al documento oltre che all'inserimento di immagini e altri elementi multimediali

<TAG DI INIZIO>Elemento cui si applica l'istruzione</TAG DI FINE> Tutti gli elementi ed il contenuto di un documento HTML sono compresi all'interno dei marcatori <html> e </html>. Il simbolo "/" (slash) indica la fine del TAG.

Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML testuale, ma anche solo il Blocco Notes di Windows. i siti Web, prima della pubblicazione, vanno creati in locale, cioè sul tuo hard disk. Solo in un secondo momento vengono trasferiti nei server attraverso (in genere) programmi di FTP (= File transfer Protocol) mediante passord e UserID, per cui nessuno oltre te dovrebbe poter modificare le tue pagine.

Anatomia di una pagina Web Il codice HTML si caratterizza sempre per la presenza al suo interno di tre TAG fondamentali: <HTML> <HEAD> <BODY> La struttura di base di ogni documento HTML è quindi articolata in questo modo: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

Progettare una pagina web con notebook <html> <head> <title> Benvenuti nel mio sito </title> </head>   <body> entra nel mio sito </body> </html>

Il browser sa che deve leggere tutto ciò che è contenuto entro i TAG <HTML>...</HTML> come codice HTML ed è in grado di riconoscere il punto di inizio e quello di chiusura rispettivamente della testa e del corpo del documento. Un documento HTML si divide in due parti fondamentali: l'intestazione e il corpo del documento.

<head> = intestazione Gli elementi <head> e </head> sono posti immediatamente dopo l'apertura del TAG <html> e racchiudono l'intestazione vera e propria del documento. In questa parte del codice si deve mettere tutte le informazioni necessarie al browser per una corretta interpretazione del documento, l'utente non le visualizzerà sullo schermo. Tali informazioni verranno visualizzate solo aprendo la finestra del browser che fa visualizzare il codice sorgente.

L'intestazione fornisce: il titolo della pagina e le parole chiave per i motori di ricerca. Le parole chiave altro non sono che delle informazioni che vengono passate al browser tramite dei TAG specifici, e che servono ai motori di ricerca per comprendere il contenuto del sito. <html>    <head>      <title>titolo del documento</title>    </head>    <body>    </body> </html>

Il tag BODY La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag <BODY>. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR.

Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: <BODY BGCOLOR="#000000"> dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR="black">

<BODY TEXT="#codice del colore"> possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi: <BODY BACKGROUND="percorso e nome del file"> Per impostare a priori il colore del testo del testo della pagina si usa l'attributo <TEXT> secondo la sintassi: <BODY TEXT="#codice del colore">

Paragrafi (Tag BR, P, DIV) Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> può essere usato singolo oppure con la rispettiva chiusura </P>.

Formattazione I principali tag di formattazione sono: <B>... </B> : testo in grassetto; <I>... </I> : testo in corsivo; <U>... </U> : testo sottolineato; <STRIKE>... </STRIKE> : testo barrato o depennato; <SUP>... </SUP> : testo apice; <SUB>... </SUB> : testo pedice. Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati.

<P ALIGN="valore">paragrafo da allineare</P> Allineamenti di testo Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P> secondo la sintassi: <P ALIGN="valore">paragrafo da allineare</P> dove il valore di ALIGN può essere: left per l'allineamento a sinistra, center per l'allineamento al centro, right per quello a destro justify per l'allineamento giustificato

Titoli Il tag per definire un titolo è <H>... </H> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a <H6> (livello inferiore). È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti.

Immagini: Il tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute.

<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50"> Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). <IMG SRC="image.jpg" WIDTH="100" HEIGHT="50"> Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine.

<IMG SRC="image.jpg" BORDER="5"> Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi: <IMG SRC="image.jpg" BORDER="5"> Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all'immagine. La sintassi corretta è: <IMG SRC="nome immagine" ALT="breve descrizione testuale">

Pagina web-Curriculum vitae <html> <head> <title> Curriculum-vitae </title> </head>   <body bgcolor="gray"> <font face=Verdana" size"1"> <font color="blue"> <h1><a name="sopra">La mia prima pagina web </a> </h2> </font> <h2>Curriculum-vitae</h2> <p><b>cognome e nome:</b> </p> <p><b>professione:</b></p> <p><b>esperienze lavorative:</b></p> <p><a href=contatti.html">contatti</a></p> </body> </html>

Tabelle(<TABLE>) Il tag per creare una tabella è <TABLE> con il rispettivo </TABLE>. Nell'area compresa tra <TABLE> e </TABLE> ogni riga si definisce con la coppia di tag <TR>....</TR> (Table row). All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag <TD>.....</TD> (Table data).

<title> tabella menù</title> </head>   <head> <title> tabella menù</title> </head>  <body> <table border="2"> <tr> <td>pagina 1 </td> <td>pagina 2 </td> <td>pagina 3</td> </tr> </table> <body> </html>  

I Frame I frame sono entrati ormai nella consuetudine del web, anche se hanno creato intorno alla loro presenza pareri discordanti tra che li ama e chi li odia. La parola frame significa riquadro, cornice. Nel codice HTML puoi si possono utilizzare i frame all'interno di una pagina Web per suddividerla in più riquadri, o meglio in più pagine HTML. Regola numero uno: ogni frame è una pagina HTML indipendente.

I frame che compongono una pagina web funzionano insieme mediante l'uso di uno o più set di frame. Il set di frame altro non è che una pagina HTML che definisce la struttura e le proprietà della pagina Web, comprese le informazioni sul numero di frame visualizzati su una pagina, la dimensione dei frame, l'origine della pagina caricata in un frame e altre proprietà definibili. La pagina di un set di frame non viene visualizzata nei browser, serve solo a memorizzare le modalità di visualizzazione dei frame.

Supponiamo di voler costruire una pagina web che contiene tre frame. Di quante pagine HTML hai bisogno? La risposta è semplice: le pagine che ti occorrono sono quattro: il file del set di frame e i tre file con il contenuto che viene visualizzato all'interno dei frame. Quando si progetta una pagina mediante i set di frame, si deve salvare ciascuno di questi quattro file per garantire che la pagina funzioni correttamente nel browser.

I frame vengono generalmente utilizzati perché facilitano la navigazione e l'organizzazione della navigazione di un sito internet, a patto di non abusarne e di saperli gestire nel migliore dei modi. Ad esempio, in una pagina Web un frame può contenere il menu di navigazione e un altro frame può essere riservato al contenuto. Poiché il menu di navigazione si trova in un frame, il visitatore del sito può fare clic su una voce di menu e il contenuto viene visualizzato nell'apposito frame senza che il menu di navigazione venga modificato. In questo modo, gli utenti si orientano più facilmente all'interno del sito.

Tuttavia, poiché gestire un sito realizzato con i frames può risultare complesso, spesso è possibile creare una pagina Web senza frames in grado di fornire lo stesso effetto di una pagina che utilizza i frames. Ad esempio, se si desidera avere la struttura di navigazione sul lato sinistro della pagina, è possibile suddividere la pagina in due frames oppure includere la struttura di navigazione sul lato sinistro di ogni pagina del sito.

Progettare una pagina web con notebook <html> <head> <title> Benvenuti nel mio sito </title> </head>   <body> Contenuto del mio sito </body> </html>

<html> <head> <title> Curriculum-vitae </title> </head>   <body bgcolor="gray"> <font face=Verdana" size"1"> <font color="blue"> <h1><a name="sopra">La mia prima pagina web </a> </h2> </font> <h2>Curriculum-vitae</h2>  <p><b>cognome e nome:</b> </p> <p><b>professione:</b></p> <p><b>esperienze lavorative:</b></p> <p><a href=contatti.html">contatti</a></p>  </body> </html>

Disegnare un “template” body { margin: 0; padding: 0; background-color: #636363; font-family: verdana, arial, sans-serif; font-size: 12px; color: #70695A; } Incollando il codice in un nuovo foglio di stile tramite Top Style, e agganciandolo ad una pagina in Dreamweaver, ottenete l’anteprima della pagina principale del sito. 56 Lezione 8 56

Progettare una pagina web con notebook <html> <head> <title> Benvenuti nel mio sito </title> </head>   <body> entra nel mio sito </body> </html>

Contenuto tag <body> <div id="pagina"> <div id="header">Inserire qui il contenuto per id "header"</div> </div> </body> Bisogna usare tag div annidati se vogliamo che i box siano contenuti uno nell’altro!! Nel caso dell’esempio il tag con id=“pagina” contiene il nostro primo box con tag id=“header”. 58 Lezione 8 58

Progettare una pagina web con notebook <html> <head> <title> Benvenuti nel mio sito </title> </head>   <body> entra nel mio sito </body> </html>

Progettare una pagina web con notebook <html> <head> <title> Benvenuti nel mio sito </title> </head>   <body> entra nel mio sito </body> </html>