Programmazione 2F
NextJS
App esempio
npx create-next-app@latest
Scelte:
Se da il seguente errore (permessi)
Usare il seguente comando:Set-ExecutionPolicy unrestricted -Scope CurrentUser
Se vi compare un errore relativo all'aggiornamento di npm o altro fate così:npm install -g npm@latest
Se compare un errore relativo all'esecuzione di script in PowerShell aprirla come amministratore ed eseguire:Set-ExecutionPolicy Unrestricted
#todo
Apri la cartella dell'applicazione su Visual Studio Code
Riconoscimento TAG in nextJS:
- Vai su File → Preferenze → Impostazioni
- cerca emmet.includeLanguages
- completa come nella foto
Dal terminale:npm run dev
#todo
Apri nel browser l'url dell'applicazione:
Collegarsi via Browser a localhost:3000
Home page con componenti
Titolo Esercizio: Creazione di una Homepage Personale con Layout e Componenti
Consegna:
Dovrete creare la homepage di un sito web. Il sito avrà un tema specifico (assegnato individualmente, vedi sotto) e dovrà rispettare i seguenti requisiti:
-
Layout Condiviso:
- La homepage deve utilizzare un layout condiviso.
- Questo layout conterrà la navbar (vedi punto 2) e gestirà la struttura di base di tutte le pagine del sito (anche se per questo esercizio creerete solo la homepage).
-
Navbar:
- Create un componente Navbar.js (o adattatene uno esistente).
- La navbar deve essere inclusa nel layout condiviso.
- Deve contenere:
- Un logo.
- Almeno tre link di navigazione: "Home", "Progetti" (o "Portfolio"), e "Contatti". Per ora, i link possono puntare a # (segnaposto).
- Utilizzate Tailwind CSS per stilizzare la navbar.
-
Immagine Hero:
- Create un componente Hero.js.
- La homepage deve includere un'immagine "hero" immediatamente sotto la navbar.
- Questa immagine deve:
- Avere un rapporto di aspetto di 4:1 (larghezza 4 volte l'altezza).
- Occupare tutta la larghezza della finestra del browser.
- Avere un titolo e un breve testo sovrapposti, posizionati in modo che siano ben leggibili (facoltativo).
- L'immagine deve essere pertinente al tema assegnato al vostro sito.
-
Componenti Preesistenti (da adattare e riutilizzare):
- Dovete utilizzare i seguenti componenti, che avete già creato (o che creerete, se non li avete ancora):
-
Bannerone: Usatelo almeno una volta nella homepage. Pensate a come posizionarlo in modo strategico. Adattate il testo del banner al tema del vostro sito.
-
Product: Usatelo almeno quattro volte. Le card devono mostrare contenuti diversi, ma coerenti con il tema del vostro sito. Ad esempio, se il sito è un portfolio di un fotografo, le card potrebbero mostrare diverse foto; se è un blog di cucina, potrebbero mostrare diverse ricette.
-
Struttura della Homepage (app/page.js):
- La homepage deve includere, in ordine:
- La Hero section (con l'immagine 4:1).
- Il componente Bannerone.
- Almeno quattro componenti Card.
-
Stilizzazione:
- Tutto il sito deve essere stilizzato utilizzando Tailwind CSS.
-
Temi Individuali:
- Ognuno di voi avrà un tema specifico per il proprio sito web:
-
BASSETTO MATTIA: Sito portfolio per un fotografo naturalista.
-
CAGAYAN MENGO ALESSANDRO: Blog di viaggi, focus su destinazioni esotiche.
-
CALZAVARA CARLO ANDREA: Sito web per un musicista/band (genere: rock).
-
CANCIAN ACHILLE: Portfolio di un web designer/developer.
-
CAPIOTTO FILIPPO: Blog di cucina, focus su ricette vegane.
-
COSI FILIPPO: Sito portfolio per un illustratore digitale.
-
DRIUSSO GIULIANO: Blog personale su argomenti di tecnologia e programmazione.
-
KRASNIQI ARDISON: Sito web per un personal trainer/fitness coach.
-
MAFTEUTA LIVIU: Blog di recensioni di libri (genere: fantasy/sci-fi).
-
MASCHIETTO DEBRA: Sito portfolio per una make-up artist.
-
POLI PIETRO: Sito web per un'attività di vendita di prodotti artigianali (es. gioielli, ceramiche).
-
PURISIOL ACHILLE: Blog di giardinaggio e cura delle piante.
-
RIVOLI LUCA: Sito portfolio per un videomaker/filmmaker.
-
ROMAN CARLO: Blog di storia locale, con focus sulla propria città/regione.
-
SOCAL MATTIA: Sito web per un'associazione sportiva locale (es. calcio, basket).
-
VIGANO’ PIERPAOLO: Portfolio di un architetto/interior designer.
-
ZOIA MANUEL: Blog di recensioni di videogiochi.
- Scegliete immagini, colori, font e contenuti coerenti con il tema assegnato.
Home page e chi siamo
VIETATO USARE CHAT GPT E ALTRE IA PER GENERARE CODICE, AL MASSIMO PER CHIEDERE PROPRIETA' TAILWIND O INFO. CHI USERA IA PERDERA' TUTTI I PUNTI CON UN CONSEGUENTE 4 (VERETE INTERROGATI SUL CODICE).
LEGGERE MOOOOLTO BENE LA CONSEGNA GRAZIE!
Esercizio: Costruzione di un Sito Web Semplice con Componenti Riusabili
Durata: 1 ore
Obiettivo: Creare un sito web semplice con una homepage, utilizzando componenti riusabili e personalizzati, con particolare attenzione al footer(opzionale) e all'Hero Section.
Requisiti:
-
Nuovo Repository:
- Crea un nuovo repository su GitHub per questo progetto.
-
Layout Condiviso:
- Utilizzare un layout condiviso (layout.js) che includa:
- Navbar (componente Navbar.js)
- Footer (nuovo componente Footer.js) - Il footer contiene in genere informazioni di contatto base (es. email), copyright, e social media (facoltativo).
-
Navbar:
- Utilizzare il componente Navbar.js preesistente, personalizzandolo con Tailwind CSS.
- Aggiungere i link: "Home", "Chi siamo", e "Contatti".
-
Footer (opzionale ma fino 300 punti):
- Creare un nuovo componente Footer.js che includa:
- Informazioni di contatto (es. un indirizzo email).
- Un breve messaggio di copyright.
- Facoltativo: Icone dei social media con link.
- Utilizzare Tailwind CSS per stilizzare il footer.
-
Homepage (app/page.js):
- Creare una homepage con:
-
Hero Section:
- Creare un componente Hero.js che includa:
- Un'immagine di sfondo a tutta larghezza, pertinente al tema.
- Un titolo principale che descriva lo scopo del sito, sovrapposto all'immagine(opzionale).
- Una breve descrizione, anch'essa sovrapposta all'immagine(opzionale).
- Utilizzare almeno 2 Card preesistenti e personalizzate, con temi coerenti al tema del singolo studente.
- Un Bannerone.
-
Stilizzazione:
- Utilizzare Tailwind CSS per stilizzare l'intero sito web.
- Assicurarsi che il design sia coerente e responsivo.
Temi Individuali:
-
BASSETTO MATTIA: Sito di recensioni di film.
-
CAGAYAN MENGO ALESSANDRO: Blog di videogiochi retro.
-
CALZAVARA CARLO ANDREA: Sito di ricette facili.
-
CANCIAN ACHILLE: Sito di consigli per la cura degli animali domestici.
-
CAPIOTTO FILIPPO: Sito di notizie locali.
-
COSI FILIPPO: Sito di frasi motivazionali.
-
DRIUSSO GIULIANO: Guida base alla programmazione.
-
KRASNIQI ARDISON: Consigli per una vita sana.
-
MAFTEUTA LIVIU: Recensioni di giochi da tavolo.
-
MASCHIETTO DEBRA: Tutorial per principianti, Cinema.
-
POLI PIETRO: Sito di consigli per il fai da te.
-
PURISIOL ACHILLE: Consigli per la cura del proprio giardino.
-
RIVOLI LUCA: Recensioni di attrezzatura video base.
-
ROMAN CARLO: Eventi della città.
-
SOCAL MATTIA: Classifica squadre locali.
-
VIGANO’ PIERPAOLO: Consigli di design per la casa.
-
ZOIA MANUEL: Elenco giochi per bambini.
Note aggiuntive:
- Personalizzare MOLTO i componenti preesistenti con stili e contenuti unici.
- Utilizzare immagini e icone pertinenti.
- Rendere il sito web facile da navigare e intuitivo.
Passaggio proprietà
In questo esempio vediamo una pagina che usa la griglia di Bootstrap per visualizzare tre Card, passando a ognuna un diverso attributo titolo:
Nota: quando in JSX vogliamo scrivere un blocco di JavaScript puro, lo mettiamo tra parentesi graffe, come ad esempio in { props.titolo }.
Ecco come comporre il percorso di un file per passarlo come prop a un elemento img:
Destrutturare le props
È possibile prendere l'oggetto props ricevuto e destrutturarlo in singole variabili:
Passare props diverse da stringhe
In questo esempio vediamo come passare dei valori booleani, numerici o addirittura degli array come props, inserendoli tra parentesi graffe (ricorda che il codice all'interno viene valutato come semplice JavaScript):
Componenti con props
Creare nuovo repository
Usare il componente Card per personalizzare 3 card
Usare il componente Product per personalizzare 4 Product
Usare il componente Login per personalizzare 1 Login
Usare il componente Iscrizione per personalizzare 1 Iscrizione
Dovete personalizzare tutte le informazioni dei componenti, ovvero titoli, testi, immagini , e link
BASSETTO MATTIA: "Cinematographe" (Recensioni cinematografiche)
CAGAYAN MENGO ALESSANDRO: "Retrogaming Italia" (Blog di videogiochi retro)
CALZAVARA CARLO ANDREA: "Cucina Facile" (Ricette semplici e veloci)
CANCIAN ACHILLE: "Amici Animali" (Consigli per la cura degli animali)
CAPIOTTO FILIPPO: "Notizie della Nostra Città" (Informazioni locali)
COSI FILIPPO: "Rivoluzione Francese"
DRIUSSO GIULIANO: "Programmare Facile" (Guida introduttiva alla programmazione)
KRASNIQI ARDISON: "Vivere Sani" (Consigli per la salute)
MAFTEUTA LIVIU: "Gioca con Noi" (Recensioni di giochi da tavolo)
MASCHIETTO DEBRA: "Cinema per Tutti" (Tutorial per principianti sul cinema)
POLI PIETRO: "Fai da Te Facile" (Guide per il fai da te)
PURISIOL ACHILLE: "Giardini Felici" (Consigli per la cura del giardino)
RIVOLI LUCA: "Video Maker Principianti" (Recensioni di attrezzatura video)
ROMAN CARLO: "Eventi in Città" (Calendario eventi locali)
SOCAL MATTIA: "Sport di Casa" (Classifiche sportive locali)
VIGANO’ PIERPAOLO: "Casa Bella" (Consigli di design per la casa)
ZOIA MANUEL: "Giochi per Bambini" (Elenco di giochi per l'infanzia)
Passaggio con oggetti
Per prima cose definiamo nella pagina page.js un oggetto JavaScript con tutti i dettagli del post:
Lo passeremo come props del componente che andremo a creare:
Ricordati di importare il componente.
Nel nostro componente dobbiamo ricordarci di inserire nelle tonde della funzione il nome della props con le parentesi graffe{ }:
Nel componente userò le props con il nome_della_props.proprietà
esempio: post.immagine
Sito con props
Consegna del Progetto: Sviluppo di un Sito Web con Next.js
Obiettivo:
Creare un sito web semplice ma funzionale utilizzando Next.js e i componenti forniti (Navbar, Card, Product/Bannerone, Iscrizione). Il sito deve essere composto da almeno due pagine e seguire il tema assegnato. Il sito deve essere popolato usando le props e i componenti devono essere rivoluzionati usando CSS
Studenti e Temi:
-
BASSETTO MATTIA: "Racconti Brevi" (Storie di fantasia concise)
-
CAGAYAN MENGO ALESSANDRO: "Esplora le Piante" (Guida alle piante da appartamento)
-
CALZAVARA CARLO ANDREA: "Disegna Facile" (Tutorial di disegno per principianti)
-
CANCIAN ACHILLE: "Suoni del Mondo" (Raccolta di suoni rilassanti)
-
CAPIOTTO FILIPPO: "Il Meteo di Oggi" (Previsioni del tempo locali)
-
COSI FILIPPO: "Viaggi Brevi" (Itinerari per weekend fuori porta)
-
DRIUSSO GIULIANO: "Impara le Parole" (Vocabolario di base di una lingua straniera)
-
KRASNIQI ARDISON: "Ridi con Noi" (Barzellette e brevi storie divertenti)
-
MAFTEUTA LIVIU: "Costruisci con i Lego" (Idee creative con i Lego)
-
MASCHIETTO DEBRA: "Canta con Noi" (Testi di canzoni popolari)
-
POLI PIETRO: "Ricicla Facile" (Idee per riutilizzare oggetti comuni)
-
PURISIOL ACHILLE: "Osserva le Stelle" (Guida introduttiva all'astronomia)
-
RIVOLI LUCA: "Fotografa Facile" (Consigli per scattare foto migliori)
-
ROMAN CARLO: "Le Ricette della Nonna" (Ricette tradizionali)
-
SOCAL MATTIA: "Quiz Time" (Quiz interattivi su argomenti vari)
-
VIGANO’ PIERPAOLO: "Crea con la Carta" (Origami e lavoretti con la carta)
-
ZOIA MANUEL: "Il Mondo dei Colori" (Attività e giochi sui colori)
Requisiti:
-
Pagine:
-
Home Page: Pagina principale con titolo, descrizione del tema, elenco di contenuti (utilizzando le Card) e, se pertinente, Bannerone/Product e Iscrizione.
-
Pagina "Articolo/Contenuto": Pagina dedicata a un articolo, guida o risorsa specifica, con testo dettagliato, immagini e/o video.
-
Componenti:
-
Navbar: Utilizzare il componente Navbar nella pagina layout.js per la navigazione tra le pagine.
-
Card: Utilizzare le Card per presentare i contenuti nella Home Page.
-
Product e Bannerone: Utilizzare in modo creativo.
-
Iscrizione: componente di iscrizione ad una news letter.
-
Layout:
- Usare la navbar.
- Aggiungere un footer (facoltativo).
-
Contenuto:
- Utilizzare testo chiaro e conciso, adatto al pubblico di riferimento.
- Aggiungere immagini, video o altri elementi multimediali per arricchire il contenuto.
-
Valutazione:
-
Funzionalità: Il sito deve funzionare correttamente e la navigazione deve essere fluida.
-
Design: Il sito deve avere un design accattivante e coerente.
-
Contenuto: Il contenuto deve essere pertinente, chiaro e ben presentato.
-
Originalità: Si valuterà l'originalità del contenuto e del design.
-
Utilizzo di Next.js: Si valuterà l'utilizzo corretto di Next.js e dei suoi componenti.
-
Consegna:
- Avete 6 ore di tempo per completarlo
-
Suggerimenti:
- Pianificare la struttura del sito prima di iniziare a scrivere il codice.
- prendere i componenti già sviluppati con le props
- Cancellare il contenuto di global CSS(tranne l'import di tailwind), creare la cartella components e images
- Usare commit e push
-
Ricordate: L'obiettivo principale è creare un sito web semplice, funzionale e accattivante che dimostri la vostra comprensione di Next.js, dei suoi componenti e Tailwind.
Il metodo Map
Questa operazione viene chiamata mappatura:
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Mapping di Array
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
npx create-next-app@latest
Scelte:
Se da il seguente errore (permessi)
Usare il seguente comando:Set-ExecutionPolicy unrestricted -Scope CurrentUser
Se vi compare un errore relativo all'aggiornamento di npm o altro fate così:npm install -g npm@latest
Se compare un errore relativo all'esecuzione di script in PowerShell aprirla come amministratore ed eseguire:Set-ExecutionPolicy Unrestricted
#todo
Apri la cartella dell'applicazione su Visual Studio Code
Riconoscimento TAG in nextJS:
- Vai su File → Preferenze → Impostazioni
- cerca emmet.includeLanguages
- completa come nella foto
Dal terminale:
npm run dev
#todo
Apri nel browser l'url dell'applicazione:
Collegarsi via Browser a localhost:3000
Home page con componenti
Titolo Esercizio: Creazione di una Homepage Personale con Layout e Componenti
Consegna:
Dovrete creare la homepage di un sito web. Il sito avrà un tema specifico (assegnato individualmente, vedi sotto) e dovrà rispettare i seguenti requisiti:
-
Layout Condiviso:
- La homepage deve utilizzare un layout condiviso.
- Questo layout conterrà la navbar (vedi punto 2) e gestirà la struttura di base di tutte le pagine del sito (anche se per questo esercizio creerete solo la homepage).
-
Navbar:
- Create un componente Navbar.js (o adattatene uno esistente).
- La navbar deve essere inclusa nel layout condiviso.
- Deve contenere:
- Un logo.
- Almeno tre link di navigazione: "Home", "Progetti" (o "Portfolio"), e "Contatti". Per ora, i link possono puntare a # (segnaposto).
- Utilizzate Tailwind CSS per stilizzare la navbar.
-
Immagine Hero:
- Create un componente Hero.js.
- La homepage deve includere un'immagine "hero" immediatamente sotto la navbar.
- Questa immagine deve:
- Avere un rapporto di aspetto di 4:1 (larghezza 4 volte l'altezza).
- Occupare tutta la larghezza della finestra del browser.
- Avere un titolo e un breve testo sovrapposti, posizionati in modo che siano ben leggibili (facoltativo).
- L'immagine deve essere pertinente al tema assegnato al vostro sito.
-
Componenti Preesistenti (da adattare e riutilizzare):
- Dovete utilizzare i seguenti componenti, che avete già creato (o che creerete, se non li avete ancora):
-
Bannerone: Usatelo almeno una volta nella homepage. Pensate a come posizionarlo in modo strategico. Adattate il testo del banner al tema del vostro sito.
-
Product: Usatelo almeno quattro volte. Le card devono mostrare contenuti diversi, ma coerenti con il tema del vostro sito. Ad esempio, se il sito è un portfolio di un fotografo, le card potrebbero mostrare diverse foto; se è un blog di cucina, potrebbero mostrare diverse ricette.
-
Struttura della Homepage (app/page.js):
- La homepage deve includere, in ordine:
- La Hero section (con l'immagine 4:1).
- Il componente Bannerone.
- Almeno quattro componenti Card.
-
Stilizzazione:
- Tutto il sito deve essere stilizzato utilizzando Tailwind CSS.
-
Temi Individuali:
- Ognuno di voi avrà un tema specifico per il proprio sito web:
-
BASSETTO MATTIA: Sito portfolio per un fotografo naturalista.
-
CAGAYAN MENGO ALESSANDRO: Blog di viaggi, focus su destinazioni esotiche.
-
CALZAVARA CARLO ANDREA: Sito web per un musicista/band (genere: rock).
-
CANCIAN ACHILLE: Portfolio di un web designer/developer.
-
CAPIOTTO FILIPPO: Blog di cucina, focus su ricette vegane.
-
COSI FILIPPO: Sito portfolio per un illustratore digitale.
-
DRIUSSO GIULIANO: Blog personale su argomenti di tecnologia e programmazione.
-
KRASNIQI ARDISON: Sito web per un personal trainer/fitness coach.
-
MAFTEUTA LIVIU: Blog di recensioni di libri (genere: fantasy/sci-fi).
-
MASCHIETTO DEBRA: Sito portfolio per una make-up artist.
-
POLI PIETRO: Sito web per un'attività di vendita di prodotti artigianali (es. gioielli, ceramiche).
-
PURISIOL ACHILLE: Blog di giardinaggio e cura delle piante.
-
RIVOLI LUCA: Sito portfolio per un videomaker/filmmaker.
-
ROMAN CARLO: Blog di storia locale, con focus sulla propria città/regione.
-
SOCAL MATTIA: Sito web per un'associazione sportiva locale (es. calcio, basket).
-
VIGANO’ PIERPAOLO: Portfolio di un architetto/interior designer.
-
ZOIA MANUEL: Blog di recensioni di videogiochi.
- Scegliete immagini, colori, font e contenuti coerenti con il tema assegnato.
Home page e chi siamo
VIETATO USARE CHAT GPT E ALTRE IA PER GENERARE CODICE, AL MASSIMO PER CHIEDERE PROPRIETA' TAILWIND O INFO. CHI USERA IA PERDERA' TUTTI I PUNTI CON UN CONSEGUENTE 4 (VERETE INTERROGATI SUL CODICE).
LEGGERE MOOOOLTO BENE LA CONSEGNA GRAZIE!
Esercizio: Costruzione di un Sito Web Semplice con Componenti Riusabili
Durata: 1 ore
Obiettivo: Creare un sito web semplice con una homepage, utilizzando componenti riusabili e personalizzati, con particolare attenzione al footer(opzionale) e all'Hero Section.
Requisiti:
-
Nuovo Repository:
- Crea un nuovo repository su GitHub per questo progetto.
-
Layout Condiviso:
- Utilizzare un layout condiviso (layout.js) che includa:
- Navbar (componente Navbar.js)
- Footer (nuovo componente Footer.js) - Il footer contiene in genere informazioni di contatto base (es. email), copyright, e social media (facoltativo).
-
Navbar:
- Utilizzare il componente Navbar.js preesistente, personalizzandolo con Tailwind CSS.
- Aggiungere i link: "Home", "Chi siamo", e "Contatti".
-
Footer (opzionale ma fino 300 punti):
- Creare un nuovo componente Footer.js che includa:
- Informazioni di contatto (es. un indirizzo email).
- Un breve messaggio di copyright.
- Facoltativo: Icone dei social media con link.
- Utilizzare Tailwind CSS per stilizzare il footer.
-
Homepage (app/page.js):
- Creare una homepage con:
-
Hero Section:
- Creare un componente Hero.js che includa:
- Un'immagine di sfondo a tutta larghezza, pertinente al tema.
- Un titolo principale che descriva lo scopo del sito, sovrapposto all'immagine(opzionale).
- Una breve descrizione, anch'essa sovrapposta all'immagine(opzionale).
- Utilizzare almeno 2 Card preesistenti e personalizzate, con temi coerenti al tema del singolo studente.
- Un Bannerone.
-
Stilizzazione:
- Utilizzare Tailwind CSS per stilizzare l'intero sito web.
- Assicurarsi che il design sia coerente e responsivo.
Temi Individuali:
-
BASSETTO MATTIA: Sito di recensioni di film.
-
CAGAYAN MENGO ALESSANDRO: Blog di videogiochi retro.
-
CALZAVARA CARLO ANDREA: Sito di ricette facili.
-
CANCIAN ACHILLE: Sito di consigli per la cura degli animali domestici.
-
CAPIOTTO FILIPPO: Sito di notizie locali.
-
COSI FILIPPO: Sito di frasi motivazionali.
-
DRIUSSO GIULIANO: Guida base alla programmazione.
-
KRASNIQI ARDISON: Consigli per una vita sana.
-
MAFTEUTA LIVIU: Recensioni di giochi da tavolo.
-
MASCHIETTO DEBRA: Tutorial per principianti, Cinema.
-
POLI PIETRO: Sito di consigli per il fai da te.
-
PURISIOL ACHILLE: Consigli per la cura del proprio giardino.
-
RIVOLI LUCA: Recensioni di attrezzatura video base.
-
ROMAN CARLO: Eventi della città.
-
SOCAL MATTIA: Classifica squadre locali.
-
VIGANO’ PIERPAOLO: Consigli di design per la casa.
-
ZOIA MANUEL: Elenco giochi per bambini.
Note aggiuntive:
- Personalizzare MOLTO i componenti preesistenti con stili e contenuti unici.
- Utilizzare immagini e icone pertinenti.
- Rendere il sito web facile da navigare e intuitivo.
Passaggio proprietà
In questo esempio vediamo una pagina che usa la griglia di Bootstrap per visualizzare tre Card, passando a ognuna un diverso attributo titolo:
Nota: quando in JSX vogliamo scrivere un blocco di JavaScript puro, lo mettiamo tra parentesi graffe, come ad esempio in { props.titolo }.
Ecco come comporre il percorso di un file per passarlo come prop a un elemento img:
Destrutturare le props
È possibile prendere l'oggetto props ricevuto e destrutturarlo in singole variabili:
Passare props diverse da stringhe
In questo esempio vediamo come passare dei valori booleani, numerici o addirittura degli array come props, inserendoli tra parentesi graffe (ricorda che il codice all'interno viene valutato come semplice JavaScript):
Componenti con props
Creare nuovo repository
Usare il componente Card per personalizzare 3 card
Usare il componente Product per personalizzare 4 Product
Usare il componente Login per personalizzare 1 Login
Usare il componente Iscrizione per personalizzare 1 Iscrizione
Dovete personalizzare tutte le informazioni dei componenti, ovvero titoli, testi, immagini , e link
BASSETTO MATTIA: "Cinematographe" (Recensioni cinematografiche)
CAGAYAN MENGO ALESSANDRO: "Retrogaming Italia" (Blog di videogiochi retro)
CALZAVARA CARLO ANDREA: "Cucina Facile" (Ricette semplici e veloci)
CANCIAN ACHILLE: "Amici Animali" (Consigli per la cura degli animali)
CAPIOTTO FILIPPO: "Notizie della Nostra Città" (Informazioni locali)
COSI FILIPPO: "Rivoluzione Francese"
DRIUSSO GIULIANO: "Programmare Facile" (Guida introduttiva alla programmazione)
KRASNIQI ARDISON: "Vivere Sani" (Consigli per la salute)
MAFTEUTA LIVIU: "Gioca con Noi" (Recensioni di giochi da tavolo)
MASCHIETTO DEBRA: "Cinema per Tutti" (Tutorial per principianti sul cinema)
POLI PIETRO: "Fai da Te Facile" (Guide per il fai da te)
PURISIOL ACHILLE: "Giardini Felici" (Consigli per la cura del giardino)
RIVOLI LUCA: "Video Maker Principianti" (Recensioni di attrezzatura video)
ROMAN CARLO: "Eventi in Città" (Calendario eventi locali)
SOCAL MATTIA: "Sport di Casa" (Classifiche sportive locali)
VIGANO’ PIERPAOLO: "Casa Bella" (Consigli di design per la casa)
ZOIA MANUEL: "Giochi per Bambini" (Elenco di giochi per l'infanzia)
Passaggio con oggetti
Per prima cose definiamo nella pagina page.js un oggetto JavaScript con tutti i dettagli del post:
Lo passeremo come props del componente che andremo a creare:
Ricordati di importare il componente.
Nel nostro componente dobbiamo ricordarci di inserire nelle tonde della funzione il nome della props con le parentesi graffe{ }:
Nel componente userò le props con il nome_della_props.proprietà
esempio: post.immagine
Sito con props
Consegna del Progetto: Sviluppo di un Sito Web con Next.js
Obiettivo:
Creare un sito web semplice ma funzionale utilizzando Next.js e i componenti forniti (Navbar, Card, Product/Bannerone, Iscrizione). Il sito deve essere composto da almeno due pagine e seguire il tema assegnato. Il sito deve essere popolato usando le props e i componenti devono essere rivoluzionati usando CSS
Studenti e Temi:
-
BASSETTO MATTIA: "Racconti Brevi" (Storie di fantasia concise)
-
CAGAYAN MENGO ALESSANDRO: "Esplora le Piante" (Guida alle piante da appartamento)
-
CALZAVARA CARLO ANDREA: "Disegna Facile" (Tutorial di disegno per principianti)
-
CANCIAN ACHILLE: "Suoni del Mondo" (Raccolta di suoni rilassanti)
-
CAPIOTTO FILIPPO: "Il Meteo di Oggi" (Previsioni del tempo locali)
-
COSI FILIPPO: "Viaggi Brevi" (Itinerari per weekend fuori porta)
-
DRIUSSO GIULIANO: "Impara le Parole" (Vocabolario di base di una lingua straniera)
-
KRASNIQI ARDISON: "Ridi con Noi" (Barzellette e brevi storie divertenti)
-
MAFTEUTA LIVIU: "Costruisci con i Lego" (Idee creative con i Lego)
-
MASCHIETTO DEBRA: "Canta con Noi" (Testi di canzoni popolari)
-
POLI PIETRO: "Ricicla Facile" (Idee per riutilizzare oggetti comuni)
-
PURISIOL ACHILLE: "Osserva le Stelle" (Guida introduttiva all'astronomia)
-
RIVOLI LUCA: "Fotografa Facile" (Consigli per scattare foto migliori)
-
ROMAN CARLO: "Le Ricette della Nonna" (Ricette tradizionali)
-
SOCAL MATTIA: "Quiz Time" (Quiz interattivi su argomenti vari)
-
VIGANO’ PIERPAOLO: "Crea con la Carta" (Origami e lavoretti con la carta)
-
ZOIA MANUEL: "Il Mondo dei Colori" (Attività e giochi sui colori)
Requisiti:
-
Pagine:
-
Home Page: Pagina principale con titolo, descrizione del tema, elenco di contenuti (utilizzando le Card) e, se pertinente, Bannerone/Product e Iscrizione.
-
Pagina "Articolo/Contenuto": Pagina dedicata a un articolo, guida o risorsa specifica, con testo dettagliato, immagini e/o video.
-
Componenti:
-
Navbar: Utilizzare il componente Navbar nella pagina layout.js per la navigazione tra le pagine.
-
Card: Utilizzare le Card per presentare i contenuti nella Home Page.
-
Product e Bannerone: Utilizzare in modo creativo.
-
Iscrizione: componente di iscrizione ad una news letter.
-
Layout:
- Usare la navbar.
- Aggiungere un footer (facoltativo).
-
Contenuto:
- Utilizzare testo chiaro e conciso, adatto al pubblico di riferimento.
- Aggiungere immagini, video o altri elementi multimediali per arricchire il contenuto.
-
Valutazione:
-
Funzionalità: Il sito deve funzionare correttamente e la navigazione deve essere fluida.
-
Design: Il sito deve avere un design accattivante e coerente.
-
Contenuto: Il contenuto deve essere pertinente, chiaro e ben presentato.
-
Originalità: Si valuterà l'originalità del contenuto e del design.
-
Utilizzo di Next.js: Si valuterà l'utilizzo corretto di Next.js e dei suoi componenti.
-
Consegna:
- Avete 6 ore di tempo per completarlo
-
Suggerimenti:
- Pianificare la struttura del sito prima di iniziare a scrivere il codice.
- prendere i componenti già sviluppati con le props
- Cancellare il contenuto di global CSS(tranne l'import di tailwind), creare la cartella components e images
- Usare commit e push
-
Ricordate: L'obiettivo principale è creare un sito web semplice, funzionale e accattivante che dimostri la vostra comprensione di Next.js, dei suoi componenti e Tailwind.
Il metodo Map
Questa operazione viene chiamata mappatura:
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Mapping di Array
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Titolo Esercizio: Creazione di una Homepage Personale con Layout e Componenti
Consegna:
Dovrete creare la homepage di un sito web. Il sito avrà un tema specifico (assegnato individualmente, vedi sotto) e dovrà rispettare i seguenti requisiti:
-
Layout Condiviso:
- La homepage deve utilizzare un layout condiviso.
- Questo layout conterrà la navbar (vedi punto 2) e gestirà la struttura di base di tutte le pagine del sito (anche se per questo esercizio creerete solo la homepage).
-
Navbar:
- Create un componente Navbar.js (o adattatene uno esistente).
- La navbar deve essere inclusa nel layout condiviso.
- Deve contenere:
- Un logo.
- Almeno tre link di navigazione: "Home", "Progetti" (o "Portfolio"), e "Contatti". Per ora, i link possono puntare a # (segnaposto).
- Utilizzate Tailwind CSS per stilizzare la navbar.
-
Immagine Hero:
- Create un componente Hero.js.
- La homepage deve includere un'immagine "hero" immediatamente sotto la navbar.
- Questa immagine deve:
- Avere un rapporto di aspetto di 4:1 (larghezza 4 volte l'altezza).
- Occupare tutta la larghezza della finestra del browser.
- Avere un titolo e un breve testo sovrapposti, posizionati in modo che siano ben leggibili (facoltativo).
- L'immagine deve essere pertinente al tema assegnato al vostro sito.
-
Componenti Preesistenti (da adattare e riutilizzare):
- Dovete utilizzare i seguenti componenti, che avete già creato (o che creerete, se non li avete ancora):
- Bannerone: Usatelo almeno una volta nella homepage. Pensate a come posizionarlo in modo strategico. Adattate il testo del banner al tema del vostro sito.
- Product: Usatelo almeno quattro volte. Le card devono mostrare contenuti diversi, ma coerenti con il tema del vostro sito. Ad esempio, se il sito è un portfolio di un fotografo, le card potrebbero mostrare diverse foto; se è un blog di cucina, potrebbero mostrare diverse ricette.
- Dovete utilizzare i seguenti componenti, che avete già creato (o che creerete, se non li avete ancora):
-
Struttura della Homepage (app/page.js):
- La homepage deve includere, in ordine:
- La Hero section (con l'immagine 4:1).
- Il componente Bannerone.
- Almeno quattro componenti Card.
- La homepage deve includere, in ordine:
-
Stilizzazione:
- Tutto il sito deve essere stilizzato utilizzando Tailwind CSS.
-
Temi Individuali:
- Ognuno di voi avrà un tema specifico per il proprio sito web:
- BASSETTO MATTIA: Sito portfolio per un fotografo naturalista.
- CAGAYAN MENGO ALESSANDRO: Blog di viaggi, focus su destinazioni esotiche.
- CALZAVARA CARLO ANDREA: Sito web per un musicista/band (genere: rock).
- CANCIAN ACHILLE: Portfolio di un web designer/developer.
- CAPIOTTO FILIPPO: Blog di cucina, focus su ricette vegane.
- COSI FILIPPO: Sito portfolio per un illustratore digitale.
- DRIUSSO GIULIANO: Blog personale su argomenti di tecnologia e programmazione.
- KRASNIQI ARDISON: Sito web per un personal trainer/fitness coach.
- MAFTEUTA LIVIU: Blog di recensioni di libri (genere: fantasy/sci-fi).
- MASCHIETTO DEBRA: Sito portfolio per una make-up artist.
- POLI PIETRO: Sito web per un'attività di vendita di prodotti artigianali (es. gioielli, ceramiche).
- PURISIOL ACHILLE: Blog di giardinaggio e cura delle piante.
- RIVOLI LUCA: Sito portfolio per un videomaker/filmmaker.
- ROMAN CARLO: Blog di storia locale, con focus sulla propria città/regione.
- SOCAL MATTIA: Sito web per un'associazione sportiva locale (es. calcio, basket).
- VIGANO’ PIERPAOLO: Portfolio di un architetto/interior designer.
- ZOIA MANUEL: Blog di recensioni di videogiochi.
- Scegliete immagini, colori, font e contenuti coerenti con il tema assegnato.
- Ognuno di voi avrà un tema specifico per il proprio sito web:
VIETATO USARE CHAT GPT E ALTRE IA PER GENERARE CODICE, AL MASSIMO PER CHIEDERE PROPRIETA' TAILWIND O INFO. CHI USERA IA PERDERA' TUTTI I PUNTI CON UN CONSEGUENTE 4 (VERETE INTERROGATI SUL CODICE).
LEGGERE MOOOOLTO BENE LA CONSEGNA GRAZIE!
Esercizio: Costruzione di un Sito Web Semplice con Componenti Riusabili
Durata: 1 ore
Obiettivo: Creare un sito web semplice con una homepage, utilizzando componenti riusabili e personalizzati, con particolare attenzione al footer(opzionale) e all'Hero Section.
Requisiti:
-
Nuovo Repository:
- Crea un nuovo repository su GitHub per questo progetto.
-
Layout Condiviso:
- Utilizzare un layout condiviso (layout.js) che includa:
- Navbar (componente Navbar.js)
- Footer (nuovo componente Footer.js) - Il footer contiene in genere informazioni di contatto base (es. email), copyright, e social media (facoltativo).
- Utilizzare un layout condiviso (layout.js) che includa:
-
Navbar:
- Utilizzare il componente Navbar.js preesistente, personalizzandolo con Tailwind CSS.
- Aggiungere i link: "Home", "Chi siamo", e "Contatti".
-
Footer (opzionale ma fino 300 punti):
- Creare un nuovo componente Footer.js che includa:
- Informazioni di contatto (es. un indirizzo email).
- Un breve messaggio di copyright.
- Facoltativo: Icone dei social media con link.
- Utilizzare Tailwind CSS per stilizzare il footer.
- Creare un nuovo componente Footer.js che includa:
-
Homepage (app/page.js):
- Creare una homepage con:
-
Hero Section:
- Creare un componente Hero.js che includa:
- Un'immagine di sfondo a tutta larghezza, pertinente al tema.
- Un titolo principale che descriva lo scopo del sito, sovrapposto all'immagine(opzionale).
- Una breve descrizione, anch'essa sovrapposta all'immagine(opzionale).
- Creare un componente Hero.js che includa:
- Utilizzare almeno 2 Card preesistenti e personalizzate, con temi coerenti al tema del singolo studente.
- Un Bannerone.
-
Hero Section:
- Creare una homepage con:
-
Stilizzazione:
- Utilizzare Tailwind CSS per stilizzare l'intero sito web.
- Assicurarsi che il design sia coerente e responsivo.
Temi Individuali:
- BASSETTO MATTIA: Sito di recensioni di film.
- CAGAYAN MENGO ALESSANDRO: Blog di videogiochi retro.
- CALZAVARA CARLO ANDREA: Sito di ricette facili.
- CANCIAN ACHILLE: Sito di consigli per la cura degli animali domestici.
- CAPIOTTO FILIPPO: Sito di notizie locali.
- COSI FILIPPO: Sito di frasi motivazionali.
- DRIUSSO GIULIANO: Guida base alla programmazione.
- KRASNIQI ARDISON: Consigli per una vita sana.
- MAFTEUTA LIVIU: Recensioni di giochi da tavolo.
- MASCHIETTO DEBRA: Tutorial per principianti, Cinema.
- POLI PIETRO: Sito di consigli per il fai da te.
- PURISIOL ACHILLE: Consigli per la cura del proprio giardino.
- RIVOLI LUCA: Recensioni di attrezzatura video base.
- ROMAN CARLO: Eventi della città.
- SOCAL MATTIA: Classifica squadre locali.
- VIGANO’ PIERPAOLO: Consigli di design per la casa.
- ZOIA MANUEL: Elenco giochi per bambini.
Note aggiuntive:
- Personalizzare MOLTO i componenti preesistenti con stili e contenuti unici.
- Utilizzare immagini e icone pertinenti.
- Rendere il sito web facile da navigare e intuitivo.
Passaggio proprietà
In questo esempio vediamo una pagina che usa la griglia di Bootstrap per visualizzare tre Card, passando a ognuna un diverso attributo titolo:
Nota: quando in JSX vogliamo scrivere un blocco di JavaScript puro, lo mettiamo tra parentesi graffe, come ad esempio in { props.titolo }.
Ecco come comporre il percorso di un file per passarlo come prop a un elemento img:
Destrutturare le props
È possibile prendere l'oggetto props ricevuto e destrutturarlo in singole variabili:
Passare props diverse da stringhe
In questo esempio vediamo come passare dei valori booleani, numerici o addirittura degli array come props, inserendoli tra parentesi graffe (ricorda che il codice all'interno viene valutato come semplice JavaScript):
Componenti con props
Creare nuovo repository
Usare il componente Card per personalizzare 3 card
Usare il componente Product per personalizzare 4 Product
Usare il componente Login per personalizzare 1 Login
Usare il componente Iscrizione per personalizzare 1 Iscrizione
Dovete personalizzare tutte le informazioni dei componenti, ovvero titoli, testi, immagini , e link
BASSETTO MATTIA: "Cinematographe" (Recensioni cinematografiche)
CAGAYAN MENGO ALESSANDRO: "Retrogaming Italia" (Blog di videogiochi retro)
CALZAVARA CARLO ANDREA: "Cucina Facile" (Ricette semplici e veloci)
CANCIAN ACHILLE: "Amici Animali" (Consigli per la cura degli animali)
CAPIOTTO FILIPPO: "Notizie della Nostra Città" (Informazioni locali)
COSI FILIPPO: "Rivoluzione Francese"
DRIUSSO GIULIANO: "Programmare Facile" (Guida introduttiva alla programmazione)
KRASNIQI ARDISON: "Vivere Sani" (Consigli per la salute)
MAFTEUTA LIVIU: "Gioca con Noi" (Recensioni di giochi da tavolo)
MASCHIETTO DEBRA: "Cinema per Tutti" (Tutorial per principianti sul cinema)
POLI PIETRO: "Fai da Te Facile" (Guide per il fai da te)
PURISIOL ACHILLE: "Giardini Felici" (Consigli per la cura del giardino)
RIVOLI LUCA: "Video Maker Principianti" (Recensioni di attrezzatura video)
ROMAN CARLO: "Eventi in Città" (Calendario eventi locali)
SOCAL MATTIA: "Sport di Casa" (Classifiche sportive locali)
VIGANO’ PIERPAOLO: "Casa Bella" (Consigli di design per la casa)
ZOIA MANUEL: "Giochi per Bambini" (Elenco di giochi per l'infanzia)
Passaggio con oggetti
Per prima cose definiamo nella pagina page.js un oggetto JavaScript con tutti i dettagli del post:
Lo passeremo come props del componente che andremo a creare:
Ricordati di importare il componente.
Nel nostro componente dobbiamo ricordarci di inserire nelle tonde della funzione il nome della props con le parentesi graffe{ }:
Nel componente userò le props con il nome_della_props.proprietà
esempio: post.immagine
Sito con props
Consegna del Progetto: Sviluppo di un Sito Web con Next.js
Obiettivo:
Creare un sito web semplice ma funzionale utilizzando Next.js e i componenti forniti (Navbar, Card, Product/Bannerone, Iscrizione). Il sito deve essere composto da almeno due pagine e seguire il tema assegnato. Il sito deve essere popolato usando le props e i componenti devono essere rivoluzionati usando CSS
Studenti e Temi:
-
BASSETTO MATTIA: "Racconti Brevi" (Storie di fantasia concise)
-
CAGAYAN MENGO ALESSANDRO: "Esplora le Piante" (Guida alle piante da appartamento)
-
CALZAVARA CARLO ANDREA: "Disegna Facile" (Tutorial di disegno per principianti)
-
CANCIAN ACHILLE: "Suoni del Mondo" (Raccolta di suoni rilassanti)
-
CAPIOTTO FILIPPO: "Il Meteo di Oggi" (Previsioni del tempo locali)
-
COSI FILIPPO: "Viaggi Brevi" (Itinerari per weekend fuori porta)
-
DRIUSSO GIULIANO: "Impara le Parole" (Vocabolario di base di una lingua straniera)
-
KRASNIQI ARDISON: "Ridi con Noi" (Barzellette e brevi storie divertenti)
-
MAFTEUTA LIVIU: "Costruisci con i Lego" (Idee creative con i Lego)
-
MASCHIETTO DEBRA: "Canta con Noi" (Testi di canzoni popolari)
-
POLI PIETRO: "Ricicla Facile" (Idee per riutilizzare oggetti comuni)
-
PURISIOL ACHILLE: "Osserva le Stelle" (Guida introduttiva all'astronomia)
-
RIVOLI LUCA: "Fotografa Facile" (Consigli per scattare foto migliori)
-
ROMAN CARLO: "Le Ricette della Nonna" (Ricette tradizionali)
-
SOCAL MATTIA: "Quiz Time" (Quiz interattivi su argomenti vari)
-
VIGANO’ PIERPAOLO: "Crea con la Carta" (Origami e lavoretti con la carta)
-
ZOIA MANUEL: "Il Mondo dei Colori" (Attività e giochi sui colori)
Requisiti:
-
Pagine:
-
Home Page: Pagina principale con titolo, descrizione del tema, elenco di contenuti (utilizzando le Card) e, se pertinente, Bannerone/Product e Iscrizione.
-
Pagina "Articolo/Contenuto": Pagina dedicata a un articolo, guida o risorsa specifica, con testo dettagliato, immagini e/o video.
-
Componenti:
-
Navbar: Utilizzare il componente Navbar nella pagina layout.js per la navigazione tra le pagine.
-
Card: Utilizzare le Card per presentare i contenuti nella Home Page.
-
Product e Bannerone: Utilizzare in modo creativo.
-
Iscrizione: componente di iscrizione ad una news letter.
-
Layout:
- Usare la navbar.
- Aggiungere un footer (facoltativo).
-
Contenuto:
- Utilizzare testo chiaro e conciso, adatto al pubblico di riferimento.
- Aggiungere immagini, video o altri elementi multimediali per arricchire il contenuto.
-
Valutazione:
-
Funzionalità: Il sito deve funzionare correttamente e la navigazione deve essere fluida.
-
Design: Il sito deve avere un design accattivante e coerente.
-
Contenuto: Il contenuto deve essere pertinente, chiaro e ben presentato.
-
Originalità: Si valuterà l'originalità del contenuto e del design.
-
Utilizzo di Next.js: Si valuterà l'utilizzo corretto di Next.js e dei suoi componenti.
-
Consegna:
- Avete 6 ore di tempo per completarlo
-
Suggerimenti:
- Pianificare la struttura del sito prima di iniziare a scrivere il codice.
- prendere i componenti già sviluppati con le props
- Cancellare il contenuto di global CSS(tranne l'import di tailwind), creare la cartella components e images
- Usare commit e push
-
Ricordate: L'obiettivo principale è creare un sito web semplice, funzionale e accattivante che dimostri la vostra comprensione di Next.js, dei suoi componenti e Tailwind.
Il metodo Map
Questa operazione viene chiamata mappatura:
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Mapping di Array
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
In questo esempio vediamo una pagina che usa la griglia di Bootstrap per visualizzare tre Card, passando a ognuna un diverso attributo titolo:
Il componente che disegna la card è questo. Gli attributi vengono passati nell'oggetto props, che è possibile utilizzare per mostrare una specifica proprietà, come ad esempio props.titolo:
Nota: quando in JSX vogliamo scrivere un blocco di JavaScript puro, lo mettiamo tra parentesi graffe, come ad esempio in { props.titolo }.
Ecco come comporre il percorso di un file per passarlo come prop a un elemento img:
Destrutturare le props
È possibile prendere l'oggetto props ricevuto e destrutturarlo in singole variabili:
Passare props diverse da stringhe
In questo esempio vediamo come passare dei valori booleani, numerici o addirittura degli array come props, inserendoli tra parentesi graffe (ricorda che il codice all'interno viene valutato come semplice JavaScript):
Creare nuovo repository
Usare il componente Card per personalizzare 3 card
Usare il componente Product per personalizzare 4 Product
Usare il componente Login per personalizzare 1 Login
Usare il componente Iscrizione per personalizzare 1 Iscrizione
Dovete personalizzare tutte le informazioni dei componenti, ovvero titoli, testi, immagini , e link
BASSETTO MATTIA: "Cinematographe" (Recensioni cinematografiche)
Usare il componente Card per personalizzare 3 card
Usare il componente Product per personalizzare 4 Product
Usare il componente Login per personalizzare 1 Login
Usare il componente Iscrizione per personalizzare 1 Iscrizione
Dovete personalizzare tutte le informazioni dei componenti, ovvero titoli, testi, immagini , e link
BASSETTO MATTIA: "Cinematographe" (Recensioni cinematografiche)
CAGAYAN MENGO ALESSANDRO: "Retrogaming Italia" (Blog di videogiochi retro)
CALZAVARA CARLO ANDREA: "Cucina Facile" (Ricette semplici e veloci)
CANCIAN ACHILLE: "Amici Animali" (Consigli per la cura degli animali)
CAPIOTTO FILIPPO: "Notizie della Nostra Città" (Informazioni locali)
COSI FILIPPO: "Rivoluzione Francese"
DRIUSSO GIULIANO: "Programmare Facile" (Guida introduttiva alla programmazione)
KRASNIQI ARDISON: "Vivere Sani" (Consigli per la salute)
MAFTEUTA LIVIU: "Gioca con Noi" (Recensioni di giochi da tavolo)
MASCHIETTO DEBRA: "Cinema per Tutti" (Tutorial per principianti sul cinema)
POLI PIETRO: "Fai da Te Facile" (Guide per il fai da te)
PURISIOL ACHILLE: "Giardini Felici" (Consigli per la cura del giardino)
RIVOLI LUCA: "Video Maker Principianti" (Recensioni di attrezzatura video)
ROMAN CARLO: "Eventi in Città" (Calendario eventi locali)
SOCAL MATTIA: "Sport di Casa" (Classifiche sportive locali)
VIGANO’ PIERPAOLO: "Casa Bella" (Consigli di design per la casa)
ZOIA MANUEL: "Giochi per Bambini" (Elenco di giochi per l'infanzia)
Passaggio con oggetti
Per prima cose definiamo nella pagina page.js un oggetto JavaScript con tutti i dettagli del post:
Lo passeremo come props del componente che andremo a creare:
Ricordati di importare il componente.
Nel nostro componente dobbiamo ricordarci di inserire nelle tonde della funzione il nome della props con le parentesi graffe{ }:
Nel componente userò le props con il nome_della_props.proprietà
esempio: post.immagine
Sito con props
Consegna del Progetto: Sviluppo di un Sito Web con Next.js
Obiettivo:
Creare un sito web semplice ma funzionale utilizzando Next.js e i componenti forniti (Navbar, Card, Product/Bannerone, Iscrizione). Il sito deve essere composto da almeno due pagine e seguire il tema assegnato. Il sito deve essere popolato usando le props e i componenti devono essere rivoluzionati usando CSS
Studenti e Temi:
-
BASSETTO MATTIA: "Racconti Brevi" (Storie di fantasia concise)
-
CAGAYAN MENGO ALESSANDRO: "Esplora le Piante" (Guida alle piante da appartamento)
-
CALZAVARA CARLO ANDREA: "Disegna Facile" (Tutorial di disegno per principianti)
-
CANCIAN ACHILLE: "Suoni del Mondo" (Raccolta di suoni rilassanti)
-
CAPIOTTO FILIPPO: "Il Meteo di Oggi" (Previsioni del tempo locali)
-
COSI FILIPPO: "Viaggi Brevi" (Itinerari per weekend fuori porta)
-
DRIUSSO GIULIANO: "Impara le Parole" (Vocabolario di base di una lingua straniera)
-
KRASNIQI ARDISON: "Ridi con Noi" (Barzellette e brevi storie divertenti)
-
MAFTEUTA LIVIU: "Costruisci con i Lego" (Idee creative con i Lego)
-
MASCHIETTO DEBRA: "Canta con Noi" (Testi di canzoni popolari)
-
POLI PIETRO: "Ricicla Facile" (Idee per riutilizzare oggetti comuni)
-
PURISIOL ACHILLE: "Osserva le Stelle" (Guida introduttiva all'astronomia)
-
RIVOLI LUCA: "Fotografa Facile" (Consigli per scattare foto migliori)
-
ROMAN CARLO: "Le Ricette della Nonna" (Ricette tradizionali)
-
SOCAL MATTIA: "Quiz Time" (Quiz interattivi su argomenti vari)
-
VIGANO’ PIERPAOLO: "Crea con la Carta" (Origami e lavoretti con la carta)
-
ZOIA MANUEL: "Il Mondo dei Colori" (Attività e giochi sui colori)
Requisiti:
-
Pagine:
-
Home Page: Pagina principale con titolo, descrizione del tema, elenco di contenuti (utilizzando le Card) e, se pertinente, Bannerone/Product e Iscrizione.
-
Pagina "Articolo/Contenuto": Pagina dedicata a un articolo, guida o risorsa specifica, con testo dettagliato, immagini e/o video.
-
Componenti:
-
Navbar: Utilizzare il componente Navbar nella pagina layout.js per la navigazione tra le pagine.
-
Card: Utilizzare le Card per presentare i contenuti nella Home Page.
-
Product e Bannerone: Utilizzare in modo creativo.
-
Iscrizione: componente di iscrizione ad una news letter.
-
Layout:
- Usare la navbar.
- Aggiungere un footer (facoltativo).
-
Contenuto:
- Utilizzare testo chiaro e conciso, adatto al pubblico di riferimento.
- Aggiungere immagini, video o altri elementi multimediali per arricchire il contenuto.
-
Valutazione:
-
Funzionalità: Il sito deve funzionare correttamente e la navigazione deve essere fluida.
-
Design: Il sito deve avere un design accattivante e coerente.
-
Contenuto: Il contenuto deve essere pertinente, chiaro e ben presentato.
-
Originalità: Si valuterà l'originalità del contenuto e del design.
-
Utilizzo di Next.js: Si valuterà l'utilizzo corretto di Next.js e dei suoi componenti.
-
Consegna:
- Avete 6 ore di tempo per completarlo
-
Suggerimenti:
- Pianificare la struttura del sito prima di iniziare a scrivere il codice.
- prendere i componenti già sviluppati con le props
- Cancellare il contenuto di global CSS(tranne l'import di tailwind), creare la cartella components e images
- Usare commit e push
-
Ricordate: L'obiettivo principale è creare un sito web semplice, funzionale e accattivante che dimostri la vostra comprensione di Next.js, dei suoi componenti e Tailwind.
Il metodo Map
Questa operazione viene chiamata mappatura:
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Mapping di Array
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Per prima cose definiamo nella pagina page.js un oggetto JavaScript con tutti i dettagli del post:
Lo passeremo come props del componente che andremo a creare:
Ricordati di importare il componente.
Nel nostro componente dobbiamo ricordarci di inserire nelle tonde della funzione il nome della props con le parentesi graffe{ }:
Nel componente userò le props con il nome_della_props.proprietà
esempio: post.immagine
Consegna del Progetto: Sviluppo di un Sito Web con Next.js
Obiettivo:
Creare un sito web semplice ma funzionale utilizzando Next.js e i componenti forniti (Navbar, Card, Product/Bannerone, Iscrizione). Il sito deve essere composto da almeno due pagine e seguire il tema assegnato.
Il sito deve essere popolato usando le props e i componenti devono essere rivoluzionati usando CSS
Studenti e Temi:
- BASSETTO MATTIA: "Racconti Brevi" (Storie di fantasia concise)
- CAGAYAN MENGO ALESSANDRO: "Esplora le Piante" (Guida alle piante da appartamento)
- CALZAVARA CARLO ANDREA: "Disegna Facile" (Tutorial di disegno per principianti)
- CANCIAN ACHILLE: "Suoni del Mondo" (Raccolta di suoni rilassanti)
- CAPIOTTO FILIPPO: "Il Meteo di Oggi" (Previsioni del tempo locali)
- COSI FILIPPO: "Viaggi Brevi" (Itinerari per weekend fuori porta)
- DRIUSSO GIULIANO: "Impara le Parole" (Vocabolario di base di una lingua straniera)
- KRASNIQI ARDISON: "Ridi con Noi" (Barzellette e brevi storie divertenti)
- MAFTEUTA LIVIU: "Costruisci con i Lego" (Idee creative con i Lego)
- MASCHIETTO DEBRA: "Canta con Noi" (Testi di canzoni popolari)
- POLI PIETRO: "Ricicla Facile" (Idee per riutilizzare oggetti comuni)
- PURISIOL ACHILLE: "Osserva le Stelle" (Guida introduttiva all'astronomia)
- RIVOLI LUCA: "Fotografa Facile" (Consigli per scattare foto migliori)
- ROMAN CARLO: "Le Ricette della Nonna" (Ricette tradizionali)
- SOCAL MATTIA: "Quiz Time" (Quiz interattivi su argomenti vari)
- VIGANO’ PIERPAOLO: "Crea con la Carta" (Origami e lavoretti con la carta)
- ZOIA MANUEL: "Il Mondo dei Colori" (Attività e giochi sui colori)
Requisiti:
-
Pagine:
- Home Page: Pagina principale con titolo, descrizione del tema, elenco di contenuti (utilizzando le Card) e, se pertinente, Bannerone/Product e Iscrizione.
- Pagina "Articolo/Contenuto": Pagina dedicata a un articolo, guida o risorsa specifica, con testo dettagliato, immagini e/o video.
-
Componenti:
- Navbar: Utilizzare il componente Navbar nella pagina layout.js per la navigazione tra le pagine.
- Card: Utilizzare le Card per presentare i contenuti nella Home Page.
- Product e Bannerone: Utilizzare in modo creativo.
- Iscrizione: componente di iscrizione ad una news letter.
-
Layout:
- Usare la navbar.
- Aggiungere un footer (facoltativo).
-
Contenuto:
- Utilizzare testo chiaro e conciso, adatto al pubblico di riferimento.
- Aggiungere immagini, video o altri elementi multimediali per arricchire il contenuto.
-
Valutazione:
- Funzionalità: Il sito deve funzionare correttamente e la navigazione deve essere fluida.
- Design: Il sito deve avere un design accattivante e coerente.
- Contenuto: Il contenuto deve essere pertinente, chiaro e ben presentato.
- Originalità: Si valuterà l'originalità del contenuto e del design.
- Utilizzo di Next.js: Si valuterà l'utilizzo corretto di Next.js e dei suoi componenti.
-
Consegna:
- Avete 6 ore di tempo per completarlo
-
Suggerimenti:
- Pianificare la struttura del sito prima di iniziare a scrivere il codice.
- prendere i componenti già sviluppati con le props
- Cancellare il contenuto di global CSS(tranne l'import di tailwind), creare la cartella components e images
- Usare commit e push
- Ricordate: L'obiettivo principale è creare un sito web semplice, funzionale e accattivante che dimostri la vostra comprensione di Next.js, dei suoi componenti e Tailwind.
Il metodo Map
Questa operazione viene chiamata mappatura:
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Mapping di Array
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
In questo esempio viene creato un nuovo array quadrati prendendo ogni numero e calcolandone il quadrato.
Questa operazione viene chiamata mappatura:
A .map() viene passata come argomento una funzione che restituisce il quadrato del numero (num*num).
In questo altro esempio mappiamo ogni nome con una versione dello stesso nome con l'iniziale maiuscola:
Nota: viene passata una funzione anonima usando la sintassi delle funzioni "freccia".
Possiamo sfruttare il metodo .map per creare una serie di bottoni.
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Apri il file di una pagina a tua scelta (o creane una nuova) e crea dopo la sezione import un array con i nomi dei bottoni:
Crea una nuova sezione che usa il metodo map per mappare ogni stringa in un list item (li):
Come vedi map prende ogni singolo elemento dell'array bottoni e lo mette nella variabile temporanea nome.
Sarà quindi possibile usare nome per creare il list item corrispondente.
Trasformiamo ora i list item nei rispettivi bottoni, inseriti in un componente Stack di MUI (ricordati di importarlo):
Product con map
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Simulazione home page sito reale
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
-
MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Modificare il componente product in modo che sia compatibile con il metodo map
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
Creare in una pagina a piacere con 10 product completamente popolati dalle props usando map
BASSETTO MATTIA: "Prime Parole" (Vocabolario essenziale di una lingua straniera)
CAGAYAN MENGO ALESSANDRO: "Cucina" (Ricette semplici e tradizionali)
CALZAVARA CARLO ANDREA: "Storie per Bambini" (Racconti semplici per l'infanzia)
CANCIAN ACHILLE: "Fotografia Facile" (Consigli di base per foto migliori)
CAPIOTTO FILIPPO: "Lavoretti di Carta" (Attività semplici con la carta)
COSI FILIPPO: "Barzellette e Sorrisi" (Raccolta di barzellette per bambini)
DRIUSSO GIULIANO: "Piante in Casa" (Consigli pratici per la cura delle piante da appartamento)
KRASNIQI ARDISON: "Il Tempo di Oggi" (Informazioni meteo giornaliere)
MAFTEUTA LIVIU: "Primi Disegni" (Le basi del disegno per chi inizia)
MASCHIETTO DEBRA: "Suoni della Natura" (Registrazioni di suoni rilassanti di ambienti naturali)
POLI PIETRO: "Costruzioni Lego" (Progetti semplici con i mattoncini Lego)
PURISIOL ACHILLE: "Riciclo Creativo" (Idee per riutilizzare materiali di scarto)
RIVOLI LUCA: "Canzoni per Tutti" (Testi di canzoni popolari per bambini)
ROMAN CARLO: "Guardiamo le Stelle" (Introduzione all'osservazione del cielo notturno)
SOCAL MATTIA: "Gite Vicino a Te" (Idee per brevi escursioni locali)
VIGANO’ PIERPAOLO: "Giochi a Quiz" (Domande e risposte su argomenti semplici)
ZOIA MANUEL: "I Colori" (Attività di base con i colori)
Ricreare in modo identico, con le competenze conosciute, le seguenti home page
HTML.it:
HTML.it:
- URL: https://www.html.it/
w3schools.com:
- URL: https://www.w3schools.com/
- MDN Web Docs:
BASSETTO MATTIA: HTML.it
CAGAYAN MENGO ALESSANDRO: w3schools.com
CALZAVARA CARLO ANDREA: MDN Web Docs
CANCIAN ACHILLE: HTML.it
CAPIOTTO FILIPPO: w3schools.com
COSI FILIPPO: MDN Web Docs
DRIUSSO GIULIANO: HTML.it
KRASNIQI ARDISON: w3schools.com
MAFTEUTA LIVIU: MDN Web Docs
MASCHIETTO DEBRA: HTML.it
POLI PIETRO: w3schools.com
PURISIOL ACHILLE: MDN Web Docs
RIVOLI LUCA: HTML.it
ROMAN CARLO: w3schools.com
SOCAL MATTIA: MDN Web Docs
VIGANO’ PIERPAOLO: HTML.it
ZOIA MANUEL: w3schools.com
Tailwind
Icone molto belle
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Iscrizione
Card
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Product
Bannerone
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Login
Navbar
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Sei sicuro?
Dati personali
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Card Venice
Sei sicuro Responsive
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Modificare il componente Sei sicuro, e renderlo responsive in modo che su schermi piccoli l'input e il bottone non siano uno di fianco l'altro ma uno sotto l'altro.
Dati personali responsive
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.
Modificale il componente dati personali in modo che sia responsive, ovvero su schermi per telefono che i fari form siano impilati.