Pagine

martedì 13 dicembre 2016

HTML - Codice completo del Lab.

Ricordo che i contenuti di questa lezione sono estratti dal sito:  "http://it.html.net/tutorials/html/" ed
adeguati alla lezione.

Questo il codice completo che potete rielaborare e trasformare in modo creativo e personale

<html>
  <head>
    <title>Il mio primoo sito web</title>
  </head>
    <body>
     <p>Contenuti estratti e adattati da "http://it.html.net/tutorials/html/"<hr /></p>
        <ul>
          <li>Elemento della lista</li>
          <li>Altro elemento della lista</li>
        </ul>
     <p>Is used for paragraphs.</p>
     <b>This text must be bold.</b>
     <h1>CARMINE</h1>
     <h2>CARMINE</h2>
     <h3>CARMINE</h3>
     <h4>CARMINE</h4>
     <h5>CARMINE</h5>
     <h6>CARMINE</h6>
   <br/>
             <h1>Un titolo</h1>
             <p>testo, testo, testo, testo</p>
             <h2>Un sottotitolo</h2>
             <p>testo, testo, testo, teso</p>
   <br/>
     <ul>
      <li>Carmine</li>
      <li>Carmine</li>
     </ul>
   <br/>
     <a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
   <br/>
   <br/>
   <br/>
<h1>PROSSIMO ARGOMENTO</h1>
<p>Gli Attributi di un Elemento</p>
   <br/>
     <ul>
      <li>Colore</li>
      <li>Immagini</li>
     </ul>
   <br/>
   <br/>
<p>Colore Rosso</p>
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
   <br/>
   <br/>
<p>Il Logo della Nostra Scuola</p>
   <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
   <br/>
   <br/>
<h2 style="background-color:Green;">Mettiamo un po di verde</h2>
   <br/>
   <br/>
   <br/>
<p>Il Logo della Nostra Scuola con LINK</p>
     <a href="http://www.istcompazzanox.it/"> <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "alt"</p>
     <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "title"</p>
     <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "width e height"</p>
      <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="50" />
  <br/>
  <br/>
  <br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="50" height="200" />
  <br/>
  <br/>
  <br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
  <br/>
  <br/>
  <br/>
  <br/>
             <h1>Le Tabelle</h1>
             <p>Oggi 14 Dicembre Parliamo di Tabelle</p>
             <h2>Iniziamo con le tabelle senza bordo</h2>
             <p>All'inizio può sembrare complicato, ma in realtà tutto è facile e logico, proprio come ogni altra cosa in HTML.</p>
<br/>
<br/>
  <h2>Esempio di tabella senza bordo:</h2>

    <table>
          <tr>
                <td>Cella 1</td>
                <td>Cella 2</td>
          </tr>
          <tr>
                <td>Cella 3</td>
                <td>Cella 4</td>
          </tr>
        </table>

<br/>
<br/>
    <h2>Esempio di tabella con 3 righe e 4 colonne:</h2>

     
       <table>
          <tr>  <td>Cella 1</td>
                <td>Cella 2</td>
                <td>Cella 3</td>
                <td>Cella 4</td> </tr>
          <tr>  <td>Cella 5</td>
                <td>Cella 6</td>
                <td>Cella 7</td>
                <td>Cella 8</td> </tr>
          <tr>  <td>Cella 9</td>
                <td>Cella 10</td>
                <td>Cella 11</td>
                <td>Cella 12</td> </tr>
        </table>

    <p>Sempre senza bordo</p>
<br/>
<br/>
  <h2>Esempio di tabella con 2 righe, 2 colonne e bordo:</h2>

      <table border="1">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>
      </table>

    <p>grazie all'uso dell'attributo border e il valore in pixel</p>
<br/>
<br/>
  <h2>Ovviamente aumentando il valore, cresce il bordo</h2>

      <table border="4">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>00:00 14/12/2016
      </table>

    <p>valore in pixel 4</p>
<br/>
<br/>
  <h2>Possiamo anche aumentare la larghezza</h2>
    <p>In pixel, oppure in percentuale rispetto allo schermo</p>
   
      <table border="4" width="30%">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>
      </table>
 
    <p>In questo caso, valore 30%</p>
<br/>
<br/>
  <h2>Oppure controllare la posizione del contenuto nella cella</h2>
    <p>con gli attributi: align e valing</p>
   
      <table border="4" width="250" height="150">
         <tr>  <td align="right">Cella 1</td>
               <td valign="top">Cella 2</td> </tr>
         <tr>  <td align="left">Cella 3</td>
               <td align="right" valign="top">Cella 4</td> </tr>
      </table>
 
    <p>aling, per il controllo "a sinistra, al centro, a destra</p>
    <p>valing, per il controllo "in alto, al centro, in basso</p>
