se nella pagina ho porzioni di video che si muovono in modo indipendente allora in quella pagina

Transcript

1 Brescianet.com Sito di supporto alla didattica 3Q - 2 Modulo 3Q - 2 Modulo HTML Avanzato Page 1 of 2 Posted: Tue Dec 04, :47 am 4/12/2012-3Q - 2 Modulo se nella pagina ho porzioni di video che si muovono in modo indipendente allora in quella pagina sono stati usati i frame. Se una pagina non aumenta la dimensione del carattere quando uso il menu visualizza->dimensione testo-> molto grande allora nella pagina sono stati usati i foglio di stile <HR align=right width=50% size=10 noshade> Posted: Tue Dec 04, :56 am MAPPAZZE CLICCABILI <IMG SRC="URL dell'immagine (.gif)" USEMAP="#pipopo"> <MAP NAME="pipopo"> <AREA SHAPE="rect" COORDS="X1,Y1,X2,Y2" HREF="URL del collegamento"> <AREA SHAPE="circle" COORDS="Xc,Yc,R" HREF="URL del collegamento"> <AREA SHAPE="poly" COORDS="X1,Y1,X2,Y2,X3,Y3,...,...,Xn,Yn" HREF="URL del collegamento"> </MAP> esempio <IMG SRC="immagine.gif" USEMAP="#pippo"> <MAP NAME="pippo"> <AREA SHAPE="rect" COORDS="30,39,122,112" HREF=" <AREA SHAPE="circle" COORDS="189,103,34" HREF=" <AREA SHAPE="poly" COORDS="335,39,400,158,281,145" HREF=" </MAP> shape = "Triangle" => NON ESISTE!!!! shape=poly => in sequenza le coordinate dei vertici della figura il browser legge in modo seriale il file per cui le prime direttive vengono caricate e diventano operative. In altre parole i tag shape delle figure in foreground devono essere scritte per prima

2 ---- 3T 4/12/2012 coords cerchio => coordinate CENTRO + RAGGIO OPPURE CENTRO + PUNTO SULLA CIRCONFERENZA shape=default => TUTTO QUELLO CHE NON HO PREVISTO NEI PRECEDENTI SHAPE RICORDATEVI CHE I BROWSER FANNO APPARIRE IN MODO DIVERSO LE IMMAGINI POICHè I VALORI DI DEFAULT DELLE DIRETTIVE NON COINCIDONO (VEDASI BORDO NELLE MAPPAZZE E DIRETTIVA DEFAULT) Default non può essere usato poichè non è supportato da ie quindi al posto di <AREA SHAPE=default> userò <AREA SHAPE=rect COORDS=1,1,Nrpixelorizzontali, NrPixelVerticali"> messa in fondo ESEMPIO COMPATIBILE CON TUTTI I BROWSER: <IMG SRC="immagine.gif" USEMAP="#pippo" border=0> <MAP NAME="pippo"> <AREA SHAPE="rect" COORDS="30,39,122,112" HREF=" <AREA SHAPE="circle" COORDS="189,103,34" HREF=" <AREA SHAPE="poly" COORDS="335,39,400,158,281,145" HREF=" <AREA SHAPE="rect" COORDS="1,1,533,203" HREF=" </MAP> ESEMPIO NON COMPATIBILE CON TUTTI I BROWSER (IN IE Appare il bordo e non funzia default): <IMG SRC="immagine.gif" USEMAP="#pippo"> <MAP NAME="pippo"> <AREA SHAPE="rect" COORDS="30,39,122,112" HREF=" <AREA SHAPE="circle" COORDS="189,103,34" HREF=" <AREA SHAPE="poly" COORDS="335,39,400,158,281,145" HREF=" <AREA SHAPE="default" HREF=" </MAP> 11/12/2012-3Q - 2 Modulo lo shift rende i rettangoli dei quadrati e gli ovali dei cerchi perfetti (in Posted: Tue Dec 11, :58 am tutti i prg di grafica!)==> mantiene le proporzioni 4/12/ O COLS - ROWS elenco di % => rispetto alla dimensione della finestra <FRAMESET COLS="20%,20%,20%,20%,20%"> ogni frame è 1/5 della finestra <FRAMESET COLS="200,20%,20%,20%,*"> il primo occupa sempre 200 pixel - il 2,3 e 4 il 20% della finestra e l'ultimo la parte della finestra che resta. <FRAMESET COLS="*,*,*"> 3 colonne =

