BRESCIANET.COM Sito didattico - Prof. Sechi Marco Passa al contenuto

Transcript

1 BRESCIANET.COM Sito didattico - Prof. Sechi Marco Passa al contenuto Cerca Ricerca avanzata [ Pannello di Controllo Moderatore ] Cerca Modulo 1 - Classe 3N Rispondi al messaggio Cerca qui 15 messaggi Pagina 1 di 2 1, 2 Modulo 1 - Classe 3N di e01692» 14/09/2009, 9:04 Cerca Appunti estemporanei relativi al 1 Modulo - classe 3N Modulo 1 - Classe 3N - 17/09/2009 di e01692» 17/09/2009, 10:46 Modulo 1 - Classe 3N - 24/09/2009

2 di e01692» 24/09/2009, 10:49 in dos i nomi dei files: 8 caratteri+.+ estensione di 3 pippo.txt pioppo.db sempronio.html => no non potevo In dow/win l'estensione definisce il prg che deve aprire quel file (esempio.doc => word,.xls => excel, htm o html => il browser predefinito) 1 browser mosaic browser => interprete html html => testuali (xchè?) con <parola> ogni browser ha un set di tag html interpretabile. Le differenti presentazioni della stessa pagina web su diversi browser sta nella differente interpretazione dei tag Il consorzio internazionale w3c definisce lo standard HTML - + uno sviluppatore di browser si attiene a queste specifiche + il browser sara HTML compatibile. L'uso del tag <SCRIPT Language=VBScript> in IE è un chiaro esempio di non compatibilità gecko => renderizzatore html => trasforma la pagina testuale HTML in pagina grafica a video un prg salva i propri dati usando un formato (word salva il documento in una modalità che solo lui conosce) - il formato testuale è portabile => letto da chiunque Aggiornare un browser on line è utile: 1) la compatibilità verso lo standard w3c è solitamente maggiore 2) vengono chiuse quelle falle che consentirebbero di arrivare da internet verso la vs macchina. <html> apertura di una pagina </html> chiusura di una pagina struttura di base <HTML> <HEAD> <title>pagina iniziale</title> </HEAD> <BODY> Testo <PIPPO>visu</PIPPO>alizzato </BODY> </HTML>

3 il tag <HEAD> testata contiene info utili per i motori di ricerca e per i metatag il tag <PIPPO> non determina modifiche visive! i browser ignorano i tag sconosciuti per motivi di compatibilità in avanti. (un vecchio browser non evidenzierà alcun errore se si trova con un nuovo tag che invece è correttamente interpretato da una versione + recente) Modulo 1 - Classe 3N - 28/09/2009 di e01692» 28/09/2009, 9:01 <h1> headings il browser ha dei meccanismi di personalizzazione che possono alterare il layout grafico della pagina. Mediante i css (fogli di stile) lo sviluppatore di pagine web vincola la visualizzazione che diventa indipendente dalle impostazioni del browser il browser elimina tutti gli invii e gli spazi superflui inserendo un unico spazio <PRE> (ha chiusura) interpreta tutti i caratteri tra l'inizio e la fine e li visualizza sul browser tali e quali. Usat quando ho dei report testuali che devo in qualche modo pubblicare in internet. Non richiede alcun ritocco al documento che resta visibilmente testuale non tutti i tag hanno una chiusura: esempio Sorta di manuale: TAG per andare a capo <HTML> TAG per aprire un documento. Ha chiusura: </HTML> codice iso &#<codice ascii>; HTML non è case sensitive (non distingue tra minuscolo e maiuscolo) ma non sempre esempio: Ë è diverso da ë GRASSETTO GRASSETTO <CODE>COURIER</CODE> <TT>COURIER</TT>

