1. Σχεδίαση και ανάπτυξη
διαδικτυακής εφαρμογής
δημιουργίας ψηφιακής αφίσας
Τρακαδά Αθανασία
Επιβλέπων Καθηγητής: Ρετάλης Συμεών
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ
ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ
Πειραιάς, 2014

2. δομή εργασίας
 Κεφάλαιο 1: γενική ιδέα
 Κεφάλαιο 2: ορισμοί, θεωρίες μάθησης,
πλεονεκτήματα δημιουργίας ψηφιακής αφίσας
 Κεφάλαιο 3: σχεδίαση εφαρμογής σύμφωνα με το
ανθρωποκεντρικό μοντέλο, περιγραφή των
φάσεων, ιεραρχική ανάλυση εργασιών
 Κεφάλαιο 4: ανάπτυξη εφαρμογής, περιγραφή
τεχνολογιών που χρησιμοποιήθηκαν, παρουσίαση
βασικών χαρακτηριστικών συστήματος μέσα από
σενάρια χρήσης
 Κεφάλαιο 5: αξιολόγηση, τελικά συμπεράσματα

3. Αφίσα και εκπαίδευση.
Πως συνδέονται;
Σύμφωνα με τις γνωστικές θεωρίες η μάθηση δε μεταδίδεται,
αλλά είναι μια διαδικασία προσωπικής κατασκευής της
γνώσης. Η μάθηση πρέπει να είναι αυθεντική.
Η δημιουργία αφίσας από την πλευρά των εκπαιδευόμενων
είναι μια δραστηριότητα που ταιριάζει με τη φιλοσοφία
αυτών των θεωριών.
Σύμφωνα με τη γνωστική θεωρία του Mayer, η μάθηση
γίνεται βαθύτερη όταν συνοδεύεται από τον κατάλληλο
συνδυασμό λέξεων και εικόνων.
Ο συνδυασμός διαφορετικών τρόπων παρουσίασης ενός
διδακτικού αντικειμένου από την πλευρά των
εκπαιδευτικών, όπως μέσα από μια αφίσα, μπορεί να
βελτιώσει την εκπαιδευτική διαδικασία

4. με την ένταξη νέων τεχνολογιών στην εκπαίδευση και την
εξάπλωση του web2, η παραδοσιακή αφίσα έγινε ψηφιακή
Ψηφιακή αφίσα

5. Σχεδίαση συστήματος
Βασίστηκε στις αρχές του ανθρωποκεντρικού σχεδιασμού
λογισμικού που αφορά διαδικασίες ανάπτυξης εύχρηστων
συστημάτων προσαρμοσμένων στα χαρακτηριστικά των
χρηστών τους.
Δεν είναι απαραίτητη η αυστηρή ακολουθία των φάσεων,
ούτε ορίζεται μονοσήμαντα το σημείο έναρξης της
διαδικασίας.
Το πρώτο βήμα για τη σχεδίαση της συγκεκριμένης
εφαρμογής ήταν η εξέταση παρόμοιων συστημάτων.

6. Σκοπός
Ο κύριος σκοπός της σχεδίασης του εργαλείου δημιουργίας
ψηφιακής αφίσας είναι η βελτίωση της εκπαιδευτικής
διαδικασίας.
Από πλευράς μαθητών, στόχοι της εφαρμογής είναι
 να αναπτύξουν ποικίλες δεξιότητες, όπως οργανωτικές ,
ερευνητικές, τεχνολογικές, δεξιότητες παρουσίασης κ.α.
 να αναπτύξουν την φαντασία τους , την αισθητική και τη
δημιουργικότητα τους
 η παροχή επιπλέων κινήτρων για συμμετοχή στην
εκπαιδευτική διαδικασία
Από πλευράς εκπαιδευτικών η χρήση της εφαρμογής
στοχεύει σε ένα επιπρόσθετο εκπαιδευτικό υλικό.

7. 1 Glogster
2 Padlet
3 Postermywall
4 Google drawing
Παρόμοια συστήματα

8. ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ
Glogster Padlet Postermywall Google
drawing
Online εφαρμογή √ √ √ √
Drag and drop αντικειμένων √ √ √ √
Επιλογή εικόνας/θέματος για φόντο √ √ √
Εισαγωγή κειμένου √ √ √ √
Μορφοποίηση κειμένου με γραφικό περιβάλλον √ √ √
Εισαγωγή εικόνων από υπολογιστή √ √ √ √
Εισαγωγή βίντεο, ήχου √ √
Χρήση κάμερας για εισαγωγή εικόνας √ √ √
Χρήση κάμερας για εισαγωγή βίντεο √
Προσθήκη εφέ √ √ √
Export σε image √ √ √
Αναζήτηση και εισαγωγή εικόνων από
openclipart , Pixebay , Flickr
√
Απαιτείται εγγραφή √ √
Συγκριτικός πίνακας λειτουργιών