3 <FRAMESET COLS="2*,*,*"> la prima è il doppio delle altre ogni frame è 1/5 della finestra tag frame tramite la direttiva SRC indica la pagina da caricare divisioni verticali ed orizzontali contemporanee nei frames: esercizio POTENZIAMENTO 1 1) localizzo le righe di divisione che attraversano l'intera finestra e quindi inizio ad impostare il frameset cols o rows a seconda. metterò TANTI * O MISURE QUANTE SONO LE RIGHE CHE HO IDENTIFICATO <FRAMESET COLS="*,2*"> </FRAMESET> 2) analizzo I SINGOLI FRAME DELLA DIVISIONE PRECEDENTE. SE NON HANNO RIGHE DI DIVISIONE USO IL Tag frame src=nomefile ALTRIMENTI RIPETO L'IDENTIFICAZIONE DELLE RIGHE CHE ATTRAVERSANO L'INTERO FRAME <FRAMESET COLS="*,2*"> <FRAMESET rows="*,*,*"> </FRAMESET> </FRAMESET> LA CLASSE CHIEDE DI FARE L'ESERCIZIO 2.4 (3t) localizzo le righe di divisione che attraversano l'intera finestra e quindi inizio ad impostare il frameset cols o rows a seconda. metterò TANTI * O MISURE QUANTE SONO LE RIGHE CHE HO IDENTIFICATO 3O - 10/12/2012 Ricordarsi: SRC="" ==> frame bianco (vuoto) I frame sono comodi poichè consentono di raggiungere qualsiasi pagina del sito con pochi click I motori di ricerca indicizzano le singole pagine del frameset per cui se io

4 clicco su un link in una pagina di google la pagina richiamata potrebbe non possedere + il contesto gerarchico originale imposto dalla struttura del frame.i link non funzionano + correttamente poichè non ho i frames nella videata del browser. i frame sono usati nelle intranet o nelle applicazioni webapps I frames sono comodi anche perchè la parte grafica comune a tutte le pagine del sito può essere isolata senza doverla inserire in ogni documento del sito (immaginate se così fosse una modifica dovrebbe essere replicata nelle 3000 pagine del sito) NOFRAMES => indica il contenuto che deve essere mostrato se il browser non supporta i frames (browser obsoleti: esempio Ie 3.0) Domanda : come riesce un vecchio browser a riconoscere NOFRAMES? spiegata Se voglio costruire una pagina con 3 frame in realtà devo scrivere 4 files: 1==> definisce la divisione in frame (contiene le direttive frameset, frame) 2,3,4 => il contenuti di ogni singolo frame. La pagina 1 non contiene BODY (se non uso NOFRAME) LA CLASSE CHIEDE DI FARE L'ESERCIZIO 2.4 (3Q) 15/12/2012-3Q - 2 Modulo ssi => SERVER SIDE INCLUDES => CONSENTE DI ISOLARE LE PARTI COMUNI DI UNA PAGINA IN UNO SCRIPT SUL SERVER WEB. IN QUESTO MODO DISEGNO AD ESEMPIO UN MENU E LO INSERISCO NELLE 3000 PAGINE DEL SITO. sul BROWSER APPARE UNA SOLA PAGINA NON SUDDIVISA IN FRAME => UTILE PER I MOTORI DI RICERCA riprendere da scrolling a.htm <frameset cols="*,2*"> <frameset ROWS="*,2*"> <FRAME SRC="B.HTM"> b.htm <frameset cols="*,2*"> <frameset ROWS="*,2*"> <FRAME SRC="c.HTM"> Posted: Sat Dec 15, :56 am

5 C.HTM <frameset cols="*,2*"> <frameset ROWS="*,2*"> OPPURE <frameset cols="*,2*"> <frameset ROWS="*,2*"> <frameset cols="*,2*"> <frameset ROWS="*,2*"> <frameset cols="*,2*"> <frameset ROWS="*,2*"> --- 3O 15/12 /2012 SCROLLING => valori YES, NO, AUTO NORESIZE => spiegato BORDER = nr pixel BORDER=OFF => equivale a border=0 svolgere eser 2.3 per martedì (3Q) 18/12/2012-3Q - 2 Modulo RIPRENDERE DA BORDERCOLOR Posted: Tue Dec 18, :10 am Occulto i bordi FRAMEBORDER=NO BORDER =0 => non riduce a zero lo spessore della divisione ma lo riduce al minimo possibile quando le linee continue che attraversano il frame sono sia orizzontali che verticali <frameset cols="*,*,*"> <frameset rows="*,*,*"></frameset> <frameset rows="*,*,*"></frameset>