<br/>
<br/>
  <h2>Altri attributi: colspan e rowspan</h2>
    <p>Iniziamo con Colspan, dall'inglese "column span" (colonne accoppiate)</p>
   
      <table border="1">
        <tr> <td colspan="3">Cella 1</td>
        </tr>
        <tr> <td>Cella 2</td>
             <td>Cella 3</td>
             <td>Cella 4</td>
        </tr>
       </table>
<br/>
<br/>
   <p>Se invece avessimo fissato colspan a "2"?</p>
   
      <table border="1">
        <tr> <td colspan="2">Cella 1</td>
             <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
             <td>Cella 4</td>
             <td>Cella 5</td>
        </tr>
       </table>
<br/>
<br/>
    <h2>Adesso invece usiamo "rowspan"</h2>
      <p>Rosspan specifica quante righe dovrebbero essere comprese in una cella</p>
      <p>Proviamo con Rowspan "3"</p>    
     <table border="1">
        <tr> <td rowspan="3">Cella 1</td>
        <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
        </tr>
        <tr> <td>Cella 4</td>
        </tr>
     </table>

<br/>
<br/>
     <p>Come in precedenza per le colonne, adesso possiamo provare ad unire solo alcune righe</p>
     <p>Per esempio con rowspan "2", anzichè "3"</p>

     <table border="1">
        <tr> <td rowspan="2">Cella 1</td>
        <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
        </tr>
        <tr> <td>Cella 4</td>
             <td>Cella 5</td>
        </tr>
     </table>
<br/>
</body>
</html>  

Pubblicato da alle

HTML - Le Tabelle

<h1>Le Tabelle</h1>
             <p>Oggi 14 Dicembre Parliamo di Tabelle</p>
             <h2>Iniziamo con le tabelle senza bordo</h2>
             <p>All'inizio può sembrare complicato, ma in realtà tutto è facile e logico, proprio come ogni altra cosa in HTML.</p>
<br/>
<br/>
  <h2>Esempio di tabella senza bordo:</h2>

    <table>
          <tr>
                <td>Cella 1</td>
                <td>Cella 2</td>
          </tr>
          <tr>
                <td>Cella 3</td>
                <td>Cella 4</td>
          </tr>
        </table>

<br/>
<br/>
    <h2>Esempio di tabella con 3 righe e 4 colonne:</h2>
 
       
       <table>
          <tr>  <td>Cella 1</td>
                <td>Cella 2</td>
                <td>Cella 3</td>
                <td>Cella 4</td> </tr>
          <tr>  <td>Cella 5</td>
                <td>Cella 6</td>
                <td>Cella 7</td>
                <td>Cella 8</td> </tr>
          <tr>  <td>Cella 9</td>
                <td>Cella 10</td>
                <td>Cella 11</td>
                <td>Cella 12</td> </tr>
        </table>

    <p>Sempre senza bordo</p>
<br/>
<br/>
  <h2>Esempio di tabella con 2 righe, 2 colonne e bordo:</h2>

      <table border="1">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>
      </table>

    <p>grazie all'uso dell'attributo border e il valore in pixel</p>
<br/>
<br/>
  <h2>Ovviamente aumentando il valore, cresce il bordo</h2>

      <table border="4">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>00:00 14/12/2016
      </table>

    <p>valore in pixel 4</p>
<br/>
<br/>
  <h2>Possiamo anche aumentare la larghezza</h2>
    <p>In pixel, oppure in percentuale rispetto allo schermo</p>
     
      <table border="4" width="30%">
         <tr>  <td>Cella 1</td>
               <td>Cella 2</td> </tr>
         <tr>  <td>Cella 3</td>
               <td>Cella 4</td> </tr>
      </table>
   
    <p>In questo caso, valore 30%</p>
<br/>
<br/>
  <h2>Oppure controllare la posizione del contenuto nella cella</h2>
    <p>con gli attributi: align e valing</p>
     
      <table border="4" width="250" height="150">
         <tr>  <td align="right">Cella 1</td>
               <td valign="top">Cella 2</td> </tr>
         <tr>  <td align="left">Cella 3</td>
               <td align="right" valign="top">Cella 4</td> </tr>
      </table>
   
    <p>aling, per il controllo "a sinistra, al centro, a destra</p>
    <p>valing, per il controllo "in alto, al centro, in basso</p>
<br/>
<br/>
  <h2>Altri attributi: colspan e rowspan</h2>
    <p>Iniziamo con Colspan, dall'inglese "column span" (colonne accoppiate)</p>
     
      <table border="1">
        <tr> <td colspan="3">Cella 1</td>
        </tr>
        <tr> <td>Cella 2</td>
             <td>Cella 3</td>
             <td>Cella 4</td>
        </tr>
       </table>
<br/>
<br/>
   <p>Se invece avessimo fissato colspan a "2"?</p>
     
      <table border="1">
        <tr> <td colspan="2">Cella 1</td>
             <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
             <td>Cella 4</td>
             <td>Cella 5</td>
        </tr>
       </table>
