Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής

δημιουργίας ψηφιακής αφίσας

Τρακαδά Αθανασία

Επιβλέπων Καθηγητής: Ρετάλης Συμεών

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ

ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ

Πειραιάς, 2014

δομή εργασίας Κεφάλαιο 1: γενική ιδέα

Κεφάλαιο 2: ορισμοί, θεωρίες μάθησης, πλεονεκτήματα δημιουργίας ψηφιακής αφίσας

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

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

Κεφάλαιο 5: αξιολόγηση, τελικά συμπεράσματα

Αφίσα και εκπαίδευση. Πως συνδέονται;

Σύμφωνα με τις γνωστικές θεωρίες η μάθηση δε μεταδίδεται, αλλά είναι μια διαδικασία προσωπικής κατασκευής της γνώσης. Η μάθηση πρέπει να είναι αυθεντική.

Η δημιουργία αφίσας από την πλευρά των εκπαιδευόμενων είναι μια δραστηριότητα που ταιριάζει με τη φιλοσοφία αυτών των θεωριών.

Σύμφωνα με τη γνωστική θεωρία του Mayer, η μάθηση γίνεται βαθύτερη όταν συνοδεύεται από τον κατάλληλο συνδυασμό λέξεων και εικόνων.

Ο συνδυασμός διαφορετικών τρόπων παρουσίασης ενός διδακτικού αντικειμένου από την πλευρά των εκπαιδευτικών, όπως μέσα από μια αφίσα, μπορεί να βελτιώσει την εκπαιδευτική διαδικασία

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

Ψηφιακή αφίσα

Σχεδίαση συστήματος

Βασίστηκε στις αρχές του ανθρωποκεντρικού σχεδιασμού λογισμικού που αφορά διαδικασίες ανάπτυξης εύχρηστων συστημάτων προσαρμοσμένων στα χαρακτηριστικά των χρηστών τους.

Δεν είναι απαραίτητη η αυστηρή ακολουθία των φάσεων, ούτε ορίζεται μονοσήμαντα το σημείο έναρξης της διαδικασίας.

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

Σκοπός

Ο κύριος σκοπός της σχεδίασης του εργαλείου δημιουργίας ψηφιακής αφίσας είναι η βελτίωση της εκπαιδευτικής διαδικασίας.

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

ερευνητικές, τεχνολογικές, δεξιότητες παρουσίασης κ.α. να αναπτύξουν την φαντασία τους , την αισθητική και τη

δημιουργικότητα τους η παροχή επιπλέων κινήτρων για συμμετοχή στην

εκπαιδευτική διαδικασία

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

1 Glogster

2 Padlet

3 Postermywall

4 Google drawing

Παρόμοια συστήματα

ΧΑΡΑΚΤΗΡΙΣΤΙΚΑGlogster Padlet Postermywall Google

drawing

Online εφαρμογή √ √ √ √

Drag and drop αντικειμένων √ √ √ √

Επιλογή εικόνας/θέματος για φόντο √ √ √

Εισαγωγή κειμένου √ √ √ √

Μορφοποίηση κειμένου με γραφικό περιβάλλον √ √ √

Εισαγωγή εικόνων από υπολογιστή √ √ √ √

Εισαγωγή βίντεο, ήχου √ √

Χρήση κάμερας για εισαγωγή εικόνας √ √ √

Χρήση κάμερας για εισαγωγή βίντεο √

Προσθήκη εφέ √ √ √

Export σε image √ √ √

Αναζήτηση και εισαγωγή εικόνων απόopenclipart , Pixebay , Flickr

√

Απαιτείται εγγραφή √ √

Συγκριτικός πίνακας λειτουργιών

χρήστες - χαρακτηριστικά -περιβάλλον

ΠΡΩΤΕΥΟΝΤΕΣ: ΜΑΘΗΤΕΣ - Χαρακτηριστικά Ηλικία: 9 - 17 χρόνια Εμπειρία στη χρήση υπολογιστών: εξοικείωση με τη χρήση

διαδικτυακών εφαρμογών, καθώς είναι μέρος της καθημερινότητας τους μέσω κυρίως των κοινωνικών δικτύων

ΔΕΥΤΕΡΕΥΟΝΤΕΣ: ΕΚΠΑΙΔΕΥΤΙΚΟΙ- Χαρακτηριστικά Προέλευση: Πρωτοβάθμια και Δευτεροβάθμια εκπαίδευση, Εμπειρία στη χρήση υπολογιστών : βασικές δεξιότητες χρήσης

απλών εφαρμογών πληροφορικής

ΠΕΡΙΒΑΛΛΟΝ ΧΡΗΣΤΩΝ: σχολικό εργαστήριο, αίθουσα με φορητούς υπολογιστές, οπουδήποτε υπάρχει υπολογιστής με πρόσβαση στο διαδίκτυο

Βασικές λειτουργίες των χρηστών

Καθορισμός διαστάσεων και φόντου της αφίσας

Εισαγωγή αντικειμένων στην αφίσα: κείμενο, εικόνα από υπολογιστή, εικόνα από url, clipart

Χειρισμός αντικειμένων