6 <frameset rows="*,*,*"></frameset> <frameset rows="*,*,*"> <frameset cols="*,*,*"></frameset> <frameset cols="*,*,*"></frameset> <frameset cols="*,*,*"></frameset> alcuni browser, quando le linee continue che attraversano il frame sono sia orizzontali che verticali supportano questa sintassi <frameset rows="*,*,*" cols="*,*,*"> un link in un frame richiamerà la pagina indicata in href nel frame stesso. NAME => direttiva per dare un nome ad un frame - è case sensitive. Inserendo in <A> la direttiva TARGET posso indicare il frame di destinazione del link svolgere amabilmente l'esercizio 2.3 (3T) /12/2012 3T suggerimento eser 2.3 File Eisenhower.htm <HTML> <HEAD> <TITLE>Pagina X</TITLE> </HEAD> <BODY BGCOLOR=GREEN> <A HREF=eisenhower.htm border=0 target=giallo><img SRC=" </BODY> </HTML> Pagina Eser2-3.htm <frameset cols="*,2*"> <FRAME SRC="x.htm" noresize> <frameset ROWS="*,2*" BORDERCOLOR="#FFOOOO"> <FRAME SRC="y.htm" name=giallo> <FRAME SRC="z.htm" name=z> TARGET MAGICI <A HREF=y.HTM>Link senza TARGET</A> =>usa il frame che ospita il link <A HREF=y.HTM TARGET=_self>Link con _self</a> ==> come il precedente <A HREF=y.HTM TARGET=_top>Link con _top</a> ==> usa la finestra intera del browser come destinazione <A HREF=y.HTM TARGET=_blank>Link con _blank</a> ==> usa sempre una nuova finestra come destinazione <A HREF=y.HTM TARGET=_parent>Link con _parent</a> ==> usa il frameset genitore. Se non ci sono

7 richiami a pagine che contengono frameset allora _parent coincide con _top ESEMPIO: index.htm <frameset cols="*,2*"> <FRAME SRC="menu.htm"> <frameset ROWS="*,2*"> <FRAME SRC="y.htm" name=alto> <FRAME SRC="b.htm" name=basso> B.htm <html> <frameset cols="*,2*"> <FRAME SRC="menu.HTM"> </html> MENU.HTM <HTML> <HEAD> <TITLE>Pagina X</TITLE> </HEAD> <BODY BGCOLOR=silver> <H1>MENU<br> <A HREF=y.HTM>Link senza TARGET</A><br> <A HREF=y.HTM TARGET=_self>Link con _self</a><br> <A HREF=y.HTM TARGET=_top>Link con _top</a><br> <A HREF=y.HTM TARGET=_blank>Link con _blank</a><br> <A HREF=y.HTM TARGET=_parent>Link con _parent</a><br> </h1> </BODY> </HTML> Y.HTM <HTML> <HEAD> <TITLE>Pagina Y</TITLE> </HEAD> <BODY BGCOLOR=Yellow> Sono la pagina Y </BODY> </HTML> /12/2012-3Q - 2 Modulo Posted: Sat Dec 22, :57 am

8 <A HREF=x.HTM TARGET=_TOP>Link con _TOP (non è un link magico)</a><br> <A HREF=Y.HTM TARGET=_TOP>Link con _TOP (non è un link magico)</a><br> se uso un target non magico il comportamento è: - se non esiste un frame con quel nome apre una nuova finestra e tutti i link con quel target andranno a popolare quel frame - se esiste un frame con quel nome inserisce in tale frame il link indicato in href Fare forms => consentono l'invio di dati ad un server che tramite degli script li elabora ed invia delle risposte correlate la pagina indicata IN action è di tipo dinamico (asp o php) per vedere come funzionano vedi: -index.htm <form action=y.htm> cognome: <input type=text name=cognome><br> nome: <input type=text name=nome><br> provincia: <input type=text name=prov value="brescia"><br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> </form> --- 3T 21/12/2012 NAME => direttiva case sensitive => serve per identificare i controlli mediante linguaggio di prg (esempio javascript sul client - asp/php sul server) soluzione 2.3 pagina PRINCIPALE <frameset cols="*,*,*,*"> <FRAME SRC=y.htm name=risposta> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> </FRAMESET> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> </FRAMESET> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> </FRAMESET> </FRAMESET>