<br/>
<br/>
    <h2>Adesso invece usiamo "rowspan"</h2>
      <p>Rosspan specifica quante righe dovrebbero essere comprese in una cella</p>
      <p>Proviamo con Rowspan "3"</p>    
     <table border="1">
        <tr> <td rowspan="3">Cella 1</td>
        <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
        </tr>
        <tr> <td>Cella 4</td>
        </tr>
     </table>

<br/>
<br/>
     <p>Come in precedenza per le colonne, adesso possiamo provare ad unire solo alcune righe</p>
     <p>Per esempio con rowspan "2", anzichè "3"</p>

     <table border="1">
        <tr> <td rowspan="2">Cella 1</td>
        <td>Cella 2</td>
        </tr>
        <tr> <td>Cella 3</td>
        </tr>
        <tr> <td>Cella 4</td>
             <td>Cella 5</td>
        </tr>
     </table>
Pubblicato da alle

OPS - Classifica Gara 1


Posizione
 Nome squadra
 Tot (100)
 Graduatoria Nazionale
1
 Radice_di_3B
 76.389
 107
2
 I_CHAO
 76.042
 112
3
 I_Classmates
 69.792
 161
4
 The_Strangers
 69.792
 162
5
 The_Perfection
 64.236
 229
6
 Logiteam
 61.458
 257
7
 Stronger_Togheter
 61.458
 258
8
 I_the_Gigy
 60.417
 265
9
 Provadoc1
 58.333
 287
10
 Gruppo_3G
 55.208
 347
Pubblicato da alle

OPS - 1 Gara di Allenamento

Aula Magna dell'Istituto Comprensivo

Sviluppo cooperativo dei test della 1^ Gara




 




Pubblicato da alle

martedì 6 dicembre 2016

OPS - Prima Gara di Allenamento - 12/12/2016

La scuola comunica che lunedì 12 dicembre 2016, dalle ore 14.00 alle ore 15.50, presso i locali della Scuola Secondaria di I grado "L. Luzzatti" è previsto il primo allenamento per gli alunni iscritti alle "Olimpiadi Problem Solving" sotto la guida dei proff. Napolitano e Rollo. Gli alunni consumeranno il pranzo assistiti dai medesimi professori. 

Per chi sarà presente, si ricorda di portare, oltre il pranzo a sacco, alcuni strumenti utili per lo sviluppo dei test, come:

- quaderno appunti; 
- dizionario inglese; 
- calcolatrice;

Inoltre, chi lo desidera, può portare un tablet o qualsiasi dispositivo con connessione internet.

Infine, per chi desidera scoprire come risolvere alcune tipologie di test, si consiglia di leggere / stampare e tenere sempre a portata di mano il file "Allegato A", inviato via mail. 

Saluti e buon fine settimana
Pubblicato da alle

OPS - Calendario Gare


Gare di Istituto

I prova a squadre
14 dicembre 2016 (S. Primaria)
12 dicembre 2016 (S. Sec. I gr.)
13 dicembre 2016 (S. Sec. II gr.)

I prova individuale

16 dicembre 2016 (S. Sec. I gr.)
15 dicembre 2016 (S. Sec. II gr.)
--------------------------------------


II prova a squadre
17 gennaio 2017 (S. Primaria)
18 gennaio 2017 (S. Sec. I gr.)
16 gennaio 2017 (S. Sec. II gr.)

II prova individuale

20 gennaio 2017 (S. Sec. I gr.)
19 gennaio 2017 (S. Sec. II gr.)
--------------------------------------


III prova a squadre
13 febbraio 2017 (S. Primaria)
14 febbraio 2017 (S. Sec. I gr.)
15 febbraio 2017 (S. Sec. II gr.)

III prova individuale

16 febbraio 2017 (S. Sec. I gr.)
17 febbraio 2017 (S. Sec. II gr.)
--------------------------------------

IV prova a squadre
6 marzo 2017 (S. Primaria)
7 marzo 2017 (S. Sec. I gr.)
8 marzo 2017 (S. Sec. II gr.)


IV prova individuale

10 marzo 2017 (S. Sec. I gr.)
9 marzo 2017 (S. Sec. II gr.)
--------------------------------------


Gare regionali
3 aprile 2017 - Scuola primaria (gara a squadre) e secondaria I grado (gare a squadre ed individuali)

4 aprile 2017 - Scuola secondaria II grado (gare a squadre ed individuali)
-------------------------------------

Finale (Cesena)
5 maggio 2017 - Scuola Secondaria di II grado (gare a squadre ed individuali)
6 maggio 2017 - Scuola primaria (gara a squadre) e secondaria I grado (gare a squadre ed individuali)
-------------------------------------


Pubblicato da alle

OPS - Come Accedere agli Allenamenti

