# Stile la tua app bancaria con CSS moderno ## Panoramica del progetto Trasforma la tua applicazione bancaria funzionale in un'app web visivamente accattivante e dall'aspetto professionale utilizzando tecniche CSS moderne. Creerai un sistema di design coerente che migliora l'esperienza utente mantenendo i principi di accessibilità e design responsivo. Questo compito ti sfida ad applicare modelli di design web contemporanei, implementare un'identità visiva coerente e creare un'interfaccia che gli utenti troveranno sia attraente che intuitiva da navigare. ## Istruzioni ### Passo 1: Configura il tuo foglio di stile **Crea la base del tuo CSS:** 1. **Crea** un nuovo file chiamato `styles.css` nella radice del tuo progetto 2. **Collega** il foglio di stile nel tuo file `index.html`: ```html ``` 3. **Inizia** con un reset CSS e impostazioni predefinite moderne: ```css /* Modern CSS reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; } ``` ### Passo 2: Requisiti del sistema di design **Implementa questi elementi essenziali di design:** #### Palette di colori - **Colore primario**: Scegli un colore professionale per pulsanti e punti salienti - **Colore secondario**: Colore complementare per accenti e azioni secondarie - **Colori neutri**: Toni di grigio per testo, bordi e sfondi - **Colori di successo/errore**: Verde per stati di successo, rosso per errori #### Tipografia - **Gerarchia dei titoli**: Chiara distinzione tra elementi H1, H2 e H3 - **Testo del corpo**: Dimensione del font leggibile (minimo 16px) e altezza della linea appropriata - **Etichette dei moduli**: Stile del testo chiaro e accessibile #### Layout e spaziatura - **Spaziatura coerente**: Usa una scala di spaziatura (8px, 16px, 24px, 32px) - **Sistema a griglia**: Layout organizzato per moduli e sezioni di contenuto - **Design responsivo**: Approccio mobile-first con punti di interruzione ### Passo 3: Stile dei componenti **Stilizza questi componenti specifici:** #### Moduli - **Campi di input**: Bordi professionali, stati di focus e stile di validazione - **Pulsanti**: Effetti hover, stati disabilitati e indicatori di caricamento - **Etichette**: Posizionamento chiaro e indicatori di campo obbligatorio - **Messaggi di errore**: Stile di errore visibile e messaggi utili #### Navigazione - **Intestazione**: Area di navigazione pulita e con marchio - **Link**: Stati hover chiari e indicatori attivi - **Logo/Titolo**: Elemento distintivo del marchio #### Aree di contenuto - **Sezioni**: Chiara separazione visiva tra le diverse aree - **Card**: Se utilizzi layout basati su card, includi ombre e bordi - **Sfondi**: Uso appropriato dello spazio bianco e sfondi sottili ### Passo 4: Funzionalità avanzate (opzionale) **Considera di implementare queste funzionalità avanzate:** - **Modalità scura**: Alterna tra temi chiari e scuri - **Animazioni**: Transizioni sottili e micro-interazioni - **Stati di caricamento**: Feedback visivo durante l'invio dei moduli - **Immagini responsive**: Immagini ottimizzate per diverse dimensioni dello schermo ## Ispirazione per il design **Caratteristiche moderne delle app bancarie:** - **Design pulito e minimalista** con molto spazio bianco - **Schemi di colori professionali** (blu, verdi o neutri sofisticati) - **Gerarchia visiva chiara** con pulsanti di call-to-action prominenti - **Rapporti di contrasto accessibili** che rispettano le linee guida WCAG - **Layout responsivi** che funzionano su tutti i dispositivi ## Requisiti tecnici ### Organizzazione del CSS ```css /* 1. CSS Custom Properties (Variables) */ :root { --primary-color: #007bff; --secondary-color: #6c757d; /* Add more variables */ } /* 2. Base Styles */ /* Reset, typography, general elements */ /* 3. Layout */ /* Grid, flexbox, positioning */ /* 4. Components */ /* Forms, buttons, cards */ /* 5. Utilities */ /* Helper classes, responsive utilities */ /* 6. Media Queries */ /* Responsive breakpoints */ ``` ### Requisiti di accessibilità - **Contrasto dei colori**: Assicurati di avere un rapporto di almeno 4.5:1 per il testo normale - **Indicatori di focus**: Stati di focus visibili per la navigazione tramite tastiera - **Etichette dei moduli**: Correttamente associate agli input - **Design responsivo**: Utilizzabile su schermi da 320px a 1920px di larghezza ## Griglia di valutazione | Criteri | Esemplare (A) | Proficiente (B) | In via di sviluppo (C) | Necessita miglioramenti (F) | |---------|---------------|-----------------|-------------------------|-----------------------------| | **Sistema di design** | Implementa un sistema di design completo con colori, tipografia e spaziatura coerenti | Utilizza uno stile coerente con schemi di design chiari e buona gerarchia visiva | Stile di base applicato con alcune incoerenze o elementi di design mancanti | Stile minimo con scelte di design incoerenti o in conflitto | | **Esperienza utente** | Crea un'interfaccia intuitiva e professionale con eccellente usabilità e appeal visivo | Fornisce una buona esperienza utente con navigazione chiara e contenuto leggibile | Usabilità di base con alcuni miglioramenti necessari | Scarsa usabilità, difficile da navigare o leggere | | **Implementazione tecnica** | Utilizza tecniche CSS moderne, struttura del codice organizzata e segue le migliori pratiche | Implementa CSS in modo efficace con buona organizzazione e tecniche appropriate | CSS funziona correttamente ma potrebbe mancare di organizzazione o approcci moderni | Implementazione CSS scarsa con problemi tecnici o di compatibilità del browser | | **Design responsivo** | Design completamente responsivo che funziona perfettamente su tutte le dimensioni dei dispositivi | Buon comportamento responsivo con problemi minori su alcune dimensioni dello schermo | Implementazione responsiva di base con alcuni problemi di layout | Non responsivo o problemi significativi su dispositivi mobili | | **Accessibilità** | Rispetta le linee guida WCAG con eccellente navigazione tramite tastiera e supporto per screen reader | Buone pratiche di accessibilità con contrasto e indicatori di focus adeguati | Considerazioni di base sull'accessibilità con alcuni elementi mancanti | Scarsa accessibilità, difficile per gli utenti con disabilità | ## Linee guida per la consegna **Includi nella tua consegna:** - **styles.css**: Il tuo foglio di stile completo - **HTML aggiornato**: Eventuali modifiche HTML che hai apportato - **Screenshot**: Immagini che mostrano il tuo design su desktop e mobile - **README**: Breve descrizione delle tue scelte di design e della palette di colori **Punti bonus per:** - **Proprietà personalizzate CSS** per un tema mantenibile - **Funzionalità CSS avanzate** come Grid, Flexbox o animazioni CSS - **Considerazioni sulle prestazioni** come CSS ottimizzato e dimensioni minime dei file - **Test cross-browser** per garantire la compatibilità tra diversi browser > 💡 **Suggerimento Pro**: Inizia con il design per dispositivi mobili, poi miglioralo per schermi più grandi. Questo approccio mobile-first garantisce che la tua app funzioni bene su tutti i dispositivi e segua le migliori pratiche di sviluppo web moderno. --- **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.