9 pagine DI UNO DEI PRESIDENTI Pagina di risposta <html> <body> <h1>sono Bill Clinton</h1> </BODY> </HTML> pagina immagine <html> <body> <a href=clinton.htm TARGET=RISPOSTA> <img BORDER=0 src= HEIGHT=100% WIDTH=100%> </a> </BODY> </HTML> esempio con forms operativi /index.htm --- 3o 22/12/2012 riprendere da type=password e dalle direttive di form riprendere con maxlength e size (3T già illustrato) ACTION=Leggo.asp METHOD => GET, POST POST => non visualizza nel browser i parametri => nell'url vedo leggo.asp e basta GET => visualizza nel browser i parametri => nell'url vedo leggo.asp?cognome=sechi&provincia=bs <form action=y.htm method=get> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <input type=submit value="cliccheggia qui per inviare i dati"> </form> 08/1/2013-3Q - 2 Modulo NAME => direttiva case sensitive => serve per identificare i controlli mediante linguaggio di prg (esempio javascript sul client - asp/php sul server) <form action=y.htm method=get> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> </form> GETPOST) la pagina che viene richiamata non presenta la valorizzazione dei parametri y.htm?cognome=sechi&nome=marco&prov=trento dove: Posted: Tue Jan 08, :57 am

10 ACTION => pagina da caricare=> solitamente è una pagina dinamica (con estensione <> da.htm)? => iniziano gli argomenti del form & separa le singole valorizzazioni del form <form action=y.htm method=post> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <input type=reset value="annulla input"> </form> in questo caso (METHOD=POST) la pagina che viene richiamata non presenta la valorizzazione dei parametri ALTRI BOTTONI: resetto i valori al valore iniziale annullando qualsiasi input <Input type=reset value="annulla"> bottone che richiama uno script (programmino) scritto in JS <input type=button onclick='javascript:alert("ciao a tutti")' value="saluta"> BUTTON è il tipo di bottone + diffuso poichè posso testare l'input prima di inviare i dati al server CONTROLLO DELL'INPUT SUL SERVER (tramite asp o php) ==> Se il controllo dell'input è eseguito dal server i dati devono essere inviati, controllati dal server e poi, se ho un errore, il server deve rispondere con una segnalazione ==> perdita di tempo CONTROLLO DELL'INPUT SUL CLIENT (Tramite JS) => il browser controlla immediatamente la correttezza dell'input dando l'impressione di essere molto veloce poichè in internet non avviene alcun transito di dati type=password => uguale a text => non mostra i dati digitati e non consente il "Copia" tutte le direttive di text sono presenti anche in password: ESEMPIO: <form action=y.htm METHOD=POST NAME=DATI> cognome: <input type=text name=cognome VALUE="ROSSI" size=50 maxlength=6><br> nome: <input type=text name=nome><br> provincia: <input type=text name=prov value="brescia"><br> Password: <INPUT TYPE=PASSWORD NAME="Passwd"> <br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> <Input type=reset value="annulla"> <input type=button onclick='javascript:alert("ciao a tutti")' value="saluta"> <input type=button onclick='javascript:alert("ciao " + document.dati.cognome.value +" di " + document.dati.provincia.value)' value="saluta 2"> </form> RADIO BUTTON:

