Τμήμα Μηχανικών Σχεδίασης Προϊόντων και Συστημάτων
Έργα | | Σύνδεσμοι: Δείτε το live
Πλήρης ανακατασκευή του site πανεπιστημιακού τμήματος ως δίγλωσσο static site σε Astro 5: πάνω από 250 σελίδες ανά γλώσσα, από τις 85 σελίδες μαθημάτων και τα 63 προφίλ προσωπικού μέχρι το διαδραστικό προσωπικό πρόγραμμα, full-text αναζήτηση και τρία προσβάσιμα χρωματικά θέματα.
Κατάσταση: σε ανάπτυξη. Το ελληνικό site είναι σε μεγάλο βαθμό ολοκληρωμένο και βρίσκεται υπό έλεγχο από αρμόδια επιτροπή ιστοσελίδας (αποτελούμενη από μέλη ΔΕΠ): το περιεχόμενο είναι ως επί το πλείστον πλήρες, ενώ ενότητες που αλλάζουν συχνά, όπως οι ανακοινώσεις και οι εκδηλώσεις, έχουν προσωρινό (placeholder) υλικό που θα συμπληρωθεί “οργανικά” με την έναρξη του ιστοτόπου. Το αγγλικό περιεχόμενο είναι πλήρες αρχιτεκτονικά (αντιστοίχιση σελίδων, templates, εναλλαγή γλώσσας), ενώ αναμένονται οι μεταφράσεις. Το link για live προεπισκόπηση βρίσκεται παραπάνω.
Με μια ματιά
| Stack | Astro 5 + TypeScript, πλήρως static: χωρίς CMS, χωρίς βάση δεδομένων |
| Μέγεθος | 250+ σελίδες ανά γλώσσα, σε ελληνικά και αγγλικά |
| Λειτουργίες | Δημιουργία custom προσωπικού προγράμματος μαθημάτων, full-text αναζήτηση client-side, τρία χρωματικά θέματα |
| Προσβασιμότητα | Πλήρης συμμόρφωση WCAG 2.1 AA |
| Ιστορικό | Διάδοχος του Drupal site που συν-δημιούργησα το 2018 και διαχειρίζομαι ακόμη |
Το πρόβλημα
Το 2018 συμμετείχα στην κατασκευή του site του Τμήματος Μηχανικών Σχεδίασης Προϊόντων και Συστημάτων (Πανεπιστήμιο Αιγαίου) σε Drupal 8, το οποίο παραμένει σε λειτουργία μέχρι σήμερα. Μετά από οκτώ χρόνια, όμως, το μοντέλο του CMS είχε αρχίσει να μην είναι αποδοτικό στη συντήρησή του: κάθε νέα major έκδοση Drupal απαιτούσε εξειδικευμένη συντήρηση (η διαχείριση γίνεται πλέον υποχρεωτικά μέσω Composer, κάτι που δεν ίσχυε όταν στήθηκε το αρχικό site), και οι καθημερινές ενημερώσεις περιεχομένου περνούσαν αναγκαστικά από ένα σύστημα με βάση δεδομένων που ήθελε συνεχώς patching. Το τμήμα έχει ανάγκη ένα σύγχρονο, δίγλωσσο site που θα μείνει γρήγορο, ασφαλές και εύκολο στη συντήρηση για την επόμενη δεκαετία.
Η ανακατασκευή
Σχεδίασα το νέο site από το μηδέν ως πλήρως static site, σε Astro 5 και TypeScript: χωρίς CMS, χωρίς βάση δεδομένων. Το περιεχόμενο ζει σε δομημένα, version-controlled αρχεία, με μηδενικό server-side attack surface και τίποτα δεν χρειάζεται patching. Το μεγαλύτερο μέρος του περιεχομένου μεταφέρθηκε με Python scrapers (σελίδες, μαθήματα και προφίλ προσωπικού από το παλιό site), διατηρώντας το αρχικό κείμενο ακριβώς όπως ήταν.
Το αποτέλεσμα είναι ένα μεγάλο site με λειτουργικότητα εφαρμογής:
- Δίγλωσσο παντού: ελληνικά και αγγλικά, με πλήρη αντιστοίχιση σελίδων και εναλλαγή γλώσσας σε κάθε σελίδα.
- 250+ σελίδες ανά γλώσσα: 80+ σελίδες μαθημάτων και 60+ προφίλ προσωπικού που παράγονται από δομημένα δεδομένα (αρχεία JSON), με δυναμικά φίλτρα στις λίστες, συν δεκάδες στατικές σελίδες φτιαγμένες μία-μία για το τμήμα, τις σπουδές, την έρευνα και τη φοιτητική ζωή.
- Μια πληθώρα από templates σελίδων: πολλαπλές παραλλαγές hero και layout, με custom JavaScript όπου ήταν απαραίτητο.
- Full-text αναζήτηση και στις δύο γλώσσες (Pagefind), εξ ολοκλήρου client-side.
- Προσβασιμότητα ως βασική απαίτηση: Πλήρης συμμόρφωση με WCAG 2.1 AA, με πλοήγηση από το πληκτρολόγιο, υποστήριξη screen reader, ελάχιστα μεγέθη γραμματοσειράς, σεβασμό στις προτιμήσεις κίνησης (animations) και ξεχωριστό θέμα υψηλής αντίθεσης (High Contrast).
- Custom megamenu πλοήγηση, συστήματα ανακοινώσεων και εκδηλώσεων, σελίδες ερευνητικών εργαστηρίων και analytics χρήσης.
Επόμενη φάση: επεξεργασία περιεχομένου από το προσωπικό
Η επόμενη φάση είναι ήδη προδιαγεγραμμένη: Τα μέλη ΔΕΠ και οι διοικητικοί υπάλληλοι θα επεξεργάζονται περιεχόμενο απευθείας, ο καθένας με τους υπάρχοντες πανεπιστημιακούς κωδικούς του (σύνδεση LDAP) και μόνο σε ό,τι του αναλογεί:
- μέλη προσωπικού: το δικό τους προφίλ και, όπου ισχύει, τα μαθήματά τους
- διοικητικό προσωπικό: τις ανακοινώσεις
- άλλοι editors: συγκεκριμένες ενότητες του site, με ανάθεση όπου χρειάζεται
Ένα headless CMS λειτουργεί ως interface επεξεργασίας και γράφει κάθε αλλαγή στο git repository, που παραμένει η “μοναδική πηγή αλήθειας” (single source of truth): Η βασική διαδικασία “χτισίματος” (build pipeline) και η απευθείας πρόσβαση του διαχειριστή μένουν ανέγγιχτα. Έτσι ουσιαστικά επιτυγχάνεται το μοντέλο ρόλων και δικαιωμάτων που πρόσφερε εγγενώς το παλιό Drupal site, χωρίς να θυσιαστεί η static αρχιτεκτονική.
Σημεία που ξεχωρίζουν
Το προσωπικό πρόγραμμα. Οι φοιτητές επιλέγουν τα μαθήματά τους και συνθέτουν ένα εβδομαδιαίο πρόγραμμα που αποθηκεύεται στον browser και μοιράζεται ως απλό URL. Στην πράξη, μια μικρή web εφαρμογή που τρέχει μέσα σε ένα static site, χωρίς κανένα backend από πίσω.
Τρία θέματα, τρία designs. Το ανοιχτό, το σκούρο και η υψηλή αντίθεση είναι σκόπιμα διαφορετικά designs· κάθε component είναι δουλεμένο και για τα τρία, με προσοχή σε λεπτομέρειες όπως τα hover states και η συμπεριφορά κίνησης.
Ένα custom animated header για κάθε κατεύθυνση. Καθεμία από τις τρεις σελίδες κατευθύνσεων ανοίγει με ένα header φτιαγμένο για το αντικείμενό της: διαδραστικά particles, τρισδιάστατα σχήματα που μεταμορφώνονται, ένα animated git graph.
Η ίδια προσοχή διατρέχει όλο το site. Ο ευκολότερος τρόπος να το διαπιστώσετε είναι να το χρησιμοποιήσετε.
Το ίδιο πρόγραμμα στα τρία θέματα: ανοιχτό, σκούρο, υψηλή αντίθεση.
Gallery
Το αποτέλεσμα
Το site έχει παρουσιαστεί στα μέλη ΔΕΠ του τμήματος και η υποδοχή ήταν θετική. Βρίσκεται τώρα στην τελική φάση περιεχομένου πριν από την έναρξη λειτουργίας. Η αρχιτεκτονική επιλογή αποδίδει μόνιμα: το static hosting είναι γρήγορο και ουσιαστικά δωρεάν, δεν υπάρχει το ατελείωτο “κυνήγι” αναβαθμίσεων, και το τμήμα αποκτά ένα site που συντηρείται με απλές αλλαγές κειμένου αντί για διαχείριση CMS. Μια αποδοτική απάντηση στα προβλήματα που τερμάτισαν την πορεία του προηγούμενου site.
