3N - Prof. Marco SECHI
Transcript
3N - Prof. Marco SECHI
lnx.brescianet.com Sito didattico - Prof. Sechi Marco FAQ Profilo Cerca Lista utenti Non ci sono nuovi messaggi Gruppi Log out [ e01692 ] 3N - 2° Modulo Indice del forum -> Classe 3N - 2°Modulo Precedente :: Successivo Autore e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Messaggio Inviato: 20 Nov 2007 09:59 am Oggetto: 3N - 2° Modulo Annotazioni estemporanee del docente inerenti agli argomenti trattati in laboratorio L'ultima modifica di e01692 il 26 Gen 2008 07:55 am, modificato 2 volte Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 20 Nov 2007 10:17 am Oggetto: 3N - 20/11/2007 Le misure nella direttiva COORDS sono in PIXEL (punti immagine) - Il punto in altro a sinistra di un'immagine ha coordinata 0,0 I browser leggono il file html in modo seriale (dall'inizio alla fine) e ne interpretano subito i contenuti. Le figure in foreground (davanti) devono essere indicate prime di quelle in background (dietro) quando utilizzo il tag AREA (direttiva SHAPE) I frame suddividono le pagine in sottofinestre. Ogni sottofinestra contiene una pagina HTML. La gestione in frame dei siti è utile soprattutto nei siti di tipo informativo. Obbiettivo e lasciare i link di navigazione sempre visibili garantendo sempre la raggiungibilit à di tutti i contenuti con pochi click. Utilizzato molto nei siti intranet. Lo svantaggio è quando uso i motori di ricerca. Le singole pagine presenti nel frame vengono estratte singolarmente perdendo il contesto originale che le rendeva usabili (si pensi ad un menu che non ha il frame dove caricare le pagini corrispondenti alle voci presenti) Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 24 Nov 2007 08:02 am Oggetto: 3N - 24/11/2007 RETE LOCALE ==> rete di PC come quella presente in quest'aula INTRANET ==> applicazione delle tecniche internet all'interno di una rete locale I frame consentono una + facile gestione delle modifiche - Esempio logo pubblicitaria => senza frame devo fare delle modifiche su tutti i files del mio sito - con i frame delego una particolare finestra a tale scopo il tag <BODY> non va utilizzato dentro i frame FRAME SRC="" ==> visualizza un frame bianco (vuoto) <NOFRAMES> usato per gestire le pagine quando il client non riconosce i frame Il tag NOFRAME è utilizzato dai browser nuovi che supportano i frame per escludere dalla visualizzazione il testo compreso tra <NOFRAMES> e </NOFRAMES> - I Vecchi browser si limitano ad ignorare tutti i tag che riguardano i frames visto che non li conoscono <html> <FRAMESET COLS="*,3*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAME SRC=""> <FRAMESET ROWS=*,* BORDER=10 BORDERCOLOR="silver"> <FRAME SRC="b.html" MARGINWIDTH=40 MARGINHEIGHT=40> <FRAMESET COLS=*,*> <FRAME SRC="pippo.jpg" WIDTH=146 HEIGHT=162> <FRAME SRC="d.html"> </FRAMESET> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY> Metti il testo della versione senza frames qui. Se qualcuno sta usando un vecchio browser, questo salterà tutto quello scritto sopra ed arriva proprio qui. I browsers che leggono i frames ignoreranno invece quello che c'è tra i tags <NOFRAMES>. Qui puoi scrivere un paio di domande. Ho scritto un'intera pagina a vuoto? Probabile. Quanta gente non vedrà la pagina se non scrivo questa parte? Molto poca Pensi che dovrei scusarmi con loro per questo? Proprio no. Ti vuoi scusare tu per questo? Proprio no. Perchè l'hai messo in questo tutorial? Perch è è una caratteristica principale e volevo che tu almeno la conoscessi. Sarai sempre affascinante? Naturalmente. </BODY> </NOFRAMES> </html> Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 27 Nov 2007 10:54 am Oggetto: 3N - 27/11/2007 I valori della direttiva NAME sono case sensitive. NAME=PIPPO <> NAME=pippo 1) Quando A HREF non ha la direttiva Target ==> caricherà la pagina nello stesso frame contenente il link 2) Quando un taget contiene un nome sconosciuto ==> costruzione di una nuova finestra il cui nome è quello indicato nella direttiva TARGET del LINK 3) Scrivere TARGET=_self - Nessun target - TARGET="nome del frame che contiene il link" è equivalente Target.htm +++++++++++++++++++++++++++++++++ <FRAMESET COLS="*,*"> <FRAME SRC="menu.htm" NAME=MENU> <FRAMESET ROWS="170,*"> <FRAME SRC="" NAME=Sopra> <FRAME SRC="" NAME=SOTTO> </FRAMESET> </FRAMESET> Pippo.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PIPPO </BODY> </HTML> Pluto.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PLUTO </BODY> </HTML> Menu.htm +++++++++++++++++++++++++++++++++ <html> <BODY> <OL TYPE=I> <LI><A HREF="pippo.htm">Link a Pippo (senza direttiva TARGET)</A> <LI><A HREF="pippo.htm" TARGET=Sopra>Link a Pippo (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=SOPRA>Link a Pippo (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=SOPRA>Link a Pluto (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=Sopra>Link a Pluto (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=_self>Link a Pippo con TARGET=_self [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_top>Link a Pippo con TARGET=_top [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_blank>Link a Pippo con TARGET=_blank [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_BLANK>Link a Pippo con TARGET=_BLANK [non è TAG Magico])</A> <LI>Link ... </OL> </BODY> </html> Top e01692 Site Admin Registrato: 09/09/07 08:22 Inviato: 01 Dic 2007 07:54 am Oggetto: 3N - 01/12/2007 I valori della direttiva NAME sono case sensitive. NAME=PIPPO <> NAME=pippo Messaggi: 229 1) Quando A HREF non ha la direttiva Target ==> caricherà la pagina nello stesso frame contenente il link 2) Quando un taget contiene un nome sconosciuto ==> costruzione di una nuova finestra il cui nome è quello indicato nella direttiva NAME del LINK 3) Scrivere TARGET=_self - Nessun target - TARGET="nome del frame che contiene il link" è equivalente Target.htm +++++++++++++++++++++++++++++++++ <FRAMESET COLS="*,*"> <FRAME SRC="menu.htm" NAME=MENU> <FRAMESET ROWS="170,*"> <FRAME SRC="" NAME=Sopra> <FRAME SRC="" NAME=SOTTO> </FRAMESET> </FRAMESET> Pippo.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PIPPO </BODY> </HTML> Pluto.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PLUTO </BODY> </HTML> Menu.htm +++++++++++++++++++++++++++++++++ <html> <BODY> <OL TYPE=I> <LI><A HREF="pippo.htm">Link a Pippo (senza direttiva TARGET)</A> <LI><A HREF="pippo.htm" TARGET=Sopra>Link a Pippo (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=SOPRA>Link a Pippo (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=SOPRA>Link a Pluto (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=Sopra>Link a Pluto (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=_self>Link a Pippo con TARGET=_self [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_top>Link a Pippo con TARGET=_top [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_blank>Link a Pippo con TARGET=_blank [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_BLANK>Link a Pippo con TARGET=_BLANK [non è TAG Magico])</A> <LI>Link ... </OL> </BODY> </html> ---------------------Meccanismo dei file temporanei: cache ==> il client (IE) quando visualizza una pagina ne salva i contenuti in locale. Alla prossima visita mediante il protocollo HTTP (che regola le comunicazioni tra client e server) IE richiede se la pagina è stata aggiornata. Se il server (che è sostanzialmente un programma) risponde che è restata inalterata il client (IE) utilizza la pagina in cache (che quindi è visualizzata istantaneamente) evitando un inutile download Per un frame, _parent è il frame che lo contiene Per un frame, _top è il frame corrispondente alla finestra del browser <LI><A HREF="pippo.htm">Link a Pippo (senza direttiva TARGET)</A> ESEMPI SUL SOTTOFRAME Target.htm +++++++++++++++++++++++++++++++++ <FRAMESET COLS="*,*"> <FRAME SRC="menu.htm" NAME=MENU NORESIZE> <FRAMESET ROWS="170,*"> <FRAMESET COLS="*,*"> <FRAME SRC="" NAME=SopraS NORESIZE> <FRAME SRC="Menu.htm" NAME=SopraD NORESIZE> </FRAMESET> <FRAME SRC="Sottofinestra.htm" NAME=SOTTO> </FRAMESET> </FRAMESET> SottoFinestra.htm +++++++++++++++++++++++++++++++++ <FRAMESET COLS="*,*"> <FRAME SRC="" NAME=SottoS NORESIZE> <FRAME SRC="Menu.htm" NAME=SottoD NORESIZE> </FRAMESET> Menu.htm +++++++++++++++++++++++++++++++++ <html> <BODY> <OL TYPE=I> <LI><A HREF="pippo.htm" TARGET=_parent>Link a Pippo (Target=_parent)</A> <LI><A HREF="pippo.htm">Link a Pippo (senza direttiva TARGET)</A> <LI><A HREF="pippo.htm" TARGET=SopraD>Link a Pippo (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=SOPRA>Link a Pippo (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=SOPRA>Link a Pluto (TARGET=SOPRA)</A> <LI><A HREF="pluto.htm" TARGET=SopraD>Link a Pluto (TARGET=Sopra)</A> <LI><A HREF="pippo.htm" TARGET=_self>Link a Pippo con TARGET=_self [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_top>Link a Pippo con TARGET=_top [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_blank>Link a Pippo con TARGET=_blank [TAG Magico])</A> <LI><A HREF="pippo.htm" TARGET=_BLANK>Link a Pippo con TARGET=_BLANK [non è TAG Magico])</A> <LI>Link ... </OL> </BODY> </html> Pippo.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PIPPO </BODY> </HTML> Pluto.htm +++++++++++++++++++++++++++++++++ <HTML> <BODY> SONO PLUTO </BODY> </HTML> I FORMS consentono di inviare dei dati al server http. In base ai dati verrà restituita una pagina "personalizzata". La risposta non è quindi scritta in HTML ma tramite opportuni linguaggi di programmazione (esempio ASP e PHP) La direttiva ACTION definisce la pagina che riceverà i dati scritti nei singoli controlli del form (quando confermo un form si dice che è stato sottomesso) TYPE=TEXT ==> crea un controllo di tipo TEXTBOX <FORM NAME=Scheda METHOD=POST ACTION="PaginaSottomessa.htm"> Nominativo:<INPUT TYPE=TEXT SIZE=10 MAXLENGTH=20 NAME=Nome VALUE="Marco"> Nominativo:<INPUT TYPE=PASSWORD SIZE=10 MAXLENGTH=20 NAME=Nome VALUE="Marco"> </FORM> Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 04 Dic 2007 10:01 am Oggetto: 3N - 04/12/2007 Nei Bottoni RADIO con lo stesso NAME avremo un comportamento mutuamente esclusivo (solo una opzione risulta selezionabile) Value è utilizzato nei radio Buttons per indicare il valore che verrà spedito al server nel caso quella opzione venga selezionata CHECKED ==> mette il pallino sull'opzione che considero predefinita (default value) checkbox sono utilizzati nelle scelte multiple: Ogni elemento deve avere un nome differente affinch è il server sia in grado di capire quali opzioni sono state selezionate se imposto Value in un checkbox al server arriva la stringa vuota "" se quella opzione non è selezionata altrimenti il valore indicato nella direttiva VALUE Nei combobox il valore che arriva al server è il valore contenuto in corrispondenza della direttiva VALUE dell'opzione selezionata: esempio se seleziono la 2 ° voce al server in corrispondenza della variabile elenco giunge il valore ing <SELECT NAME=Elenco> <OPTION value=ita>Italiano <OPTION value=ing>Inglese <OPTION value=fra>Francese <OPTION value=rus>Russo <OPTION value=spa>Spagnolo </SELECT> </FORM> se seleziono la 2 ° voce al server in corrispondenza della variabile elenco giunge il valore inglese <SELECT NAME=Elenco> <OPTION>Italiano <OPTION>Inglese <OPTION>Francese <OPTION>Russo <OPTION>Spagnolo </SELECT> </FORM> con size trasformo il combobox in un listbox con un numero di righe visibile identico al valore messo in size DIRETTIVA METHOD <FORM NAME=Scheda METHOD=POST ACTION="PaginaSottomessa.asp"> pagina caricata - con il post i valori passati al server non sono visibili http://192.168.1.30:8064/PaginaSottomessa.asp Con il GET la pagina caricata sarà quella indicata in ACTION seguita dai nomi e valori dei singoli controlli presenti nel form. Ogni valorizzazione è separata dal carattere & <FORM NAME=Scheda METHOD=GET ACTION="PaginaSottomessa.asp"> pagina caricata http://192.168.1.30:8064/PaginaSottomessa.asp? Nome=pippo&Nome=Marco&NAZIONALITA=FRA&LINGUAITA=YES&Elenco=ita&COMMENTS=Sechi+Marco%0D%0A ESEMPIO: <FORM NAME=Scheda METHOD=GET ACTION="PaginaSottomessa.asp"> Nominativo:<INPUT TYPE=TEXT SIZE=20 MAXLENGTH=3 NAME=Nome VALUE="pippo"> Nominativo:<INPUT TYPE=PASSWORD SIZE=10 MAXLENGTH=20 NAME=Nome VALUE="Marco"> <br>Nazionalita: ITA<INPUT TYPE=RADIO NAME="NAZIONALITA" value=ITA CHECKED> FRA<INPUT TYPE=RADIO NAME="NAZIONALITA" value=FRA CHECKED> UK<INPUT TYPE=RADIO NAME="NAZIONALITA" value=UK> <br>Lingue conosciute: Italiano<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAITA" CHECKED> Francese<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAFRA"> Inglese<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAUK"> <BR> Madre Lingua: <SELECT NAME=Elenco size=3> <OPTION value=ita SELECTED>Italiano <OPTION value=ing>Inglese <OPTION value=fra>Francese <OPTION value=rus>Russo <OPTION value=spa>Spagnolo </SELECT> <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> Sechi Marco </TEXTAREA> <input type=submit value="cliccheggia qui"> </FORM> Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 15 Dic 2007 08:01 am Oggetto: 3N - 15/12/2007 DIRETTIVA METHOD <FORM NAME=Scheda METHOD=POST ACTION="PaginaSottomessa.asp"> pagina caricata - con il post i valori passati al server non sono visibili http://192.168.1.30:8064/PaginaSottomessa.asp Con il GET la pagina caricata sarà quella indicata in ACTION seguita dai nomi e valori dei singoli controlli presenti nel form. Ogni valorizzazione è separata dal carattere & <FORM NAME=Scheda METHOD=GET ACTION="PaginaSottomessa.asp"> pagina caricata http://192.168.1.30:8064/PaginaSottomessa.asp? Nome=pippo&Nome=Marco&NAZIONALITA=FRA&LINGUAITA=YES&Elenco=ita&COMMENTS=Sechi+Marco%0D%0A ******** QUESTO ERA IL FORM ORIGINALE ****************** <FORM NAME=Scheda METHOD=POST ACTION="PaginaSottomessa.asp"> Nominativo:<INPUT TYPE=TEXT SIZE=20 MAXLENGTH=3 NAME=Nome VALUE="pippo"> Nominativo:<INPUT TYPE=PASSWORD SIZE=10 MAXLENGTH=20 NAME=Nome VALUE="Marco"> <br>Nazionalita: ITA<INPUT TYPE=RADIO NAME="NAZIONALITA" value=ITA CHECKED> FRA<INPUT TYPE=RADIO NAME="NAZIONALITA" value=FRA> UK<INPUT TYPE=RADIO NAME="NAZIONALITA" value=UK> <br>Madre lingua: ITA<INPUT TYPE=RADIO NAME="LINGUA" value=ITA> FRA<INPUT TYPE=RADIO NAME="LINGUA" value=FRA CHECKED> UK<INPUT TYPE=RADIO NAME="LINGUA" value=UK> <br> <br> <br> <br> <br>Lingue conosciute: Italiano<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAITA" CHECKED> Francese<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAFRA"> Inglese<INPUT TYPE=CHECKBOX VALUE="YES" NAME="LINGUAUK"> <BR> Madre Lingua: <SELECT NAME=Elenco size=3> <OPTION value=ita SELECTED>Italiano <OPTION value=ing>Inglese <OPTION value=fra>Francese <OPTION value=rus>Russo <OPTION value=spa>Spagnolo </SELECT> <INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1"> <INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1"> <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50 wrap=OFF> \\|// (@ @) ----------------------oOO---(_)---OOo------------------------:: : Questo serve solo a mostrare che il testo all'interno dei : : tags di TEXTAREA viene mostrato come se fosse un : : "COMMENTO" di default. La cosa interessante e' che viene : : visualizzato ESATTAMENTE e' stato : : come scritto! : : (amenoche' tu non stia usando MS Internet Explorer) : -------------------------------------------------------------|__|__| || || ooO Ooo </TEXTAREA> <BR> <input type=submit value="submit standard"> <input type=reset value="Rimetti i valori iniziali"> <input type=BUTTON value="Ciao" onClick="alert('ave')"> <input type=BUTTON value="Altro submit" onClick="this.form.submit()"> </FORM> ***************************** ---- Posso passare dei parametri ad una pagina WEB (che però deve essere scritta con un linguaggio di pro- grammazione lato server) scrivendo: NomePagina.asp?Variabile1=Valore1&Variabile2=Valore2&.... BOTTONE <input type=BUTTON value="Ciao" onClick="alert('ave')"> <input type=submit value="submit standard"> alternativa <input type=BUTTON value="Altro submit" onClick="this.form.submit()"> Con il TYPE=BUTTON generalmente abbino del codice JavaScript che controlla la correttezza del FORM e solo dopo un responso positivo invio al server i dati. Tale meccanismo evita inutile traffico tra client (IE) e Server (IIS) tipico invece con il type=submit dove i dati sono spediti eseattamente cosi come sono e viene lasciato al linguaggio lato server l'onere di valutare o meno la correttezza dell'input Metodo utilizzando un controllo Lato client Client ==> Verifica con JS ==> se il FORM è corretto spedisco al server ==> comunico con il server occupando banda solo se serve Client ==> SUBMIT ==> comunico con il server occupando banda sempre ==> con il linguaggio lato server controllo se i dati ci sono tutti. Se mancano ==> ulteriore rispedizione del messaggio di errore con il form che dovrà essere ricompilato. ----Indicizzare un documento significa costruire una struttura dati che rende velocissime le ricerche I motori di ricerca (spider o robot) analizzano il traffico di rete e creano degli indici delle pagine in modo da fornire risposte immediate alle ricerche fatte da utenti. Quando un metatag Name=robots contiene follow allora i link trovati (che rappresentano altre pagine html) verranno richiesti e i documenti associati verranno a loro volta analizzati. <meta <meta <meta <meta name="description" content="Descrizione della pagina o del sito"> name="robots" content="valori"> name="keywords" content="parola1, parola2, parola3"> name="revisit -after" content="20 days"> <meta name="copyright" content="Copyright Nome Autore 2003"> <meta name="author" content="nome autore"> <meta name="language" content="lingua1,lingua2"> <meta http-equiv="imagetoolbar" content="no"> <meta name="Expires" content="Mon, 27 Dec 2003 23:00:00 GMT"> <META NAME="Pragma" content="no-cache"> (NetScape) <META HTTP-EQUIV="expires" CONTENT="0"> (Internet Explorer) I 2 ultimi metatag dicono al browser che non bisogna utilizzare la pagina in cache (precedentemente consultata) ma deve essere richiesto di nuovo il download dal server (in questo modo la pagina scaricata è sicuramente aggiornata) <meta http-equiv="refresh" content="5"> Meccanismo dei file temporanei: cache ==> il client (IE) quando visualizza una pagina ne salva i contenuti in locale. Alla prossima visita mediante il protocollo HTTP (che regola le comunicazioni tra client e server) IE richiede se la pagina è stata aggiornata. Se il server (che è sostanzialmente un programma) risponde che è restata inalterata il client (IE) utilizza la pagina in cache (che quindi è visualizzata istantaneamente) evitando un inutile download <meta name="generator" content="nome editor html utilizzato"> <META HTTP-EQUIV="Set-Cookie" Content="cookievalue=xxx;expires="Monday, 10-jul-99 06:00:00 GMT; path=/"> Un cookies e una registrazione che il server WEB effettua sul PC client per tracciare il comportamento dell'utente (ad esempio l'ultima pagina visitata su di un sito per riproporla alla prossima navigazione). Molto spesso tracciare il comportamento dell'utente consente di tracciarne un profilo (interessi, abitudini, ..) e quindi posso usare questa informazione per mandargli pubblicità mirata (violazione della privacy) C:\Documents and Settings\Utente1\Cookies <meta name="Page-Exit" content="revealTrans(Duration=x,Transition=x)"> <meta name="Page-Enter" content="revealTrans(Duration=x,Transition=x)"> Top e01692 Site Admin Registrato: 09/09/07 08:22 Inviato: 12 Gen 2008 08:14 am Oggetto: 3N - 12/01/2008 FORMATO ==> modalit à di registrazione di un certo file. Ad esempio i file di word sono registrati in Messaggi: 229 un particolare formato che consente di salvare sia il testo che le caratterizzazioni tipografiche del documento (esempio grassetto, margini etc) Alcuni formati sono talmente diffusi che vengono considerati degli standard assoluti: mp3 ==> audio jpg, gif ==> immagini (grafica pittorica o fotografica) dxf ==> grafica vettoriare ( si tratta di un file testuale contenente equazioni, quote che descrivono il disegno) mpeg ==> animazione postscript,pdf ==> file di stampa gRAFICA VETTORIALE disegno COMPOSTO DA EQUAZIONI, LINEE (VETTORI) E PUNTI VANTAGGI: 1) eSTREMA QUALITA DELL'IMMAGINE ANCHe SE INGRANDISCO L'IMMAGINE DI MOLTO 2) DIMENSIONE DEI FILES ESTREMAMENTE RIDOTTA 3) POSSO USARE UN FILE DI TESTO PER SALVARE TALE FORMATO (AUMENTANDO LA LEGGIBILITA' DEI CONTENUTI) sVANTAGGI: lE VARIAZIONI DI COLORE DI UN IMMAGINE REALE NON POSSONO ESSERE RIPRODOTTE CON UN NUMERO DI FUNZIONI RIDOTTO E PERTANTO UNA DESCRIZIONE VETTORIALE POTREBBE RICHIEDERE UNO SPAZIO SUPERIORE A QUELLO RICHIESTO DALLA MODALITA' BITMAP PROGRAMMI VETTORIALI Illustrator, freehand, autocad (tutti i cad in generale) grafica pittorica DISEGNO COMPOSTO DA UNA MATRICE DI PUNTI COLORATI (PIXEL) LA CUI COMPOSIZIONE DETERMINA LA VISUALIZZAZIONE DI UNA FIGURA. VANTAGGI 1) semplicit à dell'algoritmo di registrazione SVANTAGGI 1) dimensione dei files ampia esempio un'immagine composta da 800x600 pixel con 256 colori richiede 800x600x1by Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 19 Gen 2008 07:58 am Oggetto: 3N - 19/01/2007 --palette ==> associazione colori - sequenze di bit Profondità di colore ==> nr di colori ammessi nell'immagine 800x600pixel in bianco o nero ==> richiede 800x600bit (palette 0=bianco 1 = nero) ==> 10000byte 1Kb=1Kbyte=1024byte 1Mb=1Megabyte=1024Kbyte 1Gb=1Gigaabyte=1024Mb 1Tb=1Terabyte=1024Gb 800x600pixel in rgb ==> richiede 800x600x 3 byte (per ogni colore serve un byte) 1 bit => 2 combinazioni (0, 1) 2 bit ==> 4 combinazioni (00,01,10,11) 3 bit ==> 8 combinazioni (000,001,010,011,100,101,110,111) ... N bit ==> 2^N combinazioni Immagini bitmap GIF - JPEG - TIFF - BMP I file gif utilizzano tecniche di compressione per ridurre le dimensioni dei files GIF: 1) Usato per immagini al tratto (tutto ciò che non è una foto - si tratta di immagini di tipo fumettistico le variazioni di colore non risultano repentine) 2) Non supporta + di 256 colori diversi (questo limite ==> una palette di al + 256 colori presi in un range anche molto vasto: ad esempio dalla scala cymk (scala di colore usata nelle stampe) o rgb) - La palette è sempre registrata nel file 3) Consente le trasparenze 4) Consente le animazioni (GIF Animate) 5) Compressione dell'immagine grazie alla sostituzione di aree di colore identiche con opportune equazioni. BMP: File bitmap non compresso - In testata ha sempre la palette (generalmente registrata in RGB) esempio 00 ==> #FFFFFF Bianco 01 ==> #000000 NERO 10 ==> #0000FF Blu 11 ==> #FF0000 Rosso In questo esempio la palette è fatta di 12 byte - Oltre alla palette abbiamo il nr di colori Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 26 Gen 2008 07:55 am Oggetto: 3N 22/01/2008 In questo esempio la palette è fatta di 12 byte - Oltre alla palette abbiamo il nr di colori .... Il formato GIF non è un formato distruttivo ovvero la qualità dell'immagine gif compressa è identica a quella originale (BMP non compresso) Il formato JPEG è un formato distruttivo ovvero la qualit à dell'immagine gif compressa è inferiore a quella originale (BMP non compresso) JPEG utilizza come meccanismo di compressione l'algoritmo utilizzato da WINZIP (LZW) Il JPEG sostituisce colori simili adiacenti con un colore medio. Tale sostituzione nelle foto risulta poco percettibile. Il JPEG non va usato assolutamente nelle immagini al tratto (vedasi esempio) Salvare in JPG con mspaint e photoshop è la stessa cosa ? come mai ? Gli algoritmi presenti in Photoshop sostituiscono i colori in modo da ottenere un'immagine + piccola ed al tempo stesso venga mantenuta il + possibile la qualità dell'immagine originale La qualit à di un'immagine bmp è misurata in dpi (punti per pollice) - Un monitor ha 72 dpi - le stampanti vanno da 300 a 2400 dpi - il fax usa una qualità pari a 200 dpi dispositivi BMP (stampante, fax, monitor) spiegato cosa è l'interlacciamento Il plotter è un esempio di periferica vettoriale TIFF ==> formato di compressione nato con il FAX - comprime utilizzando algoritmi LZW ma non modifica la qualit à - Il file risultante è un file di dimensioni + ampie del corrispondente JPEG - TIFF è valido per pagine in B/N (esempio un foglio A4 occupa appena 100kb ) riprendere dal TIFF - mp3 e MPEG Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 26 Gen 2008 07:56 am Oggetto: 3N - 26/01/2008 - le pagine dei fax hanno una risoluzione pari a 200 dpi TIFF ==> utilizzato nelle stampe di qualità - è un algoritmo di compressione non distruttivo mpeg => formato di compressione video supponiamo 100k per ogni fotogramma - se penso che un filmato ha 25/30 fps (frame per secondo) per un minuto ==> 100k*25*60 = circa 146 mega la compressione oltre ai soliti meccanismi di tipo jpeg sfrutta il fatto che i fotogrammi consecutivi risultano praticamente identici - Nei formati MPEG viene quindi utilizzato il delta per ottenere una compressione ulteriore. Spiegato codec - formati xvid - divx - mpeg - vedi disegno mp3 ==> comprime i file audio sfruttando incapacità uditive (non tutte le frequenze sono udibili) jpeg ==> comprime le immagini sfruttando incapacità visive (non tutte le variazioni cromatiche risultano percepibili) nei formati distruttivi l'algoritmo che elimina le informazioni superflue (non percettibili) + è sofisticato maggiore sarà la qualità finale ottenuta (i codec si occupano della compressione sul singolo frame) rm => formato di streaming audio ==> streaming ==> il file viene ricevuto man mano e subito riprodotto per streaming si intende un'erogazione sequenziale del file - Il client appena riceve i bit relativi ad un filmato li riproduce senza aspettatare che tutto il file sia ricevuto. In Internet le WEBRadio e le WEBTV sono caratterizzate da 2 entità: client - server Client ==> real player - windows media player Server ==> real server Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 31 Gen 2008 10:12 am Oggetto: 3N - 28/01/2008 Il plug-in è un meccanismo che consente ad un browser di estendere le funzionalit à di base previste da un prg - per I.E. ad esempio il plug-in di Flash consentirà la visualizzazione delle applicazioni costruite con il programma Flash (prodotto dalla MacroMedia - Si tratta di un vero e proprio ambiente di sviluppo orientato alla grafica: giochi e effetti grafici) - Per vedere un file PDF devo aver installato il plug-in di acrobat (ovvero Acrobat Reader) CSS: L'utilizzo dei CSS è evidente quando personalizzo il browser. Se la pagina mantiene l'aspetto originale l'editore web HA UTILIZZATO LA TECNICA DEI css i CSS SONO USATI SOPRaTTUTTO NELLA MODulistica perchè posso definire le dimensioni e le posizioni dei singoli elementi posti sulla pagina in modo molto preciso ed indipendente dal browser css=foglio di stile Riprendere dai metodi di uso dei CSS Metodi CSS in linea ==> usato quando devo impostare un aspetto tipografico spot (ovvero nella pagina quella definizione non si ripete diverse volte) CSS incorporato (o incluso) ==> usato quando ho all'interno della stessa pagina degli stili tipografici CSS esterno ==> usati per fornire un layout grafico uniforme a tutto il sito layout ==> come si presenta graficalmente un qualcosa Top e01692 Site Admin Registrato: 09/09/07 08:22 Messaggi: 229 Inviato: 31 Gen 2008 11:26 am Oggetto: 3N - 31/01/2008 layout ==> come si presenta graficalmente un qualcosa PSEUDOCLASSI spiegato xchè si usano <STYLE> FONT.GIALLO { font-size:20px; font-family:arial black; color:yellow text-decoration: underline } FONT.ROSSO { font -size:20px; font-family:arial black; color:red ; text-decoration: overline } </STYLE> <FONT CLASS=ROSSO>Testo in rosso</FONT> <FONT CLASS=GIALLO>Testo in GIALLO</FONT> esempio richiesto ==> dato un file scaricare il css che eventualmente è incluso <FONT CLASS=ROSSO>Testo in rosso</FONT> <FONT CLASS=GIALLO>Testo in GIALLO</FONT> <A HREF=pippo.htm><IMG SRC=esempio.gif border=0></A> <IMG SRC=esempio.gif border=0 STYLE="cursor:hand" onClick="alert('ciao')"> <IMG SRC=esempio.gif border=0 onClick="alert('ciao')"> tramite JS posso dinamicamente modificare l'aspetto manovrando sulle diverse classi di stile di un certo tag dimensioni in pt (punti tipografici) e px (pixel) il fatto di inserire lo stile sul cursore consente al navigatore di capire che l'immagine è in qualche modo sensibile al click <STYLE> FONT.SOTTOLINEATO {text-decoration: underline } FONT.LINEASOPRA { text-decoration: overline } FONT.BARRATO { text-decoration: line-through} UL { list-style-image: URL(http://www.brescianet.com/immagini/bottone.gif) } <p> ripresa stili con pseudo classi <STYLE> FONT.SOTTOLINEATO {text-decoration: underline } FONT.LINEASOPRA { text-decoration: overline } FONT.BARRATO { text-decoration: line-through} UL { list-style-image: URL(http://www.brescianet.com/immagini/bottone.gif) } P { text-align=justify } </STYLE> per richiamare una particolare PSEUDO CLASSE uso la direttiva CLASS <FONT CLASS=BARRATO>Testo barrato</FONT> px (pixel) e pt (punti tipografici) ==> unit à di misura per direttive css che hanno a che fare con dimensioni non fare == >Font weight, List style image, Font style ricordarsi: 1* esempio ** fornire il css con uno stile di testo (che indicherò) in modalit à diretta, inclusa (<STYLE>) o esterna <FONT STYLE="font-family:tahoma; font-size:10pt; color:green">Testo scritto grazie ai Css</FONT> <LINK REL="stylesheet" HREF="layout.css"> **** List style image ==> no da sapere esempio: costruire il css che definisce i link non visitati privi di sottolineatura con sfondo rosso , se visitato ... <STYLE> A:link { text-decoration: none; background:red ; cursor: crosshair} A:visited { text-decoration: overline } A:hover { text-decoration: underline; color:navy } </STYLE> <A HREF=pippo.htm>Link 1 con CSS</A><BR> da sapere esempio: costruire il css che definisce per il body l'immagine esempio2.gif (ripetuta orizzontalmente, verticalmente o nessuna ripetizione) con sfondo giallo ... <STYLE> body { background-image: url(esempio2.gif); background-color: yellow; background-repeat: no-repeat } </STYLE> <BODY> Border width ==> non sono da farsi le direttive inerenti ai bordi Z-index (si usano con gli splash screen), visibility ==> si con i css posso definire dei salti pagina forzati .... Top Mostra prima i messaggi di: Tutti i messaggi Vecchi Vai Tutti i fusi orari sono GMT Indice del forum -> Classe 3N - 2°Modulo Pagina 1 di 1 Controlla questo argomento Vai a: Classe 3N - 2°Modulo Vai Puoi inserire nuovi argomenti Puoi rispondere a tutti gli argomenti Puoi modificare i tuoi messaggi Puoi cancellare i tuoi messaggi Puoi votare nei sondaggi Puoi Moderare questo forum Amministrazione Powered by phpBB © 2001, 2005 phpBB Group phpbb.it