11 I gruppi di opzioni mutuamente esclusive sono determinate dalla proprietà name. Controlli con lo stesso nome appartengono allo stesso gruppo 12/1/2013-3Q - 2 Modulo I radiobutton sono usati se voglio fornire un meccanismo con una sola possibiltà di scelta. Nei radio value contiene il valore che verrà inviato al server (se nessun radio è selezionato viene inviata la stringa vuota) ESEMPIO <form action=y.htm METHOD=GET NAME=DATI> cognome: <input type=text name=cognome VALUE="ROSSI" size=50 maxlength=6><br> nome: <input type=text name=nome><br> provincia: <input type=text name=prov value="brescia"><br> NAZIONALITA':<input type=radio name=nazione VALUE=ANGLOSASSONE> UK <input type=radio name=nazione VALUE=FRANCESE>FR <input type=radio name=nazione CHECKED VALUE=ITALICO>IT<br> SESSO:<input type=radio name=sesso checked VALUE=M> Maschio <input type=radio name=sesso VALUE=F>Femmina<br> Password: <INPUT TYPE=PASSWORD NAME="Passwd"> <br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> <Input type=reset value="annulla"> </form> mandando il submit sulla barra degli indirizzi appare: (si noti la valorizzazione di nazione e sesso) file:///c:/users/sechi.m/desktop/y.htm? cognome=rossi&nome=&prov=brescia&nazione=anglosassone&sesso=m&passwd= ----3T 8/1/2013 I radiobutton sono usati se voglio fornire un meccanismo con una sola possibiltà di scelta. Se nei checkbox metto lo stesso nome funzionano come i radiobutton. Questo controllo si usa quando ho delle scelte multiple Lingue parlate: ita<input name=lingua1 type=checkbox checked value=it> fra<input name=lingua2 type=checkbox value=fr> ing<input name=lingua3 type=checkbox checked value=uk><br> LISTBOX o COMBOBOX sono usati per scelte esclusive. La direttiva value manda il codice della scelta al server che lo registra nel proprio Database size => MOSTRA IL NR DI RIGHE VISIBILI (SE >1 => LISTBOX) Nato a:<select size=3> <OPTION value=an>ancona <option selected value=bs>brescia <OPTION value=mi>milano </SELECT> SELECTED ==> SCELTA PREDEFINITA

12 Posted: Sat Jan 12, :58 am TEXTAREA => ricordarsi cosa succede con wrap=off - Ricordarsi che size, value e maxlength non esistono nelle textarea HARD e SOFT come valori di WRAP sono identici sul client 3O 8/1/ <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> Ciao sono io </TEXTAREA> i controlli type=hidden non risultano visibili => usati sul form per memorizzare dati transitori utili al programmatore (ad esempio il nome dell'utente che si è collegato) per personalizzare la pagina rendendola + famigliare unica direttiva utile di hiodden è value pixel => punti che compongono un'immagine tasto stamp => fotografo il video che può essere incollato in un prg di grafica formato => modalità di registrazione di un file solo quei prg che conoscono quel formato sono in grado di leggere il contenuto di files che usano tale formato. formati grafici su internet devono essere leggibili da qualsiasi dispositivo (portabili). formati proprietari => modalità di registrazione coperta da brevetti e quindi usabile solo con alcuni tipi di applicazione. uso un bit 0,1 => scala monocromatica => b/n 1280x960 = pixel nrpixel * nrbit usati per descrivere il colore => spazio di memoria occupato dall'immagine in bit monocromatica => bit => ( *1)/(8*1024*1024) => q.tà in mbyte rgb= * 24 bit = => / (8*1024*1024) = circa 3,5 MB 1byte = 8bit 1024 byte byte =1kbyte 1024 Kbyte byte =1Mbyte 1024 Mbyte byte =1Gbyte 1024 Gbyte byte =1Terabyte

13 CON 16 COLORI QUANTI BIT MI SERVONO => 4 => 2^4 NR DI COMBINAZIONI CON 4 BIT => OGNI COMBINAZIONE VIENE ASSOCIATA AD UN COLORE => TALE ABBINAMENTO SI DICE PALETTE CON 256 COLORI QUANTI BIT MI SERVONO => 8 => 2^8 vedere: formato bmp (bitmap) nxm pixel con colori che dsipendono dalla profondità di colore 8bit => posso esprimere 256 colori rgb =>256^3 =2^24 se mantengo la stessa immagine ma aumento il nr di colori => la dimensione in byte aumenta 12/1/2013-3O se salvo in un altro formato <> da bmp ottengo una dimensione del file + piccola. I formati grafici di internet hanno come primo obiettivo la riduzione delle dimensioni per ridurre il traffico di rete. 11/1/2013-3T bitmap => formato + loffe => non implica alcun risparmio in termini di dimensioni => la qualità dell'immagine salvata resta inaltwerata (se non diminuisco il nr di colori!). Non è usata in internet GIF => adatta x immagini al tratto. Il GIF diminuisce il nr di bit necessari per ogni pixel alle reali necessità => se ho un'immagine con 8 colori il gif userà una palette a 3 bit - usabile se la palette è inferiore a 256 colori JPG => adatta x immagini fotografiche TIFF => 15/1/2013: 3Q - 2 Modulo *.bmp => estensione file immagine di tipo bitmap senza Posted: Tue Jan 15, :03 am alcuna compressione. La qualità dell'immagine è massima (chiaramente in relazione ai pixel usati) GIF => palette con al massimo 256 colori - oltre devo usare il JPG e PNG JPG => comprime sfruttando incapacità umane di rilevare particolari variazioni di colore (stesso metodo usato anche dall'mp3 relativamente alle frequenze audio)