Indicazioni per l’accesso al Portale “Olimpiadi di problem-solving” per eseguire allenamenti e gare:
  1. Digitare l’indirizzo web “www.olimpiadiproblemsolving.it” e cliccare sulla voce “Allenamenti per Squadre” dal Menù “Partecipa”;
  2. Selezionare la Regione e la scuola di appartenenza e cliccare su “Accedi agli allenamenti”;
  3. A questo punto si apre la pagina “Login” dove è possibile inserire “Username” e “Password” del gruppo, infine clicca su “Invia”;
  4. Si accede alla pagina “Elenco delle prove”, ma ATTENZIONE, prima di “eseguire il test” cliccare su “vedi e stampa”, si apre la pagina da cui è possibile stampare per consultare e analizzare il test in formato cartaceo (operazione sempre consigliata);
  5. Dopo aver consultato e svolto il test in formato cartaceo, “eseguire il test” online con le relative domande, ad ogni domanda per confermare la risposta bisogna cliccare su “registra il risultato”.
  6. Infine, con l’ultima domanda l’applicazione restituisce il punteggio finale e la voce di menù “vedi soluzione”, visualizzare e stampare in formato PDF da menù in alto a sinistra (operazione consigliata per studiare gli errori).


    E’ importante sapere che durante la fase degli allenamenti i nomi degli allievi appartenenti ad ogni singolo gruppo resteranno anonimi. Gli allenamenti online sono da considerarsi propedeutici per le gare interne. La fase regionale si svolgerà il giorno 3 aprile 2017, la scuola vincitrice accede alla finalissima di Cesena (gara nazionale) che si svolgerà il 6 maggio 2017.
    Infine, per ogni ulteriore chiarimento scrivere all’indirizzo mail: scuola.nc@gmail.com;
    oppure a "Prof. Luca Rollo, mail: luca.rollo@yahoo.it.
    Buon lavoro, …

Pubblicato da alle

martedì 29 novembre 2016

HTML - Lez. 30/11/16 - Codice completo

<html>
  <head>
    <title>Il mio primoo sito web</title>
  </head>
    <body>
     <p>Is used for paragraphs.</p>
     <b>This text must be bold.</b>
     <h1>CARMINE</h1>
     <h2>CARMINE</h2>
     <h3>CARMINE</h3>
     <h4>CARMINE</h4>
     <h5>CARMINE</h5>
     <h6>CARMINE</h6>
   <br/>
             <h1>Un titolo</h1>
             <p>testo, testo, testo, testo</p>
             <h2>Un sottotitolo</h2>
             <p>testo, testo, testo, teso</p>
   <br/>
     <ul>
      <li>Carmine</li>
      <li>Carmine</li>
     </ul>
   <br/>
     <a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
   <br/>
   <br/>
   <br/>
<h1>PROSSIMO ARGOMENTO</h1>
<p>Gli Attributi di un Elemento</p>
   <br/>
     <ul>
      <li>Colore</li>
      <li>Immagini</li>
     </ul>
   <br/>
   <br/>
<p>Colore Rosso</p>
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
   <br/>
   <br/>
<p>Il Logo della Nostra Scuola</p>
   <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
   <br/>
   <br/>
<h2 style="background-color:Green;">Mettiamo un po di verde</h2>
   <br/>
   <br/>
   <br/>
<p>Il Logo della Nostra Scuola con LINK</p>
     <a href="http://www.istcompazzanox.it/"> <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "alt"</p>
     <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "title"</p>
     <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />
   <br/>
   <br/>
   <br/>
<p>Come usare l'attributo "width e height"</p>
      <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="50" />
  <br/>
  <br/>
  <br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="50" height="200" />
  <br/>
  <br/>
  <br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
  <br/>
  <br/>
  <br/><br/>
  <br/>
  <br/>
</body>
</html>  



Pubblicato da alle

OPS - Inizio progetto per IC Azzano X


L'Istituto Comprensivo "Novella Cantarutti" di Azzano Decimo aderisce al progetto "Olimpiadi di Problem Solving" promosso dal Ministero dell’Istruzione, dell’Università e della Ricerca 2016/2017. 
La Competizione di Informatica, rivolta agli alunni della scuola dell’obbligo, si propone di:
- favorire lo sviluppo delle competenze di problem solving e valorizzare le eccellenze presenti nelle scuole;
- sollecitare la diffusione dei contenuti scientifici culturali dell’informatica come strumento di formazione (metacompetenze) nei processi educativi;
- sottolineare l’importanza del pensiero algoritmico come strategia generale per affrontare i problemi, metodo per ottenere la soluzione e linguaggio universale per comunicare con gli altri.
- Il problem solving rimanda a processi cognitivi in cui prevale il pensare, il ragionare, il fare ipotesi, attività che richiedono l’impiego di abilità relative alla gestione di informazioni strutturate più che l’applicazione di procedimenti meccanici volti all’esecuzione esclusiva di calcoli. Tali attività favoriscono l’acquisizione di competenze trasversali ai diversi contesti disciplinari riconosciute ormai essenziali per un inserimento attivo e consapevole dei giovani nella società.
- Il problem solving, quindi, non è concepito come una disciplina, ma come applicazione di conoscenze e abilità cui si ricorre nell’affrontare situazioni problematiche in contesti reali. In particolare, riguarda la comprensione della natura del problema, l’identificazione degli elementi che lo compongono e le loro interrelazioni, la scelta di rappresentazioni adeguate nella risoluzione di situazioni problematiche, la riflessione sulla soluzione individuata e la sua efficace comunicazione. 
- Le olimpiadi di problem solving intendono, inoltre, stimolare l’interesse a sviluppare le capacità richieste in tutte le iniziative attivate per la valorizzazione delle eccellenze.  

