# Compito di Refactoring CSS ## Obiettivo Trasforma il tuo progetto del terrario utilizzando tecniche moderne di layout CSS! Rifattorizza l'approccio attuale basato sul posizionamento assoluto per implementare **Flexbox** o **CSS Grid** e ottenere un design più manutenibile e responsivo. Questo compito ti sfida ad applicare gli standard moderni del CSS mantenendo l'estetica visiva del tuo terrario. Comprendere quando e come utilizzare i diversi metodi di layout è una competenza cruciale per lo sviluppo web moderno. Questo esercizio collega le tecniche di posizionamento tradizionali ai sistemi di layout contemporanei del CSS. ## Istruzioni per il compito ### Fase 1: Analisi e Pianificazione 1. **Esamina il codice attuale del tuo terrario** - Identifica quali elementi utilizzano attualmente il posizionamento assoluto 2. **Scegli il metodo di layout** - Decidi se Flexbox o CSS Grid si adatta meglio ai tuoi obiettivi di design 3. **Progetta la nuova struttura del layout** - Pianifica come organizzare i contenitori e gli elementi delle piante ### Fase 2: Implementazione 1. **Crea una nuova versione** del tuo progetto del terrario in una cartella separata 2. **Aggiorna la struttura HTML** se necessario per supportare il metodo di layout scelto 3. **Rifattorizza il CSS** per utilizzare Flexbox o CSS Grid invece del posizionamento assoluto 4. **Mantieni la coerenza visiva** - Assicurati che le piante e il barattolo del terrario appaiano nelle stesse posizioni 5. **Implementa un comportamento responsivo** - Il tuo layout dovrebbe adattarsi in modo fluido a diverse dimensioni dello schermo ### Fase 3: Test e Documentazione 1. **Test cross-browser** - Verifica che il tuo design funzioni su Chrome, Firefox, Edge e Safari 2. **Test responsivo** - Controlla il layout su schermi mobili, tablet e desktop 3. **Documentazione** - Aggiungi commenti al tuo CSS spiegando le scelte di layout 4. **Screenshot** - Cattura il tuo terrario in diversi browser e dimensioni dello schermo ## Requisiti tecnici ### Implementazione del layout - **Scegli UNO**: Implementa Flexbox OPPURE CSS Grid (non entrambi per gli stessi elementi) - **Design responsivo**: Usa unità relative (`rem`, `em`, `%`, `vw`, `vh`) invece di pixel fissi - **Accessibilità**: Mantieni una struttura HTML semantica corretta e testi alternativi - **Qualità del codice**: Usa convenzioni di denominazione coerenti e organizza il CSS in modo logico ### Funzionalità moderne del CSS da includere ```css /* Example Flexbox approach */ .terrarium-container { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; } .plant-containers { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; } /* Example Grid approach */ .terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; gap: 1rem; } ``` ### Requisiti di supporto browser - **Chrome/Edge**: Ultime 2 versioni - **Firefox**: Ultime 2 versioni - **Safari**: Ultime 2 versioni - **Browser mobili**: Safari iOS, Chrome Mobile ## Consegne 1. **File HTML aggiornato** con una struttura semantica migliorata 2. **File CSS rifattorizzato** utilizzando tecniche di layout moderne 3. **Collezione di screenshot** che mostrano la compatibilità cross-browser: - Vista desktop (1920x1080) - Vista tablet (768x1024) - Vista mobile (375x667) - Almeno 2 browser diversi 4. **File README.md** che documenta: - La scelta del layout (Flexbox vs Grid) e le motivazioni - Le difficoltà incontrate durante il refactoring - Note sulla compatibilità con i browser - Istruzioni per eseguire il codice ## Griglia di valutazione | Criteri | Esemplare (4) | Competente (3) | In via di sviluppo (2) | Principiante (1) | |---------|---------------|----------------|-------------------------|------------------| | **Implementazione del layout** | Uso magistrale di Flexbox/Grid con funzionalità avanzate; completamente responsivo | Implementazione corretta con buon comportamento responsivo | Implementazione di base con lievi problemi di responsività | Implementazione incompleta o errata | | **Qualità del codice** | CSS pulito, ben organizzato con commenti significativi e denominazione coerente | Buona organizzazione con alcuni commenti | Organizzazione adeguata con pochi commenti | Organizzazione scarsa; difficile da comprendere | | **Compatibilità cross-browser** | Perfetta coerenza su tutti i browser richiesti con screenshot | Buona compatibilità con lievi differenze documentate | Alcuni problemi di compatibilità che non compromettono la funzionalità | Gravi problemi di compatibilità o test mancanti | | **Design responsivo** | Approccio mobile-first eccezionale con punti di interruzione fluidi | Buon comportamento responsivo con punti di interruzione appropriati | Funzionalità responsiva di base con alcuni problemi di layout | Comportamento responsivo limitato o non funzionante | | **Documentazione** | README completo con spiegazioni dettagliate e approfondimenti | Buona documentazione che copre tutti gli elementi richiesti | Documentazione di base con poche spiegazioni | Documentazione incompleta o mancante | ## Risorse utili ### Guide ai metodi di layout - 📖 [Guida completa a Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - 📖 [Guida completa a CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - 📖 [Flexbox vs Grid - Scegli lo strumento giusto](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/) ### Strumenti per il test dei browser - 🛠️ [Modalità responsiva di Browser DevTools](https://developer.chrome.com/docs/devtools/device-mode/) - 🛠️ [Can I Use - Supporto funzionalità](https://caniuse.com/) - 🛠️ [BrowserStack - Test cross-browser](https://www.browserstack.com/) ### Strumenti per la qualità del codice - ✅ [Validatore CSS](https://jigsaw.w3.org/css-validator/) - ✅ [Validatore HTML](https://validator.w3.org/) - ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) ## Sfide extra 🌟 **Layout avanzati**: Implementa sia Flexbox CHE Grid in diverse parti del tuo design 🌟 **Integrazione di animazioni**: Aggiungi transizioni o animazioni CSS che funzionino con il tuo nuovo layout 🌟 **Modalità scura**: Implementa uno switcher di tema basato su proprietà personalizzate CSS 🌟 **Query sui contenitori**: Usa tecniche moderne di query sui contenitori per una responsività a livello di componente > 💡 **Ricorda**: L'obiettivo non è solo far funzionare il layout, ma comprendere PERCHÉ il metodo di layout scelto è la soluzione migliore per questa specifica sfida di design! --- **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.