Ζωγραφική

Εξαγωγή αφίσας ως εικόνα

Διαγραφή

Εμφάνιση βοήθειας

Τεχνολογίες ελεύθερου λογισμικού

Τεχνολογίες υλοποίησης συστήματος

Html-Css-JavaScript

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

jQuery

Είναι μια βιβλιοθήκη JavaScript, δηλαδή μια συλλογή από προκατασκευασμένες JavaScript συναρτήσεις.

ΠΛΕΟΝΕΚΤΗΜΑΤΑ

• Έχει σχετικά μικρό μέγεθος• Είναι εύκολη στην εκμάθηση και στην χρήση• Είναι δοκιμασμένη μιας και χρησιμοποιείται από

εκατομμύρια sites• Αναπτύσσεται από μεγάλη κοινότητα

προγραμματιστών• Έχει πολύ καλή τεκμηρίωση και βοηθήματα• Έχει πολλά Plug-ins και συνεχώς αναπτύσσονται νέα• Cross browser• Είναι δωρεάν

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

Παραδείγματα από πρόσθετα

DRAG DROP‘N

αλληλεπιδράσειςwidgets

Json

• Το Json είναι μια δημοφιλής μορφή για τη σύνταξη και ανταλλαγή δεδομένων

• Παρόμοιο με το XML.• Πολλές online υπηρεσίες όπως το Flickr, OpenClipArt,

Google Maps,Twitter προσφέρουν δεδομένα κωδικοποιημένα με τη σύνταξη Json

• Τα δεδομένα Json εκφράζονται ως μια σειρά από ζευγάρια παραμέτρων και τιμών

• Ευκολοδιάβαστο τόσο για ανθρώπους όσο και για υπολογιστές

Ajax

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

Παρουσίαση της εφαρμογής

Αρχική σελίδα Περιβάλλον εργασίας

Export σε εικόνα

διαγραφή

βοήθεια

ζωγραφική

κείμενο

εικόνα

εικόνα από url

clipart

ρυθμίσεις

εργαλεία εφαρμογής

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

ρυθμίσεις

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

εισαγωγή εικόνων: 3 επιλογές

από τον υπολογιστή του χρήστη

από url

από το openclipaert.org

ζωγραφική

χειρισμός αντικειμένων επάνω στην αφίσα

περιστροφήμεταφοράμπροστά

διαγραφή

αλλαγή μεγέθους

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

αξιολόγηση ευχρηστίας συστήματοςΣυμπερασματική αξιολόγηση με χρήση διερευνητικών τεχνικών

• Η εφαρμογή δόθηκε σε μαθητές της δευτέρας λυκείου στα πλαίσια του μαθήματος της διερευνητικής εργασίας (project).

• Η τάξη είχε 17 μαθητές, 2 αγόρια, 15 κορίτσια. • Στο τελευταίο στάδιο του project, που είναι η διατύπωση

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

• Για την όλη διαδικασία χρειάστηκαν δυο διδακτικές ώρες. Πρώτα έγινε μια μικρή παρουσίαση του εργαλείου και έπειτα οι ομάδες δημιούργησαν τις αφίσες .

• Τέλος όλοι οι μαθητές συμπληρώσαν το σχετικό ερωτηματολόγιο.

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

Παράμετρος: Υποκειμενική Ικανοποίηση-ΕρωτήσειςΉταν μια ευχάριστη διαδικασία η ενασχόληση σας με την εφαρμογή;Ήταν ικανοποιητικό το αποτέλεσμα αυτού που δημιουργήσατε με την εφαρμογή;Θα χρησιμοποιούσατε ξανά αυτήν την εφαρμογή;

1=καθόλου, 2=λίγο, 3=μέτρια, 4=αρκετά, 5=πολύ

Ερωτήσεις ελεύθερης ανάπτυξηςΠεριγράψτε με λίγα λόγια την εμπειρία σας από την χρήση της εφαρμογής.Ποιο πιστεύετε ότι ήταν το μεγαλύτερο πλεονέκτημα της εφαρμογής;Ποιο πιστεύετε ότι ήταν το μεγαλύτερο μειονέκτημα της εφαρμογής;Έχετε να προτείνετε επιπλέον δυνατότητες που θα μπορούσε να έχει η εφαρμογή;

ενδεικτικές απαντήσεις μαθητών σε ερωτήσεις ελεύθερης ανάπτυξης

Είναι εύκολη στη χρήση!

Είναι online.Έχει ωραίες εικόνες

για φόντο.Μου αρέσει που

ζωγραφίζω όπου θέλω!

Δε μπορούσα να μορφοποιήσω το

κείμενο όπως ήθελα.Κάποια στιγμή έβγαλε

ένα μήνυμα και ήταν δύσκολο να καταλάβω

πως θα συνεχίσω.

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

Θα ήθελα περισσότερες εικόνες

για φόντο, περιγράμματα και

σχήματα.

συμπεράσματα

Η ευκολία χρήσης και εκμάθησης φαίνεται να αξιολογήθηκαν θετικά.

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

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

συμπεράσματα

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

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

ευχαριστώ