1F Cecchetto
Versioning
Installazione VS Code
Impostazione della lingua italiana
Per impostare lingua italiana premere ctrl maiusc p, cercare configure display language, selezionare la lingua italiano
Autosave
Consigliamo di abilitare il salvataggio automatico dei file:
menù File > Auto Save
Estensioni VS Code
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Temi
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Impostazione della lingua italiana
Per impostare lingua italiana premere ctrl maiusc p, cercare configure display language, selezionare la lingua italiano
Autosave
Consigliamo di abilitare il salvataggio automatico dei file:
menù File > Auto Save
menù File > Auto Save
Estensioni VS Code
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Temi
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:
git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:
git config --global user.name "Nome Cognome" git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Per andare a capo in un paragrafo si utilizza il tag solo in apertura <br>. esempio:
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Per mettere in grassetto del testo usa il tag <b></b>, per metterlo in corsivo uso <i></i> e per sottolinearlo uso <u></u>.
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Se premo il link "questo è un link", verrò portato alla pagina www.google.com.
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
- AMADIO MARCO: "La mia passione per la musica"
- BONESSO ALESSANDRO: "Il mondo dei videogiochi"
- BURATTO FILIPPO: "Viaggi e avventure"
- BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
- CAL DAVID: "L'arte del disegno"
- EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
- EL YAQOUTI KHALIL: "Il fascino della scienza"
- EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
- FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
- FUSER TOMMASO: "La tecnologia e il futuro"
- GANGAN IGOR: "Il mondo degli animali"
- GORGHETTO NICOLA: "La passione per le auto"
- HOXHA MATEO: "L'arte della fotografia"
- LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
- MIFTARI AMADEO: "Il fascino dello spazio"
- PALUDETTO ALESSANDRO: "Il mondo della moda"
- PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
- PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
- ROHAMAT RAHIM ULLAH: "La bellezza della natura"
- VIANELLO MATTEO: "Il design e l'architettura"
- XIA JIAJUN: "L'arte della scultura"
- ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
- Un paragrafo introduttivo (p) dove presentarsi:
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.