tag:blogger.com,1999:blog-13347393822196846142023-11-15T22:42:40.113-08:00notes@n3v1t... per adesso solo appunti sparsi ...Unknownnoreply@blogger.comBlogger36125tag:blogger.com,1999:blog-1334739382219684614.post-47483532199120335752011-05-02T16:28:00.001-07:002011-05-03T03:22:31.054-07:00CSS - Tipi di valori<h2>Requisiti</h2>
<p>Potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-dichiarazioni-proprieta-valori.html">Blocco dichiarazioni</a></li>
</ul>
<h2>Introduzione</h2>
<p>Di seguito una descrizione delle possibili tipologie di valori che possiamo assegnare alle proprietà.</p>
<h2>Parole chiave</h2>
<p>Sono identificatori di qualche cosa. Ad esempio il colore del carattere o di sfondo. In questo caso ad es. <code>background: red;</code> la dichiarazione è composta da un nome di proprietà ed un valore che è la paroa chiave <strong>red</strong></p>
<h2>Dimensioni</h2>
<p>Una dimensione comprende sempre un valore numerico (intero o reale) e l'unità di misura, che può essere o <strong>assoluta</strong> o <strong>relativa</strong>.</p>
<p>Le <strong>unità di misura relative</strong> sono le seguenti:</p>
<table border="1" cellspacing="0" cellpadding="3">
<tr><th>Unità relativa</th><th>Descrizione</th></tr>
<tr><td>em</td><td></td></tr>
<tr><td>ex</td><td></td></tr>
<tr><td>px</td><td></td></tr>
</table>
<p><strong>Le unità di misura assolute</strong> sono le seguenti:</p>
<table border="1" cellspacing="0" cellpadding="3">
<tr><th>Unità relativa</th><th>Descrizione</th></tr>
<tr><td>mm</td><td></td></tr>
<tr><td>cm</td><td></td></tr>
<tr><td>in</td><td></td></tr>
<tr><td>pt</td><td></td></tr>
<tr><td>pc</td><td></td></tr>
</table>
<h2>Percentuali</h2>
<h2>Colori</h2>
<h2>Numeri</h2>
<h2>Stringhe</h2>
<h2>URI</h2>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-31206362121337477362011-05-01T04:12:00.000-07:002011-05-02T15:47:32.434-07:00DTD - Document Type Definition<h2>Introduzione</h2>
<p>Supponiamo di aver bisogno di un XML (<a href="http://nevit-notes.blogspot.com/2011/04/xml-cosa-si-intende-per-well-formed-o.html">ben formato / well formed</a>) per rappresentare lo scambio di messaggi tra utenti.</p>
<p>Il singolo messaggio dovrà contenere la data di invio, il mittente, il destinatario e il corpo del messaggio. I valori sono da intendersi tutti obbligatori.</p>
<p>Possiamo inventarci e utilizzare un documento XML di questo tipo:</p>
<pre><code><messaggio data="data_del_messaggio">
<mittente>nome_mittente</mittente>
<destinatario>nome_destinatario</destinatario>
<corpo>corpo_del_messaggio</corpo>
</messaggio></code></pre>
<p>chiamiamo questo nuovo linguaggio MSGXML.</p>
<p>Supponiamo, inoltre, che questi messaggi debbano essere letti o generati da software diversi, sviluppati da persone diverse. In tal caso occorrerà:</p>
<ul>
<li>stabilire un modo formale (esatto/"matematico"/univoco) per condividere la sua struttura e le sue regole con altri sviluppatori</li>
<li>avere un meccanismo che ci permetta di validare i messaggi di questo "nuovo" formato</li>
</ul>
<p>In questi casi una soluzione è il DTD (Document Type Definition) che ci permette di definire il documento specificando la struttura e gli elementi/attributi/valori ammessi. </p>
<p>Un documento XML <strong>ben formato</strong> che rispetta le regole indicate in un DTD si dice <strong>valido</strong>, <strong>non valido</strong> altrimenti.</p>
<p>La stessa cosa è stata fatta ad esempio per l'HTML o l'XHTML:</p>
<ul>
<li><a href="http://www.w3.org/TR/xhtml1/dtds.html">DTD XHTML 1.0</a></li>
<li><a href="http://www.w3.org/TR/html4/sgml/dtd.html">DTD HTML 4.01</a></li>
</ul>
<p>... e un documento XHTML che non rispetta le regole previste nel suo DTD si dice <strong>non valido</strong>.</p>
<p>Procediamo quindi con una descrizione del DTD che ci aiuterà a definire formalmente il nostro linguaggio.</p>
<h2>Struttura di un DTD</h2>
<p>Il DTD ci permette di descrivere la struttura e tutti i "mattoni" fondamentali di un doc. XML (elementi, attributi, entità) attraverso l'uso di <strong>dichiarazioni</strong> che specificano:</p>
<ul>
<li>gli elementi, il loro nome e il contenuto ammesso</li>
<li>gli attributi degli elementi, il loro nome e i valori ammessi</li>
<li>definire nuove entità</li>
</ul>
<p>Un DTD è in sostanza un documento che contiene un elenco di dichiarazioni che hanno la forma seguente:</p>
<pre><code><!tipo_dichiarazione parametri_dichiarazione ></code></pre>
<p>dove <strong>tipo_dichiarazione</strong> può essere ELEMENT, ATTLIST, ENTITY e <strong>parametri_dichiarazione</strong> varia in base al <strong>tipo_dichiarazione</strong> indicato.</p>
<h2>Definizione degli elementi</h2>
<p>Con DTD possiamo definire gli elementi del nostro documento in questo modo:</p>
<pre><code><!ELEMENT elemento_contenitore contenuto></code></pre>
<p>Ad esempio la definizione del tag img in xhtml è</p>
<pre><code><!ELEMENT img EMPTY></code></pre>
<p>dove con EMPTY si indica che l'elemento non ha contenuto.</p>
<p>I possibili valori che possiamo assegnare a <code>contenuto</code> sono:</p>
<table border="1" cellspacing="0" cellpadding="3">
<tr><th>Contenuto</th><th>Descrizione</th><th>Esempio XML</th></tr>
<tr><td><code>EMPTY</code></td><td>non è ammesso contenuto</td><td><pre><code><img /></code></pre></td></tr>
<tr><td><code>(#PCDATA)</code></td><td>Sta per Parsed Character Data ed è una stringa che può contenere elementi o entità che il parser deve riconoscere (es. &lt; diventerà <, <p> sarè riconosciuto come tag di apertura etc.).</td><td></td></tr>
<tr><td><code>ANY</code></td><td></td><td></td></tr>
<tr><td><code>(elemento)</code></td><td>1 sola occorrenza di elemento</td><td></td></tr>
<tr><td><code>(elemento?)</code></td><td>0 o 1 occorrenze di elemento</td><td></td></tr>
<tr><td><code>(elemento*)</code></td><td>0 o più occorrenze di elemento</td><td></td></tr>
<tr><td><code>(elemento+)</code></td><td>1 o più occorrenze di elemento</td><td></td></tr>
<tr><td><code>(elemento1, elemento2, ...)</code></td><td>gli elementi devono presentarsi nella stessa sequenza indicata</td><td></td></tr>
<tr><td><code>(elemento1 | elemento2)</code></td><td>o un elemento o l'altro</td><td></td></tr>
</table>
<p>Per MSGXML possiamo definire la struttura del documento:</p>
<pre><code><!ELEMENT messaggio (mittente, destinatario, contenuto)>
<!ELEMENT mittente (#PCDATA)>
<!ELEMENT destinatario (#PCDATA)>
<!ELEMENT contenuto (#PCDATA)>
</code></pre>
<p>in cui gli elementi mittente, destinatario, contenuto devono apparire esattamente in questo ordine.</p>
<h2>Definizione degli attributi</h2>
<p>Gli attributi possono essere definiti in questo modo:</p>
<pre><code><!ATTLIST nome-elemento nome-attributo tipo-attributo valore-default></code></pre>
<p>I valori che possiamo assegnare a <code>tipo-attributo</code> sono:</p>
<table border="1" cellspacing="0" cellpadding="3">
<tr><th>Tipo attributo</th><th>Descrizione</th><th>Esempio</th></tr>
<tr><td>CDATA</td><td>interpetato come normale testo: le entità vengono prese così come sono e non convertite, i tag presi così come sono, etc.</td><td></td></tr>
<tr><td>(val1|val2|..)</td><td>deve essere un valore tra quelli indicati</td><td></td></tr>
<tr><td>ID</td><td>è un id univoco</td><td></td></tr>
<tr><td>IDREF</td><td>è un riferimento a un id di un altro elemento</td><td></td></tr>
<tr><td>IDREFS</td><td>elenco di IDREF</td><td></td></tr>
<tr><td>NMTOKEN</td><td>è un nome XML</td><td></td></tr>
<tr><td>NMTOKENS</td><td>elenco di NMTOKEN</td><td></td></tr>
<tr><td>ENTITY</td><td>è un entità</td><td></td></tr>
<tr><td>ENTITIES</td><td>elenco di ENTITY</td><td></td></tr>
<tr><td>NOTATION</td><td>il nome di una notation</td><td></td></tr>
<tr><td>xml:</td><td></td><td>valore xml predefinito</td></tr>
</table>
<p>I valori che possiamo assegnare a <code>valore-default</code> sono:</p>
<table border="1" cellspacing="0" cellpadding="3">
<tr><th>Valore default</th><th>Descrizione</th><th>Esempio</th></tr>
<tr><td>valore</td><td>il valore di default</td><td></td></tr>
<tr><td>#REQUIRED</td><td>il valore è obbligatorio</td><td></td></tr>
<tr><td>#IMPLIED</td><td>il valore è opzionale</td><td></td></tr>
<tr><td>#FIXED valore</td><td>il valore dell'attributo è fisso</td><td></td></tr>
</table>
<p>Per MSGXML possiamo definire l'attributo dell'elemento messaggio in questo modo:</p>
<pre><code><!ATTLIST messaggio data CDATA #REQUIRED></code></pre>
<h2>Definizione delle entità</h2>
<pre><code><!ENTITY nome-entita "valore-entita"></code></pre>
<h2>Dichiarazione del DTD</h2>
<p>Ciò che manca ora è l'indicazione di quale sia l'elemento di root e del modo per utilizzare il DTD o indicare che un doc. XML deve rispettare le regole/dichiarazioni definite in un DTD.</p>
<p>Ciò può essere fatto attraverso la dichiarazione DOCTYPE che ci permette di utilizzare il nostro DTD o includendolo nel nostro file XML o richiamando un file di dichiarazioni .dtd direttamente dal file XML.</p>
<p>Nel primo caso avremo:</p>
<pre><code><?xml version="1.0"?>
<!DOCTYPE elemento_root [
dichiarazioni
]>
<elemento_root>
...
</elemento_root>
</code></pre>
<p>nel secondo:</p>
<pre><code><?xml version="1.0"?>
<!DOCTYPE elemento_root SYSTEM "URI" ></code></pre>
<p>oppure</p>
<pre><code><?xml version="1.0"?>
<!DOCTYPE elemento_root PUBLIC "FPI" "URI" ></code></pre>
<p>dove con elemento_root indichiamo l'elemento root del nostro linguaggio XML .</p>
<p>La differenza tra i due sta nella parola chiave SYSTEM o PUBLIC.</p>
<p>A SYSTEM può seguire subito l'URI (assoluto o relativo) del dtd.</p>
<p>Nel secondo l'URI del DTD è opzionale ma deve essere presente l' FPI (Formal Public Identifier) che in poche parole identifica la specifica. Ad esempio:</p>
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></pre>
<h2>DTD di MSGXML</h2>
<p>Ora che abbiamo visto tutti gli argomenti possiamo assemblare il nostro msgxml.dtd.</p>
<pre><code><!ELEMENT messaggio (mittente, destinatario, contenuto)*>
<!ATTLIST messaggio data CDATA #REQUIRED>
<!ELEMENT mittente (#PCDATA)>
<!ELEMENT destinatario (#PCDATA)>
<!ELEMENT contenuto (#PCDATA)>
</code></pre>
<p>L'XML corrispondente sarà:</p>
<pre><code><?xml version="1.0"?>
<!DOCTYPE messaggio SYSTEM "msgxml.dtd" >
<messaggio data="1/1/2011">
<mittente>superman</mittente>
<destinatario>batman</destinatario>
<contenuto>ciao come stai?</contenuto>
</messaggio></code></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-89535874820532012372011-04-30T23:24:00.000-07:002011-05-01T14:45:15.705-07:00JSON - Javascript Object Notation<h2>Requisiti</h2>
<p>Potrebbe essere necessaria la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/backus-naur-form-bnf-e-ebnf.html">Backus-Naur Form / BNF e EBNF</a></li>
</ul>
<h2>Introduzione</h2>
<p>JSON è un formato per lo scambio dati semplice da leggere e da scrivere sia per noi che per i software.</p>
<h2>Grammatica</h2>
<p>Con JSON possiamo rappresentare i <strong>valori</strong> seguenti:</p>
<ul>
<li><code>true</code>, <code>false</code>, <code>null</code></li>
<li><strong>numeri</strong></li>
<li><strong>stringhe</strong></li>
<li><strong>array</strong></li>
<li><strong>oggetti</strong></li>
</ul>
<p>Le <strong>stringhe</strong> si costruiscono in questo modo:</p>
<pre><code>stringa := '"' carattere '"'</code></pre>
<p>se il carattere è " diventa \" e \ diventa \\ .</p>
<p>I <strong>numeri</strong> hanno questa forma:</p>
<pre><code>numero := '-'? ( '0' | cifra+ ) ( '.' cifra+ )? (('e'|'E')? ('+'|'-')? cifra+)?
cifra := '0' | '1' | '2' | '3' ... '9'</code></pre>
<p>Gli <strong>array</strong>, intesi come <strong>elenco ordinato</strong> di <strong>valori</strong>, sono rappresentati in questo modo:</p>
<pre><code>array := '[' (valore (, valore)*)? ']'</code></pre>
<p>Gli <strong>oggetti</strong>, intesi come <strong>array associativi</strong> che associano un <strong>valore</strong> ad una chiave identificata da una <strong>stringa</strong>, in questo:
<pre><code>oggetto := '{' (stringa ':' valore (, stringa ':' valore )*)? '}'</code></pre>
<p>Anche se dovrebbe essere già chiaro è bene tenerlo presente: i <strong>valori</strong> presenti negli <strong>array</strong> o negli <strong>oggetti</strong> possono essere anche <strong>array</strong> o <strong>oggetti</strong> . In altri termini possiamo annidare array o oggetti all'interno di altri array o oggetti.</p>
<p>Nelle varie regole di produzione ho omesso, per semplicità, di rappresentare la presenza di 1 o più spazi tra un simbolo o valore terminale e l'altro.</p>
<h2>Scambio dati</h2>
<p>In JSON lo "scambio dati" è in realtà la trasmissione di un solo <strong>valore</strong> (così come descritto sopra).</p>
<p>Esempi di valori:</p>
<ul>
<li><code>true</code></li>
<li><code>5</code></li>
<li><code>"ciao!"</code></li>
<li><code>[ 5, "ciao", 7, false, null ]</code></li>
<li><code>{ "nome" : "ilmionome", "cognome" : "ilmiocognome" }</code></li>
<li><code>{ "nome" : "ilmionome", "cognome" : "ilmiocognome", "valori" : [ 3 , 5, 7 ] }</code></li>
</ul>
<p>oppure anche:</p>
<p><a href="https://graph.facebook.com/19292868552">Proprietà JSON dell'oggetto Facebook Platform</a> (attraverso le Graph API di Facebook)</p>
<p>Per JSON è stato detto tutto!</p>
<h2>Riferimenti</h2>
<ul>
<li><a href="http://www.json.org/">JSON</a></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-470777918138718572011-04-30T19:49:00.000-07:002011-04-30T20:28:06.020-07:00HTML/XHTML - Elementi strutturali<h2>Requisiti</h2>
<p>Per proseguire potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">Introduzione a HTML/XHTML</a></li>
</ul>
<h2>Introduzione</h2>
<p>Nell'<a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">introduzione</a> abbiamo visto la struttura tipica di un documento HTML/XHTML che per comodità si riporta di seguito:</p>
<pre><code><!DOCTYPE ... >
<html>
<head>
<title>Titolo del documento</title>
<!-- elementi intestazione -->
</head>
<body>
<!-- elementi a livello di blocco -->
</body>
</html></code></pre>
<p>Segue una descrizione dettagliata degli elementi strutturali.</p>
<h2>html</h2>
<p>Attributi definibili i18n .</p>
<p>L'elemento radice del documento, <strong>html</strong> ha al suo interno i 2 elementi <strong>head</strong> e <strong>body</strong>.</p>
<h2>head</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>profile</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_uri">URI</a></td><td>NO</td></tr>
</table>
<p>L'elemento <strong>head</strong> contiene informazioni sul documento. Queste informazioni sono descritte attraverso gli <a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-intestazione.html">elementi di intestazione</a>, tra i quali c'è l'elemento obbligatorio <strong>title</strong>.</p>
<h2>body</h2>
<p>Al suo interno possono esserci solo elementi a livello di blocco. Gli elementi inline possono stare solo all'interno degli elementi a livello di blocco.</p>
<p>L'elemento <strong>body</strong> contiene l'informazione che si vuole trasmettere all'utente descritta attraverso elementi suddivisi in 2 categorie:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html">elementi a livello di blocco</a>: contengono o elementi inline o altri elementi a livello di blocco</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-inline.html">elementi inline</a>: contengono solo testo o altri elementi inline.</li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-9179218865709125642011-04-30T14:08:00.001-07:002011-05-01T16:00:03.350-07:00HTML/XHTML - Tipi di dati<p>Di seguito vengono descritti i tipi di dati utilizzati per i valori degli attributi. Sono stati esclusi quelli utilizzati su attributi il cui uso è sconsigliato (ad es. Color) perchè l'obiettivo è la formattazione/presentazione del documento.</p>
<h2>Id</h2>
<p>Identifica un elemento in maniera univoca attraverso un nome. Il nome deve iniziare con una lettera [A-Za-z] e può essere seguito da numeri [0-9], lettere, o i caratteri "-", "_", ":", "."</p>
<h2 id="tipo_name">Name</h2>
<p>Come per Id.</p>
<h2>Text</h2>
<p>E' semplicemente testo</p>
<h2 id="tipo_uri">Uri</h2>
<p>Sono URI assoluti o relativi. In generale sono case-sensitive.</p>
<h2>Pixels</h2>
<p>Indica una dimensione in pixel. Ad esempio un'immagine può essere larga 250px per 50px. Può essere usato per indicare le dimensioni di un'immagine o la dimensione del bordo di una tabella.</p>
<h2>Length</h2>
<p>E' una dimensione indicata o in <strong>Pixels</strong> o in percentuale (es. 50%). Usato per indicare la dimensione di un'immagine o di una tabella.</p>
<h2>MiltiLength</h2>
<p>E' una dimensione indicata o con i valori di <strong>Length</strong> o con una <strong>dimensione relativa</strong> indicata nella forma "i*", dove i è un numero intero (se non specificato vale 1).</p>
<p>Quando i browser allocano spazio agli elementi che competono per esso, iniziano ad assegnare i pixel e le percentuali. Lo spazio rimanente viene assegnato in base al valore indicato per le dimensioni relative in maniera proporzionale.</p>
<p>Ad es. supponiamo che dopo aver assegnato lo spazio alle dimensioni in pixel e percentuali sia rimasto libero uno spazio di 60px che deve essere suddiviso tra 3 dimensioni relative di 1*, 2*, 3*. La somma dei relativi è 6 (1+2+3). In tal caso a 1* saranno assegnati 1/6*60 = 10px, a 2* saranno assegnati 2/6*20 = 20px e a 3* saranno assegnati 3/6*60 = 30px.</p>
<h2 id="tipo_content_type">ContentType</h2>
<p>Fa riferimento al MIME Type. Ad esempio: text/css, text/javascript, text/html, image/png, etc.</p>
<h2 id="tipo_language_code">LanguageCode</h2>
<p>Identifica la lingua (parlata). I valori hanno la forma seguente:</p>
<pre><code>language-code = primary-code ( "-" subcode )*</code></pre>
<p><code>primary-code</code> e' l'abbreviazione della lingua. Ad esempio it, en, de.</p>
<p><code>subcode</code> è il country code.</p>
<p>Esempi:</p>
<ul>
<li>en - inglese</li>
<li>en-US - la versione inglese USA</li>
<li>it - italiano</li>
</ul>
<h2 id="tipo_charset">Charset</h2>
<p>Fa riferimento alla codifica dei caratteri: il metodo per convertire una sequenza di byte in una sequenza di caratteri.</p>
<p>L'elenco dei valori registrati è reperibile <a href="http://www.iana.org/assignments/character-sets">alla pagina dello IANA</a></p>
<p>Usato ad es. per indicare la codifica dei caratteri del documento o delle risorse riferite.</p>
<h2>Character</h2>
<p>E' un singolo carattere.</p>
<p>Usato ad esempio nell'attributo <strong>accesskey</strong> dell'elemento <strong>a</strong>.</p>
<h2>DateTime</h2>
<p>I valori di questo tipo hanno il formato seguente:</p>
<pre><code>YYYY-MM-DDThh:mm:ssTZD</code></pre>
<p>Usato ad es. nell'attributo <strong>datetime</strong> degli elementi <strong>ins</strong> o <strong>del</strong>.</p>
<h2>LinkType</h2>
<p>Utilizzato per indicare il tipo di relazione tra documenti. Possono essere usati negli elementi <strong>link</strong> e <strong>a</strong>.</p>
<p>Di seguito i possibili valori che possiamo assegnare per questo tipo di dato:</p>
<ul>
<li><strong>alternate</strong>: indica una versione alternativa del documento</li>
<li><strong>stylesheet</strong>: riferisce un CSS esterno</li>
<li><strong>alternate stylesheet</strong>: riferisce un CSS esterno alternativo</li>
<li><strong>start</strong></li>
<li><strong>next</strong></li>
<li><strong>prev</strong></li>
<li><strong>contents</strong></li>
<li><strong>index</strong></li>
<li><strong>glossary</strong></li>
<li><strong>copyright</strong></li>
<li><strong>chapter</strong></li>
<li><strong>section</strong></li>
<li><strong>subsection</strong></li>
<li><strong>appendix</strong></li>
<li><strong>help</strong></li>
<li><strong>bookmark</strong></li>
</ul>
<h2 id="tipo_link_types">LinkTypes</h2>
<p>Il valore può comprendere uno o più <strong>LinkType</strong> separati da uno spazio. Ad esempio <code>alternate stylesheet</code></p>
<h2 id="tipo_media_desc">MediaDesc</h2>
<p>Indica il tipo di dispositivo. In genere usato insieme all'elemento <strong>link</strong> per includere CSS e indicare per quale dispositivo deono essere applicate.</p>
<ul>
<li><strong>screen</strong></li>
<li><strong>tty</strong></li>
<li><strong>tv</strong></li>
<li><strong>projection</strong></li>
<li><strong>handheld</strong></li>
<li><strong>print</strong></li>
<li><strong>braille</strong></li>
<li><strong>aural</strong></li>
<li><strong>all</strong></li>
</ul>
<p>... TO BE CONTINUED ...</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-52820205874542735142011-04-30T10:13:00.000-07:002011-04-30T14:57:28.210-07:00Reti e Protocolli<p>Questa guida raggruppa un insieme di informazioni sulle reti di calcolatori e i protocolli. Ancora in via di sviluppo ... l'indice è provvisorio e sarà riempito e riorganizzato mano a mano.</p>
<h2>Indice</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/uri-url-e-urn.html">URI, URL, URN</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/il-protocollo-http.html">Il Protocollo HTTP / Parte 1</a></li>
</ul>
<h2>Appendice</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/backus-naur-form-bnf-e-ebnf.html">Backus-Naur Form / BNF e EBNF</a></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-12265438872464069282011-04-29T22:42:00.000-07:002011-04-30T09:40:56.083-07:00Probabilità e applicazioni<p>L'intento della guida è spiegare i concetti fondamentali della probabilità ed esporre alcune applicazioni, in ambito "informatico", di questa affasciante teoria.</p>
<p>Al momento è solo all'inizio ...</p>
<h2>Indice</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/probabilita-intro-draft.html">Introduzione</a></li>
</ul>
<h2>Appendice</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/teoria-degli-insiemi-introduzione.html">Teoria degli insiemi</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/alcuni-problemi-combinatori.html">Alcuni problemi di calcolo combinatorio</a></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-85181707429784403752011-04-29T09:54:00.000-07:002011-04-30T20:43:16.547-07:00HTML/XHTML - Elementi intestazione<h2>Requisiti</h2>
<p>Prima di procedere potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">Introduzione a HTML/XHTML</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/uri-url-e-urn.html">URI, URL, URN</a></li>
</ul>
<h2>Introduzione</h2>
<p>Possono stare solo all'interno dell'elemento <strong>head</strong>.</p>
<p>Sono utilizzati per fornire informazioni sul documento che, in generale, l'utente non vedrà ad esclusione del contenuto dell'elemento <strong>title</strong> (il titolo del documento).</p>
<p>Segue una descrizione dettagliata di tutti gli elementi di questa categoria ad esclusione di quelli che violano la regola di separazione degli strati contenuto/presentazione/comportamento (es. l'elemento <strong>style</strong>)</p>
<h2>base</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>href</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_uri">URI</a></td><td>SI</td></tr>
</table>
<p>Definisce l'<strong>URI base</strong> del documento, indicato nell'attributo obbligatorio <strong>href</strong>, utilizzato per risolvere gli <strong>URI relativi</strong> presenti all'interno del documento stesso.</p>
<p>Ad esempio con:</p>
<pre><code><base href="http://www.example.com" /></code></pre>
<p>l'<strong>uri relativo</strong> <code>./css/default.css</code> sarà risolto in <code>http://www.example.com/css/default.css</code></p>
<p>Può essere definito 1 sola volta e se non specificato gli URI relativi saranno risolti in base all'URI del documento.</p>
<p>Poichè, in generale, l'URI base è quello del documento, non sarà necessario utilizzare questo elemento se non in casi particolari quali ad esempio:</p>
<ul>
<li>lo stesso documento è raggiungibile anche attraverso un altro URI (es. attraverso un particolare URL rewriting). In tal caso tutti i riferimenti relativi potrebbero andare persi. L'elemento <strong>base</strong> risolve il problema</li>
<li>in tutti quei casi in cui il documento non ha un URI. Tipico è il caso di documenti presenti in una email: o si trasformano tutti gli URI in assoluto oppure si lasciano relativi utilizzando l'elemento <strong>base</strong></li>
</ul>
<h2>link</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>rel</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_link_types">LinkTypes</a></td><td>NO</td></tr>
<tr><td>href</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_uri">URI</a></td><td>NO</td></tr>
<tr><td>type</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_content_type">ContentType</a></td><td>NO</td></tr>
<tr><td>media</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_media_desc">MediaDesc</a></td><td>NO</td></tr>
<tr><td>rev</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_link_types">LinkTypes</a></td><td>NO</td></tr>
<tr><td>hreflang</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_language_code">LanguageCode</a></td><td>NO</td></tr>
<tr><td>charset</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_charset">Charset</a></td><td>NO</td></tr>
</table>
<p>L'elemento definisce una relazione tra il documento e un'altra risorsa (documenti, css, etc.). E' possibile definire più di una relazione.</p>
<p>L'attributo <strong>rel</strong> indica il tipo di relazione tra il documento e la risorsa, <strong>rev</strong> indica il tipo di relazione tra la risorsa e il documento.</p>
<p>L'attributo <strong>href</strong> indica l'URI della risorsa con la quale il documento ha una relazione.</p>
<p><strong>type</strong> indica il MIME Type del documento riferito da href.</p>
<p>Uno degli utilizzi dell'elemento link è riferire file CSS esterni. Attraverso l'elemento link indichiamo una relazione tra il documento e il css:</p>
<pre><code><link rel="stylesheet" href="css/default.css" type="text/css" /></code></pre>
<p>Per il documento si possono indicare altri tipi di relazioni ad es. :</p>
<pre><code><link rel="index" href="../index.html" />
<link rel="next" href="capitolo3.html" />
<link rel="prev" href="capitolo1.html" /></code></pre>
<p>in questo caso, supponendo di essere nel documento <code>capitolo2.html</code>, indichiamo che:</p>
<ul>
<li>il documento ha un indice che lo riferisce che è in <code>../index.html</code></li>
<li>il seguito del documento corrente è su <code>capitolo3.html</code></li>
<li>ciò che precede il documento corrente è in <code>capitolo1.html</code></li>
</ul>
<p>E' possibile approfondire tutte le possibili relazioni che possiamo associare al documento nella sezione <a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_link_types">Tipi di dati / LinkTypes</a></p>
<h2>meta</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>name</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_name">Name</a></td><td>NO</td></tr>
<tr><td>content</td><td>CDATA</td><td>SI</td></tr>
<tr><td>http-equiv</td><td><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html#tipo_name">Name</a></td><td>NO</td></tr>
<tr><td>scheme</td><td>CDATA</td><td>NO</td></tr>
</table>
<p>Permette di specificare i metadati del documento: informazioni sul documento e non sul suo contenuto.</p>
<p>Ad esempio per indicare l'autore del documento si utilizzerà:</p>
<pre><code><meta name="Author" content="nome dell'autore"></code></pre>
<p>In questo caso l'informazione è stata fornita indicando la coppia proprietà/valore attraverso gli attributi <strong>name</strong> e <strong>content</strong>.</p>
<p>L'attributo <strong>http-equiv</strong> può essere utilizzato al posto dell'attributo <strong>name</strong> per far sì che il server HTTP che legge il documento per inviarlo al client, modifichi l'header del suo messaggio HTTP di risposta includendo un'intestazione che ha per nome il valore dell'attributo (http-equiv) e per valore ciò che è specificato nell'attributo <strong>content</strong>.</p>
<p>Ad esempio:</p>
<pre><code><meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT" /></code></pre>
<p>farà in modo che il server HTTP abbia questa intestazione:</p>
<pre><code>Expires: Tue, 20 Aug 1996 14:25:27 GMT</code></pre>
<p>Se non si conosce l'HTTP è possibile approfondire il funzionamento del protocollo nella sezione <a href="http://nevit-notes.blogspot.com/2011/04/il-protocollo-http.html">Il protocollo HTTP</a>.</p>
<p>In generale non esiste una specifica per i metadati. Il significato e le proprietà dei metadati dovrebbero dipendere da ciò che è specificato nell'attributo <strong>profile</strong> dell'elemento <strong>head</strong>.</p>
<p>I metadati possono essere indicati anche attraverso l'elemento <strong>link</strong></p>
<h2>title</h2>
<p>L'elemento <strong>title</strong> è l'unico elemento <strong>obbligatorio</strong> all'interno dell'elemento <strong>head</strong>.</p>
<p>All'interno dell'elemento è contenuto il titolo del documento che ne identifica il contenuto.</p>
<h2>script</h2>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>type</td><td>ContentType</td><td>SI</td></tr>
<tr><td>src</td><td>URI</td><td>NO ma per non violare separzione 3 strati SI!</td></tr>
<tr><td>charset</td><td>Charset</td><td>NO</td></tr>
</table>
<p>Permette di includere uno script (Javascript) nel documento.</p>
<p><strong>type</strong> (obbligatorio) indica il MIME Type dello script. Poichè sarà sicuramente Javascript il suo valore sarà <code>text/javascript</code></p>
<p>L'attributo <strong>src</strong> è l'URI della risorsa che contiene lo script Javascript.</p>
<p>Se src non è specificato il contenuto sarà all'interno dell'elemento script. Questa è comunque pratica sconsigliata.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-74078418474153383382011-04-29T06:20:00.000-07:002011-05-03T02:25:57.707-07:00Sviluppare documenti web: HTML, CSS, Javascript<p>Una guida più o meno completa su tutto ciò che serve sapere per sviluppare documenti web. Continuamente aggiornata. Attualmente è ancora incompleta e in fase di scrittura.</p>
<h2>Indice</h2>
<ul>
<li>
<a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">Introduzione ai documenti web</a>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">Introduzione a HTML/XHTML (strato contenuto)</a>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-strutturali.html">Elementi strutturali</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-intestazione.html">Elementi intestazione</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-inline.html">Elementi inline</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html">Elementi a livello di blocco</a>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elenchi.html">Elenchi</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tabelle.html">Tabelle</a></li>
</ul>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tipi-di-dati.html">Tipi di dati</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-differenze.html">Differenze tra HTML e XHTML</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-alcuni-errori-tipici.html">Evitare alcuni errori tipici</a></li>
</ul>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-intro.html">Introduzione a CSS (strato presentazione)</a>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-selettori.html">Selettori</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-dichiarazioni-proprieta-valori.html">Rule Set</a>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/05/css-tipi-di-valori.html">Tipi di valori</a></li>
</ul>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-at-rules.html">At-rules</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-reset.html">Reset!</a></li>
</ul>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/javascript-introduzione.html">Introduzione a Javascript (strato comportamento)</a>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/json-javascript-object-notation.html">JSON</a></li>
</ul>
</li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-creare-documenti-web-tutorial.html">Creare documenti web: tutorial</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/vantaggi-della-separazione-degli-strati.html">Vantaggi della separazione degli strati</a></li>
</ul>
<h2>Appendice</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/backus-naur-form-bnf-e-ebnf.html">Backus-Naur Form / BNF e EBNF</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/uri-url-e-urn.html">URI, URL, URN</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/05/dtd-document-type-definition.html">DTD - Document Type Definition</a></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-26925930259990902192011-04-29T04:56:00.001-07:002011-04-29T12:13:56.824-07:00CSS - Reset<p>Come detto in precedenza, i <strong>contenuti</strong> sono formattati graficamente attraverso lo <strong>strato presentazione</strong>. In altri termini, attraverso il linguaggio CSS, indichiamo ai browser come visualizzare gli elementi del <strong>documento</strong>.</p>
<p>Ciò che non si è detto è che con il <strong>nostro strato di presentazione</strong> in realtà andiamo a sovrascrivere uno "<strong>strato di presentazione di default</strong>" presente su ogni browser, che ha valori CSS predefiniti per ogni elemento.</p>
<p>Possiamo vedere gli effetti di questi valori di default scrivendo un contenuto HTML/XHTML senza CSS:</p>
<pre><code><h1>Titolo</h1>
<p>Paragrafo</p>
<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3</li>
</ul></code></pre>
<p>Visualizzando il codice riportato su un browser qualsiasi, possiamo subito renderci conto di come l'h1 abbia un suo font-size e dei padding/margin già impostati, stessa cosa per il p o per l'ul e per tutti gli altri elementi non riportati nell'esempio.</p>
<p>Se proviamo a visualizzare quello stesso contenuto su browser differenti ciò che probabilmente si noterà è che questi valori di default spesso sono differenti da browser a browser.</p>
<p>Ciò crea non pochi problemi allo sviluppatore che deve scrivere CSS che presenti contenuti allo stesso <strong>identico</strong> modo su tutti i browser.</p>
<p>Ad esempio, per gli elenchi (ol e ul) alcuni browser hanno un padding-left altri un margin-left che a loro volta possono avere differenti valori.</p>
<p>In tutti questi casi uno sviluppatore dovrebbe affrontare queste <strong>incongruenze</strong> caso per caso.</p>
<p>Ad esempio, al fine di evitare distanze variabili (margin+padding) da browser a browser, uno sviluppatore dovrebbe ricordarsi sempre di impostare entrambi i valori di margin e padding.</p>
<p>Esistono tantissime varianti di questo tipo che obbligano lo sviluppatore a controllare continuamente il risultato di ciò che scrive su tutti i browser.</p>
<p>Non è rara la situazione in cui, dopo aver testato con un solo browser i CSS, ci si trova a perdere un'enormità di tempo per capire perchè la pagina si visualizza in maniera differente su altri browser</p>
<p>Spesso la causa è proprio dovuta a queste incongruenze sui valori di default dei browser: lavorando con un solo browser abbiamo basato i CSS su un misto tra i valori di default (che non abbiamo forzato) e i nostri valori indicati dai CSS (che hanno forzato i valori di default).</p>
<p>Cambiando browser molti valori di default (non forzati) possono variare cambiando così il modo in cui la pagina si visualizza. La soluzione in questi casi è andare a ricercare tutti valori di default che non abbiamo forzato ed assegnare dei valori nei nostri CSS.</p>
<p>Fortunatamente c'è un modo più intelligente per uscire da questa situazione ed è quella di fare un reset di tutti gli elementi prima di iniziare a scrivere i nostri CSS.</p>
<p>Il reset consiste nel forzare un'impostazione di default uguale per tutti i browser. In questo modo siamo sicuri che tutti i valori di default sono congruenti sin dall'inizio.</p>
<p>Questa operazione di reset è effettuata da altri CSS che sono disponibili in rete. Ad esempio:</p>
<p><a href="http://meyerweb.com/eric/tools/css/reset/">http://meyerweb.com/eric/tools/css/reset/</a></p>
<p>Ovviamente il css del reset va messo prima dei nostri css.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-74639515469322554602011-04-29T01:58:00.000-07:002011-04-29T08:10:26.783-07:00Documenti Web - Vantaggi della separazione degli strati<h2>Requisiti</h2>
<p>Potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">Documenti Web - Introduzione</a></li>
</ul>
<p>Inoltre, poichè si riprende l'esempio del tutorial:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-creare-documenti-web-tutorial.html">Creare documenti Web / Tutorial</a></li>
</ul>
<h2>Perchè è utile separare strato contenuto / presentazione / comportamento</h2>
<p>Quando si sviluppa codice di qualsiasi natura (non solo per documenti web) il problema non solo quello di arrivare all'obiettivo. Il problema più grande spesso è manutenere il codice scritto. Di conseguenza ogni volta che si inizia un nuovo progetto la manutenzione di ciò che si andra a sviluppare deve essere un problema da tenere sempre in conto e si deve pensare sempre a come rendersi la vita più semplice.</p>
<p>Detto questo, e se si è letto il tutorial si dovrebbe aver intuito come sia semplice manutenere documenti creati mantenendo i tre strati separati.</p>
<p>Proviamo ora ad immaginare una situazione in cui non si sia mantenuta la separazione degli strati e vediamo cosa poteva succedere.</p>
<p>Supponiamo di avere centinaia o migliaia di documenti web per i quali non abbiamo rispettato la separazione. Ad esempio i documenti potevano:</p>
<ul>
<li>includere codice javascript inline</li>
<li>usare HTML / XHTML per formattare il contenuto: ad es. usando l'elemento <strong>br</strong> per distanziare paragrafi o altri elementi, o ad esempio il deprecatissimo tag <strong>font</strong></li>
<li>includendo CSS direttamente inline negli elementi del contenuto (attraverso l'attributo <strong>style</strong>)</li>
</ul>
<p>Dopo un certo periodo si decide di cambiare la presentazione del sito modificando:</p>
<ul>
<li>colore paragrafi (p) in precedenza impostato tramite css inline.</li>
<li>le distanze tra i paragrafi separati da elementi di formattazione br</li>
</ul>
<p>In questo caso si dovrebbero riprendere tutti i documenti andando a ricercare i tag br per aggiungerli o eliminarli e tutti i css inline cambiando codice del colore. Tradotto: un'enorme spreco di tempo.</p>
<p>Supponiamo ancora di aver incluso codice Javascript direttamente nel contenuto. Ad esempio il codice per l'area che diventava rossa al passaggio del mouse è replicato su n documenti differenti. Se si dovesse decidere di cambiare comportamento al codice, ad es. facendo diventare gialla l'area sensibile si dovrebbe anche in questo caso andare alla ricerca del codice su tutti i documenti modificandone il comportamento. Anche in questo il tutto si tradurrebbe, ancora una volta, in un enorme spreco di tempo.</p>
<p>Se avessimo rispettato le regole descritte in precedenza, i contenuti sarebbero rimasti invariati. Le modifiche si sarebbero dovute effettuare solamente su 2 file (presentazione e comportamento) e al max. su 2 righe di codice.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-73878007058414657162011-04-28T16:59:00.001-07:002011-05-03T03:57:43.099-07:00Javascript - Introduzione<p>Javascript è un linguaggio di scripting che ha le caratteristiche seguenti:</p>
<ul>
<li><strong>coss-platform</strong>: indipendente dalla piattaforma usata</li>
<li><strong>case-sensitive</strong>: l'identificatore <code>test</code> è differente da <code>Test</code></li>
<li><strong>tipato dinamicamente</strong>: il tipo delle variabili è stabilito dinamicamente.</li>
<li><strong>orientato agli oggetti</strong> anche se non è obbligatorio sviluppare ad oggetti</li>
</ul>
<p>E' progettato per essere incluso in altre applicazioni e per poterle controllare a livello di programmazione. Ad esempio è incluso nei browser e attraverso Javascript è possibile controllare i vari aspetti dello stesso, oppure ancora è possibile integrarlo in qualsiasi applicazione Java con <a href="http://www.mozilla.org/rhino/">Rhino</a>.</p>
<p>A livello base Javascript è costituito da un <strong>Core</strong> che prevede:</p>
<ul>
<li>elementi del linguaggio: istruzioni, strutture di controllo, operatori</li>
<li>oggetti base: Array, Date, Math, etc.</li>
</ul>
<p>Il Core può essere esteso con l'integrazione di altri oggetti, che permettono di controllare l'applicazione o l'ambiente in cui Javascript è integrato. Ad esempio:</p>
<ul>
<li><strong>Client-side JavaScript</strong> prevede l'estensione del Core aggiungendo oggetti che possono controllare un browser</li>
<li><strong>Server-side JavaScript</strong> prevede l'estensione del Core aggiungendo oggetti che possono controllare applicazioni lato server. Ad esempio per collegarsi ed eseguire query su database.</li>
</ul>
<h2>Javascript NON è Java!!!</h2>
<h2>Mattoni fondamentali</h2>
<p>Come per qualsiasi altro linguaggio di programazione in Javascript abbiamo:</p>
<ul>
<li>Valori, Variabili e Letterali</li>
<li>Espressioni e operatori</li>
<li>Istruzioni</li>
<li>Funzioni</li>
<li>Oggetti</li>
</ul>
<p>per ognuno dei quali c'è una sezione dedicata.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-48648403178130746972011-04-28T16:51:00.000-07:002011-04-29T05:30:54.332-07:00Documenti Web / Tutorial<h2>Requisiti</h2>
<p>A livello "teorico" potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">Introduzione ai documenti web</a> e relativi approfondimenti</li>
</ul>
<p>a livello "pratico" abbiamo bisogno di:</p>
<ul>
<li><strong>Notepad++</strong>, editor free scaricabile da <a href="http://notepad-plus-plus.org/">http://notepad-plus-plus.org</a></li>
<li><strong>Firefox</strong>, browser usato in questo tutorial insieme a</li>
<li><strong>Firebug</strong> (opzionale) utile per il debug</li>
</ul>
<p>Per evitare qualche problema con browser e css è utile scaricare:</p>
<ul>
<li><strong>Reset CSS</strong> prelevabile da <a href="http://meyerweb.com/eric/tools/css/reset/">http://meyerweb.com/eric/tools/css/reset/</a></li>
</ul>
<p>Per semplificarci il lavoro sullo strato comportamento, riducendo al minimo il codice Javascript che dobbiamo scrivere, ci occorrerà:</p>
<ul>
<li><strong>JQuery</strong> scaricabile da <a href="http://jquery.com/">http://jquery.com</a></li>
</ul>
<h2>Introduzione</h2>
<p>In questo tutorial vedremo come sviluppare correttamente un documento web, mantenendo completamente separati i <a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">3 strati descritti in precedenza</a>: contenuto (XHTML), presentazione (CSS), comportamento (Javascript).</p>
<p>L'obiettivo è: <em>creare 2 documenti, nei quali saranno presenti un titolo, un menu (per passare da un contenuto all'altro) e qualche paragrafo. Oltre a questo dovranno contenere un'area sensibile che si attiva e cambia colore al passaggio del mouse</em>.</p>
<p>Al termine capiremo perchè è vantaggioso mantenere gli strati separati e distinti.</p>
<h2>Struttura directory e file</h2>
<p>Iniziamo creando la nostra directory/cartella di "lavoro" che chiameremo <strong>tutorial</strong> in cui andremo a mettere i nostri file.</p>
<p>All'interno di questa directory/cartella creiamo altre 2 sotto-directory che chiameremo <strong>css</strong> e <strong>js</strong>.</p>
<p>La prima (css) conterrà il/i file relativi allo strato presentazione (con estensione .css), la seconda (js) quelli relativi allo strato comportamento (con estensione .js). La "radice" (tutorial), invece, conterrà i file relativi allo strato contenuto (con estensione .html).</p>
<p>In definitiva dobbiamo avere una struttura di questo tipo:</p>
<ul>
<li>
<strong>tutorial</strong>
<ul>
<li>
<strong>css</strong>
<ul>
<li>presentazione.css</li>
</ul>
</li>
<li>
<strong>js</strong>
<ul>
<li>comportamento.js</li>
</ul>
</li>
<li>contenuto1.html</li>
<li>contenuto2.html</li>
<li>...</li>
</ul>
</li>
</ul>
<p>Possiamo anche da subito crearci i file riportati nella struttura lasciandoli vuoti (li riempiremo mano a mano).</p>
<h2>Reset CSS</h2>
<p>Il motivo per cui è necessario fare un reset dei CSS è descritto nella sezione <a href="http://nevit-notes.blogspot.com/2011/04/css-reset.html">CSS - Reset!</a> di questa guida.</p>
<p>Nel sito indicato sopra preleviamo il codice CSS e incolliamolo nel file <strong>reset.css</strong> all'interno della directory <strong>css</strong>.</p>
<p>La directory css dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:</p>
<ul>
<li>...</li>
<li><strong>css</strong>
<ul>
<li>presentazione.css</li>
<li>reset.css</li>
</ul>
</li>
<li>...</li>
</ul>
<h2>JQuery</h2>
<p>Se abbiamo già scaricato JQuery, ci ritroveremo un file <strong>jquery-1.5.2.min.js</strong> che dovremo posizionare all'interno della directory/cartella <strong>js</strong>.</p>
<p>La directory js dovrà quindi avere (se si sono già creati i file del punto precedente) i file seguenti:</p>
<ul>
<li>...</li>
<li><strong>js</strong>
<ul>
<li>comportamento.js</li>
<li>jquery-1.5.2.min.js</li>
</ul>
</li>
<li>...</li>
</ul>
<h2>Strato contenuto</h2>
<p>I contenuti sono memorizzati su file .html e contengono solo codice HTML / XHTML con riferimenti a file .css e .js esterni.</p>
<p>Vediamo ora di scrivere i contenuti i 2 file partendo da <strong>contenuto1.html</strong> nel quale andremo ad inserire il codice riportato di seguito:</p>
<pre>
<code>
<html>
<head>
<title>Contenuto 1</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
<link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
<script type="text/javascript" src="./js/comportamento.js" ></script>
</head>
<body>
<h1>Contenuto 1</h1>
<ul class="menu">
<li>Contenuto 1</li>
<li><a href="contenuto2.html">Contenuto 2</a></li>
</ul>
<div class="testo">
<p>Questo è un semplice testo di prova.</p>
<p>Questo è un secondo paragrafo.</p>
</div>
<div id="area_sensibile">Passa sopra con il mouse</div>
</body>
</html>
</code>
</pre>
<p>Il file <strong>contenuti2.html</strong> conterrà invece il codice seguente:</p>
<pre>
<code>
<html>
<head>
<title>Contenuto 2</title>
<link rel="stylesheet" href="./css/reset.css" type="text/css" />
<link rel="stylesheet" href="./css/presentazione.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.5.2.min.js" ></script>
<script type="text/javascript" src="./js/comportamento.js" ></script>
</head>
<body>
<h1>Contenuto 2</h1>
<ul class="menu">
<li><a href="contenuto1.html">Contenuto 1</a></li>
<li>Contenuto 2</li>
</ul>
<div class="testo">
<p>Questo è un semplice testo di prova.</p>
<p>Questo è un secondo paragrafo.</p>
</div>
<div id="area_sensibile">Passa sopra con il mouse</div>
</body>
</html>
</code>
</pre>
<p>Dai contenuti richiamiamo i file esterni e condivisi che si occupano dello strato presentazione e comportamento.</p>
<p>Da notare, anche se i contenuti sono molto semplici, di come non esista traccia, all'interno del documento, dei linguaggi CSS e Javascript, ma solo richiami a questi.</p>
<h2>Strato presentazione</h2>
<p>I file presentazione sono memorizzati su file .css e come abbiamo visto sono richiamati dai file .html (evitando di includere linguaggio CSS nel documento HTML/XHTML).</p>
<p>Nel file css dobbiamo dire come visualizzare i contenuti:</p>
<pre>
<code>
body {
font-family: Verdana, Arial;
padding: 15px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
ul.menu {
margin-top: 15px;
font-weight: bold;
height: 30px;
}
ul.menu li {
float: left;
margin-right: 15px;
}
.testo p {
margin-top: 15px;
}
#area_sensibile {
margin-top: 15px;
padding: 15px;
font-size: 20px;
font-weight: bold;
border: 1px solid #999;
color: #999;
}
</code>
</pre>
<h2>Strato comportamento</h2>
<p>Buona norma è evitare di includere codice Javascript direttamente nei documenti HTML ma scriverlo in un file esterno con estensione .js e richiamarlo dalla pagina .html in modo da condividere lo stesso file .js su più file .html .</p>
<p>Vediamo ora, riprendendo il solito documento di esempio come far diventare rosso il div al passaggio del mouse.</p>
<pre><code>
$(document).ready( function() {
$('#area_sensibile').mouseover( function() {
$(this).css('background', 'red');
$(this).css('color', 'green');
});
$('#area_sensibile').mouseout( function() {
$(this).css('background', 'green');
$(this).css('color', 'red');
});
});
</code></pre>
<h2>Modifiche ai documenti</h2>
<p>I documenti, organizzati in questo modo richiedono una manutenzione minima. Ogni modifica sulla presentazione richiede solo la modifica di un file, così è per modifiche a livello di comportamento.</p>
<p>Se non avessimo rispettato la <a href="http://nevit-notes.blogspot.com/2011/04/vantaggi-della-separazione-degli-strati.html">separazione degli strati probabilmente avremmo avuto qualche problema in più</a>.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-73289142916405121242011-04-28T13:05:00.000-07:002011-04-29T08:19:45.947-07:00HTML/XHTML - Evitare alcuni errori tipici<p>E' stato più volte detto che quando si scrive codice HTML o XHTML si deve porre l'attenzione sulla descrizione dei contenuti del documento e non ci si deve preoccupare ne' della presentazione del documento (compito dello strato presentazione / CSS) ne' del suo comportamento (compito dello strato comportamento / Javascript).</p>
<p>Di seguito vengono riportati alcuni suggerimenti per evitare di ricadere nell'errore di utilizzare HTML o XHTML per formattare il contenuto:</p>
<ul>
<li>non usare le tabelle per dare un layout alla pagina</li>
<li>il tag <strong>h1</strong> non deve essere usato perchè il carattere è più grande ma <strong>SOLO ED ESCLUSIVAMENTE</strong> per indicare un titolo.</li>
<li>non usare l'elemento <strong>b</strong> poichè pensato per formattare il documento. Usare invece l'elemento <strong>strong</strong> che "trasporta" un significato semantico e serve per dire che il testo in esso contenuto ha un significato particolare che richiede maggior enfasi rispetto a quello che lo precede e lo segue.</li>
<li>il tag <strong>br</strong> non deve essere usato per iniziare un nuovo paragrafo o per distanziare un paragrafo (o qualsiasi altro elemento) da un altro. Semplicemente non dovrebbe essere usato, perchè lo scopo del tag è formattare il documento e non descriverlo.</li>
<li>Se vogliamo che un'area (racchiusa ad es. da un div) abbia sfondo rosso al passaggio del mouse evitare l'uso degli attributi <strong>onmouseover</strong> e <strong>onmouseout</strong> ma agganciare questi eventi su un file javascript esterno. </li>
<li>evitare di includere javascript o css direttamente nel contenuto ma metterli su file separati in modo da renderli riutilizzabili in altri contenuti</li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-77708093482902363612011-04-28T09:47:00.000-07:002011-04-28T10:12:44.236-07:00XML - Cosa si intende per well-formed o ben formato<p>Un documento XML è ben formato quando rispetta le regole seguenti:</p>
<ul>
<li>deve contenere un unico elemento di root</li>
<li>ogni elemento deve avere un tag di chiusura e se non ha contenuto può essere chiuso con la forma abbreviata <strong>/></strong></li>
<li>gli elementi devono essere nidificati in modo corretto</li>
<li>XML è case-sensitive per cui i nomi dei tag di apertura e chiusura devono corrispondere anche in termini di maiuscole/minuscole</li>
<li>i valori degli attributi devono essere sempre racchiusi tra apici singoli o doppi</li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-86764909722352463802011-04-28T09:25:00.000-07:002011-04-28T10:17:18.538-07:00HTML/XHTML - Differenze<h2>Requisiti</h2>
<p>Per comprendere quanto riportato di seguito potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">Introduzione a HTML/XHTML</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/xml-cosa-si-intende-per-well-formed-o.html">Cosa si intende per documento XML well-formed</a></li>
</ul>
<h2>Introduzione</h2>
<p>XHTML e HTML pur avendo una sintassi molto simile hanno origini differenti: HTML deriva da SGML, XHTML da XML. In poche parole possiamo dire che <strong>XHTML è un documento HTML ben formato</strong> (<a href="http://nevit-notes.blogspot.com/2011/04/xml-cosa-si-intende-per-well-formed-o.html">secondo le regole dei doc. XML</a>). Vediamo più in dettaglio cosa significa:</p>
<ul>
<li>in XHTML l'annidamento degli elementi deve essere corretto, in HTML no!</li>
<li>in XHTML è obbligatorio il tag di chiusura, e per gli elementi che non hanno contenuto (es. img) si deve usare la forma di chiusura abbreviata <strong>/></strong></li>
<li>in XHTML tutti gli elementi e i nomi degli attributi devono essere in caratteri minuscoli</li>
<li>in XHTML deve esserci un solo elemento di root</li>
<li>in XHTML il valore degli attributi deve essere racchiuso tra doppi apici</li>
<li>in XHTML gli elementi di un documento si identificano solo con l'attributo <strong>id</strong> e non con l'attributo <strong>name</strong></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-79460335157762323652011-04-27T17:40:00.000-07:002011-05-02T05:14:49.791-07:00Teoria degli insiemi - Introduzione<h2>Introduzione</h2>
<p>Un <strong>insieme</strong> è una collezione di oggetti considerata come entità singola: i termini "squadra di calcio", "numeri interi", "abitanti di Roma", etc. sono esempi di insiemi.</p>
<p>I singoli oggetti di queste "collettività" sono detti <strong>elementi</strong> dell'insieme.</p>
<p>Giusto per entrare nella terminologia si usa dire:</p>
<ul>
<li>il calciatore x1 <strong>appartiene</strong> alla squadra A.</li>
<li>la squadra A <strong>contiene</strong> i calciatori x1, x2, ..., xn</li>
</ul>
<p>dove i calciatori sono elementi dell'insieme squadra.</p>
<h2>Notazioni</h2>
<p>Gli <strong>insiemi</strong> sono in genere indicati con lettere maiuscole: A, B, C, ..., X, Y, Z.</p>
<p>Gli <strong>elementi</strong>, invece, sono indicati con lettere minuscole: a, b, c, ..., x, y, z.</p>
<p>Per dire che un elemento x <strong>appartiene</strong> all'insieme A si usa la notazione:</p>
<p class="latex">$\huge{x\in A}$</p>
<p>Di contro per dire che un elemento x <strong>non appartiene</strong> all'insieme A si usa la notazione:</p>
<p class="latex">$\huge{x\notin A}$</p>
<p>Per rappresentare gli insiemi possiamo usare la <strong>notazione elencativa</strong> che consiste nell'elencare tra parentesi graffe, separandoli con una virgola, tutti gli elementi dell'insieme:</p>
<p class="latex">$\huge{A=\{a, b, c, d, e\}}$</p>
<p>questa notazione può essere comoda nel caso di pochi elementi, ma diventa scomoda o impraticabile con molti o infiniti elementi. In tal caso possiamo abbreviare la notazione indicando le condizioni che devono essere soddisfatte affinchè un elemento possa appartenere all'insieme:</p>
<p class="latex">$\huge{A=\{ x | x soddisfa P\}}$</p>
<p>intendendo: "l'insieme A è costituito da tutti gli x <strong>tali che</strong> x soddisfi la condizione P", dove il simbolo <strong>|</strong> sta per "tali che"</p>
<p>Un insieme che non contiene elementi è detto <strong>insieme vuoto</strong>. Per dire che l'insieme A è un insieme vuoto si usa la notazione:</p>
<p class="latex">$\huge{A=\emptyset}$</p>
<p>che è <strong>differente</strong> da:</p>
<p class="latex">$\huge{A=\{\emptyset\}}$</p>
<p>in un caso diciamo che l'insieme A è vuoto, nell'altro diciamo che A è un insieme che contiene l'elemento vuoto: è come dire una scatola vuota e una scatola che contiene una scatola vuota.</p>
<h2>Sottoinsiemi</h2>
<p>A partire da un insieme S, possiamo creare nuovi insiemi prendendo tutti o parte degli elementi dell'insieme di partenza (S). Ad esempio: l'insieme di partenza S può contenere i primi 10 numeri interi maggiori di 0:</p>
<p class="latex">$S=\{1,2,3,4,5,6,7,8,9,10\}$ o con notazione abbreviata $S=\{x\in Z | x > 0 e x <= 10\}$</p>
<p>dall'insieme S possiamo formare l'insieme A costituito dai soli numeri pari:</p>
<p class="latex">$A=\{2,4,6,8,10\}$ o con notazione abbreviata $A=\{x\in S|x mod 2=0\}$</p>
<p>I nuovi insiemi creati sono detti <strong>sottoinsiemi</strong>. Occorrerà anche specificare da quale insieme sono stati formati o di quale insieme sono sottoinsiemi, quindi possiamo dire più precisamente che: A è <strong>sottoinsieme di S</strong>.</p>
<p>Detto questo possiamo definire un sottoinsieme in questo modo:</p>
<p class="latex"><strong>DEFINIZIONE DI SOTTOINSIEME</strong>: un insieme A è sottoinsieme di B quando ogni elemento di A appartiene anche a B. </p>
<p>Si dice anche che <strong>A è incluso in B</strong>, indicandolo con:</p>
<p class="latex">$\huge{A\subseteq B}$</p>
<p>oppure anche che <strong>B contiene A</strong> e si indica con:</p>
<p class="latex">$\huge{B\supseteq A}$</p>
<p>È bene precisare che dalla definizione non si fa riferimento all'origine del sottoinsieme A (da cosa è stato creato, es. B). Quindi, generalizzando, un insieme A può essere sottoinsieme di B anche se non è creato da questo, ma solo e semplicemente perchè tutti gli elementi di A appartengono anche a B.</p>
<h2>Uguaglianza</h2>
<h2>Operazioni su insiemi: unione, intersezione, sottrazione, complemento</h2>
<p><img border="0" height="224" width="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFHYx0dZEqRW3OCZ4iMFcEv2io8PMmnoVtfPrcEYadDBZOeqhFXt6ARRA_dilh1s3O7_HHRQdOCGHrkRWOE5cw8rp0VWLRCyoD9txPdjBERJuRxS3Bg2AqDV7N19A2EpzQ7RMy0KntA/s320/unione.jpg" /></p>
<p><img border="0" height="224" width="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTZdg4rSz3taUt8axo0I-rgnHhOxI8zsg5_7-Ia-2TGoNY0iAqGEXX0x-v3Dfw8DAatOV_U-5nqy0OB1k4uWAYteX-b1-oebc9mKPfldGQuAN1ECjUP7zBad1OFr2KZW1UnkbZXEmtg/s320/intersezione.jpg" /></p>
<p><img border="0" height="233" width="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-JDgvFZyrv5l3aLg9B__7uD_jihW3a2Hx3FpCKnLumKExZDIr1LcehQSC8XK8y46UxLXgg7HZFcl0HYmqQF1ks9bFeUyDfzySvSl_qn9-dYs3dxA7eiEyr2qrCH1APxyNaOiw6-T6vA/s320/sottrazione.jpg" /></p>
<p><img border="0" height="224" width="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisy-pewx4BFpk4KL0WNw1H0zPdtlOLWG04qHjQDNleE4WwXgGaksHbZYNHt6tMGvIyGoSbhXutTKV1NUFvXX5Ehw5PuIvGVhjlDwAlHI5K5339fbRnEsNzrRVCwOqSxWrl80NfyCeXEw/s320/complemento.jpg" /></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-58048345998451579812011-04-27T15:57:00.000-07:002011-05-03T03:01:34.831-07:00CSS - Dichiarazioni, proprietà, valori<h2>Requisiti</h2>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/css-intro.html">Introduzione a CSS</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/backus-naur-form-bnf-e-ebnf.html">Backus-Naur Form / BNF e EBNF</a></li>
</ul>
<h2>Introduzione</h2>
<p>Una regola CSS è così composta:</p>
<pre><code>regola-css := selettori blocco-dichiarazione
selettori := selettore (, selettore)*
blocco-dichiarazione := '{' dichiarazione (;dichiarazione)* ;? '}'</code></pre>
<p>I <code>selettori</code> individuano gli elementi del documento HTML/XHTML ai quali applicare la presentazione descritta nel <code>blocco-dichiarazione</code>.</p>
<p>Nel blocco dichiarazione è presente un insieme di dichiarazioni che specificano come presentare le varie proprietà degli elementi. Per l'ultima dichiarazione il ; non è obbligatorio ma è buona regola metterlo sempre.</p>
<p>Ad esempio:</p>
<pre><code>h1, h2 {
margin: 0px;
padding: 0px;
}</code></pre>
<p>In questo caso i selettori sono <code>h1</code> e <code>h2</code> seguiti dal blocco dichiarazioni <code>{ ... }</code>. All'interno del blocco dichiarazioni sono presenti 2 dichiarazioni <code>margin: 0px;</code> e <code>padding: 0px;</code>.</p>
<h2>Dichiarazioni</h2>
<p>La singola dichiarazione è espressa in questo modo:</p>
<pre><code>dichiarazione := nome-proprieta ':' valore</code></pre>
<p>Una dichiarazione CSS è composta da un nome di proprietà e un valore.</p>
<p>Ad esempio:</p>
<pre><code>h2 {
color: red;
font-size: 15px;
}</code></pre>
<p>E' possibile anche avere più blocchi di dichiarazione con lo stesso selettore, in tal caso la regola precedente poteva anche essere riscritta in questo modo:</p>
<pre><code>h2 {
color: red;
}
h2 {
color: red;
}</code></pre>
<p>E per questo è necessario subito questa precisazione:</p>
<pre><code>h2 {
color: red;
}
h2 {
color: green;
}</code></pre>
<p>In 2 regole abbiamo definito la stessa proprietà. In tal caso vale sempre l'ultima (che sovrascrive la precedente).</p>
<h2>Proprietà</h2>
<p>Sono identificate da un nome che deve essere scritto correttamente, altrimenti la dichiarazione è ignorata.</p>
<p>Indica in generale ciò che vogliamo caratterizzare graficamente. Ad esempio per un box si potrebbe volere un bordo di 1 pixel. In questo caso il nome della proprietà è <code>border</code>, oppure il colore del testo <code>color</code>.</p>
<p>Un nome di proprietà è un identificatore CSS: deve iniziare con una lettera [a-z] e può contenere lettere [a-z], numeri [0-9], -, _ .</p>
<h2>Valori</h2>
<p>Possiamo caratterizzare graficamente un elemento indicando quindi il nome della proprietà e un. I valori possono essere: parole chiave, stringhe, colori, numeri, dimensioni, percentuali, URI, che sono descritti in <a href="http://nevit-notes.blogspot.com/2011/05/css-tipi-di-valori.html">CSS - Tipi di valori</a></p>
<p>Ogni proprietà ha un valore che se non specificato esplicitamente o ereditato è un valore di default.</p>
<h2>Forma abbreviata delle proprietà</h2>
<p>Le proprietà possono essere espresse in una forma abbreviata. Ad esempio per definire i margini di un box normalmente possiamo scrivere:</p>
<pre><code>.box {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}</code></pre>
<p>che in forma abbreviata diventa:</p>
<pre><code>.box { margin: 1px 2px 3px 4px; }</code></pre>
<p>L'ordine delle proprietà è segue un ordine "orario" e parte dal top.</p>
<p>E' possibile anche altre raggruppare altre proprietà differenti:</p>
<pre><code>background-color: #fff;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;</code></pre>
<p>diventa:</p>
<pre><code>background: #fff url(background.png) no-repeat fixed right top;</code></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-31312517920305122252011-04-27T12:08:00.003-07:002011-05-02T15:36:39.146-07:00CSS - Introduzione<h2>Requisiti</h2>
<p>Potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">Introduzione ai documenti web</a></li>
</ul>
<h2>Introduzione</h2>
<p>CSS è il linguaggio utilizzato per descrivere la presentazione dei documenti web (ad es. layout, colori, font, etc.).</p>
<p>È indipendente da HTML/XHTML e può essere utilizzato con qualsiasi altro linguaggio basato su XML.</p>
<h2>Come associare CSS al contenuto (HTML/XHTML)</h2>
<p>Esistono 3 modi per utilizzare CSS con HTML/XHTML:</p>
<ul>
<li>l'uso dell'elemento HTML/XHTML <strong>link</strong> all'interno dell'<strong>head</strong> per richiamare un file CSS esterno</li>
<li>l'uso dell'<strong>elemento style</strong> o dell'<strong>attibuto style</strong> presente per ogni elemento del body su HTML/XHTML</li>
</ul>
<p>Poichè l'elemento style o l'attributo style permettono di includere codice CSS all'interno dello strato contenuto questa pratica è fortemente sconsigliata.</p>
<p>Ciò che invece deve essere utilizzato è l'elemento <strong>link</strong>, in questa forma:</p>
<pre><code><link rel="stylesheet" href="uri_css" type="text/css"/></code></pre>
<p>dove <code>uri_css</code> è l'URI assoluto o relativo alla risorsa che contiene il codice CSS da utilizzare nel contenuto.</p>
<p>In uno stesso documento/contenuto è possibile includere un numero a piacere di elementi <strong>link</strong> per includere tutti i CSS necessari (ad es. quando le regole CSS richieste per il documento sono su file separati).</p>
<h2>Sintassi e componenti fondamentali</h2>
<p>In un documento CSS possiamo trovare:</p>
<ul>
<li><strong>commenti</strong></li>
<li><strong>rule set</strong></li>
<li><strong>at rule</strong></li>
</ul>
<p>solo per chiarezza nella lettura che segue se ne riporta un esempio:</p>
<pre><code>/* CSS di esempio */
@import url(altro_css.css);
h1 {
font-size: 24px;
color: #ddd;
}</code></pre>
<p>Di seguito analizzeremo un po' più in dettaglio i 3 componenti.</p>
<h2>Commenti</h2>
<p><code>/* CSS di esempio */</code></p>
<p>I commenti sono utilizzati dall'autore del CSS per annotarsi qualsiasi tipo di informazione (es. annotazioni per comprendere meglio il codice etc.) e sono ignorati dagli interpreti del linguaggio.</p>
<p>Iniziano sempre con un /* e terminano con un */ .</p>
<h2>At-rule</h2>
<p>Sono istruzioni/direttive per il parser CSS, usate per vari scopi.</p>
<p>In genere sono scritte prima dei rule set.</p>
<pre><code>@import url(altro_css.css);</code></pre>
<p>Da quì è possibile proseguire con l'<a href="http://nevit-notes.blogspot.com/2011/04/css-at-rules.html">approfondimento degli at-rule</a>.</p>
<h2>Rule set</h2>
<p>Hanno la forma seguente:</p>
<pre><code>rule-set := selettori blocco-dichiarazioni
blocco-dichiarazioni := '{' dichiarazioni '}'</code></pre>
<p>Il rule set comprende <strong>selettori</strong> e <strong>blocco di
dichiarazioni</strong> che inizia con { e finisce con }.</p>
<p>Abbiamo sempre almeno 1 <strong>selettore</strong> che individua gli elementi di un documento HTML/XHTML per i quali se ne definisce la presentazione attraverso le <strong>dichiarzioni</strong> scritte all'interno del <strong>blocco dichiarazioni</strong>.</p>
<p>Ad es. un rule set CSS può essere:</p>
<pre><code>h2 {
font-size: 15px;
color: red;
}</code></pre>
<p>dove <code>h2</code> è il selettore che individua l'elemento h2 HTML/XHTML,</p>
<pre><code>{
font-size: 15px;
color: red;
}</code></pre>
<p>è il blocco dichiarazioni, e <code>font-size: 15px;</code>, <code>color: red;</code> sono le dichiarazioni le quali sono composte da un nome di proprietà e un valore.</p>
<p>Da quì è possibile proseguire un <a href="http://nevit-notes.blogspot.com/2011/04/css-selettori.html">approfondimento sui selettori</a> oppure con un approfondimento su <a href="http://nevit-notes.blogspot.com/2011/04/css-dichiarazioni-proprieta-valori.html">dichiarazioni, proprietà e valori</a>.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-29532201663792520022011-04-27T08:12:00.001-07:002011-04-27T16:22:15.937-07:00HTML/XHTML - Elenchi<h2>Requisiti</h2>
<p>Prima di proseguire potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html">HTML/XHTML - Elementi a livello di blocco</a></li>
</ul>
<h2>Intro</h2>
<p>In HTML/XHTML possiamo definire elenchi non ordinati, elenchi ordinati e liste di definizione</p>
<h2>Elenchi non ordinati</h2>
<p>Si definiscono attraverso l'uso dell'elemento <strong>ul</strong> (unordered list). Le singole voci dell'elenco non ordinato sono definite attraverso l'elemento <strong>li</strong> (list item).</p>
<p>Ad esempio:</p>
<pre><code>
<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3lt;/li>
</ul>
</code></pre>
<h2>Elenchi ordinati</h2>
<p>Come per gli elenchi non ordinati, con l'unica differenza che per definirli si utilizza l'elemento <strong>ol</strong> (ordered list).</p>
<p>Ad esempio:</p>
<pre><code>
<ol>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3lt;/li>
</ol>
</code></pre>
<h2>Liste di definizione</h2>
<p>Le liste di definizione (racchiuse dall'elemento <strong>dl</strong>), sono un elenco di voci costituite da 2 parti: termine (racchiuso dall'elemento <strong>dt</strong>) e descrizione (racchiuso dall'elemento <strong>dd</strong>).</p>
<p>Gli elementi <strong>dd</strong> e <strong>dt</strong> possono stare solo all'interno dell'elemento <strong>dl</strong>, e l'elemento <strong>dl</strong> può contenere solo questi 2 elementi.</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-42231567657818479432011-04-27T08:11:00.001-07:002011-04-27T12:10:05.117-07:00HTML/XHTML - Tabelle<h2>Requisiti</h2>
<p>Prima di procedere potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html">HTML/XHTML - Elementi a livello di blocco</a></li>
</ul>
<h2>Intro</h2>
<p>Per descrivere tabelle in HTML/XHTML si utilizza l'elemento a livello di blocco <strong>table</strong> che definisce una tabella per dati organizzati in righe e colonne.</p>
<p>Possiamo aggiungere "informazione" alla tabella utilizzando gli elementi, non obbligatori, <strong>caption</strong>, <strong>thead</strong>, <strong>tbody</strong>, <strong>tfoot</strong> che possono stare solo all'interno dell'elemento <strong>table</strong>.</p>
<p>L'elemento <strong>table</strong> dovrà invece obbligatoriamente contenere righe (elemento <strong>tr</strong>) le quali a loro volta conterranno colonne (elemento <strong>td</strong>) o intestazioni di colonna (elemento <strong>th</strong>).</p>
<p>Una tabella, quindi, potrebbe essere strutturata nel modo seguente:</p>
<pre><code>
<table>
<caption>titolo/didascalia per la tabella</caption>
<thead>
<tr>
<th>Intestazione 1</th><th>Intestazione 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>valore 1</td><td>valore 2</td>
</tr>
</tbody>
</table>
</code></pre>
<p>oppure, tralasciando gli elementi opzionali, in questa forma più semplice:</p>
<pre><code>
<table>
<tr>
<th>Intestazione 1</th><th>Intestazione 2</th>
</tr>
<tr>
<td>valore 1</td><td>valore 2</td>
</tr>
</table>
</code></pre>
<p>Segue una descrizione degli elementi che possiamo utilizzare nella definizione della tabella.</p>
<h2>TABLE [summary=Text] [width=Length] [border=Pixels] [cellspacing=Length] [cellpadding=Length]</h2>
<h2>CAPTION</h2>
<h2>THEAD</h2>
<h2>TBODY</h2>
<h2>TFOOT</h2>
<h2>TR</h2>
<h2>TH</h2>
<h2>TD</h2>
<h2>Qualche nota ...</h2>
<p>Anche se ormai scontato è bene ripeterlo: le tabelle non devono essere usate per dare un layout alla pagina (questo è sempre compito dello strato presentazione/CSS).</p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-82005841176365866662011-04-26T12:04:00.000-07:002011-04-27T04:55:20.697-07:00HTML/XHTML - Elementi inline (DRAFT)<h2>Requisiti</h2>
<p>Prima di procedere nella lettura di questo appunto potrebbe essere utile leggere:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">introduzione ai documenti web</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">introduzione a HTML/XHTML</a></li>
</ul>
<h2>Intro</h2>
<p>Gli <strong>elementi inline</strong> sono contenuti in <a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html"><strong>elementi a livello di blocco</strong></a> e possono contenere <strong>testo</strong> e <strong>altri elementi inline</strong> (NON possono contenere elementi a livello di blocco).</p>
<p>Nell'elenco che segue sono stati esclusi quegli elementi e attributi che hanno lo scopo di formattare il contenuto (compito esclusivo dello <strong>strato presentazione</strong>) o assegnare un comportamento (compito esclusivo dello <strong>strato comportamento</strong>) e che sono <strong>deprecati</strong> (= obsoleti, se ne sconsiglia l'utilizzo, c'e' un nuovo modo più corretto per farlo)</p>
<p>Sono considerati impliciti gli attributi comuni (opzionali): id, class, lang</p>
<h2>A [href=URI] [title=Text]</h2>
<p>Indica che il suo contenuto è un link ipertestuale la cui risorsa è reperibile attraverso l'URI indicato nell'attributo <strong>href</strong> .</p>
<p>L'attributo <strong>title</strong> è usato per descrivere brevemente il contenuto del link.</p>
<p>E' doveroso anche precisare che il contenuto dell'elemento <strong>a</strong>, che sarà un link, dovrà dare un'idea di cosa riferisce: le forme, spesso utilizzate, del tipo "clicca qui" si dovrebbero evitare.</p>
<p>Ad esempio:</p>
<p><code><a href="http://www.google.it" title="Form di ricerca di google">GOOGLE</a></code></p>
<h2>ABBR [title=Text]</h2>
<p>Usato per indicare che il testo contenuto è un'abbreviazione.</p>
<p>E' possibile usare l'attributo comune title per indicare il testo non abbreviato. I browser visualizzeranno in genere il contenuto di <strong>title</strong> sottoforma di tooltip.</p>
<p>Se, invece, il testo abbreviato è pronunciabile si utilizzerà l'elemento <strong>acronym</strong>.</p>
<p>Esempio:</p>
<p><code><abbr title="chilogrammi">Kg</abbr></code></p>
<h2>ACRONYM [title=Text]</h2>
<p>Come per <strong>abbr</strong> ma usato per indicare testi abbreviati e pronunciabili (acronimi).</p>
<p>Esempio:</p>
<p><code><acronym title="hypertext markup language">HTML</acronym></code></p>
<h2>CITE</h2>
<p>Usato per indicare che il suo contenuto è una citazione: es. il titolo di un giornale, il nome di un film, etc.</p>
<h2>CODE</h2>
<p>Usato per indicare che il suo contenuto è un codice: es. codice del linguaggio Java, PHP etc. oppure HTML, CSS o altro.</p>
<h2>DFN</h2>
<p>Usato per indicare una definizione.</p>
<h2>EM</h2>
<p>Utilizzato per dare enfasi al contenuto, che non significa metterlo in grassetto (anche se i browser lo fanno, attraverso CSS è possibile assegnare un modo qualsiasi di visualizzarlo). </p>
<p>Per dare enfasi al testo in maniera più forte utilizzare l'elemento <strong>strong</strong></p>
<h2>IMG alt=Text src=URI [longdesc=URI] [width=Length] [height=Length]</h2>
<p>Indica la presenza di un'immagine reperibile attraverso l'URI indicato con l'attributo obbligatorio src.</p>
<p>L'attributo obbligatorio alt indica il testo alternativo all'immagine per quei client che non possono visualizzarla/caricarla.</p>
<h2>Q [cite=URI]</h2>
<p>Usato per indicare che il suo contenuto è una breve citazione, il cui riferimento è indicato attraverso l'attributo <strong>cite</strong>.</p>
<p>Ad esempio:</p>
<p><code>
<p>According to Dave Raggett, <q cite="http://www.w3.org/Press/HTML4-REC">HTML 4.0 gives Web designers the ability to create dynamic visually exciting pages that are accessible to all.</q></p>
</code></p>
<h2>SAMP</h2>
<p>Indica che il testo contenuto è un risultato/output di qualche cosa, come ad esempio la risposta di un programma o di uno script.</p>
<p></code>
<p>When an undefined element is used in an HTML document, a validator will give an error like the following:</p>
<p><samp>C:\SP\BIN\NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</samp></p>
</code></p>
<h2>SPAN</h2>
<p>È un contenutore generico. Non fornisce alcun significato al suo contenuto.</p>
<p>E' usato per assegnare una particolare presentazione (attraverso CSS) o comportamenti (javascript) al suo contenuto.</p>
<h2>STRONG</h2>
<p>Utilizzato per dare un'enfasi "forte" al testo contenuto (che non significa metterlo in grassetto!!!). E' possibile usare anche il tag <strong>em</strong> che però indica minor enfasi rispetto a <strong>strong</strong>.</p>
<h2>VAR</h2>
<p>Usato per indicare variabili o argomenti di un programma.</p>
<p>Ad esempio:</p>
<p><code>
<p>Versions of HTML are typically numbered in an <var>x</var>.<var>y</var> format.</p>
</code></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-18366788715053347472011-04-26T05:46:00.000-07:002011-04-30T22:51:06.139-07:00HTML/XHTML - Elementi a livello di blocco<h2>Requisiti</h2>
<p>Prima di proseguire potrebbe essere utile leggere:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">introduzione ai documenti web</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-primi-passi.html">introduzione a HTML/XHTML</a></li>
</ul>
<h2>Intro</h2>
<p>Gli <strong>elementi a livello di blocco</strong>, in generale, contengono o <a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-inline.html"><strong>elementi inline</strong></a> o altri <strong>elementi a livello di blocco</strong>.</p>
<p>Non sono presenti <a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">tag e attributi che non dovrebbero essere utilizzati</a>: perchè lo scopo è la formattazione e non la strutturazione o descrizione semantica del documento.</p>
<p>Si considerano impliciti gli attributi comuni (opzionali): id, class, lang.</p>
<h2>address</h2>
<p>Caratteristiche:</p>
<ul>
<li>contiene solo <strong>elementi inline</strong></li>
</ul>
<p>Contiene informazioni utili a contattare il possessore/manutentore del documento/sito web o parte di questo. Può contenere il nome, l'indirizzo, l'email, etc.</p>
<p>Esempio:</p>
<pre><code><address>
Per qualsiasi informazione potete contattarci all'indirizzo email
<a href="mailto:info@example.com">info@example.com</a>
, o presso i nostri uffici al numero 123456.
</address></code></pre>
<h2>blockquote</h2>
<p>Attributi:</p>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>cite</td><td>URI</td><td>NO</td></tr>
</table>
<p>Caratteristiche:</p>
<ul>
<li>può contenere solo <strong>elementi a livello di blocco</strong></li>
</ul>
<p>Indica che il contenuto dell'elemento è citazione, eventualmente ripresa da altro sito per la quale è possibile indicare l'url attraverso l'attributo cite.</p>
<p>Esiste un corrispondente inline Q, ma BLOCKQUOTE, essendo un elemento a livello di blocco, permette di inserire altri elementi a livello di blocco (Q non lo permette essendo inline).</p>
<p>Esempio:</p>
<pre><code><blockquote cite="http://www.bibliomania.com/Fiction/joyce/ulysses/telemac.html">
<p>He pointed his finger in friendly jest and went over to the parapet, laughing to himself. Stephen Dedalus stepped up, followed him wearily half way and sat down on the edge of the gunrest, watching him still as he propped his mirror on the parapet, dipped the brush in the bowl and lathered cheeks and neck.</p>
<p>Buck Mulligan's gay voice went on.</p>
</blockquote></code></pre>
<h2>del</h2>
<p>Attributi:</p>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>cite</td><td>URI</td><td>NO</td></tr>
<tr><td>datetime</td><td>Datetime</td><td>NO</td></tr>
</table>
<p>Indica che il suo contenuto è stato eliminato a seguito di un aggiornamento del documento (il contenuto resta ma tramite presentazione/CSS possiamo visualizzarlo con una riga sopra).</p>
<h2>div</h2>
<p>Definisce un contenitore generico a livello di blocco. Permette di assegnare stili classi etc. per il blocco stesso o per gli elementi contenuti.</p>
<p>Il corrispondente a livello inline è il tag SPAN.</p>
<h2>h1, h2, ..., h6</h2>
<p>Caratteristiche:</p>
<ul>
<li>Può contenere solo <strong>elementi inline</strong></li>
</ul>
<p>Si utilizza per indicare che il suo contenuto rappresenta un titolo di 1° o 2° ... 6° livello (più il numero è alto e più il titolo è meno importante).</p>
<p>Attraverso l'uso di questi elementi è possibile strutturare il documento in titoli, sottotitoli, etc.</p>
<p>Un documento dovrebbe contenere un solo H1 come titolo principale.</p>
<p>Esempio:</p>
<pre><code><h1>Titolo del libro</h1>
<h2>Capitolo 1</h2>
<p>...paragrafi...</p>
<h3>Sezione 1.1</h3>
<p>...paragrafi...</p>
<h3>Sezione 1.2</h3>
<p>...paragrafi...</p>
<h2>Capitolo 2</h2>
<p>...paragrafi...</p>
<h3>Sezione 2.1</h3>
<p>...paragrafi...</p></code></pre>
<h2>ins</h2>
<p>Attributi:</p>
<table border="1" cellspacing="0" cellpadding="5">
<tr><th>Attributo</th><th>Tipo valore</th><th>Obbligatorio</th></tr>
<tr><td>cite</td><td>URI</td><td>NO</td></tr>
<tr><td>datetime</td><td>Datetime</td><td>NO</td></tr>
</table>
<p>Serve per indicare che il suo contenuto è un testo aggiunto ad preesistente. È un modo per differenziare contenuti/testi nelle varie versioni di un documento.</p>
<p>Gli attributi opzionali cite e datetime servono rispettivamente per indicare l'URI contenente l'informazione per cui si è aggiunto il documento e per indicare la data e l'ora dell'inserimento (nella forma YYYY-MM-DDThh:mm:ssTZD)</p>
<p>Ad esempio:</p>
<pre><code><p>The CENTER element defines a block whose contents are centered horizontally on visual browsers. <ins cite="http://www.w3.org/TR/REC-html40-971218/appendix/changes.html#h-A.1.2" datetime="1997-12-19T00:00:00-05:00">Note that CENTER is deprecated in HTML 4.0.</ins></p></code></pre>
<h2>p</h2>
<p>Caratteristiche:</p>
<ul>
<li>Può contenere solo <strong>elementi inline</strong></li>
</ul>
<p>Serve per indicare che il suo contenuto è un paragrafo.</p>
<p>Pur essendo un elemento a livello di blocco può contenere solo elementi inline.</p>
<h2>Tabelle ed elenchi</h2>
<p>In HTML/XHTML possiamo descrivere anche tabelle ed elenchi che sono casi particolari di elementi a livello di blocco.</p>
<p>Poichè hanno qualche particolarità in più gli elementi sono stati descritti in note separate:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tabelle.html">Tabelle</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elenchi.html">Elenchi</a></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-13825036877157137492011-04-26T03:09:00.000-07:002011-04-29T22:54:39.781-07:00Probabilità / Introduzione<h2>Requisiti</h2>
<p>Potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/teoria-degli-insiemi-introduzione.html">Teoria degli insiemi - Introduzione</a></li>
</ul>
<h2>Esperimenti, risultati, spazio di campionamento, funzione di distribuzione</h2>
<p>Consideriamo un <strong>esperimento casuale</strong>, come ad esempio il lancio di un dado.</p>
<p>L'esperimento darà dei <strong>risultati</strong>: nel caso del dado saranno 1, 2, 3, 4, 5, 6.</p>
<p>Tutti i possibili risultati di un esperimento sono detti <strong>spazio di campionamento</strong> e possiamo rappresentarli con l'insieme:</p>
<p class="latex">$\huge{\Omega = \{ \omega_1, \omega_2, ... \omega_n \}}$</p>
<p>Lo <strong>spazio di campionamento</strong> può avere infiniti elementi/risultati e siamo liberi di scegliere da quali elementi/risultati deve essere composto, purchè si rispettino le 3 regole seguenti:</p>
<ul>
<li>non deve accadere che un esperimento restituisca più di un risultato</li>
<li>non deve accadere che un esperimento restituisca un risultato che non abbiamo compreso nello spazio di campionamento</li>
<li>praticare una scelta conveniente (vedi esempio)</li>
</ul>
<p>Ad esempio per il dado potevamo scegliere i risultati "pari" se il numero era pari e "dispari" se il numero era dispari (rispettando le prime due regole riportate sopra). In questo caso però la scelta sarebbe stata sconveniente: questa suddivisione nasconderebbe informazioni ad es. sulla faccia con valore 3.</p>
<p>Ad ogni <strong>risultato</strong> possiamo assegnare una <strong>probabilità</strong> attraverso una funzione <span class="latex">$m(w_i)$</span> detta <strong>funzione di distribuzione</strong> che ha le caratteristiche seguenti:</p>
<ul class="latex">
<li>$\huge{\sum_{\omega_i\in\Omega}{m(\omega_i)}=1}$</li>
<li>$\huge{m(\omega_i)>=0}$ per ogni $\omega_i\in\Omega$</li>
</ul>
<p>Possiamo assegnare la <strong>probabilità</strong> ad ogni singolo <strong>risultato</strong> in base ad una conoscenza a priori del comportamento dell'esperimento.</p>
<p>Ad esempio è ragionevole pensare che tutti i risultati del lancio di un dado non truccato siano <strong>equiprobabili</strong> (non c'è nessun motivo per favorire un risultato rispetto ad un altro). Quindi tutti i possibili risultati avranno lo stesso valore di probabilità <strong>c</strong>:</p>
<p class="latex">$m(\omega_i)=c$ , per ogni $\omega_i\in\Omega$ (spazio di campionamento del dado)</p>
<p>poichè dalla definizione della funzione di distribuzione abbiamo:</p>
<p class="latex">$\sum_{\omega_i\in\Omega}{m(w_i)} = 1$</p>
<p>otteniamo (considerando che per il dado possiamo avere solo 6 risultati possibili):</p>
<p class="latex">$\sum_{\omega_i\in\Omega}{m(w_i)}=\sum_{\omega_i\in\Omega}{c}=6c=1 => c=\frac{1}{6}$</p>
<p>Supponiamo ora di aver verificato che un particolare medicinale, testato su 100 pazienti abbia funzionato solo su 30.</p>
<p>In tal caso lo <strong>spazio di campionamento</strong> avrà 2 possibili risultati: ha funzionato, non ha funzionato.</p>
<p>Sulla base di questa conoscenza pregressa, possiamo considerare la <strong>funzione di distribuzione</strong> come il rapporto tra il numero dei casi di un risultato e il numero dei casi totali.</p>
<p class="latex">Avremo quindi: $w_{successo}=\frac{30}{100}=0.3$ , $w_{fallimento}=\frac{70}{100}=0.7$ .</p>
<p class="latex">Le caratteristiche della funzione di distribuzione sono rispettate poichè: $w_{successo}+w_{fallimento}=1$ e $w_{successo} >= 0, w_{fallimento}>=0$</p>
<p class="latex">Quest'ultimo esempio si basa su concetto di frequenza dei risultati: se ripetiamo un esperimento un numero <strong>n</strong> sufficientemente grande e conteggiamo il numero di volte che i risultati si sono verificati, indicando con $r(\omega_i)$ il numero di volte in cui il risultato $\omega_i$ si è verificato, allora:</p>
<p class="latex">$\huge{\frac{r(\omega_i)}{n}\to{m(\omega_i)}}$</p>
<p>in altri termini:</p>
<p class="latex">$\huge{\lim_{n\to\infty}{\frac{r(\omega_i)}{n}}=m(\omega_i)}$</p>
<h2>Eventi</h2>
<p>Un <strong>evento</strong> è un qualsiasi sottoinsieme degli elementi dello <strong>spazio di campionamento</strong>. Tra gli eventi sono compresi anche lo <strong>spazio di campionamento</strong> e l'insieme vuoto.</p>
<p class="latex">La probabilità di un evento $E\subseteq\Omega$ può essere calcolata a partire dalla funzione di distribuzione, sommando le probabilità dei risultati appartenenti all'insieme E:</p>
<p class="latex">$\huge{P(E)=\sum_{w\in{E}}{m(w)}}$</p>
<p class="latex">L'evento spazio di campionamento avrà $P(\Omega)=\sum_{\omega\in\Omega}{m_{\omega}}=1$, l'insieme vuoto avrà $P(\varnothing)=0$.</p>
<p class="latex">Per il dado non truccato un evento potrebbe essere l'uscita di un valore pari: 2, 4, 6.</p>
<p>In questo caso l'evento E sarebbe rappresentato dall'insieme E = {2, 4, 6}.</p>
<p class="latex">Poichè la probabilità di ogni singolo risultato è $m(\omega_i)=\frac{1}{6}$, la probabilità dell'evento E sarà:</p>
<p class="latex"> $P(E)=m(\omega_2)+m(\omega_4)+m(\omega_6)=\frac{1}{6}+\frac{1}{6}+\frac{1}{6}=\frac{1}{2}$.</p>
<h2>Proprietà degli eventi</h2>
<p>Le probabilità assegnate agli eventi attraverso la funzione di distribuzione godono delle proprietà seguenti:</p>
<ul class="latex">
<li>$P(E)>=0$ per ogni $E\subseteq\Omega$</li>
<li>$P(\Omega) = 1$</li>
<li>$E\subset F\subseteq\Omega\rightarrow P(E) <= P(F)$</li>
<li>Se A e B sono disgiunti (non esistono elementi in comune) allora $P(A \cup B) = P(A)+P(B)$</li>
<li>$P(A^c)=1-P(A)$ per ogni $A\subseteq\Omega$</li>
</ul>
<p>Gli eventi possono essere descritti in termini di altri eventi. Poichè gli eventi sono sottoinsiemi dello spazio di campionamento ciò può essere fatto attraverso <a href="http://nevit-notes.blogspot.com/2011/04/teoria-degli-insiemi-introduzione.html">operazioni su insiemi</a> (unione, intersezione, sottrazione, complemento).</p>
<h2>Diagrammi ad albero</h2>
<p>Un esperimento può essere effettuato in più fasi: ad esempio 3 lanci di moneta in 3 fasi differenti.</p>
<p>In questi casi è comodo mostrare i risultati attraverso un diagramma ad albero in cui un percorso rappresenta un possibile risultato dell'esperimento (nelle 3 fasi).</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGncx8s9Gb7DbEM0PUB6HtH_tvOEzbua72TziZ_0mDxDiiGoYvd1-Ebe026_uWGoktH_3IMXT3IxMxGvITyrik8bdaslM7OmQJkXkRrjc4yOk-611Lsp-0VQGgbaFbB-nZPlJ56FTyQ/s1600/albero.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="312" width="461" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGncx8s9Gb7DbEM0PUB6HtH_tvOEzbua72TziZ_0mDxDiiGoYvd1-Ebe026_uWGoktH_3IMXT3IxMxGvITyrik8bdaslM7OmQJkXkRrjc4yOk-611Lsp-0VQGgbaFbB-nZPlJ56FTyQ/s320/albero.jpg" /></a></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-1334739382219684614.post-19554655204962766742011-04-26T00:04:00.000-07:002011-05-01T04:20:23.931-07:00HTML/XHTML - Introduzione<h2>Requisiti</h2>
<p>Prima di procedere potrebbe essere utile la lettura di:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">I documenti web</a></li>
</ul>
<h2>Introduzione, HTML, XHTML, differenze</h2>
<p>XHTML e HTML sono linguaggi di markup utilizzati per descrivere il contenuto di un documento web, attraverso l'uso di <strong>elementi</strong> che ne marcano il contenuto dandone un <strong>significato</strong>. In altri termini gli <strong>elementi</strong> sono usati per dire: "questo è un titolo", "questo è un paragrafo", "questa è una citazione" etc.</p>
<p>XHTML e HTML pur avendo una sintassi molto simile hanno origini differenti: HTML deriva da SGML, XHTML da XML. In poche parole possiamo dire che <strong>XHTML è un documento HTML ben formato</strong> <a href="http://nevit-notes.blogspot.com/2011/04/xml-cosa-si-intende-per-well-formed-o.html">secondo le regole dei documenti XML</a>. E' possibile trovare una descrizione più dettagliata delle differenze nella nota <a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-differenze.html">HTML/XHTML - differenze</a>.</p>
<h2>Struttura di un documento</h2>
<p>Un documento HTML/XHTML ha sempre la struttura riportata di seguito:</p>
<pre><code><!DOCTYPE ... >
<html>
<head>
<title>Titolo del documento</title>
<!-- elementi intestazione -->
</head>
<body>
<!-- elementi a livello di blocco -->
</body>
</html></code></pre>
<p>Di seguito analizzeremo le varie parti che lo costituiscono.</p>
<h2>DOCTYPE - Document Type Definition</h2>
<p>La prima riga <code><!DOCTYPE ... ></code> è la <strong>dichiarazione del tipo di documento</strong> (<a href="http://nevit-notes.blogspot.com/2011/05/dtd-document-type-definition.html">DTD - Document Type Definition</a>) ed indica su quale standard HTML o XHTML si basa il documento. Al posto di ... andrà l'indicazione della versione per la quale si intende scrivere il documento.</p>
<table border="1" cellpadding="3">
<tr><th>Standard</th><th>DOCTYPE</th></tr>
<tr><td>HTML 4.01 Strict</td><td><code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</code></td></tr>
<tr><td>XHTML 1.0</td><td><code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</code></td></tr>
<tr><td>HTML 5 (ancora non standard)</td><td><code><!DOCTYPE HTML></code></td></tr>
</table>
<p>Per entrambi i linguaggi abbiamo 3 tipologie di "standard": <strong>strict</strong>, transitional e frameset. Noi consideremo solo la prima (strict) perchè orientata alla descrizione del documento. Le altre includono anche la presentazione e sono presenti solo per compatibilità verso vecchi standard.</p>
<h2>Elementi</h2>
<p>Le porzioni di testo che iniziano e finiscono con parentesi angolari (< e >) sono dette <strong>tag di apertura</strong> e <strong>tag di chiusura</strong>. I primi iniziano con <strong><</strong> i secondi con <strong></</strong> e per entrambi segue sempre un nome.</p>
<p>I tag di apertura e di chiusura che hanno lo stesso nome individuano un <strong>elemento</strong> e il suo contenuto (testo o altri elementi).</p>
<p>Dalla struttura riportata sopra si possono individuare gli elementi <strong>html</strong>, <strong>head</strong>, <strong>title</strong>, <strong>body</strong> che, come già detto, sono sempre presenti e obbligatori in qualsiasi documento HTML/XHTML.</p>
<p>L'elemento <strong>html</strong> ha come tag di apertura <code><html></code> e come tag di chiusura <code></html></code>, lo stesso è per gli altri elementi. Tra il tag di apertura e di chiusura c'è il contenuto dell'elemento <strong>html</strong>: gli elementi <strong>head</strong> e <strong>body</strong>.</p>
<p>L'elemento <strong>head</strong>, a sua volta, contiene l'elemento obbligatorio <strong>title</strong> il quale contiene testo.</p>
<p>Come vedremo in seguito, alcuni <strong>elementi</strong> non hanno contenuto. In tal caso possiamo omettere il <strong>tag di chiusura</strong> terminando il tag di apertura con un <strong>/></strong>:</p>
<pre><code><strong><tag ... /></strong></code></pre>
<h2>Attributi</h2>
<p>Utilizzati per indicare informazioni aggiuntive per l'elemento. In alcuni casi sono obbligatori.</p>
<p>Sono inclusi solo nel tag di apertura ed hanno la forma:</p>
<p><code>nome_attributo="valore_attributo"</code></p>
<p>Ad esempio:</p>
<p><code><a href="http://www.example.com/esempio.html">esempio</a></code></p>
<p>In questo caso l'elemento a indica che il suo contenuto è un link ipertestuale che rimanda alla pagina indicata dal valore dell'attributo <strong>href</strong>.</p>
<h3>Attributi comuni</h3>
<p>A praticamente tutti gli elementi possiamo indicare questi attributi comuni:</p>
<ul>
<li><strong>id</strong>: il valore di questo attributo deve essere <strong>univoco</strong> ed identifica l'elemento nel documento. Possiamo così individuare da <a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">strato presentazione</a> o <a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">strato comportamento</a> questo elemento per associargli un aspetto grafico o una funzione particolare.</li>
<li><strong>class</strong>: il valore di questo attributo è un elenco di classi separate da uno spazio cui l'elemento appartiene. Ad una stessa classe possono appartenere più elementi. La classe serve per applicare <a href="http://nevit-notes.blogspot.com/2011/04/documenti-web-html-css-javascript.html">una presentazione o un particolare comportamento</a> ad un insieme di elementi.</li>
<li><strong>lang</strong>: il valore specifica la lingua sia degli altri attributi dell'elemento che del suo contenuto</li>
</ul>
<h2>Commenti</h2>
<p>Nel documento È possibile inserire commenti che agevolano la lettura del codice HTML/XHTML. Iniziano con <!-- e finiscono con --> . Ad esempio:</p>
<p><code><!-- questo e' un commento --></code></p>
<h2>Caratteri speciali</h2>
<p>Alcuni caratteri sono riservati perchè usati per il linguaggio (HTML o XHTML), pertanto ne è vietato l'uso sia nel contenuto dell'elemento che nei valori degli attributi. Per utilizzare questi caratteri c'è ovviamente un metodo alternativo.</p>
<p>I caratteri e i modi alternativi per utilizzarli sono:</p>
<ul>
<li>< e > : usati nei tag, devono essere scritti come &lt; e &gt;</li>
<li>" : usate per racchiudere i valori degli attributi. Devono essere scritti con &quot;</li>
<li>& : usati per i caratteri speciali. Vanno scritti come &amp;</li>
</ul>
<h2>Significato semantico degli elementi</h2>
<p>Gli <strong>elementi</strong> attribuiscono un <strong>significato</strong> al loro contenuto.</p>
<p>Ad esempio:</p>
<p><code><p>ciao mondo!</p></code></p>
<p>In questo caso abbiamo l'elemento <strong>p</strong> che ha un tag di apertura <p> e un tag di chiusura </p>. L'elemento racchiude una stringa indicando che quella stringa è un paragrafo.</p>
<p><code><h1>Titolo</h1></code></p>
<p>In questo caso abbiamo l'elemento <strong>h1</strong> che ha un tag di apertura <h1> e un tag di chiusura </h1>. L'elemento racchiude una stringa indicando che quella stringa è il titolo principale.</p>
<p><code><img ... /></code></p>
<p>In questo caso l'elemento <strong>img</strong> è chiuso senza tag di chiusura. Indica che quell'elemento è un'immagine. Al posto dei ... vanno gli attributi, descritti di seguito, che definiscono le proprietà dell'immagine.</p>
<h2>Per approfondire</h2>
<p>Si può ora proseguire la lettura con:</p>
<ul>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-strutturali.html">Elementi strutturali</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-intestazione.html">Elementi intestazione</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-inline.html">Gli elementi inline</a></il>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elementi-livello-di-blocco.html">Gli elementi a livello di blocco</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-elenchi.html">Elenchi</a></li>
<li><a href="http://nevit-notes.blogspot.com/2011/04/htmlxhtml-tabelle.html">Tabelle</a></li>
</ul>Unknownnoreply@blogger.com0