9. χρήστες - χαρακτηριστικά -
περιβάλλον
ΠΡΩΤΕΥΟΝΤΕΣ: ΜΑΘΗΤΕΣ - Χαρακτηριστικά
 Ηλικία: 9 - 17 χρόνια
 Εμπειρία στη χρήση υπολογιστών: εξοικείωση με τη χρήση
διαδικτυακών εφαρμογών, καθώς είναι μέρος της
καθημερινότητας τους μέσω κυρίως των κοινωνικών δικτύων
ΔΕΥΤΕΡΕΥΟΝΤΕΣ: ΕΚΠΑΙΔΕΥΤΙΚΟΙ- Χαρακτηριστικά
 Προέλευση: Πρωτοβάθμια και Δευτεροβάθμια εκπαίδευση,
 Εμπειρία στη χρήση υπολογιστών : βασικές δεξιότητες χρήσης
απλών εφαρμογών πληροφορικής
ΠΕΡΙΒΑΛΛΟΝ ΧΡΗΣΤΩΝ: σχολικό εργαστήριο, αίθουσα με
φορητούς υπολογιστές, οπουδήποτε υπάρχει υπολογιστής με
πρόσβαση στο διαδίκτυο

10. Βασικές λειτουργίες των χρηστών
 Καθορισμός διαστάσεων και φόντου της αφίσας
 Εισαγωγή αντικειμένων στην αφίσα: κείμενο, εικόνα
από υπολογιστή, εικόνα από url, clipart
 Χειρισμός αντικειμένων
 Ζωγραφική
 Εξαγωγή αφίσας ως εικόνα
 Διαγραφή
 Εμφάνιση βοήθειας

11. Τεχνολογίες ελεύθερου λογισμικού
Τεχνολογίες υλοποίησης συστήματος

12. Html-Css-JavaScript
• Html ορίζουμε τη δομή της σελίδας
• Css ορίζουμε την παρουσίαση της σελίδας
• JavaScript ορίζουμε την συμπεριφορά της σελίδας

13. jQuery
Είναι μια βιβλιοθήκη JavaScript, δηλαδή μια συλλογή
από προκατασκευασμένες JavaScript συναρτήσεις.
ΠΛΕΟΝΕΚΤΗΜΑΤΑ
• Έχει σχετικά μικρό μέγεθος
• Είναι εύκολη στην εκμάθηση και στην χρήση
• Είναι δοκιμασμένη μιας και χρησιμοποιείται από
εκατομμύρια sites
• Αναπτύσσεται από μεγάλη κοινότητα
προγραμματιστών
• Έχει πολύ καλή τεκμηρίωση και βοηθήματα
• Έχει πολλά Plug-ins και συνεχώς αναπτύσσονται νέα
• Cross browser
• Είναι δωρεάν

14. jQuery UI
Η ομάδα ανάπτυξης της jQuery αποφάσισε να προωθήσει
μια επίσημη συλλογή από πρόσθετα, δίνοντάς τους ένα
κοινό στυλ εμφάνισης. Έτσι δημιουργήθηκε το jQuery UI
Παραδείγματα από πρόσθετα
DRAG DROP‘N
αλληλεπιδράσεις
widgets

15. Json
• Το Json είναι μια δημοφιλής μορφή για τη σύνταξη και
ανταλλαγή δεδομένων
• Παρόμοιο με το XML.
• Πολλές online υπηρεσίες όπως το Flickr, OpenClipArt,
Google Maps,Twitter προσφέρουν δεδομένα
κωδικοποιημένα με τη σύνταξη Json
• Τα δεδομένα Json εκφράζονται ως μια σειρά από
ζευγάρια παραμέτρων και τιμών
• Ευκολοδιάβαστο τόσο για ανθρώπους όσο και για
υπολογιστές

16. Ajax
Το Ajax είναι ένας συνδυασμός από τεχνολογίες που
αλληλεπιδρούν μεταξύ τους με σκοπό να ανακτήσουν και
να εμφανίσουν νέο περιεχόμενο σε μια ιστοσελίδα χωρίς
να την ξαναφορτώσουν.

17. Παρουσίαση της εφαρμογής
Αρχική σελίδα Περιβάλλον εργασίας

18. Export σε εικόνα
διαγραφή
βοήθεια
ζωγραφική
κείμενο
εικόνα
εικόνα από url
clipart
ρυθμίσεις
εργαλεία εφαρμογής

19. Καθορισμός διαστάσεων
Επιλογή φόντου: χρώμα ή εικόνα
ρυθμίσεις

20. εισαγωγή κειμένου

21. εισαγωγή εικόνων: 3 επιλογές
από τον υπολογιστή του χρήστη
από url
από το openclipaert.org

22. ζωγραφική