Modalità di partecipazione
Le competizioni si articolano in tre fasi (istituto, regionale e nazionale) precedute da un periodo di allenamento e si svolgono:
  • a squadre costituite da quattro allievi, fra cui si raccomanda che vengano rappresentati entrambi i sessi;
  • Le prove hanno la durata di 90 minuti e consistono nella risoluzione di un insieme di problemi scelti dal Comitato organizzatore. 
  • La competizione è gestita da un sistema automatico sia per la distribuzione dei testi delle prove sia per la raccolta dei risultati e la loro correzione. L’adozione di questo sistema impone vincoli alla formulazione dei quesiti e delle relative risposte.

Seguiranno indicazioni sui tempi e metodi per esercitarsi con gli allenamenti online prima di effettuare la prova interna (uguale per tutti gli Istituti Partecipanti) prevista per il giorno 12 dicembre 2016. 

 Le competizioni del progetto sono divise in tre fasi: 
1) Istituto;
2) Regionale;
3) Nazionale.

 La Squadra che vince la selezione interna accede alla fase regionale (mese di aprile). 
Accede invece, alla finalissima nazionale a squadre per ciascun livello scolastico la migliore squadra classificata nella selezione regionale, purché con punteggio superiore alla media nazionale.
Accede alla finalissima individuale, per i due livelli previsti, il primo classificato di ogni regione, purché con punteggio superiore alla media nazionale. 
La finalissima a Cesena è prevista per il mese di maggio.


Le informazioni sullo svolgimento delle diverse fasi delle competizioni vengono comunicate tempestivamente sul sito http://www.olimpiadiproblemsolving.it.
Pubblicato da alle

HTML - Inserire Imagini

Immagini

Tutto quello che ti serve è un elemento:

 Esempio 1:
        
        <img src="nome-file.jpg" alt="nome-file" />

Quello che devi fare, per prima cosa, è dire al tuo browser che vuoi inserire un'immagine (img) e dove trovarla (src, sta per "source", cioè sorgente).

 Nota come l'elemento img venga aperto e chiuso nello stesso tag. Come il tag <br />, non è legato a nessun pezzo di testo.
"nome-file.jpg" è il nome del file immagine che vuoi inserire nella tua pagina. ".jpg" è il tipo di file dell'immagine. Proprio come l'estensione ".htm" mostra che quel file è un documento HTML,".jpg" dice al browser che quel file è un'immagine.

________________________________________________________________________
Approfondimento 

Cose importanti da sapere quando si usano le immagini.

Ci sono tre tipi diversi di file immagine che possono essere inseriti nelle tue pagine:

  • GIF (Graphics Interchange Format)
  • JPG / JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
Le immagini GIF generalmente sono migliori per i grafici e i disegni, mentre le immaginni JPEG sono migliori per le fotografie. Questo per due ragioni principali: primo, le immagini GIF possono avere solo 256 colori, mentre le immagini JPEG sono formate da milioni di colori e secondo, il formato GIF è migliore per comprimere immagini semplici, mentre il formato JPEG è stato ottimizzato per immagini più complesse. Migliore è la compressione, più piccola sarà la dimensione del file immagine,e più veloce il caricamento sulla tua pagina. Come probabilmente sai già dall'esperienza, le pagine "pesanti" senza motivazione possono annoiare pesantemente un visitatore.
In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace.
_________________________________________________________________________

COSA devi fare 

Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizionate su un altro sito web:

 Esempio 2:
        
        <img src="images/nome-file.gif" />
Esempio 3:
           
             <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
Le immagini inoltre, posso avere collegamenti ipertestuali (link):

 Esempio 4:
        
        <a href="http://www.istcompazzanox.it/">      
        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
        


------------------------------------------------------------------------------
Altri Attributi per le immagini



L'attributo alt viene usato per fornire una descrizione alternativa di una immagine nel caso in cui,
per qualche ragione, l'immagine non viene visualizzata all'utente.
Questo attributo è particolarmente utile per utenti con disabilità visive, o se la pagina si carica molto lentamente. 



Esempio 5:

 

        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />


        
        

Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona il cursore del mouse sopra
l'immagine. Per favore nota che l'uso dell'attributo alt ha lo scopo odi fornire una descrizione alternativa dell'immagine.
Non dovrebbe quindi essere usato per creare messaggi speciali di pop-up dato che i non-vedenti sentiranno il messaggio senza sapere
niente dell'immagine.





L'attributo title invece, può essere usato per aggiungere informazioni all'immagine:


