notes.dpsd.gr

Έργα | 2025 | Σύνδεσμοι: notes.dpsd.gr

Πλατφόρμα εργαστηριακών σημειώσεων για τέσσερα πανεπιστημιακά μαθήματα: περίπου 40 εργαστήρια ως τώρα, με live HTML previews και ελεγχόμενη πρόσβαση σε λύσεις και υλικό εξετάσεων, φτιαγμένη με vanilla HTML, CSS και JavaScript σε Cloudflare Pages, σε χρήση στην τάξη από τον Οκτώβριο του 2025.

Κατάσταση: live, σε εβδομαδιαία χρήση στην τάξη. Οι εργαστηριακές σημειώσεις τεσσάρων πανεπιστημιακών μαθημάτων, και η πλατφόρμα που φτιάχτηκε ειδικά για αυτές.

Με μια ματιά

Φορέας	Τμήμα Μηχανικών Σχεδίασης Προϊόντων και Συστημάτων, Πανεπιστήμιο Αιγαίου
Περιεχόμενο	4 μαθήματα, ~40 εργαστήρια, από το πρώτο εξάμηνο μέχρι το όγδοο
Stack	Απλή HTML, CSS και JavaScript, χωρίς build step· περιεχόμενο σε markdown· Cloudflare Pages και Functions
Ο ρόλος μου	Πλατφόρμα, σημειώσεις και διδασκαλία, όλα δικά μου
Live από	Οκτώβριος 2025

Το πρόβλημα

Για χρόνια οι εργαστηριακές σημειώσεις μου βρίσκονταν σε Google Docs, με συνδέσμους από την πλατφόρμα ηλεκτρονικής διδασκαλίας του πανεπιστημίου (eClass). Η δομή δούλευε αποτελεσματικά: το περιεχόμενο ήταν εύχρηστο, και βελτιωνόταν συχνά, με τις ενημερώσεις να είναι άμεσα διαθέσιμες (το βασικό πλεονέκτημα των Google Docs για διαμοιρασμό τέτοιου περιεχομένου). Το μέσο όμως είχε όρια, και το πιο καθαρό παράδειγμα είναι το μάθημα σχεδίασης ιστοσελίδων: ένα έγγραφο μπορεί να δείξει κώδικα HTML, αλλά δεν μπορεί να τον “εκτελέσει”, οπότε οι φοιτητές διάβαζαν markup χωρίς να βλέπουν άμεσα τι ακριβώς κάνει. Πέρα από αυτό, οι σημειώσεις ήταν σκόρπιες σε ξεχωριστούς συνδέσμους ανά έγγραφο, δεν είχαν version control, και διαβάζονταν με δυσκολία στο κινητό.

Η πλατφόρμα

Για τις σημειώσεις, έφτιαξα ουσιαστικά μια custom πλατφόρμα: ένα single-page site σε vanilla HTML, CSS και JavaScript, χωρίς build step, χωρίς frameworks, χωρίς dependencies προς συντήρηση. Το περιεχόμενο είναι markdown· ο browser το φορτώνει και το εμφανίζει (marked.js για το parsing, Prism.js για το syntax highlighting) και φτιάχνει για κάθε εργαστήριο πίνακα περιεχομένων με scroll spy. Η δημοσίευση μιας ενημέρωσης είναι απλά ένα git push: το site φιλοξενείται στο Cloudflare Pages, και serverless functions αναλαμβάνουν τα σημεία που χρειάζονται “λογική”. Η τελική αυτή απλότητα δεν ήταν δεδομένη: η πλατφόρμα χρειάστηκε πολλούς κύκλους δοκιμών και βελτιώσεων μέχρι να πάρει τη σημερινή της μορφή.

Κάθε ιδιαίτερη λειτουργία υπάρχει επειδή χρειάστηκε στην πράξη:

