WaterBaby Serres — Σχολή Βρεφικής & Παιδικής Κολύμβησης

4 εβδομάδες Σχεδιασμός & Frontend Development

Η WaterBaby Serres διδάσκει βρέφη από τεσσάρων μηνών και παιδιά έως δέκα ετών, σε θερμαινόμενη εσωτερική πισίνα στο Elpida Resort. Η ιστοσελίδα έπρεπε να μιλάει πρώτα στους Έλληνες γονείς και δεύτερα στους επισκέπτες στα αγγλικά, χωρίς να γίνει δύο ιστοσελίδες. Έτσι κάθε κείμενο υπάρχει δύο φορές μέσα στο ίδιο αρχείο και ο διακόπτης απλώς αλλάζει ποιο είναι κρυμμένο: ένα URL ανά σελίδα, χωρίς επαναφόρτωση, χωρίς fetch, χωρίς δεύτερο σετ σελίδων να συντηρείται, και τα ελληνικά διαβάζονται κανονικά με το JavaScript κλειστό. Έξι σελίδες τη συγκροτούν — αρχική, σχετικά, τα δύο προγράμματα, gallery και επικοινωνία — με τα τέσσερα παιδικά επίπεδα από αρχάριους έως προχωρημένους, τον εξοπλισμό και τα δικαιολογητικά που χρειάζεται ένας γονέας, και συχνές ερωτήσεις. Το GSAP και το ScrollTrigger φιλοξενούνται τοπικά αντί για CDN, και κάθε κίνηση είναι προσθετική: τίποτα δεν κρύβεται εκ των προτέρων από το CSS, οπότε ένα script που αποτυγχάνει αφήνει πλήρη σελίδα και όχι λευκή. Η κίνηση εισόδου στην αρχική αδειάζει ένα κύμα προς τα κάτω μία φορά ανά session και καθαρίζει μόνη της μέσω CSS keyframes, ώστε να μην μπορεί να παγιδεύσει τον επισκέπτη πίσω από ένα overlay ακόμη κι αν πεθάνει το JavaScript. Τα δομημένα δεδομένα καλύπτουν τα προγράμματα, τις ερωτήσεις, τη gallery και τα breadcrumbs· ένα llms.txt δηλώνει τα επαληθευμένα στοιχεία για τους βοηθούς AI και είναι δεμένο με τις σελίδες από τα τεστ, ώστε τα δύο να μην αποκλίνουν. Εικοσιένα τεστ Node κρατούν το σύνολο στη θέση του — δομή σελίδων, ελληνικά κείμενα, τα stub ανακατευθύνσεων, τις ιδιότητες ασφαλείας του loader και την αντίθεση WCAG σε κάθε πορτοκαλί επιφάνεια.

Τεχνολογίες

HTML5 CSS3 Vanilla JS (ES Modules) GSAP 3 ScrollTrigger JSON-LD i18n (EL/EN) Node Test Runner WCAG 2.2 AA SEO

Προκλήσεις

Μια δίγλωσση ιστοσελίδα συνήθως σημαίνει δύο από όλα — δύο σετ σελίδων, δύο URL, δύο ευκαιρίες να ενημερώσεις το ένα και να ξεχάσεις το άλλο. Εδώ τη συντηρεί μία εκπαιδεύτρια, οπότε ένα δεύτερο αντίγραφο κάθε σελίδας θα ήταν βάρος και όχι δυνατότητα. Τα ελληνικά έπρεπε επίσης να είναι η πραγματική προεπιλογή, αναγνώσιμα πριν τρέξει οποιοδήποτε script, γιατί το κοινό είναι ντόπιοι γονείς. Και οι πινελιές που θέλει μια σχολή κολύμβησης — κίνηση εισόδου, αποκαλύψεις στο scroll, ένα lightbox — είναι ακριβώς αυτά που αφήνουν λευκή σελίδα όταν ένα script αποτύχει σε κινητό με αδύναμο σήμα.

Λύσεις

Και οι δύο γλώσσες υπάρχουν inline σε κάθε αρχείο και ο διακόπτης απλώς εναλλάσσει ένα hidden attribute, οπότε υπάρχει μία σελίδα προς επεξεργασία, ένα URL προς κοινοποίηση και τίποτα προς συγχρονισμό· η προτίμηση αποθηκεύεται στο localStorage και η αλλαγή στέλνει ένα custom event που ακούει η gallery. Τα μη κειμενικά στοιχεία — aria-labels, placeholders, meta descriptions, ακόμη και ο τίτλος του εγγράφου — μεταφράζονται μέσα από ζεύγη data attributes που χειρίζεται η ίδια συνάρτηση, ώστε μια μεταφρασμένη σελίδα να μην έχει αμετάφραστες γωνιές. Η κίνηση είναι προσθετική εξ ορισμού και ένα τεστ το επιβάλλει: το CSS δεν επιτρέπεται ποτέ να κρύψει εκ των προτέρων ένα κινούμενο στοιχείο, οπότε αν το GSAP δεν φορτώσει χάνεται μόνο η κίνηση. Το overlay εισόδου φεύγει hidden και αποκαλύπτεται μόνο από μια κλάση που προσθέτει το JavaScript, ενώ η έξοδός του είναι CSS keyframe με fill-mode forwards — με το script κλειστό, μπλοκαρισμένο ή σπασμένο, το overlay καθαρίζει ούτως ή άλλως. Οι βιβλιοθήκες φιλοξενούνται τοπικά ώστε μια διακοπή CDN να μην παρασύρει την κίνηση της ιστοσελίδας, και καθένα από τα εικοσιένα τεστ επαληθεύτηκε σπάζοντας σκόπιμα αυτό που προστατεύει.

Επίσκεψη Έργου