Esempio 6:



        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />        
        

Senza cliccare, prova a posizionare il cursore sopra l'immagine, vedrai il testo "Impara l'HTML su HTML.net" apparire in una

box di pop-up. 






Altri due attributi importanti sono width e height:

Gli attributi width e height possono essere usati per impostare l'altezza e la larghezza di una

immagine. Per impostare l'altezza e la larghezza viene usato un valore in pixel. 




Se non vengono impostate l'altezza e la larghezza, l'immagine verrà inserita con le sue dimensioni originali. Modificando altezza
e larghezza, invece, è possibile manipolare la dimensione della stessa immagine:



Esempio 8:

        


        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="50" />        



___________________________________________________________________________________

Approfondimento

I pixel sono l'unità di misura utilizzata per misurare la risoluzione degli schermi. (Gli schermi più comuni hanno una risoluzione di 1024x768 pixel). A differenza dei centimetri, i
pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25
pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo
schermo a 1.5 centimetri.



Comunque vale la pena ricordare che la dimensione originale dell'immagine, in kilobyte, rimarrà la stessa. Quindi ci vorrà lo
stesso tempo di prima per caricare l'immagine, anche se questa volta sullo schermo appare più piccola. Quindi, non dovresti mai
diminuire la dimensione dell'immagine usando gli attributi width e height. Dovresti invece sempre ridimensionare l'immagine
direttamente da un programma per l'editing di immagini, in modo da rendere le tue pagine più leggere e veloci.



















Pubblicato da



alle














































HTML - Gli Attributi - Il Link










Gli Attributi - Il Link



Collegamenti (link) tra le pagine.

- Un elemento semplice, con un solo attributo che ti permetterà di fare un link a qualsiasi cosa.

Qui c'è un esempio di come appare un link ad una pagina esterna al nostro sito:



Esempio 1:

<a href="http://www.istcompazzanox.it/">Questo è il link alla nostra scuola</a>





NOTA: La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.



Cosa significa "a href"?

L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (cioè, riferimento ipertestuale), che specifica dove deve portare il link - tipicamente un indirizzo su Internet o un nome di un file.



L'indirizzo completo di un sito viene chiamato URL (Uniform Resource Locator).

Nota che "http://" deve essere sempre inclusa in una URL.

La frase "Questo è il link a HTML.net" è il testo che viene mostrato sul browser come link.

Ricordati di chiudere l'elemento con il tag di chiusura </a>.





--------------------------------------------------------------------------------------------



Link alle pagine interne di un sito

- Bisogno di specificare in dettagli l'intero indirizzo (URL) del documento.



Per esempio, se hai fatto due pagine (chiamiamole pagina1.htm e pagina2.htm) e le hai salvate nella stessa cartella.



Esempio 2:        

        <a href="pagina2.htm">Fai click qui per andare alla pagina 2</a>





Invece, se la pagina 2 è posizionata in una sottocartella (chiamata "sottocartella"), allora il link dovrebbe apparire come questo:



Esempio 3:

         <a href="sottocartella/pagina2.htm">Fai click qui per andare alla pagina 2</a>





Al contrario, se il link è diretto dalla pagina 2 (nella sottocartella) alla pagina 1, si vedrà come segue:

Esempio 4:       

        <a href="../pagina1.htm">Un link alla pagina 1</a>



-----------------------------------------------------------------------------------------------



Link interni alla pagina

Puoi creare anche dei link interni alla stessa pagina - per esempio un sommario in cima alla pagina che punta a ciascuno capitolo sotto. Tutto quello che ti serve è utilizzare un utilissimo attributo chiamato id (identification, identificativo) e il simbolo "#".



Usa l'attributo id per marcare l'elemento che vuoi linkare. Per esempio:

      

        <h1 id="heading1">Titolo 1</h1>   



Adesso puoi creare un collegamento a quell'elemento usando "#" nell'attributo del link. La gratella "#" deve essere seguita dall' id del tag che vuoi linkare. Per esempio:

      

        <a href="#heading1">Link a titolo 1</a>

      

Tutto sarà più chiaro con una pagina HTML di esempio:



<html>         

          <head>

          </head>

          <body>

                <p><a href="#heading1">Link a titolo 1</a></p>

                <p><a href="#heading2">Link a titolo 2</a></p>

                <h1 id="heading1">titolo 1</h1>

                <p>Testo testo testo testo</p>

                <h1 id="heading2">titolo 2</h1>

                <p>Testo testo testo testo</p>     

          </body>

        </html>



------------------------------------------------------------------------------------------------

Link ad indirizzo mail



Esempio 6:



<a href="mailto:nobody@html.net">Manda una e-mail a nobody a HTML.net</a>



sul browser apparirà così:Manda una e-mail a nobody a HTML.net



L'unica differenza tra un link ad una e-mail e un link ad un file è che invece di digitare l'indirizzo di un documento, scriverai mailto: seguito dall'indirizzo di e-mail.



