Topic outline

  • General


    Informazioni sul corso

    • CFU: 6
    • Corso di Laurea: SEGI
    • Altri corsi di laurea: CLEAI (Ulteriori attività formative - lettera F), CLEA (Ulteriori attività formative - lettera F), CLEAM (Idoneità informatica - 4 CFU), CLEF (Idoneità informatica - 5 CFU), CLEI e CLEII (esame a scelta - lettera D - 3 CFU), Filologia, Linguistica e Tradizioni Letterarie (Informatica per le scienze umanistiche - 6 CFU)
    • Docenti: Maria Chiara Meo
    • Orario: martedì 11-13, giovedì 14-16 in aula informatica.
    • Ricevimento: lunedì ore 11-13 al Dipartimento di Economia
    • E-mail: cmeo@unich.it

    Obiettivi

    • Comprendere i concetti di base dell'Informatica e dell'utilizzo dei computer.
    • Descrizione delle reti di calcolatori e delle problematiche relative all'utilizzo della rete Internet e delle ricerche.
    • Utilizzo di fogli elettronici.
    • Progettazione di siti web utilizzando i linguaggi HTML e CSS.

    Materiale didattico

    Altro materiale didattico

    Modalità d'esame
    L'esame consiste in una prova pratica al calcolatore, nell'aula informatica del Dipartimento di Economia, utilizzando il sistema operativo Linux Ubuntu ed il software LibreOffice. La prova consiste in:

    1. progettazione di fogli elettronici utilizzando Calc
    2. linguaggi HTML e CSS

    Per sostenere l'esame dovete prenotarvi nel sito di ateneo e avere un account sulla piattaforma fad.unich.it. Per creare un account seguite le istruzioni.

    Appelli:     consultate la pagina dell'ateneo https://unich.esse3.cineca.it/ListaAppelliOfferta.do

    • 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

    • 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

  • 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

  • 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.

    • 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

  • 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

  • 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;"

  • 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