4 Modulo 1 - Classe 3N - 01/10/2009 di e01692» 01/10/2009, 10:49 riprendere da qui cosa è un font monospaziato? spiegato il courier è un font monospaziato arial no ogni simgolo carattere occupa il medesimo spazio orizzontale per cui possibile effettuare semplici incolonnamenti in html posso definire il tipo di carattere da utilizzare Ciao in arial narrow Ciao in arial monospaziato quando un client non ha nel sistema un font utilizzato in una pagina web (indicato con face) dovrà sostituirlo con uno simile indicato nelle cfg del browser c:\windows\fonts => risorsa comune Ciao in arial monospaziato alcuni tag sono dotati di direttive esempio face è una direttiva di font. il valore delle direttive richiede il " (carattere doppio apice o singolo) se nel valore ho degli spazi scrivere equivale a non è vero il seguente equivale a altro esempio Ciao in arial narrow Ciao in arial narrow errato eliminare i " superflui ottimizza la pagina poichè avendo una dimensione ridotta arriva al client + velocemente i tag non sono case sensitive - i valori delle direttive talvolta si font => menu carattere di word => direttive => face, color size p => menu paragrafo => direttive align per paragrafo si intende una sequenza di caratteri terminata dall'invio

5 p => cosa visualizza? => cosa succede spiegate tutte le direttive di align - quale è la direttiva predefinita di align? a sinistra infatti se scrivo il testo verrà allineato a sinistra Quale è il comportamento/valore predefinito per la direttiva face? HR => riga orizzontale direttive size=> spessore in punti video width=> in pixel o in % (rispetto all'ampiezza della finestra) esempi presentati <hr size=50 width=300> <hr size=50 width=30% noshade> <CENTER>TITOLO</CENTER> <hr size=50 color=red width=300> Per valore predefinito di una direttiva si intende il comportamento del tag quando quella direttiva è omessa -- riprendere da blockquote Modulo 1 - Classe 3N - 05/10/2009 di e01692» 05/10/2009, 9:06 width=> in pixel o in % (rispetto all'ampiezza della finestra del browser) oppure => italico o corsivo <code> oppure <tt> => monospaziato o fixed char fatto blockquote OL => order list (ha chiusura nello standard HTML) UL => unorder list (ha chiusura nello standard HTML) LI => list item (non ha chiusura nello standard HTML) perchè il browser non segnala alcun errore se inserisco </LI>? editor html => prg che mi consente di creare pagine HTML senza sapere cosa sia HTML. L'interfaccia di tali prg (frontpage, dreamweaver, webexpression) sono simili a quelle di un word processor

6 (esempio word) <OL type=i> <LI>Capitolo 1 <LI> capitolo 2 <LI> capitolo 3 </OL> type è una direttiva applicabile a LI, UL e OL il valore di type è case sensitive (valori possibili 1, a,a, i, I) il valore predefinito è 1 <OL> oppure <OL type=1> esempi didattici <OL> <LI TYPE=a>Capitolo 1 <LI TYPE=A>Capitolo 2 => numeri in lettere alfabetiche <LI TYPE=i>Capitolo 3 => numerazione romana minuscola <LI TYPE=I>Capitolo 4 => numerazione romana maiuscole <LI TYPE=1>Capitolo 5 </OL> <UL> <LI TYPE=disc>Capitolo 1 <LI TYPE=square>Capitolo 2 <LI TYPE=circle>Capitolo 3 </UL> nelle UL il valore predefinito per type é disc Liste di definizione <DL> => definition list (ha chiusura) <DD> => definition description <DT> => definition term <DL> <DT><big>Casa</BIG> <DD>Ambiente dove uno vive <DT>Scuola <DD>Ambiente dove uno studia </DL> esempio interrogazione <DL> <DT><HTML> <DD>Tag apertura dei documenti HTML <DT>< <DD>Carattere < in codice ISO <DT>& <DD>Carattere & in codice ISO </DL>