Quando viene fatto click sul link si aprirà il programma di posta elettronica con un nuovo messaggio vuoto e l'indirizzo di e-mail specificato.

Nota che questo funziona solo se sul tuo computer è stato istallato un programma di posta. Fai una prova!     



-----------------------------------------------------------------------------------------------



Altri Attributi dei Link



Puoi anche mettere un title al tuo link:



Esempio 7:    

<a href="http://www.html.net/" title="Visita HTML.net e impara l'HTML">HTML.net</a>



L'attributo title viene usato per inserire una breve descrizione al link. Se posizioni il cursore del mouse sopra il link - senza cliccare - vedrai apparire il testo "Visita HTML.net e impara l'HTML".   









Pubblicato da



alle















































HTML - Gli Attributi: Il Colore










Ricordo che i contenuti di questa lezione sono estratti da: http://it.html.net/tutorials/html/;







Gli Attributi: Il Colore



Il colore è considerato un Attributo nel linguaggio HTML, ovvero informazioni aggiuntive in un elemento.

Come abbiamo già verificato, gli elementi danno struttura ad un documento HTML e dicono al browser come vuoi che venga visualizzato il tuo sito web (per esempio, <br /> informa il browser che deve lasciare una linea vuota). In alcuni elementi si possono inserire informazioni aggiuntive. Queste informazioni aggiuntive quindi, vengono chiamate attributi.



Generalmente un elemento è formato da un tag iniziale con o senza
uno o più attributi, del contenuto e un tag finale. Semplice no?
Guarda la figura sotto.











L'attributo è contenuto nel tag iniziale, come esempio successivo.





Esempio 1:       

<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>

      

Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguito da un segno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gli attributi serve a separare i diversi comandi di stile. Torneremo su questo argomento più tardi.





---------------------------------------------------------------------------------------------------------

L'attributo usato nel precedente esempio si chiama style. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Per esempio un colore di sfondo rosso:



Esempio 2:       

        <html> 

           <head>  </head>

           <body style="background-color:#ff0000;">    </body>

        </html>     



Nota che alcuni tag e attributi usano l'ortografia degli USA, come per esempio color invece di colour. E' importante che usi la stessa ortografia che stiamo usando negli esempi di questo tutorial, altrimenti il browser non riuscirà ad interpretare il codice.



----------------------------------------------------------------------------------------------------------



Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:



White:     #ffffff

Black:     #000000 (zero)

Red:        #ff0000

Blue:       #0000ff

Green:     #00ff00

Yellow:   #ffff00



Un codice esadecimale per un colore è formato da una gratella (#) e da sei cifre o lettere.



-----------------------------------------------------------------------------------------------------------



Ci sono più di 1000 codici esadecimali e non è semplice capire la corrispondenza tra questi codici e uno specifico colore.

Per semplificare abbiamo una tabella dei 216 colori più utilizzati:

216 Tabella dei colori per il web.



Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow).



Esempio 3:     

        <body style="background-color: red;">



NOTA: circa i colori supportati all'interno delle pagine web si faccia riferimento a questa tabella dei colori HTML



--------------------------------------------------------------------------------------------------------------



Ecco invece una tabella riassuntiva delle color keyword principali con relativi valori esadecimali (Hex) e RGB.















Oppure, VAI alla tabella interattiva:

http://fabrizio.zellini.org/tabella-interattiva-codici-e-nomi-dei-colori;












Pubblicato da



alle






































          

        

          

        

mercoledì 23 novembre 2016


          

        









HTML - Lez. 23/11/16 










Qui il link utile per l'approfondimento alla lezione svolta in aula.



Fonte Tutorial: http://it.html.net/tutorials/html/; 





Inserisco inoltre, l'esempio di elementi e tag che abbiamo imparato.



<html>

  <head>

    <title>Il mio primoo sito web</title>

  </head>

    <body>

     <p>Is used for paragraphs.</p>

     <b>This text must be bold.</b>

     <h1>CARMINE</h1>

     <h2>CARMINE</h2>

     <h3>CARMINE</h3>

     <h4>CARMINE</h4>

     <h5>CARMINE</h5>

     <h6>CARMINE</h6>

   <br />

   <br />

             <h1>Un titolo</h1>

             <p>testo, testo, testo, testo</p>

             <h2>Un sottotitolo</h2>

             <p>testo, testo, testo, teso</p>

   <br />

   <br />

     <ul>

      <li>Carmine</li>

      <li>Carmine</li>

     </ul>

   <br />

   <br />

<a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>

   <br />

   <br />

   </body>

</html>     





Ricordo la prassi da seguire:

- Copiare il codice e incollarlo in un semplice editor (software) di testo. Puoi utilizzare Notepad di Windows, oppure Pico (Linux) o TextEdit (Mac).

- "Salva con nome" con estensione .html (esempio "index.html") in una cartella a tua scelta.