23. χειρισμός αντικειμένων επάνω στην αφίσα
περιστροφή
μεταφορά
μπροστά
διαγραφή
αλλαγή μεγέθους

24. βοήθειααποθήκευση

25. αξιολόγηση ευχρηστίας συστήματος
Συμπερασματική αξιολόγηση με χρήση διερευνητικών
τεχνικών
• Η εφαρμογή δόθηκε σε μαθητές της δευτέρας λυκείου στα
πλαίσια του μαθήματος της διερευνητικής εργασίας
(project).
• Η τάξη είχε 17 μαθητές, 2 αγόρια, 15 κορίτσια.
• Στο τελευταίο στάδιο του project, που είναι η διατύπωση
των συμπερασμάτων από τους μαθητές, δόθηκε η
εφαρμογή ως εναλλακτικός τρόπος αυτής της
διατύπωσης.
• Για την όλη διαδικασία χρειάστηκαν δυο διδακτικές ώρες.
Πρώτα έγινε μια μικρή παρουσίαση του εργαλείου και
έπειτα οι ομάδες δημιούργησαν τις αφίσες .
• Τέλος όλοι οι μαθητές συμπληρώσαν το σχετικό
ερωτηματολόγιο.

26. δείγμα από το ερωτηματολόγιο
Παράμετρος: Ευκολία χρήσης-Ερωτήσεις
Πόσο ευέλικτα είναι τα παράθυρα της εφαρμογής; (δυνατότητα αλλαγής
μεγέθους, κλεισίματος, κ.α.)
Είναι εύκολη η εισαγωγή αντικειμένων; (κειμένου, εικόνας)
Είναι εύκολη η μορφοποίηση και τροποποίηση του κειμένου;
Είναι εύκολη η μεταφορά, τοποθέτηση και διαγραφή αντικειμένων;
Παράμετρος: Υποκειμενική Ικανοποίηση-Ερωτήσεις
Ήταν μια ευχάριστη διαδικασία η ενασχόληση σας με την εφαρμογή;
Ήταν ικανοποιητικό το αποτέλεσμα αυτού που δημιουργήσατε με την
εφαρμογή;
Θα χρησιμοποιούσατε ξανά αυτήν την εφαρμογή;
1=καθόλου, 2=λίγο, 3=μέτρια, 4=αρκετά, 5=πολύ
Ερωτήσεις ελεύθερης ανάπτυξης
Περιγράψτε με λίγα λόγια την εμπειρία σας από την χρήση της εφαρμογής.
Ποιο πιστεύετε ότι ήταν το μεγαλύτερο πλεονέκτημα της εφαρμογής;
Ποιο πιστεύετε ότι ήταν το μεγαλύτερο μειονέκτημα της εφαρμογής;
Έχετε να προτείνετε επιπλέον δυνατότητες που θα μπορούσε να έχει η
εφαρμογή;

27. ενδεικτικές απαντήσεις μαθητών σε
ερωτήσεις ελεύθερης ανάπτυξης
Είναι εύκολη στη
χρήση!
Είναι online.
Έχει ωραίες εικόνες
για φόντο.
Μου αρέσει που
ζωγραφίζω όπου θέλω!
Δε μπορούσα να
μορφοποιήσω το
κείμενο όπως ήθελα.
Κάποια στιγμή έβγαλε
ένα μήνυμα και ήταν
δύσκολο να καταλάβω
πως θα συνεχίσω.
Δε μπορούσα να κάνω
αλλαγές στην αφίσα που
ήδη είχα αποθηκεύσει.
Θα ήθελα
περισσότερες εικόνες
για φόντο,
περιγράμματα και
σχήματα.

28. συμπεράσματα
 Η ευκολία χρήσης και εκμάθησης φαίνεται να
αξιολογήθηκαν θετικά.
 Πήραν μεγάλη ικανοποίηση από την επαφή τους με την
εφαρμογή και από το αποτέλεσμα της δημιουργίας τους.
 Φαίνεται ότι δυσκολεύτηκαν στη μορφοποίηση του
κειμένου. Θα ήθελαν να έχουν μεγαλύτερη ευελιξία σε
αυτόν τον τομέα όπως για παράδειγμα στοίχιση κειμένου,
επιλογή ενός μόνο μέρους κειμένου κ.α. .

29. συμπεράσματα
Αν και δε διαπίστωσαν ιδιαίτερα προβλήματα στην
εφαρμογή , επισήμαναν ότι τα μηνύματα λάθους δεν
ήταν απολύτως ικανοποιητικά και αρκετά.
 Επιπλέον δυνατότητες της εφαρμογής (περισσότερες
εικόνες για φόντο, σχήματα, εφέ κ.α.) ενδεχομένως να
παρακινούσαν περισσότερο τους μαθητές.

31. ευχαριστώ