7 <UL> <LI>Capitolo 1 <OL> <LI>Paragrafo 1.1 <LI>Paragrafo 1.2 <LI>Paragrafo 1.3 </OL> <LI>Capitolo 1 </UL> il tag IMG è il primo tag che richiama altri file oltre a quello contenente il codice HTML <img src=pallino.jpg border=1 width=72 height=60 alt="pallino rosso"> alt => breve descrizione testuale che appare anche sotto forma di tooltip height, width => consentono di mantenere l'occupazione spaziale della pagina garantendo un layout (aspetto) grafico identico alla pagina con caricate le immagini src=nomefileimmagine Nome di un file completo in dos/win è tutto il percorso + nomefile esempio C:\Documents and Settings\Utente1\desktop\pallino.jpg e non pallino.jpg Fare esercitazione 3 e 4 per Giovedì Modulo 1 - Classe 3N - 08/10/2009 di e01692» 08/10/2009, 10:22 Maschere di input 00/00/0000 ##/##/#### ##/##/\2\0## >LLL\ LLL\ 00L00\ L000L \spazio => inserisce a video uno spazio LLL\ LLL => ho uno spazio in mezzo per lunedì alle l'esercitation satisfation chiude i battenti nella costruzione del db 1) identificare campo chiave e significativo

8 il contatore va scelto se non esiste un campo chiave (deducibile dal caso reale) o se la chiave eleggibile risulta complessa nel suo utilizzo (rispetto alle necessità) il campo significativo è il campo + usato per trovare un record gli studenti richiedono (e, nonostante le resistenze del docente, vengono accontentati) l'esercitazione 1.2 su carta per giovedì - alle 9.50 il forum chiude lunedì 12 Modulo1 - Classe 3N - 8/10/2009 di e01692» 08/10/2009, 10:49 x2 ==> x al quadrato xn ==> n-esimo termine x x34 x34 <strike>ciao</strike> eserc 6 Modulo 1 - Classe 3N - 12/10/2009 di e01692» 15/10/2009, 6:09 src => indica immgine da caricare quando metto " nel valore di una direttiva? <img src=sfondo.gif> quando il nome del file è pulito (non ha niente davanti) il server cerca il documento nella stessa cartella del documento html percorso relativo=> fa riferimento alla cartella corrente (cartella contenente il documento HTML che sto visualizzando) <img src=sfondo.gif> identico a <img src=.\sfondo.gif> (se la macchina che ospita i documenti è windows) identico a <img src=./sfondo.gif> supponiamo che C:\Documents and Settings\Utente1\desktop\appunti sia la cartella corrente del documento kkk.htm allora posso scrivere annche in questo modo <img src=c:\documents and Settings\Utente1\desktop\appunti\sfondo.gif> QUEST'ULTIMO è UN PERCORSO ASSOLUTO (OVVERO DICO ESATTAMENTE DOVE SI TROVA IL DOCUMENTO DA LEGGERE). => nome della cartella corrente.. => nome della cartella precedente

9 cartella del desktop: C:\Documents and Settings\<nome utente>\desktop\ <nome utente> => utente che utilizza la macchina in quel momento. PERCORSO RELATIVO Tutto ciò che non è assoluto (deve mancare la UL oppure lo \ iniziale) - fa riferimento a.,.. oppure non ho niente PERCORSO ASSOLUTO: Un percorso è assoluto se viene indicato il nome della UL, \ e sequenza di cartelle unità LOGICA => C: D: A: => GENERALMENTE CORRISPONDONO AD UN DISCO (IN REALTà AD UNA PARTIZIONE) => SE OMESSA FA RIFERIMENTO ALLA ul CORRENTE (QUELLA DEL DOCUMENTO html IN ESAME) radice (ROOT) => \ SUBITO DOPO GLI EVENTUALI : OPPURE IN PRIMA POSIZIONE - per ogni UL esiste un'unica radice - > è un riferimento assoluto. Se manca fa riferimento alla cartella correnta esempio pippo.htm in c:\pluto all'interno A) <img c:caio.gif> dove sta caio.gif supponendo che l'immagine sia visibile? risposta: omettendo la radice caio sta nella stessa cartella corrente di pippo.htm ovvero c:\pluto B) <img c:..\caio.gif> dove sta caio.gif supponendo che l'immagine sia visibile? risposta: ho messo come riferimento la precedente della cartella corrente quindi:caio sta nella cartella precedente a quella corrente di pippo.htm ovvero c:\ c) <img \caio.gif> dove sta caio.gif supponendo che l'immagine sia visibile? risposta: ho omesso la UL quindi sarà C: Il riferimento è assoluto quindi caio sta in c:\ SCRIVERE c:pippo.gif NON è LA STESSA COSA DI C:\PIPPO.GIF DIFETTI PERCORSI assoluto da evitar poichè sensibili agli spostamenti. Se sul pc di destinazione non ho la stessa struttura delle cartelle immagini e link non saranno raggiungibili.

