
ΨΜΑ ΤΥΠΟΥ ΙΙ, SLIDESHOW TEMPLATE - 28/7/2023

Χρησιμοποιείται για να δείξουμε μια σειρά από εικόνες σαν slideshow (carousel)
με προαιρετική ύπαρξη και λεζάντων (ανά εικόνα). Είναι επιθυμητό (για ΑΜΕΑ) να υπάρχουν λεζάντες (διαβάζονται και εκφωνούνται από τους screen readers)
Ο τελικός χρήστης μπορεί να επιλέξει αν θέλει να φαίνονται οι λεζάντες ή όχι (εφόσον έχουμε λεζάντες)
Tip: το template μπορεί να χρησιμοποιηθεί και με μια εικόνα μόνο (με ή χωρίς λεζάντα) σαν ΨΜΑ ΤΥΠΟΥ Ι "απλή εικόνα"!

Η χρήση των ΨΜΑ θα θεωρηθεί εμπορική, οπότε όλα τα resources (εικόνες, ήχοι, video, κείμενα, εφαρμογές, html κτλ.) πρέπει να είναι είτε
free, original, είτε με αγορασμένα δικαιώματα. Προσπαθούμε για χρήση όσο γίνεται free υλικού και όπου χρειάζεται άδεια το αναλαμβάνει ο όμιλος.


ΔΙΑΔΙΚΑΣΙΑ - ΒΗΜΑΤΑ

1) Αρχικά πρέπει να έχουμε μια ή περισσότερες εικόνες (ιδανικά: .jpg, διαστάσεων: 1280 x 720 pixels)
Εικόνες με διαφορετική αναλογία από 16:9 και διαστάσεις, τοποθετούνται αυτόματα στο κέντρο και μπορεί να φαίνεται το background color 

2) Για ευκολία μπορεί να ονομάσουμε τις εικόνες μας 1.jpg, 2.jpg κτλ. (ή image_01.jpg, image_02.jpg κτλ.)
Δεν πρέπει να έχουμε ελληνικούς χαρακτήρες και κενά στα ονόματα.

3) Πηγαίνουμε στο φάκελο "resources" και σβήνουμε τυχόν παλιές εικόνες που υπάρχουν εκεί

4) Κάνουμε copy τις δικές μας εικόνες μέσα στο φάκελο "resources"

5) Κάνουμε edit την "index.html" (που βρίσκεται μέσα στο template folder) για να αλλάξουμε τα στοιχεία πχ. τίτλος ΨΜΑ, εικόνες και λεζάντες, 
κείμενο βοήθειας-πληροφορίες κτλ. Βλέπε comments μέσα στην index.html που περιέχουν τη λέξη "ΨΜΑ"  πχ. "ΨΜΑ TODO: Ανανέωση τίτλου"

5i) Στην "index.html" υπάρχουν και 2 ρυθμίσεις για τις λεζάντες που ίσως θέλουμε να αλλάξουμε: 
a) αρχικά αν θέλουμε να φαίνονται οι λεζάντες και b) αν θέλουμε αυτές να έχουν σκιά (text shadow)
Εντοπίζουμε το σχόλιο: "// ΨΜΑ. Επιλέξτε αν θέλετε να εμφανίζονται οι λεζάντες και η σκιά" 
και βάζουμε 1 ή 0 (μηδέν) (1 => NAI,  0 => OXI) στις 2 παραμέτρους που φαίνονται εκεί (SHOW_CAPTIONS και USE_CAPTIONS_SHADOWS)

5ii) Ειδικά για να αλλάξουμε τις εικόνες και λεζάντες εντοπίζουμε το comment "ΨΜΑ TODO: Ανανέωση - αντικατάσταση εικόνων και λεζάντων" εδώ θα χρειαστεί.
να κάνουμε copy - paste 5-6 γραμμές κώδικα (το "carousel-item") τόσες φορές όσες είναι και οι εικόνες μας
και μετά να αντικαταστήσουμε το image name στο "src" πχ. το image_01.jpg, το "alt"  και τα κείμενα μας (λεζάντες) στο "<h2>" και "<p>"
Το "alt" είναι μια μικρή περιγραφή (2-3 λέξεις ή μια γραμμή) της εικόνας (το συμπληρώνουμε πάντα - ειδικά αν δε βάλουμε λεζάντες)
[Για το edit χρησιμοποιούμε πχ το notepad++ (notepad-plus-plus.org) ή το sublime (sublimetext.com) ή οποιοδήποτε άλλο html editor]

6) Σώζουμε τις αλλαγές μας (κάνουμε save το αρχείο "index.html")

Τέλος πρέπει να ανανεωθούν και τα στοιχεία μέσα στη σελίδα συντελεστών "about.html" (είναι μια σελίδα με τους συντελεστές δηλ. τίτλος ΨΜΑ, ημ/νίες, συντελεστές) ενδέχεται να μην είναι αυτή η τελική της μορφή (έχει ζητηθεί διευκρίνιση)


Κώστας Ζώτος,
Ζωή Παπαμιχαήλ

Developer's Team
Εκπαιδευτικός Όμιλος Πουκαμισάς
Λ. Βουλιαγμένης 46, 16452 Αργυρούπολη
Τηλ. 210 4112507, 210 9920578
