Topic outline

  • General

    Collapse all Expand all

    • Programma

      • Concetti di base dell'ICT
        • Hardware
        • Software
        • Reti
      • Uso del computer e gestione dei file
        • Sistema operativo
        • Gestione dei file
        • Programmi di utilità
      • Foglio elettronico
        • Calcoli e formule
        • Funzioni
        • Ordinamento, filtri e manipolazione dei dati
        • Grafici
      • Motori di ricerca
        • Ricerche in Internet
      • Il linguaggio HTML
        • Struttura di una pagina HTML
        • I tag principali
        • Inserimento di immagini
        • Creazione di siti e inserimento di link
        • Formattazione del testo
        • Le tabelle
        • Le liste
      • Il linguaggio CSS
        • I Fogli di stile
        • I principali attributi CSS
        • Utilizzo delle classi
        • Progettazione del layout


    • Come prepararsi per l'esame.

      Il materiale da studiare per l'esame è il seguente:

      • prima parte:
      • seconda parte:
        • guida HTML introduttiva (le sezioni da: "Introduzione" a "Impaginazione")
        • guida HTML avanzata (solo le sezioni: "Elementi struttura", "Formattazione testo", "Links", "Elenchi o liste")
        • guida CSS (le sezioni da: "Introduzione" a "Attributi di Posizione")
        • documentazione relativa alle ricerche con Google
    • Forum icon
      Forum News

    • NOTA

      Per gli studenti del CdS in Filologia, Linguistica e Tradizioni Letterarie, il programma non comprende l'argomento "Fogli elettronici", e quindi sono escluse le lezioni dalla 5 alla 11.

  • Topic 1

    14/09/2017

    •  Introduzione al corso

      • Utilizzo dell'aula informatica
      • Accesso all'aula informatica con proprie credenziali: gasl.unich.it
      • Utilizzo della piattaforma didattica fad.unich.it

  • Topic 2

    19/09/2017

    • Hardware
      • Computer = hardware + software
      • Hardware
        • Tipi di hardware
          • personal computer: desktop, laptop (notebook), tablet PC
          • dispositivi portatili: telefono cellulare, smartphone (con applicazioni), multimedia player, palmare (Personal Digital Assistant - PDA)
        • componenti principali (Architettura di von Neumann)
          • CPU (Central Processing Unit)
          • memoria centrale (RAM)
          • memorie di massa o secondarie
          • periferiche di I/O (Input/Output)
          • bus (comunicazione tra componenti)
        • CPU (microprocessore)
          • ALU - Arithmetic and Logic Unit + CU - Control Unit
          • registri speciali (memorie)
          • microprocessore e scheda madre
          • velocità: frequenza del clock in hertz (cicli al secondo), MHz, GHz
        • memorie
          • RAM: lettura e scrittura, volatile, ad accesso dinamico, molto veloci
          • ROM: solo lettura, Bios ROM: firmware (software di boot - load o.s.), autodiagnostica, riconoscimento periferiche
          • misurare le memorie: byte e multipli (KB, MB, GB, TB)
        • memorie di massa
          • memorie permanenti (formattazione per cancellare e rendere compatibili)
          • magnetichi: hard-disk (interno o esterno), suddiviso in tracce e settori
          • ottiche: CD e DVD (anche riscrivibili: CD-RW, DVD-RW) da 700MB a 17 GB, Blu-Ray fino a 200GB
          • elettroniche: chiavetta USB (USB flash drive), memory card (piccole dimensioni - cellulari)
        • periferiche di I/O

        • collegamento dei dispositivi (device o periferiche)
          • porta USB: on-the-fly
          • porta di rete
          • porta VGA o HDMI
          • porta firewire: multimediale
        • prestazioni
          • velocità della CPU, dimensione della RAM, scheda grafica con ram e processore (GPU)

  • Topic 3

    05/03/2019

    • Software

      Software = programmi

      • Software di sistema e software applicativi
      • Sistema operativo: necessario per gestire le risorse e le periferiche, offre una GUI (interfaccia grafica)
        • gestore dei processi (time slicing)
          • numero di processori
          • tecnica del time-slicing
          • round-robin
        • gestore della memoria centrale
          • condivisa da tutti i processi
          • swap (utilizzo dell'hard-disk)
          • traduzione degli indirizzi: indirizzi fisici (memoria), logici (programma)
        • gestore della memoria secondaria
          • directory, root, unicità dei nomi
          • file: memorizzazione a blocchi, tabella di corrispondenza file-blocchi
        • gestore dei dispositivi
          • driver
        • interfaccia utente
          • interazione con l'utente
          • interfacce testuali e grafiche
          • gestione finestre, mouse, login, processi
      • Esempi di sistemi operativi: Linux, Mac OS, Windows
      • Utilizzo di Linux
        • Login e logout: sessione
        • riavvio e arresto del computer
        • barra delle applicazioni: gestire i processi
        • struttura gerarchica dei file
        • creare:
          • cartella
          • copia documento/cartella
          • collegamento: mouse tasto destro->Invia a-> Scrivania
          • file compresso
        • il cestino
        • proprietà dei file
        • trova le applicazioni
        • un semplice editor: Mousepad
      • Utilizzo dell'aula informatica
        • account
        • quota disco
          • quota -s

    • Page icon
      Esercizio su Linux Page
    • File icon
      Introduzione a Linux File

  • Argomento 4

    07/03/2019

    • Il software LibreOffice

    • Introduzione ai fogli elettronici: Calc

      • Cos'è un foglio elettronico
      • Aprire, salvare e chiudere un foglio elettronico
      • I menu, l'area di lavoro, i fogli
      • Le celle
        • tipo degli argomenti (formato)
          • numero, percentuale, valuta, data, orario, testo
          • serie (mesi dell'anno)
        • contenuto e visualizzazione
      • Selezionare un insieme di celle
      • Applicare la formattazione ad insiemi di celle selezionate
      • Copia mediante trascinamento
      • Copia senza incremento (Ctrl + trascinamento)
      • Inserimento e cancellazione di righe e colonne
    • Page icon
      1. Esercizio di trascinamento Page
    • Page icon
      2. Modifiche di righe e colonne Page
    • Page icon
      3. Calendario Page

  • Argomento 5

    12/03/2019

  • Argomento 6

    14/03/2019

  • Argomento 7

    21/03/2019

  • Argomento 8

    26/03/2019

  • Argomento 9

    28/03/2019

  • Argomento 10

    16/04/2019

    • Parziale su Calc.

    • Assignment icon
      1° Parziale - 26/10/2016 Assignment

    • AVVISO

      Gli studenti che hanno superato il parziale con voto 17 possono comunque sostenere il secondo parziale. Il voto finale sarà la media del primo e del secondo parziale.

  • Argomento 11

    30/04/2019 - Inizio seconda parte del corso.

  • Argomento 12

    02/05/2019

    • Dichiarazione del DOCTYPE

      • HTML 5
      <!DOCTYPE html>
      • HTML 4.01 Transitional
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      Ulteriori informazioni: HTML Declaration

    • Utilizzo di contenitori

      • il tag <div> può essere usato come contenitore e innestato
        • <div align="center">
               <p> .... </p>
               <p> .... </p>
          </div>

    • Le immagini

      • Inserire le immagini
        • <img src="...", alt="...">
      • Attributi di immagini
        • nome file: src="..." (obbligatorio)
        • descrizione in mancanza dell'immagine: alt="..." (obbligatorio)
        • larghezza in pixel: width="..."
        • altezza in pixel: height="..."
        • bordo in pixel: border="..." (valori: 0,1,etc...)
        • descrizione dell'immagine: title="..."
        • allineamento rispetto alla linea successiva: align="..." (valori: left, right, top, middle e bottom)
      • Combinare testo ed immagini
      • Formattare il testo e le immagini
    • Page icon
      Esercizio immagini Page
    • Page icon
      Esercizio immagini 2 Page

  • Argomento 13

    06/05/2019

  • Argomento 14

    07/05/2019

    • Creare un sito con più pagine

      • Inserimento di link
        • link esterni
          • <a href="http://...">
          • attributo target="_blank" (per aprire il link in una nuova pagina)
        • link tra pagine di uno stesso sito
          • <a href="...">
      • immagini clickabili
    • Page icon
      Esercizio su link Page

  • Argomento 15

    09/05/2019

    • Commenti HTML

      • inizio: <!--
      • fine: -->


      Le liste

      • Liste: <ul>
        • attributi:
          • type="..." ("circle","square")
      • liste ordinate: <ol>
        • attributi
          • carattere utilizzato: type="...." ("A", "a", "I","i")
          • modifica del valore iniziale: start="10"
      • elemento di una lista: <li>


      Liste di definizioni

      • Per creare la lista: <dl>
      • per inserire un elemento: <dt>
      • per inserire la descrizione di un elemento: <dd>


      Apice

      • <sup> per inserire un apice


      Formattazione del testo

      • <em>testo enfatizzato</em>
      • <strong>testo molto enfatizzato</strong>

  • Argomento 16-17

    • Le tabelle

      • Creazione di tabelle: <table>
      • inserimento di una riga: <tr>
      • inserimento di una cella: <th> e <td>
        • cella che occupa 2 righe: attributo rowspan="2"
        • cella che occupa 2 colonne: attributo colspan="2"
      • uso di <thead>, <tbody> e <tfoot>
      • spazio vuoto: &nbsp; (non è un tag, è un simbolo)


    • Formattazione (inline CSS)

      • bordi
        • stile: attributo style="border-style: ... ;" (esempio: solid, dotted, dashed)
        • dimensione: attributo style="border-width: ...;"
        • colore: attributo style="border-color: ...;"
      • dimensioni:
        • larghezza: attributo style="width: ...;"
        • altezza: attributo style="height: ...;"
      • allineare il contenuto delle celle:
        • orizzontale:  attributo style="text-align: ...;" (esempio: center, left, right)
        • verticale:  attributo style="vertical-align: ...;" (esempio: top, bottom, middle)
      • colore:
        • del testo: attributo style="color: red;"
        • dello sfondo: attributo style="background-color: yellow;"
      • combinare più stili
        • style="color: red; background-color: yellow;"

    • File icon
      Introduzione alle tabelle (lucidi) File
    • File icon
      Esercizi sulle tabelle 1 File
    • File icon
      Esercizi sulle tabelle 2 File

  • Argomento 18

    14/05/2019

    • Formattazione della pagina

      • Foglio di stile (CSS)
      • Le dichiarazioni: proprietà e valore
        • border: 3px solid black;
        • background-color: colore dello sfondo
        • color: colore del testo
        • text-align: allineamento orizzontale del testo
        • combinare più stili
          • style="color: red; background-color: yellow; text-align: center;"
      • Inserimento di codice CSS (howto)
        • in linea: inserire l'attributo style nei tag
        • interno alla pagina HTML: inserire nell'head
          • <style type="text/css"> </style>
        • in un foglio esterno .css: inserire nell'head
          • <link rel="stylesheet" href="nomeFoglioDiStile.css" type="text/css">
      • Le regole: selettore e blocco di dichiarazioni
        • per l'intera pagina
          • body { ..... }
        • per singoli elementi
          • div {
              color: blue;
              text-align: center;
            }
        • per l'elemento con identificatore id="myID"
          • .myID {
              color: blue;
              text-align: center;
            }

      Risorse utili


  • Argomento 19

    16/05/2019

  • Argomento 20

    21/05/2019

      Attributi di stile

      • Colorare i link
        • link da visitare: a:link { color: red; }
        • link visitati: a:visited { color: blue; }
        • link al passaggio del mouse: a:hover {color: yellow;}
          • da utilizzare in quest'ordine!
        • link non sottolineati:  a {text-decoration: none;}
          • valori possibili: none | underline | overline | line-through
      • Layout
      Layout liquido
        • attributo: style="float: left;" (da usare con width)
        • rimuovere attributo: style="clear: both;"

    • Esercizi

      Si realizzi la seguente pagina: decorazione di link

  • Argomento 21

    23/05/2019

    • Attributi di stile

      • Posizionare un oggetto
        • in un punto preciso:
          • position: absolute; left: 100px; top: 200px;
        • spostato rispetto alla sua posizione naturale:
          • position: relative; left: 10px; top: 20px;
        • nella sua posizione naturale:
          • position: static;
        • sovrapporre oggetti:
          • z-index: 1;
        • esempi:

    • Esercizio

      Si realizzino le seguenti pagine:


    • Esercizi

       1. Si scrivano una classe con nome .sx per posizionare un blocco a sinistra in modalità float ed una classe con nome .dx per posizionare un blocco a destra in modalità float.

      Utilizzando le due classi e la faccina.png si realizzi la seguente pagina.

      2. Si scrivano due classi con nome .cornice-sx e .cornice-dx per visualizzare blocco float di larghezza 200px, con una cornice di colore rosso, la prima classe a sinistra e la seconda classe a destra.

      Utilizzando le due classi, si realizzi la seguente pagina.

      3. Si scriva una classe .inizio che realizzi un oggetto float a sinistra, con carattere di 100px e altezza della linea 80% (utilizzare l'attributo CSS line-height:80%;).

      Utilizzando questa classe ri realizzi la seguente pagina.

      4. Si scriva una classe .box per realizzare una cornice blu di larghezza 200px, e la si utilizzi per realiizare la seguente pagina.

      5. (Difficile) Si scrivano 5 classi:

      • .box: per visualizzare un box con cornice e sfondo giallo
      • .testata: per visualizzare un testo con font di altezza 130%
      • .fondo: per visualizzare un testo con font di altezza 85%
      • .sinistro: una colonna di larghezza 160px e sfondo giallo chiaro, con un bordo destro (border-right)
      • .centrale: una colonna centrale con sfondo giallo chiaro

      e le si utilizzino per realizzare la seguente pagina.

  • Argomento 22

    28/05/2019

    • Esercizio.

      Si progetti un sito per pubblicizzare un prodotto o servizio a vostra scelta, con le seguenti caratteristiche:

      • Il sito è composto da due pagine. Si realizzi un unico foglio di stile da utilizzare per entrambe.
      • Il layout della pagina comprende:
        • una testata, alta 150 pixel
        • due colonne, delle quali quella di sinistra occupa il 20% della pagina, entrambe alte 400 pixel
        • un fondo, alto 100 pixel.
        • aggiungete, a vostra scelta, i colori dei font, del background e delle cornici.
      • La prima pagina contiene:
        • nella testata: un'immagine del prodotto/servizio da pubblicizzare
        • nella colonna di sinistra: un elenco cliccabile che descrive le caratteristiche del prodotto, tra le quali appare: "Casa produttrice", che rimanda alla seconda pagina del sito.
        • nella colonna di destra: una descrizione del prodotto
        • nel fondo: un'immagine cliccabile della casa produttrice, che rimanda alla seconda pagina.
      • La seconda pagina contiene:
        • nella testata: la stessa immagine della prima pagina, cliccabile, che rimanda alla prima pagina
        • nella colonna di sinistra: un elenco che descrivere le caratteristiche dell'azienda. Il primo punto dell'elenco deve essere "Home" che riporta alla prima pagina
        • nella colonna di destra: una descrizione dell'azienda
        • nel fondo: la stessa immagine della prima pagina.

    • Esercizio.

      Progettate una pagina personale con i seguenti elementi:


  • Argomento 23

  • Appelli 2018/2019