10 Modulo 1 - Classe 3N - 15/09/2009 di e01692» 19/10/2009, 9:04 riprendere dal vantaggio dei percorsi relativi: insensibile agli spostamenti <BODY BACKGROUND=../sfondo.gif> background usa una replicazione a piastrella (se l'immagine è piccola questa viene replicata sia in orizzontale che in verticale). Sfruttando questa tecnica posso ottenere effetti grafici estesi usando file ridotti che arrivano al client molto velocemente in dos/windows scrivere il nome di un file in maiuscolo/minuscolo è indifferente in linux no quindi un'immagine <IMG SRC=Pippo.gif> può essere vista se erogata da un server windows ma non se erogata da un server UNIX/LINUX poichè il file magari è registrato con il nome pippo.gif REGOLA: utilizzare nelle pagine HTML nomi di files sempre scritti in minuscolo. idem quando salvo qualcosa do un nome minuscolo => mi garantisce una portabilità delle pagine sviluppate. (le posso caricare su unix o win senza perdere i riferimenti ai files (esempi src, href, background) come verifico che il web server è unix o meno? URL =>riferimento di un file: può essere (unico su tutto il pianeta) oppure (assoluto ma non univoco poiche di dischi C: ne ho uno per ogni pc) c:\documents and Settings\Utente1\desktop\pippo.htm oppure UNC (univoco all'interno di una rete) <BODY BACKGROUND=\\Studente_02\SharedDocs\sfondo2.gif> in linea di massima è \\NomeDelPc\sequenza di cartelle di cui la prima è il nome della condivisione\nomefile TAG A <A HREF= qui</a> se scrivo

11 <A HREF=paolo.htm>clicca</A> la pagina richiesta viene cercata nella stessa cartella del documento html che contiene il tag A se scrivo <A HREF= qui</a> il documento verrà cercato su nelle sottocartelle appunti/web_latoclient/htmlcompleto se scrivo <A HREF=../paolo.htm>clicca</A> la pagina richiesta viene cercata nella cartella precedente alla cartella del documento html che contiene il tag A Prossimo Visualizza ultimi messaggi: Tutti i messaggi 6 Ordina per Ora di invio 6 Crescente 6 Vai Rispondi al messaggio 15 messaggi Pagina 1 di 2 1, 2 Torna a 1 MODULO - Appunti Strumenti di moderazione: Blocca argomento 6 Vai Chi c è in linea Visitano il forum: e01692 e 0 ospiti Powered by phpbb 2000, 2002, 2005, 2007 phpbb Group Traduzione Italiana phpbb.it Pannello di Controllo Amministratore

12 BRESCIANET.COM Sito didattico - Prof. Sechi Marco Passa al contenuto Cerca Ricerca avanzata [ Pannello di Controllo Moderatore ] Cerca Modulo 1 - Classe 3N Rispondi al messaggio Cerca qui 15 messaggi Pagina 2 di 2 1, 2 Cerca Modulo 1 - Classe 3N - 19/10/2009 di e01692» 19/10/2009, 9:09 riprendere dai link => consente l'ipertestualità (ovvero saltare ad un altro documento in modo contestuale) Href => inserisco il percorso del documento dove salto. gopher => antenato di http (modalità di navigazione attuale) => prg di tipo testuale strutturato a menu che consentivano di approfondire degli argomenti sfruttando i diversi livelli presenti nei menu proposti Percorsi relativi: spiegato. cosa è la cartella corrente: spiegato Percorsi assoluti => riferimento all'ul e alla radice => c:\pippo\pluto.htm Percorsi esterni: si tratta di riferimenti non presenti sul mio sito e generalmente utilizzano il meccanismo Plug-in => sw aggiuntivo che consente al browser la visualizzazione di documenti non supportati in modo nativo (jpg, gif, html, javascript). I plug-in vengono scaricati nel momento in cui è necessario utilizzarli per la visualizzazione. Meccanismi di certificazione garantiscono la provenienza dei plug-in evitando di scaricare sul proprio pc codice pericoloso. => mai scaricare plug-in privi di certificato/firma Meccanismo di cache = meccanismo che consente di salvare in locale le pagine visitate. Obbiettivo è evitare di riscaricare le pagine appena visitate evitando tempi di attesa

13 necessari al trasferimento dal server al client Tramite il protocollo http il client chiede al server (trasferendo pochi byte) se la pagina in cache è stata aggiornata. Se la risposta è negativa il server usa la pagina in memoria. memoria cache => meccanismo atto a velocizzare delle operazioni o ad allineare entita la cui velocità è differente. Un serbatoio dell'acqua è un esempio di cache. la cache per IE è data dalla cartella dei files temporanei. I cookies sono delle registrazioni locali (impostate da chi sviluppa le applicazioni server [sono gestite con JavaScript]) per fornire delle informazioni utili a rendere + usabile un sito (nei casi migliori) [ad esempio ripropongo in una successiva visita al mio sito l'ultima pagina visitata. In realtà vengono usati per tracciare profili comportamentali che poi vengono utilizzati per obbiettivi commerciali o altro. Per sicurezza sotto il pannello privacy inibire tutti i cookies ma questo potrebbe impedire l'uso di un sito (ad esempio sul forum devo sistematicamente riloggarmi) <A Name=nome> ==> segnalibro <A HREF=#FONDO>Vai in fondo</a>... testo lungo... <A NAME=FONDO>Arrivo QUA</A> -- riprendere con i segnalibri esterni Modulo 1 - Classe 3N - 22/10/2009 di e01692» 22/10/2009, 10:49 riprendere con i segnalibri esterni

14 qui ho i files degli appunti (digita il percorso sul menu esegui) \\ \sechi2009 Questa modalità è semplice da implementare (da parte di chi disegna le pagine WEB) ma solo chi sta usando il proprio PC potrà utilizzarla (motivo: l'outlook è impostato sulla mia mail personale solo sul mio PC) <A HREF="mailto:molinam@gsnet.it"> equivalente: tramite un form però richiede sviluppo di un prg lato server <A HREF="INDEX.HTM"><IMG SRC="images/UPARROW.GIF" BORDER=0></A> Scala RGB => rosso - verde - blu rosso verde blu nel caso di due colori 0 Nero 1 bianco nel caso di 4 colori 00 Bianco 01 Grigio Chiaro 10 Grigio scuro 11 Nero con 3 bit ho 8 (2^3) combinazioni con 4 bit ho 16 (2^4) combinazioni

15 i colori sono salvati come sequenza di bit k bit => 2^k la palette è l'abbinamento colori => sequenze di bit 0-> F => 16 simboli esadecimali con coppie di numeri HEX posso rappresentare numeri in base 10 da 0 a => 0 01 => 1.. 0F => => 16 FE => 254 FF => 255 FF0000 => rosso 00FF00 => verde 0000FF => blue => nero FFFFFF => bianco FFFF00 => giallo bgcolor=red, green silver RGB => palette standard riconosciuta da tutti i computer riprendere dal font nel 3 capitolo dei miei appunti Modulo 1 - Classe 3N - 26/10/2009 di e01692» 26/10/2009, 10:04 size => non si tratta di dimensioni assolute (impostabili solo con i css) ma relative

16 alle impostazioni di visualizzazione del browser SIZE=6 esempio: Dimensione 1 Dimensione 2 Dimensione 3 Dimensione 4 Dimensione 5 Dimensione 6 Dimensione 7 <BIG>Ingrandisce</BIG> Impedisce il ritorno a capo automatico (ha chiusura contrariamente al BR) VSPACE=n HSPACE=n <BLINK>Testo Lampeggiante</BLINK> => non va su Chrome e IE TABELLE: <tr> <th>1 colonna</th> <th>2 colonna</th> </tr> equivale <tr> <td align=center valign=middle>1 colonna</td> <td align=center valign=middle>2 colonna</td> </tr> esempio <table border=1 width=200 height=300> <tr> <th width=75%>1</th> <th width=25%>2</th> </tr> <tr> <td valign=top>1.1</td> <td valign=bottom>1.2</td> </tr> <tr height=50%> <td align=center>2.1</td> <td align=right>2.2</td> </tr> <tr> <td>3.1</td>

17 <td>3.2</td> </tr> </table> la larghezza sulla prima riga imposta la larghezza della colonna. <table border=1 cellpadding=0 cellspacing=0> nel td/tr width e height possono essere espressi in % (rispetto alle dimensioni della tabella) o in punti. nel table width e height possono essere espressi in % (rispetto alle dimensioni della finestra del browser) o in punti. Per la prossima volta fare esercizio e 1.2 su carta Le tabelle sono usate per inserire in alcune posizioni della pagina il testo. Esempio link in basso a destra <table width=100% height=100%> <tr> <td>testo...</td> <td width=20 align=right valign=bottom>fine</td> </tr> </table> Modulo 1 - Classe 3N - 29/10/2009 di e01692» 29/10/2009, 11:47 le dimensioni in % relative a TR e TD sono calcolate rispetto alla dimensione della tabella <table width=100% height=100% BORDER=1> <tr> <td width=95%>3.1</td> <td align=right valign=bottom>fine</td> </tr> <tr> <td width=95%>3.1</td> <td align=right valign=bottom>fine</td> </tr> </table> quando non viene specificata l'ampiezza della riga o della colonna le dimensioni non definite verranno suddivise in parti =

18 <table width=300 height=100 BORDER=1> <tr> <td width=200>larga 200pt</td> <td>larga 50pt</td> <td>larga 50pt</td> </tr> fatto rowspan e colspan hex => dec 0 => 0 1 => 1... A => 10 B => 11 C => 12 D => 13 E => 14 F => in dec => hex AB=> dec 10* B => 1*16+11 FE => 15*16+14 FF= 255 => 15* => divido per 16 ==> 14,75 non considero la parte decimale ma solo l'intera => 14 =>E 0,75*16= *16=resto = 12 => C EC è 236 in decimale 236= x*16+y Fare 1.1 e 1.9 per la prossima volta Modulo 1 - Classe 3N - 12/11/2009 di e01692» 12/11/2009, 11:49

19 verifica di info quando ho degli spazi. => cartella corrente rispetto al documento con quel TAG => c:\documenti\logo.gif 165=16* => A <ul type=circle> <li>cap 1 <ul type=square> <li> par 1.1 <ul type=disc> <li> sottopar <ol type=a> <li>ann 1 <li>ann 2 </ol> </ul> </ul> <li>cap 1 </ul> & codice iso di & < codice iso di < <table border=1 width=300 height=200> <tr height=100> <td colspan=2 width=200 bgcolor=#00ff00 valign=middle align=center>verde</td> <td rowspan=2 width=100 bgcolor=#ff0000 valign=top align=right>rosso</td> </TR> <TR HEIGTH=50> <TD valign=bottom align=left bgcolor=#ffff00 rowspan=2>giallo</td> <TD rowspan=2> </td> </TR> <TR HEIGTH=50> <TD> </td> </TR> </table> Precedente Visualizza ultimi messaggi: Tutti i messaggi 6 Ordina per Ora di invio 6 Crescente 6 Vai Rispondi al messaggio 15 messaggi Pagina 2 di 2 1, 2 Torna a 1 MODULO - Appunti Strumenti di moderazione: Blocca argomento 6 Vai Chi c è in linea

20 Visitano il forum: e01692 e 0 ospiti Powered by phpbb 2000, 2002, 2005, 2007 phpbb Group Traduzione Italiana phpbb.it Pannello di Controllo Amministratore