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