Live HTML previews. Τα παραδείγματα στο μάθημα σχεδίασης ιστοσελίδων τρέχουν μέσα στη σελίδα, απομονωμένα σε δικό τους frame: ο κώδικας και, ακριβώς από κάτω, το αποτέλεσμα. Η λειτουργία που τα Google Docs δεν μπορούσαν να προσφέρουν με καλό τρόπο. Η απομόνωση δεν είναι αυτονόητη: η ίδια η πλατφόρμα είναι HTML και CSS, και το να εμφανίζεται κάθε παράδειγμα μόνο με τα δικά του στυλ, χωρίς να κληρονομεί τίποτα από τη σελίδα που το φιλοξενεί, ήταν από τα πιο απαιτητικά σημεία της κατασκευής.
Λύσεις που ξεκλειδώνουν μετά το εργαστήριο. Κάθε εργαστήριο κλείνει με ασκήσεις. Η σελίδα με τις λύσεις τους δημοσιεύεται όταν ολοκληρωθεί το μάθημα, όχι νωρίτερα: τις ξεκλειδώνω ο ίδιος από το private dashboard της πλατφόρμας.
Private dashboard δημοσίευσης. Όλα ελέγχονται από ένα σημείο: τα εργαστήρια υπό προετοιμασία μένουν κρυφά, το υλικό εξετάσεων ή προόδων μένει private μέχρι τη μέρα της εξέτασης, ενώ μπορώ να μοιραστώ προσωρινή πρόσβαση επιλεγμένα με συναδέλφους μέσω δυναμικών URL για αδημοσίευτο υλικό.
Χρήσιμες λεπτομέρειες: κουμπιά αντιγραφής στα μπλοκ κώδικα, αναδίπλωση για μεγάλες γραμμές (αποφεύγουν το οριζόντιο scrolling), και κάθε σελίδα responsive, γιατί πολλοί φοιτητές παρακολουθούν από το κινητό.

Το περιεχόμενο

Η πλατφόρμα υπάρχει για το περιεχόμενό της, το οποίο εξελίσσεται οργανικά ανάλογα με τις ανάγκες, και είναι πιθανό να έχει ως αποτέλεσμα νέο functionality ή προσαρμογές. Αυτή τη στιγμή, παρουσιάζεται το υλικό περίπου 40 εργαστηριακών μαθημάτων που καλύπτουν συνολικά τέσσερα μαθήματα: σχεδίαση ιστοσελίδων με HTML και CSS, προγραμματισμός με C# και Python, και ανάπτυξη εφαρμογών για κινητές συσκευές (Android Studio, Java), καλύπτοντας μαθήματα του προγράμματος σπουδών από το πρώτο εξάμηνο μέχρι το όγδοο. Οι σημειώσεις είναι γραμμένες στα ελληνικά με αγγλικούς τεχνικούς όρους, απευθύνονται σε φοιτητές σχεδίασης, πολλοί από τους οποίους έρχονται σε επαφή με κώδικα για πρώτη φορά, και στηρίζονται σε υλικό που έχει δοκιμαστεί μέσα από χρόνια διδασκαλίας των ίδιων εργαστηρίων: ξαναγραμμένο και αναβαθμισμένο. Το site μεγαλώνει μαζί με τα μαθήματα: προστίθενται νέα εργαστήρια, ενημερώνονται τα υπάρχοντα, και μπορούν να προστεθούν μαθήματα όταν χρειαστεί. Ήδη γράφονται σημειώσεις που καλύπτουν μια λεπτομερή ανάλυση του πώς λειτουργούν τα μοντέρνα μοντέλα LLM, με πρακτικά παραδείγματα εγκατάστασης και παραμετροποίησης τοπικών μοντέλων. Ακόμα και αν δεν αποτελέσουν ξεχωριστό “μάθημα” στο πανεπιστημιακό τμήμα, οι συγκεκριμένες σημειώσεις αξιοποιούν μια πλατφόρμα που ήδη υπάρχει και μπορεί να υποστηρίξει αποδοτικά τεχνικές σημειώσεις κάθε είδους.

Στην τάξη

Το site χρησιμοποιείται κάθε εβδομάδα από τον Οκτώβριο του 2025: οι φοιτητές το χρησιμοποιούν στις εργαστηριακές συνεδρίες και στη μελέτη τους, και τα analytics φανερώνουν σταθερή κίνηση, η οποία κορυφώνεται στις εξεταστικές περιόδους. Και αντίθετα με σημειώσεις κλειδωμένες μέσα σε μια εκπαιδευτική πλατφόρμα, έχω επιλέξει σκόπιμα αυτές να είναι δημόσιες στο internet: ελεύθερες να τις διαβάσει και να τις αξιοποιήσει οποιοσδήποτε, φοιτητής του τμήματος ή όχι.