Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Laboratorio di Informatica 3
• Orario delle lezioni:
• Lunedì 16:30-18:30 • Giovedì 12:30-14:30
• Durata: 40 ore
• CFU: 2
• Docente: Luigi Catuogno
Programma del corso
Laboratorio di Informatica 3
• Cos’è e come funziona il WEB
• Il world Wide WEB:
• Protocolli, architettura e funzionamento • Il client (browser) e il server Web
• Pubblicare contenuti sul Web con strumenti on-line:
• Realizzazione di un sito WEB con Google Sites • Realizzare un canale con You Tube
Laboratorio di Informatica 3
• Anatomia delle pagine WEB
• I contenuti: testo, immagini, suoni, video…
• L’organizzazione dei contenuti: il linguaggio HTML • I fogli di stile CSS
• Linguaggi di scripting (cenni)
Svolgimento e finalità del corso
Laboratorio di Informatica 3
• E’ un corso di carattere pratico
• Acquisire la consapevolezza delle tecnologie e delle pratiche che stanno «dietro» alla realizzazione di un sito web.
• Lezioni frontali
• Argomenti di carattere generale • Nozioni propedeutiche
• «The big picture»
• Svolgimento dell’attività di laboratorio:
• Introduzione «teorica» degli argomenti • Esercitazione pratica
• Discussione
Svolgimento dell’esame
Laboratorio di Informatica 3
• Una settimana prima dell’appello:
• Sarà pubblicata la «traccia» di un progetto da realizzare (una pagina web) con delle specifiche caratteristiche.
• Il candidato deve realizzare la pagina richiesta in tutte le sue parti e salvarla sul proprio Laptop o su un pendrive USB.
• Il giorno dell’esame:
• Il candidato sosterrà un breve colloquio col docente nel quale descriverà il lavoro svolto
• Risponderà a quesiti tecnici (del docente) relativi alle scelte compiute nella realizzazione del sito
• Votazione: superato/non superato
Un esempio
Riscopriamo la poesia
• Il candidato scelga una poesia (anche una sola strofa) a sua
discrezione e la utilizzi per una pagina WEB che invogli alla riscoperta
di quesa antichissima arte.
• La poesia dovrà essere impaginata inserendo, tra i versi, motivi grafici
e immagini che ne richiamino il contenuto.
• Il candidato dovrà utilizzare 3-5 parole del testo come link verso altrettante pagine che:
• Presentino l’autore
• Illustrino elementi salienti del testo e del suo significato
Requisiti tecnici
• Sono richiesti obbligatoriamente (altrimenti la prova è insufficiente)
• L’utilizzo di fogli di stile in un file .css a sé stante, da utilizzare sia nella pagina principale sia in tutte le pagine secondarie.
• Ciascuna pagina secondaria deve contenere un link alla pagina principal
Riscopriamo la poesia
Riscopriamo la poesia
Riscopriamo la poesia
Riscopriamo la poesia
Libri di testo consigliati:
Libri di testo consigliati:
Google Sites:
Ryan Teeter and Karl Barksdale
Google Sites & Chrome for Dummies
Wiley Publishing Inc. (2009)ISBN 978-0-470-39678-0
Libri di testo consigliati:
Youtube:
Rob Ciampa, Theresa Moore
Youtube Channels for Dummies
Wiley Publishing Inc. (2015)ISBN 978-1-118-95817-9
Libri di testo consigliati:
L’architettura del WWW:
Donatella Sciuto, Giacomo Buonanno, Luca Mari
Introduzione ai sistemi informatici
McGraw-Hill Italia. (2016)
ISBN 978-88-386-9216-1
In particolare:
Cap. 9: «Le applicazioni»
Cap. 9.5 «Le tecnologie per il World Wide Web»
Libri di testo consigliati:
Il linguaggio HTML e i fogli di stile:
Laura Lemay, Rafe Colburn
HTML & CSS
McGraw-Hill Italia. (2007)
ISBN 978-88-386-4478-8
Libri di testo consigliati:
HTML5:
Daniele Bochicchio e Stefano Mostarda
HTML5 con CSS e JavaScript
Editore Ulrico Hoepli Milano. (2015)Per chi desidera approfondire le innovazioni introdotte con HTML5 e la gestione avanzata dei contenuti multimediali
Strumenti & risorse
Introduzione
Editor di testo:
Editor di testo:
• Microsoft Notepad (Bloco Note)
• Komodo Edit
• https://www.activestate.com/products/komodo-edit/
• Atom Edit
• https://atom.io/
Microsoft (e Libre) Office:
Microsoft Word
Microsoft Word
La Google-sfera:
La Google-sfera
• Le applicazioni sono installate nel cloud di Google:
• Su richiesta dell’utente, il cloud crea ed esegue una istanza dell’applicazione e la assegna all’utente;
• Il codice del software è eseguito in remoto;
• L’utente vi interagisce mediante il web browser;
• Il browser esegue il front-end dell’applicazione e cura la comunicazione con il back-end;
Alcune Google Apps
La Google-sfera: Google Docs
Un esempio: Google Docs1
2
La Google-sfera: Google Docs
Un esempio: Google Docs3
La Google-sfera: Google Docs
Un esempio: Google Docs4
5
Google Sites
Google Sites
• Strumento gratuito per la creazione di pagine web nella Google-sfera
• Editor di pagine WYSIWYG (What You See Is What You Get)
• Inserimento di testo e altri componenti delle pagine WEB
• Immagini, collegamenti, tabelle
• Possibilità di scelta tra numerosi stili e template pre-definiti
• Possibilità di raffinare il lavoro con un limitato ricorso al codice HTML • Possibilità di interoperare con le altre applicazioni e servizi Google
• E.g. Google Docs, Youtube, Google Maps…
Primi passi in Google Sites
• Cosa occorre:
• Un account Google
• Un browser web tipo Firefox o Google Chrome
• Cosa facciamo:
• Realizziamo un primo semplicissimo sito web
• Cosa impareremo:
• Utilizzo delle funzionalità base dell’editor (comuni a molti prodotti simili) • Utilizzo delle principali componenti di una pagina WEB
Creazione di un sito Web
Una volta entrati, l’ambiente rende immediatamente disponibili le principali funzionalità.
Creazione di nuovi siti.
Gestione dei siti creati
precedentemente
Creazione di un sito Web
Creazione di un sito Web
Si procede alla scelta del nome del sito…
… e del tema.
Creazione di un sito Web
E’ possibile che in alcune fasi, il sistema voglia essere sicuro che l’utente sia effettivamente un essere umano e non un
BOT (Programma che realizza automaticamente un gran
numero di siti «fantasma» a scopi illeciti.
Per far questo, il sistema sfida l’utente con un CAPTCHA: una procedura che gli sottopone un problema che (presumibilmente) solo un umano può risolvere. Per esempio, qui si chiade di indicare i riquadri in cui appaiano strisce pedonali.
Creazione di un sito Web
Il sito appena creato appare pressappoco così. Si tratta di un layout molto semplice. In seguito vedremo come è possibile personalizzarlo.