# Στυλιζάρετε την Εφαρμογή Τράπεζάς σας με Σύγχρονο CSS ## Επισκόπηση Έργου Μεταμορφώστε την λειτουργική τραπεζική σας εφαρμογή σε μια οπτικά ελκυστική, επαγγελματική ιστοσελίδα χρησιμοποιώντας σύγχρονες τεχνικές CSS. Θα δημιουργήσετε ένα συνεκτικό σύστημα σχεδίασης που βελτιώνει την εμπειρία χρήστη, διατηρώντας παράλληλα τις αρχές προσβασιμότητας και ευέλικτου σχεδιασμού. Αυτή η εργασία σας προκαλεί να εφαρμόσετε σύγχρονα πρότυπα σχεδίασης ιστοσελίδων, να υλοποιήσετε μια συνεπή οπτική ταυτότητα και να δημιουργήσετε μια διεπαφή που οι χρήστες θα βρίσκουν ελκυστική και εύκολη στην πλοήγηση. ## Οδηγίες ### Βήμα 1: Ρύθμιση του Stylesheet σας **Δημιουργήστε τη βάση του CSS σας:** 1. **Δημιουργήστε** ένα νέο αρχείο με όνομα `styles.css` στον κεντρικό φάκελο του έργου σας. 2. **Συνδέστε** το stylesheet στο αρχείο `index.html`: ```html ``` 3. **Ξεκινήστε** με επαναφορά CSS και σύγχρονες προεπιλογές: ```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; } ``` ### Βήμα 2: Απαιτήσεις Συστήματος Σχεδίασης **Υλοποιήστε αυτά τα βασικά στοιχεία σχεδίασης:** #### Παλέτα Χρωμάτων - **Κύριο χρώμα**: Επιλέξτε ένα επαγγελματικό χρώμα για κουμπιά και επισημάνσεις. - **Δευτερεύον χρώμα**: Συμπληρωματικό χρώμα για λεπτομέρειες και δευτερεύουσες ενέργειες. - **Ουδέτερα χρώματα**: Αποχρώσεις του γκρι για κείμενο, περιγράμματα και φόντα. - **Χρώματα επιτυχίας/σφάλματος**: Πράσινο για καταστάσεις επιτυχίας, κόκκινο για σφάλματα. #### Τυπογραφία - **Ιεραρχία επικεφαλίδων**: Σαφής διάκριση μεταξύ των στοιχείων H1, H2 και H3. - **Κείμενο σώματος**: Αναγνώσιμο μέγεθος γραμματοσειράς (τουλάχιστον 16px) και κατάλληλο ύψος γραμμής. - **Ετικέτες φορμών**: Σαφής, προσβάσιμη μορφοποίηση κειμένου. #### Διάταξη και Αποστάσεις - **Συνεπείς αποστάσεις**: Χρησιμοποιήστε μια κλίμακα αποστάσεων (8px, 16px, 24px, 32px). - **Σύστημα πλέγματος**: Οργανωμένη διάταξη για φόρμες και τμήματα περιεχομένου. - **Ευέλικτος σχεδιασμός**: Προσέγγιση πρώτα για κινητά με σημεία διακοπής. ### Βήμα 3: Στυλιζάρισμα Στοιχείων **Στυλιζάρετε αυτά τα συγκεκριμένα στοιχεία:** #### Φόρμες - **Πεδία εισαγωγής**: Επαγγελματικά περιγράμματα, καταστάσεις εστίασης και στυλιζάρισμα επικύρωσης. - **Κουμπιά**: Εφέ hover, καταστάσεις απενεργοποίησης και δείκτες φόρτωσης. - **Ετικέτες**: Σαφής τοποθέτηση και δείκτες υποχρεωτικών πεδίων. - **Μηνύματα σφάλματος**: Ορατό στυλιζάρισμα σφαλμάτων και χρήσιμα μηνύματα. #### Πλοήγηση - **Κεφαλίδα**: Καθαρή, επώνυμη περιοχή πλοήγησης. - **Σύνδεσμοι**: Σαφή εφέ hover και δείκτες ενεργών καταστάσεων. - **Λογότυπο/Τίτλος**: Διακριτικό στοιχείο επωνυμίας. #### Περιοχές Περιεχομένου - **Τμήματα**: Σαφής οπτικός διαχωρισμός μεταξύ διαφορετικών περιοχών. - **Κάρτες**: Εάν χρησιμοποιείτε διάταξη με κάρτες, προσθέστε σκιές και περιγράμματα. - **Φόντα**: Κατάλληλη χρήση λευκού χώρου και διακριτικών φόντων. ### Βήμα 4: Ενισχυμένες Λειτουργίες (Προαιρετικό) **Σκεφτείτε να υλοποιήσετε αυτές τις προηγμένες λειτουργίες:** - **Σκοτεινή λειτουργία**: Εναλλαγή μεταξύ φωτεινών και σκοτεινών θεμάτων. - **Κινούμενα σχέδια**: Διακριτικές μεταβάσεις και μικρο-αλληλεπιδράσεις. - **Καταστάσεις φόρτωσης**: Οπτική ανατροφοδότηση κατά την υποβολή φορμών. - **Ευέλικτες εικόνες**: Βελτιστοποιημένες εικόνες για διαφορετικά μεγέθη οθόνης. ## Έμπνευση Σχεδίασης **Χαρακτηριστικά σύγχρονων τραπεζικών εφαρμογών:** - **Καθαρός, μινιμαλιστικός σχεδιασμός** με άφθονο λευκό χώρο. - **Επαγγελματικά χρωματικά σχήματα** (μπλε, πράσινα ή κομψά ουδέτερα). - **Σαφής οπτική ιεραρχία** με εμφανή κουμπιά δράσης. - **Προσβάσιμοι λόγοι αντίθεσης** που πληρούν τις οδηγίες WCAG. - **Ευέλικτες διατάξεις** που λειτουργούν σε όλες τις συσκευές. ## Τεχνικές Απαιτήσεις ### Οργάνωση 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 */ ``` ### Απαιτήσεις Προσβασιμότητας - **Αντίθεση χρωμάτων**: Εξασφαλίστε τουλάχιστον λόγο 4.5:1 για κανονικό κείμενο. - **Δείκτες εστίασης**: Ορατές καταστάσεις εστίασης για πλοήγηση με πληκτρολόγιο. - **Ετικέτες φορμών**: Σωστά συνδεδεμένες με τα πεδία εισαγωγής. - **Ευέλικτος σχεδιασμός**: Χρήσιμος σε οθόνες από 320px έως 1920px πλάτος. ## Κριτήρια Αξιολόγησης | Κριτήριο | Εξαιρετικό (Α) | Επαρκές (Β) | Υπό ανάπτυξη (Γ) | Χρειάζεται βελτίωση (Δ) | |----------|---------------|-------------|------------------|------------------------| | **Σύστημα Σχεδίασης** | Υλοποιεί ολοκληρωμένο σύστημα σχεδίασης με συνεπή χρώματα, τυπογραφία και αποστάσεις παντού | Χρησιμοποιεί συνεπή στυλιζάρισμα με σαφή πρότυπα σχεδίασης και καλή οπτική ιεραρχία | Εφαρμόζει βασικό στυλιζάρισμα με κάποια προβλήματα συνέπειας ή ελλείψεις στοιχείων σχεδίασης | Ελάχιστο στυλιζάρισμα με ασυνεπείς ή αντικρουόμενες επιλογές σχεδίασης | | **Εμπειρία Χρήστη** | Δημιουργεί διαισθητική, επαγγελματική διεπαφή με εξαιρετική χρηστικότητα και οπτική ελκυστικότητα | Παρέχει καλή εμπειρία χρήστη με σαφή πλοήγηση και ευανάγνωστο περιεχόμενο | Βασική χρηστικότητα με ανάγκη για βελτιώσεις UX | Κακή χρηστικότητα, δύσκολη πλοήγηση ή ανάγνωση | | **Τεχνική Υλοποίηση** | Χρησιμοποιεί σύγχρονες τεχνικές CSS, οργανωμένη δομή κώδικα και ακολουθεί βέλτιστες πρακτικές | Εφαρμόζει CSS αποτελεσματικά με καλή οργάνωση και κατάλληλες τεχνικές | Το CSS λειτουργεί σωστά αλλά μπορεί να λείπει η οργάνωση ή οι σύγχρονες προσεγγίσεις | Κακή υλοποίηση CSS με τεχνικά προβλήματα ή προβλήματα συμβατότητας | | **Ευέλικτος Σχεδιασμός** | Πλήρως ευέλικτος σχεδιασμός που λειτουργεί άψογα σε όλες τις διαστάσεις συσκευών | Καλή ευέλικτη συμπεριφορά με μικρά προβλήματα σε ορισμένα μεγέθη οθόνης | Βασική ευέλικτη υλοποίηση με κάποια προβλήματα διάταξης | Μη ευέλικτος ή σημαντικά προβλήματα σε κινητές συσκευές | | **Προσβασιμότητα** | Πληροί τις οδηγίες WCAG με εξαιρετική πλοήγηση μέσω πληκτρολογίου και υποστήριξη αναγνωστών οθόνης | Καλές πρακτικές προσβασιμότητας με σωστή αντίθεση και δείκτες εστίασης | Βασικές προσεγγίσεις προσβασιμότητας με κάποιες ελλείψεις | Κακή προσβασιμότητα, δύσκολη για χρήστες με αναπηρίες | ## Οδηγίες Υποβολής **Συμπεριλάβετε στην υποβολή σας:** - **styles.css**: Το πλήρες stylesheet σας. - **Ενημερωμένο HTML**: Τυχόν τροποποιήσεις που κάνατε στο HTML. - **Στιγμιότυπα οθόνης**: Εικόνες που δείχνουν το σχέδιό σας σε επιτραπέζιο και κινητό. - **README**: Σύντομη περιγραφή των επιλογών σχεδίασης και της παλέτας χρωμάτων σας. **Επιπλέον πόντοι για:** - **Ιδιότητες CSS custom** για ευκολότερη διαχείριση θεμάτων. - **Προηγμένα χαρακτηριστικά CSS** όπως Grid, Flexbox ή κινούμενα σχέδια CSS. - **Εξετάσεις απόδοσης** όπως βελτιστοποιημένο CSS και ελάχιστο μέγεθος αρχείου. - **Δοκιμές συμβατότητας** για εξασφάλιση λειτουργίας σε διαφορετικούς περιηγητές. > 💡 **Χρήσιμη Συμβουλή**: Ξεκινήστε πρώτα με σχεδιασμό για κινητά και στη συνέχεια βελτιώστε για μεγαλύτερες οθόνες. Αυτή η προσέγγιση πρώτα για κινητά εξασφαλίζει ότι η εφαρμογή σας λειτουργεί καλά σε όλες τις συσκευές και ακολουθεί τις βέλτιστες πρακτικές σύγχρονης ανάπτυξης ιστοσελίδων. --- **Αποποίηση ευθύνης**: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.