- Il file salvato dovrebbe essere ora associato all'icona del browser predefinito, altrimenti clicca con tasto destro sul file e cambia le impostazioni di apertura nella finestra delle proprietà, scegliendo un browser a tua scelta (Internet Explorer, Opera, Mozilla,  Safari, Firefox, Crome, ecc.). 












Pubblicato da



alle






































          

        

          

        

venerdì 22 aprile 2016


          

        










OPS - Pordenone / Cesena, Follow us










Salve, finalmente si parte e approfittiamo per presentarci, ...













Abbiamo scelto il nome "The Swamp Brothers" un po' casualmente, soprattutto perché non avremmo mai immaginato di arrivare alle nazionali di questo progetto.



Eravamo già molto amici prima di questa grande possibilità, poi il fatto di lavorare fianco a fianco, durante questo percorso ci ha resi più forti e uniti.







Riccardo Viol

Riccardo è un ragazzo, molto intelligente e logico, e per queste motivazioni ha un ruolo fondamentale all'interno del gruppo.

"Come tutti non mi aspettavo di aver vinto la gara regionale classificandoci primi in Italia, non ci credo ancora".





Marco Del Ben

Marco è molto alto e questo ci mette sempre in soggezione, però è molto simpatico e riesce sempre a tirarci su il morale.

E' sempre pronto ad aiutare nel momento del bisogno, sia quando abbiamo qualche difficoltà nel risolvere gli esercizi sia quando c'è bisogno di stappare un sorriso.

"Sono stato molto felice di aver partecipato a questo progetto e non pensavo di avere questo successo".





Alessia Metaj

"E' stata una bellissima esperienza che non dimenticherò mai.

Siamo cresciuti e abbiamo fatto progressi affrontando difficoltà sempre insieme.

Questo esperienza sarà un punto di riferimento per quello che verrà e sono contentissima di aver condiviso questa avventura con i miei compagni".



Carlo Rosso

"Sto vivendo un percorso molto emozionante e importante per il mio futuro.

Mi sono divertito molto a fare questo progetto perché sono stato con un gruppo che sa far ridere quando serve ma sa anche lavorare seriamente e in modo instancabile".





P.S. Un ringraziamento speciale a tutte le perone che  ci hanno sostenuto in questo importante percorso.
un
 saluto ed un abbraccio al dirigente scolastico, agli insegnanti e ai 
collaboratori scolastici che con tanta pazienza ci hanno permesso di 
allenarci.













































































Classifica Finale





 

  
  
  
  
  
  
  


   Pos
   Nome
    squadra
   Tot
    (100)
   Scuola
   Regione
  



   1
   

   Einstein
   97.917
   Plinio
    il vecchio - Gramsci - Bacoli
   Campania
  



   2
   

   INFO-MATHS
   93.403
   I.C.
    Mazzini - CASTELFIDARDO
   Marche
  



   3
   

   I_Banco_Math
   90.069
   IC
    ROSSETTI VASTO 
    
   Abruzzo
  



   4
   

   Radici_SQUADRAte
   86.806
   I.C.
    PERUGIA 5 
    
   Umbria
  



   5
   

   The_Swamp_Brother
   82.500
   IC
    Rorai Cappuccini - Pordenone
   FVG
  



   6
   

   Genius2punto0
   81.597
   IC
    S. Quasimodo - Ragusa
   Sicilia
  



   7
   

   NUMERI_PRIMI
   80.833
   Marinotti
    - Villanova Monferrato
   Piemonte
  



   8
   

   Punto_Interrogativo
   77.083
   IC
    CHIAVARI 2 
    
   Liguria
  



   9
   

   MATE8
   76.250
   Angelo
    Brofferio - Asti
   Piemonte
  



   10
   

   H2O
   75.556
   IC
    STATALE - ARADEO
   Puglia
  



   11
   

   VERGA_2016
   75.000
   IC
    Verga - Fiumefreddo 
    
   Sicilia
  



   12
   

   quadrio
   72.917
   I.C.
    Ponte in Valtellina 
    
   Lombardia
  



   13
   

   PLUS-ULTRA
   69.097
   SSPG
    GANDINO - BOLOGNA
   E.
    Romagna
  



   14
   

   PROJECT_-_3D
   66.597
   IC
    DI CROSIA - Crosia
   Calabria
  



   15
   

   Fiemme
   65.278
   IC
    Predazzo T. Panchià Ziano 
    
   TAA
  



   16
   

   COLOBRARO
   65.069
   IC
    A. Fortunato - COLOBRARO
   Basilicata
  



   17
   

   focopopa
   63.889
   SS
    Fratelli Cervi - Binago
   Lombardia
  



   18
   

   Con_Elisa
   58.611
   I.C.
    Motta Camastra - Roma
   Lazio
  



   19
   

   orsiani
   54.514
   IC
    "G.B.CIPANI" - SANTORSO
   Veneto
  



   



   

   Supernova
   Assente
   IC Vittorio
    Veneto - Lentini
   Sicilia
  














Pubblicato da



alle






































        

      









Iscriviti a:
Post (Atom)