14 la compressione dell'immagine avviene: - sostituzione di un gruppo di pixel con il colore medio (differenza non rilevabile da occhio umano) - i gruppi di pixel con un determinato colore vengono registrati mentre gli altri no (esempio immagine in bn) grafica vettoriale: l'immagine non è basata su punti ma su equazioni matematiche. vantaggi => se ingrandisco la qualità rimane sempre ottima poichè l'immagine viene ricalcolata. dimensione file estremamente piccola: contiene l'equazione e le dimensioni google maps usa questo tipo di formato. Non è adatta alle foto poichè le variazioni di colore sono troppo repentine per essere descritte con equazioni semplici. Prg di grafica vettoriale (vari cad - freehand - illustrator) formati di grafica vettoriale dxf grafica pittorica o bitmap => photoshop, mspaint GIF (vantaggi/svantaggi) - uso trasparenza - uso animazione colori massimi - interlacciato (spiegato) fare esercizio 2.6 e T 15/1/ GIF (vantaggi/svantaggi) - uso trasparenza - uso animazione colori massimi - interlacciato (spiegato) - non distruttiva (qualità identica all'originale bmp) jpg => formato di compressione distruttivo jpg => usa lo stesso meccanismo di compressione di winzip - winrar, stufflit etc per cui non è necessario comprimerli quando li invio via posta 19/1/2013 3Q - 2 Modulo Nell'interlacciato l'immagine diventa sempre + nitida con il passare del tempo. Quando non è interlacciata l'immagine nel browser si forma dall'alto verso il basso. Solo al termine della trasmissione capisco il contenuto (esempio tramonto sul mare). Posted: Sat Jan 19, :57 am

15 + salvataggi di una immagine jpg determina un forte peggioramento della qualità senza grandi diminuzioni delle dimensioni del file. Conviene quindi tenere sempre il file bmp originale O -15/1/ tiff => questo formato comprime ma non è distruttivo. non alta come quella del JPG il livello di compressione. nato per gestire le trasmissioni via fax. Tiff usato in stampa poichè la qulità è massima con la risoluzione utilizzata. Molte Macchine foto registrano in tiff. I CSS consentono di definire un aspetto della pagina indipendente dal browser css la { => altrgr+shift+[ la } => altrgr+shift+] dimensioni misurate con: pt => punti tipografici (1/72 pollice => unità indipendente dal monitor usato) px => pixel (la dimensione è legata alla grandezza del singolo pixel MODALITA' IN LINEA: sul tag inserisco la direttiva style (modalità usata quando si tratta di uno stile estemporaneo) <FONT style="font-family:verdana;font-size:24pt;color:green">testo comune</font> MODALITA' INCLUSA: Ho uno stile che si ripete all'interno della stessa pagina <body> <STYLE TYPE=text/css> P { font-size:15px; font-family:verdana; color:green } FONT { font-size:20px; font-family:arial; color:black } </STYLE> per distinguere lo stile per lo stesso tag uso le pseudoclassi: esempio <STYLE TYPE=text/css> P.Rosso { font-size:32pt; font-family:verdana; color:red } P.Argento { font-size:32px; font-family:verdana; color:silver } </STYLE> nel file scrivo: <p class=argento>ciao</p> <p class=rosso>ciao</p> FOGLI DI STILE ESTERNI: Usati per uniformare l'aspetto grafico di un sito. Tutte le ipotetiche 3000 pagine del mio sito hanno l'inclusione al file layout.css. Se modifico le impostazioni nel file css tutte le 3000 pagine cambieranno di aspetto. Le pagine che usano il css esterno devono contenere l'istruzioene: <LINK REL="stylesheet" TYPE="text/css" HREF="layout.css"> FILE LAYOUT.CSS (non ha il tag style al suo interno)

16 P.verde { font-size:32pt; font-family:verdana; color:green } P.giallo { font-size:32px; font-family:verdana; color:yellow } BODY { font-size:48px} Imparare i CSS indicati in rosso (tranne display, Visibility Imparare bene i css sui link A:hover, A:link,A:visited A:hover => attivato quando vado sopra il link /1/2013-3O CSS BACKGROUNDesempio body { background-image: url( Regnew.gif) ; background-repeat:repeat-y} z-index: => i numeri + bassi sono in foreground /1/2013-3T ---- riprendere da z-index A:hover => attivato quando vado sopra il link mostrata direttiva background A:hover { text-decoration: none; background:red } png => unisce vantaggi del GIF e del JPG spiegato cursor con i css posso definire dei salti pagina che l'html non prevede. Domande CSS =>tipo inlinea, inclusi ed esterni abbinati a direttive relative a: font, sfondo e link Esempio CSS che mostri come sfondo un'immagine ripetuta orizzontalmente - colore di sfondo verde - cuursore una mano - tale css deve essere esterno - css conclusi Powered by phpbb Forum Software phpbb Group All times are UTC Page 1 of 2

17 Brescianet.com Sito di supporto alla didattica 3Q - 2 Modulo 22/2/2013: 3Q - 2 Modulo le { e } ==> alt + digitare sul tastierino il codice 123 o 125 Page 2 of 2 Posted: Tue Jan 22, :00 am cursor: hand => comodo per indicare un'area sensibile al click - esempio: <img src= onclick=alert("ciao") style="cursor:hand"> direttive page-break non son da farsi con i metatags si istruiscono i motori di ricerca consentendo una corretta classificazione del documento (ad esempio un documento che parla scuola ma che non contiene tale parola non viene correttamente classificato da uno spider (motore di ricerca)) <meta http-equiv="content-language" content="it"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> I metatags consentono di indicare il prg editor html utilizzato <meta name="generator" content="microsoft FrontPage 5.0"> <meta name="progid" content="frontpage.editor.document"> con questo meta indico le parole chiave che classificano il mio documento. Gli spider di solito ignorano questo meta (a meno che non si sia cacciata vile pecunia) proprio per l'uso non sempre corretto da parte dei web master- <meta name="keywords" content="parola1, parola2, parola3"> robot => sinonimo dio motore di ricerca. indicizzare una pagina => costruire una struttura dati che consenta una ricerca veloce. Tutte le pagine in un motore di ricerca saranno indicizzate. noindex => istruisco il motore in modo che ignori la mia pagina (non sarà possibile ricercarla!) <meta name="robots" content="valori"> Istruisco il motore in modo che indicizzi automaticamente la pagina ogni 20 gg (si pensi all'home page di un sito di un quotidiano) <meta name="revisit-after" content="20 days"> guardiamo la pagina di ricerca di google (avanzata) seguente: 80&bih=817 se seleziono la lingua dei documenti il motore utilizzarà la classificazione indicata nel seguente meta: <meta name="language" content="lingua1,lingua2">

18 Il motore di ricerca alla scadenza reindicizza tale pagina <meta name="expires" content="mon, 27 Dec :00:00 GMT"> Posso con i meta istruire il browser in modo che non salvi in cache i documenti. In questo modo sono sicuro che l'utente consulti sempre l'ultima versione disponibile sul sito <META NAME="Pragma" content="no-cache"> (NetScape) <META HTTP-EQUIV="expires" CONTENT="0"> (Internet Explorer) ricarico la pagina ogni tot secondi (o reindirizzo su un'altra <meta http-equiv="refresh" content="1; url=pioppo.htm"> sabato 2 febbraio inizio orali => 5 spintanei per ora 3T - 22/1/2013 cookies => sono file registrati sul client che consentono di creare DEi profili utente. Con i meta posso dichiarare una scadenza del cookies pubblicare esercitazioni entro le del giorno prima della giornata della spintaneità! Sabato 2/2/2013 iniziano gli orali (5 spintanei al giorno) {3Q e 3T} Powered by phpbb Forum Software phpbb Group All times are UTC Page 2 of 2