Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
Introduzione
1Google Sites
Parte I
Google Sites
Libri di testo consigliati:
Ryan Teeter and Karl Barksdale
Google Sites & Chrome for Dummies
Wiley Publishing Inc. (2009)
ISBN 978-0-470-39678-0
3• 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. 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
Selezionare modalità «classica»
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
L’interfaccia di Google Sites sta cambiando. Da qui si accede a quella nuova.
Le slides che seguono si riferiscono a quella attuale.
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.
Il sito appena creato appare pressappoco così. Si tratta di un layout molto semplice. In seguito vedremo come è possibile personalizzarlo.
Creazione di un sito Web
In Google Sites, le principali funzionalità presentano una interfacci molto semplificata
Modifica (edit) la pagina corrente Crea una nuova pagina
Menù gestione pagine
Funzione di condivisione con altri utenti
• Funzioni per la manipolazione e l’utilizzo delle pagine nel sito.
• Gestione delle statistiche di revisione; • Gestione condivisione e notifiche • Anteprime…
Creazione di un sito Web
Una volta acceduti alle funzioni di editing (per la creazione o per la modifica) delle pagine
Inserimento componenti
Formato del testo
Creazione/modifica tabelle
Gestione del layout di pagina (come la pagina è suddivisa)
Funzioni di assistenza
Componenti elementari della pagina
Gadgets: Procedure di interazione
molto comuni, già pronteper l’uso. Interfaccia con altri servizi Google
Creazione di un sito Web
Impostazione del formato e dell’allineamento del testo. • titoli di vario livello: sottotitoli, capoversi…
• Apice, pedice
• Allineamento orizzontale
• Creazione, modifica ed eliminazione delle tabelle • Gestione di singole righe e colonne in una tabella
Creazione di un sito Web
Altre funzioni di editing
Font Corpo Stili: • Gassetto (bold) • Corsivo (Italics) • Sottolineato (underlined)
Colore del carattere e dello sfondo Link Elenchi numerati e puntati Allineamento al margine e centratura del testo Tabulazione
Creazione di un sito Web
Per inserire il contenuto della pagina basta posizionarsi sul riquadro desiderato e… scrivere. Al termine delle operazioni occorre utilizzare il «pulsante» Salva.
Premendo Annulla, si abbandona l’editor senza rendere effettive le modifiche eventualmente apportate
Dal menù guida è possibile accedere alla manualistica e a un riassunto degli
Creazione di un sito Web
Creaiamo una nuova pagina per i «contatti»
Assegnamo un nome alla pagina Indichiamo il punto in cui è collegata al sito (Sotto Home).
Indichiamo il punto in cui è collegata al sito (Sotto Home).
L’intera gerarchia del sito è consultabile nella pagina speciale «Mappa del sito»
Creazione di un sito Web
Creiamo una pagina «Esempi», questa volta posta allo stesso livello della Home.
Il testo inserito è:
«Breve carrellata di esempi semplici di composizione di pagine con Google Sites»
Selezioniamo il testo WYSIWYG e utilizziamolo per associarvi un collegamento ipertestuale (link) verso una pagina web esterna al nostro sito…
Creazione di un sito Web
Selezioniamo il testo WYSIWYG e utilizziamolo per associarvi un collegamento ipertestuale (link) verso una pagina web esterna al nostro sito…
Selezioniamo il testo WYSIWYG associato al link, si rendono disponibile i «controlli rapidi» per la sua manipolazione (attivazione, modifica o rimozione)
Creazione di un sito Web
Inseriamo del testo utilizzando un elenco numerato oppure modificando il font, etc. con gli appositi controlli…
corpom lo stile e il colore dei caratteri etc. con gli appositi controlli…
Creazione di un sito Web
Aggiungiamo un’immagine. Menù «inserisci» -> Immagine …
Selezioniamo l’immagine si rendono disponibile i «controlli rapidi» per la sua manipolazione (allineamento, dimensionamento o rimozione)
Creazione di un sito Web
• Creiamo la una nuova pagina intitolata: «Testo e tabelle». • La posizioniamo «sotto» la pagina
«Esempi».
• Apriamo la pagina e creiamo una tabella utilizzando l’apposito menù
Creazione di un sito Web
• Ulteriori righe e colonne possono essere aggiunte con le opportune voci del menù.
• Le locazioni «sopra», «sotto», «a destra» e «a sinistra» sono riferite all’oggetto selezionato (una cella).
• Trascinando i quadratini posti sul bordo della cella è possibile ridimensionarla.
Creazione di un sito Web
Realizzare una pagina «Di tutto un po’ 1» in cui sono presenti:
1) Un sottotitolo (Titolo di livello 2) «Top five delle lune del Sistema Solare»,
2) Una tabella di 6 righe e due colonne
3) Nelle celle della prima colonna c’è l’immagine del satellite, il suo nome (con link alla sua voce su Wikipedia) e il nome del pianeta intorno a cui orbita 4) Nelle celle della seconda colonna ci sono i diametri
delle rispettive lune espressi in Km.
Esercizio 1
