ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ - ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ Διεπαφές χρήστη για φορητές συσκευές για χρήση σε ολοκληρωμένα εκπαιδευτικά περιβάλλοντα Πτυχιακή Εργασία του Μαντά Άγγελου (ΑΕΜ: 1105) Επιβλέπων Καθηγητής: Πολίτης Διονύσιος ΘΕΣΣΑΛΟΝΙΚΗ ΟΚΤΩΜΒΡΙΟΣ 2012 -i-
Πρόλογος Η μεγάλη διείσδυση των smartphones και των tablets στη ζωή των ανθρώπων έχει αλλάξει κατά πολύ την επιστήμη της πληροφορικής. Η συνεχής αύξηση του ρυθμού της ζωής επιβάλει την εκμετάλλευση κάθε στιγμή της διάρκειας της ημέρας. Τα smartphones έχουν αναλάβει επάνω τους τις λειτουργίες που έκαναν για εμάς οι φορητοί υπολογιστές, οι φωτογραφικές μηχανές, οι πιστωτικές κάρτες και άλλα. Ο αριθμός των εργασιών που μπορούμε να πραγματοποιήσουμε μέσω των φορητών συσκευών συνεχώς αυξάνεται. Αιτία είναι η δυνατότητα που παρέχουν να χρησιμοποιούνται οιαδήποτε στιγμή της ημέρας σε οποιοδήποτε σημείο. Στόχος της πτυχιακής είναι ο εμπλουτισμός της ηλεκτρονικής βιβλιοθήκης του Αριστοτελείου Πανεπιστημίου Θεσσαλονίκης στο blackboard για την ευκολότερη χρήση του ιστότοπου (https://blackboard.lib.auth.gr/) στις λεγόμενες φορητές συσκευές τύπου smartphones και tablets με τη χρήση κώδικα html στα ήδη υπάρχοντα εργαλεία. Η πτυχιακή εκπονήθηκε σε συνεργασία με την ομάδα εργασίας του blackboard της κεντρικής Βιβλιοθήκης του Αριστοτελείου Πανεπιστημίου Θεσσαλονίκης. Στο σημείο αυτό θα ήθελα να ευχαριστήσω τον επιβλέποντα καθηγητή της πτυχιακής μου κ. Πολίτη Διονύσιο, Καθηγητή του τμήματος Πληροφορικής του ΑΠΘ, για την εμπιστοσύνη που μου έδειξε με την ανάθεση της πτυχιακής. Επίσης θα ήθελα να τον ευχαριστήσω για την πολύτιμη βοήθειά του, την άψογη συνεργασία και την αδιάκοπη καθοδήγηση που μου πρόσφερε για την ολοκλήρωση της. Μαντάς Άγγελος 22/10/2012 -i-
Περιεχόμενα ΠΡΟΛΟΓΟΣ... I ΠΕΡΙΕΧΟΜΕΝΑ... III 1 ΕΙΣΑΓΩΓΗ... 1 2 SMARTPHONES ΚΑΙ TABLETS... 3 2.1 SMARTPHONES... 3 2.1.1 Εμφάνιση... 3 2.1.2 Λειτουργικό Σύστημα... 4 2.1.3 Τα σημαντικότερα λειτουργικά συστήματα... 4 2.1.4 Μερίδιο αγοράς... 7 2.2 TABLETS... 9 2.2.1 Εμφάνιση... 10 2.2.2 Λειτουργικό Σύστημα... 12 3 ΗΛΕΚΤΡΟΝΙΚΗ ΒΙΒΛΙΟΘΗΚΗ BLACKBOARD... 15 3.1 EΡΓΑΛΕΙΑ... 15 3.2 JOURNALS... 16 3.3 WIKIS... 16 3.4 ΙΣΤΟΛΟΓΙΑ (BLOGS)... 25 3.5 ΑΠΟΣΤΟΛΗ ΕΡΓΑΣΙΑΣ... 26 4 ΔΗΜΙΟΥΡΓΙΑ MOBILE ΙΣΤΟΣΕΛΙΔΑΣ... 33 4.1 ΟΔΗΓΙΕΣ ΔΙΕΠΑΦΗΣ ΧΡΗΣΤΗ... 33 4.2 ΣΧΕΔΙΑΣΜΟΣ... 34 5 ΔΗΜΙΟΥΡΓΙΑ ΑΚΑΔΗΜΑΪΚΟΥ ΠΡΟΦΙΛ... 35 5.1 ΣΤΑΔΙΟ ΣΧΕΔΙΑΣΜΟΥ... 35 5.2 ΔΗΜΙΟΥΡΓΙΑ ΠΕΡΙΕΧΟΜΕΝΟΥ ΠΡΟΦΙΛ... 43 -iii-
6 ΠΕΡΙΓΡΑΦΗ ΤΗΣ ΥΛΟΠΟΙΗΣΗΣ... 47 6.1 ΤΟ ΤΜΗΜΑ HEAD ΤΗΣ HTML... 47 6.2 STYLESHEETS... 48 6.3 ΤΟ ΤΜΗΜΑ BODY ΤΗΣ HTML... 50 ΒΙΒΛΙΟΓΡΑΦΙΑ... 53 -iv-
1 Εισαγωγή Στην παρούσα πτυχιακή μελετήθηκε η δυνατότητα προσαρμογής των εργαλείων της ηλεκτρονικής βιβλιοθήκης του Αριστοτελείου πανεπιστημίου ώστε να είναι όσο το δυνατόν συμβατά με φορητές συσκευές. Η σημερινή έκδοση του blackboard δεν υποστηρίζει ξεχωριστή προβολή σε smartphones ή tablets. Με την εκπόνηση της πτυχιακής εργασίας, η λύση που προτείνεται στο πρόβλημα αυτό, είναι η χρήση κώδικα html στα ήδη υπάρχοντα εργαλεία της ηλεκτρονικής βιβλιοθήκης, δημιουργώντας τα κατάλληλα πλαίσια χρήστη ώστε να είναι ευκολότερη η χρήση αυτών των εργαλείων σε συσκευές τύπου έξυπνων κινητών και ταμπλετών. Προτού όμως εξεταστεί η λύση της εισαγωγής κώδικα html, θα πρέπει να εξετασθούν η λειτουργία και τα τεχνικά χαρακτηριστικά αυτών των συσκευών. Έτσι θα μελετήσουμε μερικά θέματα των έξυπνων κινητών και των ταμπλετών που θα μας είναι χρήσιμα στη δημιουργία των interfaces όπως είναι το μέγεθος της οθόνης τους και η ανάλυσή της. Παρακάτω δίνονται συνοπτικά τα κεφάλαια της πτυχιακής εργασίας. Στο δεύτερο κεφάλαιο θα δούμε τις δυο μεγάλες κατηγορίες που μας απασχολούν, τα smartphones και τα tablets, καθώς θα αγγίξουμε και τα λειτουργικά συστήματα με τα οποία αυτές λειτουργούν. Στο τρίτο κεφάλαιο θα μελετήσουμε την ηλεκτρονική βιβλιοθήκη του Αριστοτέλειου Πανεπιστημίου (blackboard.lib.auth.gr) και τα εργαλεία που μας παρέχει η τελευταία έκδοση της. Στη συνέχεια θα δούμε διάφορους τρόπους δημιουργίας τρόπων επικοινωνίας και συνεργασίας των φοιτητών με τον καθηγητή. Τέλος θα δούμε και τρόπους ώστε να είναι ορατοί οι βαθμοί του κάθε φοιτητή στο προφίλ του όπως και η δυνατότητα αποστολής εργασιών. Στο τέταρτο κεφάλαιο θα εξετάσουμε διεξοδικά το πως δημιουργείται μια mobile ιστοσελίδα, τη δημιουργία της οποίας θα επιδιώξουμε στη συνέχεια για να δώσουμε λύση στο πρόβλημα χρήσης του blackboard σε φορητές συσκευές. Στο πέμπτο κεφάλαιο θα εξετάσουμε διεξοδικά τη λύση που δόθηκε στο πρόβλημα. Θα εξετάσουμε λεπτομερώς τον τρόπο λειτουργίας του κώδικα html αλλά και τον -1-
τρόπο με τον οποίο δίνει λύσεις. Θα δούμε τις διαφορές στην εμφάνιση με τη χρήση του ή χωρίς αυτή. Στο έκτο κεφάλαιο θα δούμε μια γενική περιγραφή του κώδικα που θα χρησιμοποιήσουμε καθώς και θα αναλύσουμε τις κλάσεις, τα βασικά τους στοιχεία και θα μελετήσουμε τον τρόπο που χρησιμοποιούνται. Επίσης παρουσιάζεται το αποτέλεσμα που έχει η χρήση του κώδικα για τη δημιουργία του ακαδημαϊκού προφίλ ενός φοιτητή. Παρουσιάζεται επίσης η αποτίμηση της εικόνας της σελίδας που θα δημιουργήσουμε με διάφορες φωτογραφίες Στο τέλος δίνεται και όλη η βιβλιογραφία που χρησιμοποιήθηκε για την ολοκλήρωση της πτυχιακής εργασίας με αναφορές σε βιβλία και δημοσιευμένες εργασίες καθώς και όλες τις απαραίτητες ιστοσελίδες. Είναι σημαντικό να σημειωθεί ότι μεγάλο μέρος της εργασίας στηρίζεται στην συνεργασία και την καθοδήγηση του επιβλέποντα καθηγητή κύριου Διονύση Πολίτη και δεν αντλείται από κάποια βιβλιογραφία μιας και το θέμα της πτυχιακής είναι ακόμη αντικείμενο έρευνας. -2-
2 Smartphones και Tablets Η «νέα γενιά» κινητών τηλεφώνων, τα γνωστά έξυπνα κινητά ή smartphones, οι μικροί φορητοί υπολογιστές, τα netbooks και οι υπολογιστές - «ταμπλέτες» είναι οι πρωταγωνιστές της αγοράς, αφο συγκεντρώνουν ποσοστό πάνω από 50% του συνολικού τζίρου της παγκόσμιας αγοράς, με τις συνολικές πωλήσεις να ξεπερνούν τις 400 εκατ. μονάδες. Αυτή η στροφή στη χρήση τέτοιων συσκευών μπορεί να αποτελέσει το ορόσημο της μετάβασης σε ένα πιο ετερογενές περιβάλλον. 2.1 Smartphones Τα smartphones είναι κινητά τηλέφωνα που χρησιμοποιούν λειτουργικό σύστημα για φορητές συσκευές, με μεγαλύτερη υπολογιστική δύναμη και δυνατότητα διασύνδεσης σε σχέση με ένα συμβατικό κινητό τηλέφωνο. Παρέχουν λειτουργίες για τη λήψη φωτογραφιών και βίντεο, GPS πλοήγησης, σύνδεσης στο διαδίκτυο είτε μέσω ασύρματων είτε μέσω ευρυζωνικών δικτύων, αποτελώντας μια συσκευή πολλαπλών χρήσεων. 2.1.1 Εμφάνιση Οι οθόνες για τα έξυπνα κινητά ποικίλουν σε μεγάλο βαθμό τόσο όσον αφορά το μέγεθος της οθόνης όσο και για την ανάλυσή της. Τα πιο συνηθισμένα μεγέθη οθόνης κυμαίνονται από τις 2 έως τις 4 ίντσες. Υπάρχουν και μερικές οθόνες 5 ιντσών που χρησιμοποιούνται σε smartphones όπως είναι το Dell Streak και το Samsung Galaxy Note και Samsung Galaxy Note II, χωρίς να προτιμούνται καθώς μεγαλώνοντας την οθόνη επηρεάζεται η λειτουργικότητα της συσκευής Η ανάλυση τέτοιων των οθονών κυμαίνεται από 240x320 έως 720x1280. -3-
Εικόνα 1 Οθόνη Smartphone 2.1.2 Λειτουργικό Σύστημα Ένα λειτουργικό σύστημα για φορητές συσκευές, που αναφέρεται επίσης ως mobile λειτουργικό σύστημα, είναι το λειτουργικό σύστημα που λειτουργεί ένα smartphone, ένα tablet, ένα PDA, ή άλλες ψηφιακές κινητές συσκευές. Σύγχρονα κινητά λειτουργικά συστήματα συνδυάζουν τα χαρακτηριστικά του λειτουργικού συστήματος του προσωπικού υπολογιστή με χαρακτηριστικά όπως οθόνη αφής, Bluetooth, WiFi, GPS πλοήγησης για κινητά, φωτογραφική μηχανή, βιντεοκάμερα, αναγνώριση φωνής, εγγραφή φωνής, αναπαραγωγή πολυμέσων, προσωπικό ψηφιακό βοηθό (PDA), και άλλα. 2.1.3 Τα σημαντικότερα λειτουργικά συστήματα 1. Τo Symbian OS είναι λειτουργικό σύστημα για φορητές συσκευές. Αποτελεί εξέλιξη του λειτουργικού συστήματος EPOC από την Psion. To Symbian OS δημιουργήθηκε με της γλώσσας προγραμματισμού C++ από τη Symbian Ltd. To -4-
λειτουργικό σύστημα Symbian OS «τρέχει» σε κινητά της Nokia, Sony Ericsson, Benq-Siemens, Samsung, Motorola, NTT DoCoMo. Επίσης στο Symbian OS έχουν βασιστεί αρκετές πλατφόρμες όπως Nokia Series 60, Series 80, Series 90, UIQ και η FOMA. 2. Το Android είναι λειτουργικό σύστημα για συσκευές κινητής τηλεφωνίας το οποίο τρέχει τον πυρήνα του λειτουργικού Linux. Αρχικά αναπτύχθηκε από την Google και αργότερα από την Open Handset Alliance. Επιτρέπει στους κατασκευαστές λογισμικού να συνθέτουν κώδικα με την χρήση της γλώσσας προγραμματισμού Java, ελέγχοντας την συσκευή μέσω βιβλιοθηκών λογισμικού ανεπτυγμένων από την Google. Η πρώτη παρουσίαση της πλατφόρμας Android έγινε στις 5 Νοεμβρίου 2007, παράλληλα με την ανακοίνωση της ίδρυσης του οργανισμού Open Handset Alliance, μιας κοινοπραξίας 48 τηλεπικοινωνιακών εταιριών, εταιριών λογισμικού καθώς και κατασκευής hardware, οι οποίες είναι αφιερωμένες στην ανάπτυξη και εξέλιξη ανοιχτών προτύπων στις συσκευές κινητής τηλεφωνίας. Η Google δημοσίευσε το μεγαλύτερο μέρος του κώδικα του Android υπό τους όρους της Apache License, μιας ελεύθερης άδειας λογισμικού. 3. To Bada είναι ένα λειτουργικό σύστημα για φορητές συσκευές, όπως smartphones και υπολογιστές tablet. Έχει αναπτυχθεί από τη Samsung Electronics. Το όνομά του προέρχεται από το "바다 (bada)", που σημαίνει "θάλασσα" στα Κορεάτικα. Κυμαίνεται από mid-range έως και high-end smartphones. Προκειμένου να τονωθεί η υιοθέτηση του Bada OS, η Samsung φέρεται να εξετάζει την απελευθέρωση του πηγαίου κώδικα κάτω από μία opensource άδεια, με την επέκταση της υποστήριξης συσκευής να περιλαμβάνει Smart τηλεοράσεις. Η Samsung ανακοίνωσε τον Ιούνιο του 2012 ότι μπορεί να συγχωνεύσει το Bada στο έργο Tizen, αλλά δεν έχει επιβεβαιωθεί. H Samsung χρησιμοποιεί το δικό της λειτουργικό σύστημα Bada παράλληλα με το Android OS και το Windows Phone, για τα smartphones που αναπτύσσει. Όλες οι συσκευές κατασκευής Bada χρησιμοποιούν την επωνυμία Wave παρόμοια με τις Android συσκευές της Samsung με το όνομα Galaxy. -5-
4. To BlackBerry OS είναι ένα ιδιόκτητο κινητό λειτουργικό σύστημα το οποίο αναπτύχθηκε από τη Research In Motion (RIM), για smartphone και φορητές συσκευές. Το λειτουργικό σύστημα παρέχει multitasking και υποστηρίζει εξειδικευμένες συσκευές εισόδου που έχουν υιοθετηθεί από τη RIM για χρήση στις φορητές συσκευές της, ιδιαίτερα το περιστρεφόμενο πλήκτρο, trackball, και πιο πρόσφατα, το trackpad και η οθόνη αφής. Η πλατφόρμα BlackBerry είναι ευρύτερα γνωστό για την υποστήριξη χρήσης ηλεκτρονικού ταχυδρομείου, μέσω του MIDP 1.0, και πιο πρόσφατα του MIDP 2.0, το οποίο επιτρέπει την πλήρη ενεργοποίηση και τον ασύρματο συγχρονισμό με Microsoft Exchange, Lotus Domino ή Novell GroupWise e-mail, ημερολόγιο, εργασίες, σημειώσεις, επαφές όταν χρησιμοποιείται με το BlackBerry Enterprise Server. Το λειτουργικό σύστημα υποστηρίζει επίσης WAP 1.2.Ενημερώσεις για το λειτουργικό σύστημα μπορεί να είναι αυτόματα διαθέσιμες μέσω ασύρματων φορέων που υποστηρίζουν την BlackBerry OTASL υπηρεσία.τρίτοι προγραμματιστές μπορούν να γράψουν λογισμικό χρησιμοποιώντας τις διαθέσιμες κατηγορίες API BlackBerry, αν και εφαρμογές που κάνουν χρήση συγκεκριμένων λειτουργιών πρέπει να υπογράφονται ψηφιακά. 5. Το ios είναι ένα λειτουργικό σύστημα που αναπτύχθηκε και διανέμεται από την Apple Inc και κυκλοφόρησε αρχικά το 2007 για το iphone και ipod touch. Στη συνέχεια επεκτάθηκε για να υποστηρίξει κι άλλες συσκευές της Apple όπως το ipad και το Apple TV. Σε αντίθεση με τα Windows Phone της Microsoft και τα Android της Google, η Apple δεν παραχωρεί άδεια χρήσης για εγκατάσταση σε μη Apple συσκευές. Από τις 12 Σεπτέμβρη του 2012, στο App Store της Apple που περιλαμβάνονται περισσότερα από 700.000 ios εφαρμογές, τις οποίες έχουν συνολικά κατεβάσει περισσότερες από 30 δισεκατομμύρια φορές. Έχει ένα μερίδιο 23% των πωλήσεων smartphone κατά το πρώτο τρίμηνο του 2012, πίσω μόνο από τα Google Android. Τον Ιούνιο του 2012, αντιπροσώπευαν το 65% των κινητών κατανάλωσης web δεδομένων (συμπεριλαμβανομένης της χρήσης τόσο του ipod Touch όσο και του ipad). Στο πρώτο εξάμηνο του 2012, υπήρχαν 410 εκατομμύρια συσκευές που είχαν ενεργοποιηθεί. Σύμφωνα με την ειδική εκδήλωση που πραγματοποιήθηκε από την Apple στις 12 Σεπτεμβρίου -6-
2012, οι 400.000.000 συσκευές έχουν πωληθεί έως τον Ιούνιο του 2012. Το user interface του ios βασίζεται στην έννοια του άμεσου χειρισμού, με τη χρήση multi-touch χειρονομιών. Τα στοιχεία ελέγχου διεπαφής αποτελούνται από ρυθμιστικά, διακόπτες και κουμπιά. Η αλληλεπίδραση με το λειτουργικό σύστημα περιλαμβάνει κινήσεις που διαθέτουν ειδικό ορισμό στο πλαίσιο του λειτουργικού συστήματος ios και του multi-touch interface του. Το ios προέρχεται από το OS X, με το οποίο μοιράζεται το θεμέλιο του Δαρβίνου, και ως εκ τούτου είναι ένα λειτουργικό σύστημα Unix. Το ios είναι η έκδοση για φορητές συσκευές της Apple του λειτουργικό σύστημα Mac OS X, που χρησιμοποιείται σε υπολογιστές της Apple.Στα ios, παρατηρούμε τέσσερα επίπεδα αφαίρεσης: τον πυρήνας OS, το επίπεδο Υπηρεσιών του πυρήνα, το επίπεδο των πολυμέσων, και το επίπεδο Cocoa Touch. Η τρέχουσα έκδοση του λειτουργικού συστήματος (ios 6,0) δεσμεύει 1-1,5 GB της μνήμης flash της συσκευής για το επίπεδο του συστήματος, χρησιμοποιώντας περίπου 800 MB για το ios. 6. Το Windows Phone είναι μια οικογένεια λειτουργικών συστημάτων για κινητά που αναπτύχθηκε από τη Microsoft, και είναι ο διάδοχος της Windows Mobile πλατφόρμας. Σε αντίθεση με τον προκάτοχό του, προορίζεται με στόχο την αγορά των καταναλωτών και όχι την επιχειρησιακή αγορά. Ξεκίνησε το δεύτερο εξάμηνο του 2010, ακολουθούμενο με τη διάθεσή του στην Ασία μετά τις αρχές του 2011. Με τα Windows Phone, η Microsoft δημιούργησε ένα νέο περιβάλλον εργασίας χρήστη, το οποίο διαθέτει τη δική του σχεδιαστική γλώσσα που ονομάζεται Metro. Επιπλέον, το λογισμικό έχει ενσωματωμένες υπηρεσίες τρίτων προγραμματιστών και υπηρεσίες της Microsoft, και καθορίζει τις ελάχιστες απαιτήσεις για το υλικό που τρέχει. 2.1.4 Μερίδιο Αγοράς Το 2006, το Android, το ios, το Windows Phone και το Bada δεν υπάρχουν ακόμα και μόλις 64 εκατομμύρια smartphones είχαν πουληθεί. Σήμερα, σχεδόν 10 φορές περισσότερα smartphones έχουν πωληθεί και τα κορυφαία λειτουργικά συστήματα -7-
κινητών στην αγορά ως "smartphones" είναι το Android, το Symbian, το Apple ios, το RIM BlackBerry, το Windows Phone και το Bada. Αξίζει α σημειωθεί ότι οι στατιστικές αυτές περιλαμβάνουν μόνο τα λειτουργικά συστήματα που διατίθενται στην αγορά ως "smartphones" (για παράδειγμα, δεν περιλαμβάνουν σύστημα S40 της Nokia λειτουργίας, η οποία, σύμφωνα με ανακοίνωση της Nokia στις 25 Ιανουαρίου 2012, έχει πουλήσει πάνω από 1.5 δισεκατομμύρια συσκευές S40). Εικόνα 2 Μερίδιο Αγοράς Smartphone(%) Το ΙDC προβλέπει ανάπτυξη του μεριδίου αγοράς του Android από 59% το 1ο τρίμηνο του 2012 στο 61% σε ολόκληρο το έτος 2012 και να μειωθεί στο 53% μέχρι το 2016. Το τηλέφωνο των Windows να αυξηθεί από το 2% το 1ο τρίμηνο του 2012 στο 5% στο τέλος του έτος 2012 και στη συνέχεια να αυξηθεί σε 19% μέχρι το 2016. Το iphone (ios) να μειωθεί από 23% το 1ο τρίμηνο του 2012 σε 21% στα τέλη του 2012 και στη συνέχεια να μειωθεί σε 19% μέχρι το 2016. Το μερίδιο αγοράς BlackBerry αναμένεται να διατηρήσει το σημερινό 6% μέχρι το 2016. Ενώ μια μελέτη του Bernstein Research επισημαίνει : "Η έλλειψη ενδιαφέροντος των καταναλωτών για τα Windows που προορίζονται για κινητά τηλέφωνα ήταν πολύ μεγάλη σε έρευνες μάρκετινγκ που έχουν πραγματοποιηθεί σε ολόκληρη την υδρόγειο κατά τα τελευταία -8-
αρκετά χρόνια." και ότι «η κατάσταση των Windows στα κινητά τηλέφωνα είναι πλέον πολύ πιθανό να επανέλθει». Παρά το γεγονός ότι, όλες οι προβλέψεις είναι αμφισβητήσιμες, παρέχουν μια καλή όψη για την τρέχουσα κατάσταση και τις μελλοντικές τάσεις.. Εικόνα 3 Πωλήσεις Smartphones(χιλιάδες μονάδες) 2.2 Tablets Ένας υπολογιστής tablet, είναι ένας φορητός υπολογιστής μεγαλύτερος από ό, τι ένα κινητό τηλέφωνο ή προσωπικός ψηφιακός βοηθός, ενσωματωμένος σε μια επίπεδη οθόνη αφής και κυρίως λειτουργεί με το άγγιγμα της οθόνης αντί να χρησιμοποιεί ένα φυσικό πληκτρολόγιο. Χρησιμοποιεί συχνά ένα εικονικό πληκτρολόγιο στην οθόνη, μια παθητική γραφίδα, ή ένα ψηφιακό στυλό. Τυπικές λειτουργίες των υπολογιστών tablet είναι οι εξής: Ασύρματη σύνδεση και λειτουργίες περιήγησης (χρησιμοποιώντας 2G, 3G, 4G ή WiFi) Χρήση E-mail -9-
Πιθανές λειτουργίες κινητού τηλεφώνου (μηνυμάτων, βίντεο κλήσης, ηχείο ή τα ακουστικά χρήσεις κινητό) Δορυφορικό σύστημα πλοήγησης GPS Λειτουργίες βίντεο-κάμερας, φωτογραφική μηχανής. βίντεο προβολή και επεξεργασία Ανάγνωση ηλεκτρονικών βιβλίων (συμπεριλαμβανομένων των ηλεκτρονικών εκδόσεων των περιοδικών) Κατέβασμα εφαρμογών (παιχνίδια, εκπαίδευση, επιχειρήσεις κοινής ωφέλειας) Η λειτουργία Portable media player 2.2.1 Εμφάνιση Οι υπολογιστές Tablet ουσιαστικά σχεδιάστηκαν για να γεφυρώσουν το χάσμα στις φορητές συσκευές, μεταξύ των παραδοσιακών φορητών υπολογιστών και netbooks και των smart phones που είναι τόσο δημοφιλή. Είναι εξαιρετικά λεπτοί και ελαφριοί αλλά αρκετά μεγάλοι για να είναι εύκολο να διαβασθούν και να χρησιμοποιηθούν. Ενώ το πιο κοινό μέγεθος μίας ταμπλέτας είναι μια 10-ιντσών οθόνη, υπάρχει ένα ευρύ φάσμα μεγεθών τους. Σε γενικές γραμμές, υπάρχουν πέντε τυπικά μεγέθη οθόνης που χρησιμοποιούνται ή που έρχονται στην αγορά. Παρακάτω είναι το μέσο μέγεθος και βάρος για αυτές τις ταμπλέτες. Σημειώστε ότι τα παρατεταμένα ταξίδια τυπικά θα απαιτούν ένα μικρό φορτιστή, ένας παράγοντας που δεν έχει συμπεριληφθεί στις παρακάτω τιμές. Όλοι οι αριθμοί αναφέρονται σε κατακόρυφο προσανατολισμό ως προς το ύψος, το πλάτος, το πάχος και το βάρος: 5-ιντσών Ταμπλέτα: 6 "x 3,2" x 0.4 "@ 0,75 γρ. 7-ιντσών Ταμπλέτα: 7,5 "x 5" x 0.5 "@ 1 γρ. 9-ιντσών Ταμπλέτα: 9,3 "x 6" x 0.5 "@ 1,2 γρ. 10-ιντσών Ταμπλέτα: 9,8 "x 7" x 0.5 "@ 1,4 γρ. 13-ιντσών Ταμπλέτα: 12,5 "x 8" x 0.5 "@ 2 γρ. -10-
Εικόνα 4 Μεγέθη οθόνης tablet H ανάλυση της οθόνης διαφέρει ανάλογα με τον κατασκευαστή και το εύρος τιμών στο οποίο η ταμπλέτα πωλείται. Από την ανάλυση QXGA για το νέο ipad και την ανάλυση WVGA, που βρίσκεται στα πιο βασικά μοντέλα, υπάρχει μια ευρεία επιλογή για τον καταναλωτή, ανάλογα με την προσωπική του ανάγκες. Συνήθως, η ανάλυση της οθόνης μπορούν να κατηγοριοποιηθούν ως εξής: QXGA: 2048 x 1536 WXGA: 1366 x 768 ή 1280 x 800 XGA: 1024 x 768 WSVGA: 1024 x 600 WVGA: 800 x 600 Ταμπλέτες των μικρότερων μεγεθών, όπως η 7 ιντσών μπορεί να λειτουργήσει καλά με χαμηλότερη ανάλυση οθόνης. Μεγαλύτερη ανάλυση οθόνης αποκτά σημασία καθώς αυξάνεται το μέγεθος της ταμπλέτας. Υπάρχουν 2 ειδών τεχνολογίες οθόνης TFT (Thin Film Transistor) LCD που είναι διαθέσιμες σήμερα. Η plane switching τεχνολογία ή IPS που αναπτύχθηκε στην Ιαπωνία για την αντιμετώπιση των προβλημάτων αλλαγής χρωμάτων ανάλογα τη γωνία προβολής που -11-
προκαλούνται στης οθόνες LCD. Οι IPS LCD οθόνες δεν έχουν σχεδόν καμία αλλαγή χρώματος από οποιαδήποτε γωνία προβολής. Η απλή εναλλαγή γραμμής ή PLS είναι μια σχετικά νέα τεχνολογία LCD που αναπτύχθηκε από τη Samsung στην Κορέα και έχει χαμηλότερο κόστος παραγωγής σε σύγκριση με άλλες τεχνολογίες LCD. Με βελτιωμένη ποιότητα εικόνας, γωνίες θέασης και τη φωτεινότητα της οθόνης, η PLS αναμένεται να αντιμετωπίσει αρκετά από τα ζητήματα που αντιμετωπίζουν οι κατασκευαστές ταμπλετών. 2.2.2 Λειτουργικό Σύστημα Οι ταμπλέτες, όπως οι κανονικοί υπολογιστές, μπορούν να τρέξουν μια σειρά από λειτουργικά συστήματα. Αυτά χωρίζονται σε δύο κατηγορίες, δηλαδή παραδοσιακά που βασίζονται σε desktop λειτουργικά συστήματα και mobile λειτουργικά συστήματα που βασίζεται σε λειτουργικά συστήματα smartphone. Για την πρώτη κατηγορία το πιο δημοφιλές λειτουργικό σύστημα είναι τα Microsoft Windows, καθώς και μια σειρά από διανομές Linux. Στην τελευταία κατηγορία οι πιο δημοφιλείς παραλλαγές περιλαμβάνουν Apple ios, και Android. Παραδοσιακά tablet-pc συστήματα 1. Windows Μετά τα Windows για υπολογιστές Pen, η Microsoft έχει αναπτύξει υποστήριξη για ταμπλέτες με Windows με το όνομα Microsoft Tablet PC. Σύμφωνα με τον ορισμό "Tablet PC της Microsoft» είναι λειτουργικό για x86 υπολογιστές με τη δυνατότητα εγγραφής και τη λειτουργία αναγνώρισης φωνής. Τα Tablet PCs χρησιμοποιούν το ίδιο υλικό όπως συνήθως στους φορητούς υπολογιστές αλλά με την προσθήκη υποστήριξης για την είσοδο με στυλό. Για εξειδικευμένη υποστήριξη για την είσοδο στυλό, η Microsoft κυκλοφόρησε τα Windows XP Tablet PC Edition. Σήμερα δεν υπάρχει καμία συγκεκριμένη έκδοση των Windows για χρήση σε ταμπλέτες. Ταμπλέτες με Windows Ενώ πολλοί κατασκευαστές ταμπλετών κινούνται προς την αρχιτεκτονική ARM με ελαφρύτερα λειτουργικά συστήματα, η Microsoft έχει παραμείνει σταθερή στα -12-
Windows. Η Microsoft ανακοίνωσε τα Windows 8 που θα περιλαμβάνει το νέο Metro περιβάλλον εργασίας χρήστη κατάλληληo για οθόνες αφής και συσκευές όπως tablets. 2. Linux Μια σειρά από έργα με βάση το Linux OS είναι αφιερωμένα στους υπολογιστές tablet, αλλά πολλές διανομές desktop έχουν τώρα φιλικές διεπαφές που επιτρέπουν την πλήρη χρησιμοποίηση των desktop χαρακτηριστικών για τις μικρότερες συσκευές. Επειδή όλα αυτά είναι open source, και είναι διαθέσιμα ελεύθερα, μπορεί να τρέξουν ή να μεταφερθούν και σε συσκευές που συμμορφώνονται με το σχεδιασμό tablet PC. Maemo είναι ένα λειτουργικό σύστημα βασισμένο σε Linux Debian γραφικό περιβάλλον χρήστη, το οποίο αναπτύχθηκε για τις συσκευές Nokia Internet Tablet (770, N800, N810 και N900). Είναι επί του παρόντος στην παραγωγή 5, και έχει μια μεγάλη σειρά από εφαρμογές που είναι διαθέσιμες στα επίσημα και υποστηριζόμενα από το χρήστη αποθετήρια 3. Νοkia H Nokia μπήκε στο χώρο των tablet με το Nokia 770 που τρέχει Maemo, μια Debian διανομή με βάση το Linux. Η σειρά προϊόντων συνεχίστηκε με το N900 η οποία είναι η πρώτη που πρόσθεσε τις δυνατότητες του τηλεφώνου. Το user interface και η εφαρμογή πλαισίου στρώμα, που ονομάζεται Hildon, ήταν ένα πρώιμο παράδειγμα μιας πλατφόρμας λογισμικού για γενική χρήση υπολογιστών σε μια συσκευή tablet που προορίζεται για κατανάλωση στο internet. -13-
3 Ηλεκτρονική Βιβλιοθήκη blackboard Το περιβάλλον χρήσης του Blackboard 9 σχεδιάστηκε έτσι ώστε το περιεχόμενο να μπορεί να αναδιοργανωθεί και να επεξεργαστεί με πιο εύκολο τρόπο, προσφέροντας στους χρήστες τη δυνατότητα του drag and drop για αναδιοργάνωση των αρχείων τους, καθώς επίσης και επιλογές από drop-down μενού. Οι δυνατότητες προσθήκης υλικού εμφανίζονται σε κάθε περιοχή, αφού την επιλέξουμε, αρκεί η «Λειτουργία επεξεργασίας» να είναι «Ενεργοποιημένη». Ο «Πίνακας ελέγχου» δεν ανοίγει σε ξεχωριστή σελίδα όπως στην προηγούμενη έκδοση στο blackboard 7, αλλά τον διαχειρίζεστε κάτω από το μενού μαθήματος. Εκεί βρίσκονται και οι υπόλοιπες λειτουργίες εκτός από την επεξεργασία των περιοχών. 3.1 Εργαλεία Η νέα έκδοση του blackboard σας δίνει τη δυνατότητα προσθήκης στα μαθήματα: Ιστολόγια : κάθε φοιτητής ή ομάδα φοιτητών μπορεί να «ανεβάσει» μία καταχώρηση την οποία μπορεί η υπόλοιπη τάξη να σχολιάσει. Οι αναρτήσεις είναι ορατές από όλους τους εγγεγραμμένους χρήστες. Journlas : πρόκεται για εργαλέιο παρόμοιο με τα ιστολόγια. Είναι μία πιο προσωπική επικοινωνία φοιτητή-καθηγητή, αφού είναι ορατό μόνο από το φοιτητή που συγγράφει και τον διδάσκοντα. Wikis : είναι ένας τύπος ιστότοπου που επιτρέπει τη συνεργασία φοιτητών ή ομάδας φοιτητών για ένα συγκεκριμένο θέμα. Έτσι διευκολύνεται η συνεργασία πολλών φοιτητών για τη συγγραφή μίας έρευνας ή μιας εργασίας. -15-
3.2 Journal Το journal είναι ένα εργαλείο ατομικού λογισμικού, το οποίο περιέχει στους φοιτητές τη δυνατότητα να δημοσιεύουν τις προσωπικές τους σκέψεις σχετικά με το μάθημα ή να συζητούν και να αναλύουν υλικό που σχετίζεται με το μάθημα. Απαιτήσεις Δημιουργία journal Είσοδος με δικαιώματα καθηγητή Δημιουργία καταχώρησης journal Είσοδος με δικαιώματα φοιτητή Δημιουργία Journal Επιλογή journal από τα εργαλεία Εικόνα 5 Επιλογή εργαλείου journal -16-
Δημιουργία Journal Εικόνα 6 Δημιουργία journal Πεδία Εικόνα 7 Πεδία journal -17-
Εικόνα 8 Πεδία journal Πληροφορίες journal Πληκτρολογήστε ένα Όνομα για το Journal. Χρησιμοποιήστε ένα περιγραφικό όνομα, ώστε οι χρήστες να καταλαβαίνουν τι περιέχει το Journal. Χρησιμοποιήστε το πλαίσιο κειμένου για να καταχωρήσετε οδηγίες σχετικά με τις δημοσιεύσεις στο Journal. Αυτές οι πληροφορίες είναι προαιρετικές αλλά μπορούν να βοηθήσουν τους χρήστες να κατανοήσουν τις προσδοκίες και τους σχετικούς κανόνες ή απαιτήσεις. Εικόνα 9 Πληροφορίες journal -18-
Journal διαθεσιμότητα Οι χρήστες θα μπορούν να βλέπουν το Journal ή να κάνουν καταχωρήσεις μόνο εάν η Journal διαθεσιμότητα έχει οριστεί σε Ναι. Περιορισμοί ημερομηνίας και ώρας Τα Journals μπορούν να ρυθμιστούν έτσι ώστε να εμφανίζονται μια συγκεκριμένη ημερομηνία και ώρα και να παύουν να εμφανίζονται σε μια άλλη ημερομηνία και ώρα. Οι περιορισμοί προβολής δεν επηρεάζουν το περιεχόμενο του Journal, αλλά μόνο την προβολή ή όχι του Journal στο μάθημα. Εικόνα 10 Διαθεσιμότητα/Περιορισμοί ημερομηνίας journal Ρυθμίσεις journal Επιλέξτε το χρονικό πλαίσιο, εβδομαδιαίο ή μηνιαίο, για την ευρετηριοποίηση των καταχωρήσεων του Journal. Οι καταχωρήσεις θα ομαδοποιούνται σε συνδέσμους ανά εβδομάδα ή μήνα. Για να επιτρέπεται στους χρήστες να επεξεργάζονται και να διαγράφουν τις καταχωρήσεις τους, επιλέξτε το πλαίσιο. Για να επιτρέπεται στους χρήστες να διαγράφουν τα σχόλιά τους, επιλέξτε το πλαίσιο. Για να επιτρέπεται σε άλλα μέλη του Μαθήματος να διαβάζουν τις Καταχωρήσεις του Journal, επιλέξτε το πλαίσιο. -19-
Εικόνα 11 Ρυθμίσεις journal Δημιουργία καταχώρησης journal Είσοδος ως φοιτητής Εικόνα 12 Επιλογή δημιουργίας journal -20-
Εικόνα 13 Υποβολή δημιουργίας journal 3.3 Wiki Τα Wikis χρησιμοποιούνται για τη δημιουργία ενός χώρου συνεργασίας στο πλαίσιο του μαθήματος, όπου όλοι οι μαθητές μπορούν να δουν, να συμβάλλουν, και να επεξεργαστείτε περιεχόμενο. Wikis μπορεί επίσης να χρησιμοποιηθεί ως πόρος για τους σπουδαστές για να βλέπουν πληροφορίες και περιεχόμενο σχετικό με τα μαθήματα τους. Απαιτήσεις Δημιουργία Wiki Είσοδος με δικαιώματα καθηγητή Δημιουργία σελίδας wiki Είσοδος με δικαιώματα φοιτητή -21-
Δημιουργία wiki Επιλογή wiki από τα εργαλεία Εικόνα 14 Επιλογή wiki από τα εργαλεία Δημιουργία wiki Εικόνα 15 Δημιουργία wiki -22-
Πεδία Εικόνα 16 Πεδία wiki Πληροφορίες wiki Πληκτρολογήστε ένα Όνομα για το Journal. Χρησιμοποιήστε ένα περιγραφικό όνομα, ώστε οι χρήστες να καταλαβαίνουν τι περιέχει το Journal. Χρησιμοποιήστε το πλαίσιο κειμένου για να καταχωρήσετε οδηγίες σχετικά με τις δημοσιεύσεις στο Journal. Αυτές οι πληροφορίες είναι προαιρετικές αλλά μπορούν να βοηθήσουν τους χρήστες να κατανοήσουν τις προσδοκίες και τους σχετικούς κανόνες ή απαιτήσεις. Σχόλια μπορούν να προστεθούν σε κάθε σελίδα. Κάντε κλικ στο Σχόλιο για να προσθέσετε κείμενο και κάντε κλικ στο κουμπί Προσθήκη όταν τελειώσετε. Το σχόλιο θα εμφανιστεί όταν το Σχόλια σύνδεση γίνεται κλικ. Δημιουργία σελίδας wiki Είσοδος ως φοιτητής -23-
Στάδιο 1 Εικόνα 17 Δημιουργία καταχώρησης wiki Στάδιο 2 Εικόνα 18 Δημιουργία καταχώρησης wiki -24-
Στάδιο 3 Εικόνα 19 Δημιουργία καταχώρησης wiki 3.4 Ιστολόγια (blogs) Τα Ιστολόγια είναι ένα εργαλείο ανοικτής επικοινωνίας που μπορούν να χρησιμοποιούν οι φοιτητές για την καλύτερη συνεργασία με τον καθηγητή, δημιουργώντας για παράδειγμα μία σελίδα γα την υποβολή σύντομων ερωτήσεων. Ένα Ιστολόγιο αποτελείται από τα παρακάτω στοιχεία: Καταχωρήσεις Ιστολογίου: Κείμενο, εικόνες, σύνδεσμοι και συνημμένα που έχουν δημοσιευτεί από τους φοιτητές και είναι ανοικτά για σχολιασμό. Σχόλια: Παρατηρήσεις ή απαντήσεις σε Καταχωρήσεις Ιστολογίου, από άλλους χρήστες. Υπάρχουν τρεις διαφορετικοί τύποι Ιστολογίων: Ιστολόγια Μαθήματος: Όλοι οι εγγεγραμμένοι χρήστες μπορούν να δημοσιεύσουν Καταχωρήσεις Ιστολογίου. Όλοι οι εγγεγραμμένοι χρήστες -25-
μπορούν να δημοσιεύσουν Σχόλια σε Καταχωρήσεις Ιστολογίου. Ο Εκπαιδευτής μπορεί να επεξεργαστεί και να διαγράψει Καταχωρήσεις Ιστολογίου. Ο Εκπαιδευτής μπορεί να διαγράψει Σχόλια. Ατομικά Ιστολόγια: Μόνο ο κάτοχος του Ιστολογίου μπορεί να δημοσιεύσει Καταχωρήσεις Ιστολογίου. Όλοι οι άλλοι χρήστες που έχουν εγγραφεί στο Μάθημα μπορούν να κάνουν προβολή και να προσθέτουν Σχόλια. Ιστολόγια Ομάδας: Όλα τα μέλη που έχουν εγγραφεί στην Ομάδα μπορούν να δημοσιεύσουν Καταχωρήσεις Ιστολογίου ή να κάνουν Σχόλια σε Καταχωρήσεις Ιστολογίου. Πρόσβαση στα Ιστολόγια Οι χρήστες που έχουν καταργηθεί από το Μάθημα δεν θα έχουν πρόσβαση σε κανένα Ιστολόγιο. Αν κάποιοι χρήστες καταργηθούν από το Μάθημα αφού έχουν δημιουργηθεί Ατομικά Ιστολόγια, θα διαγραφούν όλες οι δημοσιεύσεις και τα σχόλιά τους. Αν κάποιοι χρήστες καταργηθούν από το Μάθημα αφού έχουν δημιουργηθεί Ιστολόγια Μαθήματος, θα διατηρηθούν όλες οι δημοσιεύσεις και τα σχόλιά τους, αλλά το όνομα του χρήστη που εμφανίζεται στη δημοσίευση ή στο σχόλιο θα αλλάξει σε "Ανώνυμος". Δημιουργία Ιστολογίων Η δημιουργία ιστολογίων είναι ίδιο ακριβώς με τη διαδικασία δημιουργίας journal που περιγράψαμε παραπάνω. 3.5 Αποστολή εργασίας Οι Εργασίες είναι μια μορφή αξιολόγησης με την οποία προστίθεται μια Στήλη στο Βαθμολόγιο για κάθε Φοιτητή. Μπορείτε να βαθμολογήσετε και να παράσχετε παρατηρήσεις ξεχωριστά σε κάθε φοιτητή, χρησιμοποιώντας το Βαθμολόγιο. Δημιουργία ερωτήματος εργασίας Είσοδος ως καθηγητής Πεδία -26-
Εικόνα 20 Πεδία δημιουργίας εργασίας Εικόνα 21 Πεδία δημιουργίας εργασίας -27-
Πληροφορίες εργασίας Πληκτρολογήστε ένα όνομα για την εργασία. Το όνομα είναι το κείμενο τίτλου που εμφανίζεται στο τμήμα περιεχομένων όπου προστίθεται η εργασία. Χρησιμοποιήστε ένα περιγραφικό όνομα για να αναγνωρίζουν οι χρήστες πιο εύκολα την εργασία. Επιλέξτε ένα χρώμα για το κείμενο του τίτλου της εργασίας. Βεβαιωθείτε ότι θα επιλέξετε ένα χρώμα το οποίο θα δημιουργεί αρκετή αντίθεση με το φόντο του τμήματος περιεχομένων, προκειμένου η ανάγνωση του κειμένου να είναι εύκολη για τους χρήστες. Πληκτρολογήστε μια τιμή για τις δυνατές μονάδες αξιολόγησης για την εργασία. Ακόμη κι αν δεν πληκτρολογήσετε τιμή για τις μονάδες αξιολόγησης, η στήλη θα δημιουργηθεί στο βαθμολόγιο και μπορείτε να την επεξεργαστείτε αργότερα για να αλλάξετε τις δυνατές μονάδες αξιολόγησης. Αφού οι φοιτητές ολοκληρώσουν και υποβάλλουν μια εργασία, ο Εκπαιδευτής καταχωρεί μια βαθμολογία στο Βαθμολόγιο. Ο υπολογισμός του βαθμού βασίζεται στη βαθμολογία και στις Δυνατές Μονάδες Αξιολόγησης. Χρησιμοποιήστε τα πεδία ημερομηνίας για να καταχωρήσετε μια Ημερομηνία Έναρξης. Καταχωρήστε τις Οδηγίες που ίσως χρειάζονται για την ολοκλήρωση της εργασίας. Εικόνα 22 Πληροφορίες εργασίας -28-
Αρχεία εργασιών Συχνά, οι Εργασίες αποτελούνται από αρχεία που διανέμονται στους Φοιτητές, αυτοί τα συμπληρώνουν ή τα επεξεργάζονται και, έπειτα, τα υποβάλλουν για να λάβουν ένα βαθμό. Αρχεία Εργασιών μπορούν να είναι οποιαδήποτε ψηφιακά αρχεία η αποστολή των οποίων γίνεται από μια τοπική μονάδα δίσκου ή από τη Συλλογή Περιεχομένων. Κάντε κλικ στο κουμπί Περιήγηση για να εντοπίσετε τα αρχεία. Πληκτρολογήστε ένα όνομα για το Αρχείο στο πεδίο Όνομα Συνδέσμου για Αρχείο. Αυτό το όνομα είναι ο σύνδεσμος με τον οποίο ανοίγει το συνημμένο Αρχείο Εργασίας. Αν το πεδίο μένει κενό, ως σύνδεσμος χρησιμοποιείται το όνομα του αρχείου. Για να καταργήσετε τα υπάρχοντα Συνημμένα Αρχεία από την Εργασία, επιλέξτε τα και πατήστε Κατάργηση. Κάνοντας κατάργηση του αρχείου, δεν γίνεται και διαγραφή του από το Σύστημα Περιεχομένων. Εικόνα 23 Αρχεία εργασίας Διαθεσιμότητα εργασίας Για να ορίσετε μια Εργασία ως μη διαθέσιμη, επιλέξτε Όχι. Αυτό θα έχει ως αποτέλεσμα η Εργασία να μην είναι διαθέσιμη. Παρακολούθηση Για να ενεργοποιήσετε τα Στατιστικά Παρακολούθησης για την Εργασία, επιλέξτε Ναι για τη ρύθμιση Παρακολούθηση Αριθμού -29-
Προβολών. Τα Στατιστικά Παρακολούθησης καταγράφουν τον αριθμό των φορών που γίνεται προβολή της Εργασίας, πότε γίνεται προβολή και από ποιον. Περιορισμός ημερομηνίας και ώρας Οι Εργασίες μπορούν να ρυθμιστούν έτσι ώστε να εμφανίζονται μια συγκεκριμένη ημερομηνία και ώρα και να παύουν να εμφανίζονται σε μια άλλη ημερομηνία και ώρα. Οι περιορισμοί προβολής δεν επηρεάζουν τη διαθεσιμότητα του περιεχομένου, αλλά μόνο την προβολή ή όχι της Εργασίας. Εικόνα 24 Διαθεσιμότητα/Περιορισμοί ημερομηνίας εργασίας Ατομικές και ομαδικές εργασίες Οι Εργασίες μπορούν να ανατεθούν σε κάθε Φοιτητή ξεχωριστά ή σε Ομάδες για συνεργασία. Όταν χρησιμοποιούνται Ομάδες, είναι εφικτό η εργασία να ανατεθεί σε όλες τις ομάδες ή σε επιλεγμένες. Πριν από την ανάθεση μιας Εργασίας σε Ομάδες, βεβαιωθείτε ότι οι Ομάδες στις οποίες θα ανατεθεί έχουν ρυθμιστεί σωστά. Οι χρήστες που δεν ανήκουν σε μια επιλεγμένη ομάδα δεν θα λάβουν την Εργασία. Όλοι οι χρήστες που πρέπει να συμμετάσχουν στην Εργασία πρέπει να έχουν αντιστοιχιστεί σε μια Ομάδα. Αν ένας χρήστης είναι σε πολλές Ομάδες στις οποίες έχει ανατεθεί η Εργασία, τότε για αυτόν το χρήστη θα καταγραφεί μία προσπάθεια κάθε φορά που κάποια από τις Ομάδες του υποβάλλει την Εργασία. -30-
Η καταχώρηση βαθμών για τις Εργασίες γίνεται στην αντίστοιχη Στήλη και σειρά στο Βαθμολόγιο ή από τη σελίδα Λεπτομέρειες Βαθμού. Βαθμολόγηση Εργασιών από τη σελίδα Λεπτομέρειες Βαθμού Από τη σελίδα Λεπτομέρειες Βαθμού, κάντε κλικ στην επιλογή Προβολή Προσπάθειας για να εξετάσετε το υλικό που υποβλήθηκε. Καταχωρήστε το βαθμό για το υλικό στο πλαίσιο κειμένου που υπάρχει στη σειρά επικεφαλίδας, ακολουθούμενο από την ένδειξη από X μονάδες αξιολόγησης. Χρησιμοποιήστε το πλαίσιο κειμένου Παρατηρήσεις για να καταχωρήσετε τυχόν σχόλια σχετικά με το υλικό που υποβλήθηκε. -31-
4 Δημιουργία mobile ιστοσελίδας Όπως είδαμε στο δεύτερο κεφάλαιο η δημοτικότητα των smartphones και των tablets, και η ευκολία με την οποία οι κινητές εφαρμογές μπορούν να αναπτυχθούν, συνέλαβαν στην δημιουργία εξειδικευμένων ιστοσελίδων, για χρήση σε κινητές πλατφόρμες λειτουργίας. Πλέον αρκετές εταιρίες ξοδεύουν αρκετά μεγάλα ποσά για τη δημιουργία μια έκδοσης της ιστοσελίδας τους, για χρήση σε κινητά τηλέφωνα και ταμπλέτες, προωθώντας ένα νέο μοντέλο σχεδιασμού. 4.1 Οδηγίες Διεπαφής Χρήστη Παρέχουν ένα σύνολο κανόνων για το σχεδιασμό διεπαφής χρήστη ενός λογισμικού. Ο κυριότερος προβληματισμός για τη δημιουργία μίας mobile ιστοσελίδας αφορά το interface της σελίδας καθώς θα πρέπει να λάβει υπόψη το μέγεθος της οθόνης του κινητού ή της ταμπλέτας. Ενώ μία ιστοσελίδα που έχει δημιουργηθεί για χρήση σε επιτραπέζιο υπολογιστή, μπορεί να ενσωματώσει απλά πλαίσια κειμένου για την εισαγωγή πληροφορίας στους χρήστες, αυτό είναι πιο δύσκολο για τους χρήστες των smartphones. Σε αυτές τις περιπτώσεις απαιτείται περισσότερη χρήση drop-down λιστών, καθώς και κουμπιών για συλλογή πληροφοριών. Δεν ενδείκνυται η χρήση Popups παραθύρων που χρησιμοποιούνται ευρέως σε συμβατικούς υπολογιστές καθώς δεν υπάρχει αρκετός χώρος για χρήση τους σε φορητές πλατφόρμαες-. Με την ίδια λογική, αποφεύγονται και περιπτώσεις πλοήγησης που απαιτούν άνοιγμα νέων παραθύρων. Είναι σημαντικό να βρει ωραία και συναρπαστική ένας χρήστης την πλοήγηση του σε μία ιστοσελίδα. Παρ όλα αυτά θα πρέπει να είναι προσεχτικός ο σχεδιασμός διεπαφής χρήστη κατά την εισαγωγή νέων στοιχείων και τρόπων αλληλεπίδρασης. Είναι επίσης σημαντικό να προσφέρονται στο χρήστη γνώριμα σε αυτόν στοιχεία, ώστε η πλοήγηση του να είναι όσο δυνατόν ευκολότερη και λιγότερο διφορούμενη. -33-
4.2 Σχεδιασμός Μία ιστοσελίδα σχεδιασμένη για σταθερούς ηλεκτρονικούς υπολογιστές είναι πολύ δύσκολο να μεταφράζεται σωστά σε μία κινητή πλατφόρμα. Η ιστοσελίδα που είναι κατασκευασμένη για φορητές συσκευές θα πρέπει να είναι απλούστερα σχεδιασμένη από την κύρια ιστοσελίδα με λιγότερα γραφικά σχεδιασμένα. Είναι σημαντικό ο χρήστης να έχει τη δυνατότητα να επιλέξει ανάλογα με τη συσκευή, την προβολή της κύριας ιστοσελίδας ή αυτής που είναι σχεδιασμένοι για τα λεγόμενα έξυπνα κινητά και τις ταμπλέτες. Είναι σχεδόν αδύνατο να δημιουργηθεί μία ιστοσελίδα που θα συμπεριφέρεται με τον ίδιο τρόπο στους browsers του εκάστοτε λειτουργικού συστήματος. Οι περιηγητές των διαφόρων λειτουργικών συστημάτων δεν υποστηρίζουν τα ίδια στοιχεία html και η εμφάνιση της σελίδας μπορεί να διαφέρει από συσκευή σε συσκευή. Αυτό σημαίνει ότι δεν πρέπει να χρησιμοποιηθεί ένα σταθερός τρόπος κατασκευής της ιστοσελίδας. Στρατηγικές σχεδίασης 1. Στρατηγική καλού σχεδιασμού Σχεδιάζοντας μια ιστοσελίδα με σωστά δομημένη διάταξη χρησιμοποιώντας ιδιότητες min και max πλάτος έχει καλό αποτέλεσμα στις περισσότερες συσκευές και τα μεγέθη οθονών. Αυτός ο τρόπος είναι ικανοποιητικός για τους περισσότερους χρήστες οι οποίοι είναι περισσότερο εξοικειωμένοι στις σελίδες για σταθερούς υπολογιστές παρά σε περιβάλλοντα κινητών συσκευών. 2. Δημιουργία ξεχωριστής mobile ιστοσελίδας Για τις ιστοσελίδες που είναι σχεδιασμένες με κάποιο CMS αυτός είναι ο γρηγορότερος και ευκολότερος τρόπος δημιουργίας mobile site, χωρίς όμως να είναι και ο σωστότερος μακροπρόθεσμα. Μία τέτοια σελίδα έχει συνήθως τη μορφή m.example.com και γενικά έχει την ίδια δομή με την πλήρη σελίδα. Επειδή τα προγράμματα περιήγησης με sniffing εξ ορισμού δεν είναι αποτελεσματικά μακροχρόνια είναι απαραίτητη η ύπαρξης μιας υπερσύνδεσης που θα πραγματοποιεί την επιστροφή στην πλήρη ιστοσελίδα. -34-
3. Δημιουργία mobile-aware προσαρμοστικής ιστοσελίδας Η δυσκολότερη μέθοδος για τη δημιουργία μίας ιστοσελίδας αλλά συγχρόνως και η αποδοτικότερη. Με τη στρατηγική αυτή δημιουργείται μία σελίδα που ανταποκρίνεται και προσαρμόζεται στις απαιτήσεις της εκάστοτε συσκευής. Το πυρήνα αυτής της τεχνικής αποτελεί το CSS Media Queries που υποστηρίζεται και από τα περισσότερα προγράμματα περιήγησης. Τα media queries είναι παράμετροι του CSS 3 που καθορίζουν ανάλογα με την κατάσταση ποια μορφή CSS θα χρηισμοποιηθεί. 5 Δημιουργία ακαδημαϊκού προφίλ Για τους σκοπούς της εργασίας έχουμε χωρίσει τις φορητές συσκευές σε τρεις κατηγορίες ανάλογα με το μέγεθος της οθόνης τους. Στην πρώτη κατηγορία ανήκουν οι συσκευές με μέγεθος οθόνης μεταξύ 320 και 480 pixels, που υποστηρίζουν χρήση CSS. Στη δεύτερη κατηγορία ανήκουν οι συσκευές που υποστηρίζουν CSS και έχουν μέγεθος οθόνης μικρότερο από 320 pixels. Και στις συσκευές που δεν υποστηρίζουν CSS. 5.1 Στάδιο σχεδιασμού Αρχικά θα πρέπει να ορισθούν ποια στοιχεία από την πλήρη ιστοσελίδα θα πρέπει να διατηρηθούν και να χρησιμοποιηθούν στην ιστοσελίδα για χρήση στα λεγόμενα έξυπνα κινητά και τις ταμπλέτες.. -35-
Εικόνα 24 Καθορισμός στοιχείων πλήρους σελίδας Στη συνέχεια δημιουργούμε ένα προσχέδιο, ταξινομώντας τα στοιχεία αυτά για χρήση σε οθόνη μεgέθους 320 pixels. Για να έχει εφαρμογή ο σχέδιό μας αρχικά ρυθμίζομαι το viewport tag ώστε να συμβαδίζει με το μέγεθος της συσκευής. Αυτό επιτυγχάνεται με την εισαγωγή της παρακάτω γραμμής κώδικα html στο head του html κώδικα της σελίδας. Στο blackboard υπάρχει η δυνατότητα εισαγωγής κώδικα html στις επιλογές που μας δίνονται όταν συνθέτουμε τις πληροφορίες σε ένα journal ή σε ένα wiki που δημιουργούμε. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximumscale=1.0; user-scalable=0;" /> Στη συνέχεια καθορίζουμε με τη χρήση του παρακάτω κώδικα το stylesheet που θα χρησιμοποιείται ανάλογα με το μέγεθος της οθόνης. To stylesheet είναι αυτό που καθορίζει την εμφάνιση της σελίδας. Δημιουργούμε έτσι τρία διαφορετικά CSS για κάθε μέγεθος και καθορίζουμε το ποιο θα χρησιμοποιείται στην κάθε περίπτωση. <link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" /> -36-
<link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" /> Ακολουθεί η δημιουργία του mobile.css stylesheet που προορίζεται για χρήση σε συσκευές με οθόνη μεγέθους μεταξύ 320 και 480 pixels. Αυτό γίνεται χρησιμοποιώντας το stylesheet της πλήρους ιστοσελίδας και τροποποιώντας είτε τα μεγέθη του κειμένου, είτε τις εικόνες παρασκηνίου είτε αποκρύβοντας στοιχεία όπως αυτά έχουν επιλεχθεί κατά τη σχεδίαση του προσχεδίου. Επίσης με τον ίδιο τρόπο δημιουργούμε και το simple_mobile.css για φορητές συσκευές με οθόνη μικρότερη από 320 pixels. Mobile CSS /*Mobile CSS */ #breadcrumbs { display: none; } #helppagetitle { display:none; } #journalnav { display:none; -37-
} #blognav{ display:none; } body { margin:0; padding:0; font-family:arial; font-size:12px; }.blbutton { font-size: 24px; } #maincontent { width:95%; background-color:transparent; padding:2.5%; } #contentareablock0 { width:130%; } Simple Mobile CSS -38-
/*Simple Mobile CSS */ #breadcrumbs { display: none; } #helppagetitle { display:none; } #journalnav { display:none; } #blognav{ display:none; } body { margin:0; padding:0; font-family:arial; font-size:12px; } -39-
.blbutton { font-size: 24px; } #maincontent { width:95%; background-color:transparent; padding:2.5%; } #contentareablock0 { width:130%; } Τέλος δημιουργούμε με τη χρήση του button tag της html τα κουμπιά τα οποία θέλουμε να δημιουργήσουμε και θα χρησιμοποιούνται για τη δημιουργία του ακαδημαϊκού προφίλ και προσθέτουμε τον κώδικα html στο σώμα (body) του html κώδικα της σελίδας. <p><button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location=https://blackboard.lib.auth.gr/webapps/blackboard/execute/ viewblog?course_id=_1616_1&blog_id=_81_1&type=journal&group_id="><b>προ φίλ Φοιτητή</b></button> <button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/bb-wiki- BBLEARN/wikiView?course_id=_1616_1&wiki_id=_70_1'"><b>Βιογραφικό</b></b utton> -40-
<button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/gradebook/do/stude nt/viewgrades?course_id=_1616_1&callback=course&mode=cpview'"><b>βαθμολό γιο</b></button> <button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/blackboard/content /listcontenteditable.jsp?content_id=_61231_1&course_id=_1616_1&mode=reset'">< b>εργασίες</b></button></p> Εικόνα 25 Παράδειγμα χρήσης σε σταθερό υπολογιστή -41-
Εικόνα 26 Παράδειγμα χρήσης σε smartphone Εικόνα 27 Παράδειγμα χρήσης σε tablet 10 ιντσών -42-
5.2 Δημιουργία περιεχομένου προφίλ Με τη χρήση των εργαλείων του blackboard που αναλύσαμε στα προηγούμενα κεφάλαια θα δημιουργήσουμε το περιεχόμενο των σελίδων του ακαδημαϊκού προφίλ που σχεδιάσαμε παραπάνω. Δημιουργία σελίδας «Προφίλ φοιτητή» Με τη χρήση του εργαλείου journal δημιουργούμε τη σελίδα προφίλ φοιτητή όπως παρουσιάστηκε σε προηγούμενο κεφάλαιο, όπου ο κάθε φοιτητής έχει τη δυνατότητα εισαγωγής κάποιων προσωπικών δεδομένων που αφορούν προσωπικά του στοιχεία στα οποία μπορεί να έχει πρόσβαση μόνο ο ίδιος και ο καθηγητής του μαθήματος. Κατά το σχεδιασμό του journal εισάγουμε στην περιοχή των πληροφοριών επιλέγοντας την επιλογή εισαγωγής κώδικα html τον παρακάτω κώδικα για τη μορφοποίηση της σελίδας ανάλογα με το μέγεθος της οθόνης. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>percentage width test</title> <meta name="viewport" content="width=100%; initial-scale=2.5; minimumscale=1.0; maximum-scale=1.0;"/> <link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" /> <link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" /> Στη συνέχεια εισάγουμε και το τμήμα κώδικα για τη δημιουργία των κουμπιών για την ευκολότερη πλοήγηση του χρήστη. <p><button class="blbutton" style="width: 22%; height: 10%; " onclick="window.location=https://blackboard.lib.auth.gr/webapps/blackboard/execute/ -43-
viewblog?course_id=_1616_1&blog_id=_81_1&type=journal&group_id='"><b>προ φίλ Φοιτητή</b></button> <button class="blbutton" style="width: 22%; height: 10%; " onclick="window.location='https://blackboard.lib.auth.gr/webapps/bb-wiki- BBLEARN/wikiView?course_id=_1616_1&wiki_id=_70_1'"><b>Βιογραφικό</b></b utton> <button class="blbutton" style="width: 22%; height: 10%; " onclick="window.location='https://blackboard.lib.auth.gr/webapps/gradebook/do/stude nt/viewgrades?course_id=_1616_1&callback=course&mode=cpview'"><b>βαθμολό γιο</b></button> <button class="blbutton" style="width: 22%; height: 10%; " onclick="window.location='https://blackboard.lib.auth.gr/webapps/blackboard/content /listcontenteditable.jsp?content_id=_61231_1&course_id=_1616_1&mode=reset'">< b>εργασίες</b></button></p> Δημιουργία σελίδας «Βιογραφικό» Με τη χρήση του εργαλείου wiki δημιουργούμε τη σελίδα βιογραφικό όπως δημιουργήσαμε και τη σελίδα προφίλ φοιτητή παραπάνω. Στη σελίδα αυτή κάθε φοιτητής έχει τη δυνατότητα δημιουργίας ενός μικρού βιογραφικού όπου θα καταγράφει τα προσωπικά του ενδιαφέροντα στα οποία μπορεί να έχει πρόσβαση μόνο ο ίδιος και ο καθηγητής του μαθήματος. Κατά το σχεδιασμό του wiki εισάγουμε στην περιοχή των πληροφοριών επιλέγοντας την επιλογή εισαγωγής κώδικα html τον παρακάτω κώδικα για τη μορφοποίηση της σελίδας ανάλογα με το μέγεθος της οθόνης. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>percentage width test</title> -44-
<meta name="viewport" content="width=100%; initial-scale=2.5; minimumscale=1.0; maximum-scale=1.0;"/> <link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" /> <link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" /> <p><button class="blbutton" style="width: 100%; height: 100px; ;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/blackboard/execute /viewblog?course_id=_1616_1&blog_id=_81_1&type=journal&group_id='"><b>πρ οφίλ Φοιτητή</b></button> <button class="blbutton" style="width: 100%; height: 100px; ;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/bb-wiki- BBLEARN/wikiView?course_id=_1616_1&wiki_id=_70_1'"><b>Βιογραφικό</b></b utton> <button class="blbutton" style="width: 100%; height: 100px; ;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/gradebook/do/stude nt/viewgrades?course_id=_1616_1&callback=course&mode=cpview'"><b>βαθμολό γιο</b></button> <button class="blbutton" style="width: 100%; height: 100px; ;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/blackboard/content /listcontenteditable.jsp?content_id=_61231_1&course_id=_1616_1&mode=reset'">< b>εργασίες</b></button></p> Δημιουργία σελίδας «Βαθμολόγιο» -45-
Εδώ πραγματοποιώντας χρήση του εργαλείου του blackboard «Οι βαθμοί μου», δημιουργούμε μία σελίδα όπου ο φοιτητής έχει τη δυνατότητα να παρακολουθήσει τη βαθμολογία του, είτε στην τελική εξέταση, είτε σε κάποιο ερωτηματολόγιο-τεστ, είτε σε κάποια εργασία. Σε αυτό το εργαλείο δεν υπάρχει δυνατότητα τροποποίησης της εμφάνισης της σελίδας Δημιουργία σελίδας «Εργασίες» Σε αυτή τη σελίδα ο φοιτητής έχει τη δυνατότητα να παρακολουθεί τις εργασίες που έχει θέσει ο καθηγητής και να αποστείλει απάντηση σε αυτές. Όπως και στην παραπάνω σελίδα δεν υπάρχει δυνατότητα τροποποίησης της εμφάνισης της σελίδας. -46-
6 Περιγραφή της υλοποίησης 6.1 Το τμήμα head της html Σε αυτό το τμήμα χρήσης κώδικα καθορίζεται το πιο από τα stylesheets που έχουμε δημιουργήσει θα χρησιμοποιηθεί την εκάστοτε φορά ανάλογα με το μήκος της οθόνης. Επίσης είναι υπεύθυνο για την προσαρμογή του πλάτους και του μήκους της σελίδας στο μέγεθος της οθόνης κάνοντας χρήση του viewport tag. Viewport tag <meta name="viewport" content="width=100%; initial-scale=2.5; minimumscale=1.0; maximum-scale=1.0;"/> Είναι υπεύθυνο για τη ρύθμιση του πλάτους και του μήκους της σελίδας στο μέγεθος της οθόνης. Η παράμετρος «content="width=100%» είναι αυτή που θέτει το μέγεθος της οθόνης. Μπορεί να πάρει τιμές είτε σαν pixels είτε % όπως στο παράδειγμά μας. Χρησιμοποιώντας pixels δίνουμε ένα σταθερό μέγεθος στη σελίδα μας, ενώ με την % επιλογή το μέγεθος εξαρτάται και προσαρμόζεται στο μέγεθος της οθόνης. Η παράμετρος «initial-scale=2.5» μπορεί να πάρει τιμές από 0.0 έως 10.0. Χρησιμοποιείται για να καθορίσει την κλίμακα της σελίδας. Μεγάλες τιμές έχουν αποτέλεσμα τη μεγέθυνση της σελίδας, ενώ αντίθετα μικρές τιμές έχουν αποτέλεσμα τη σμίκρυνση. Η παράμετρος «minimum-scale=1.0; maximum-scale=1.0;» χρησιμοποιείται για τον καθορισμό της μέγιστης μεγέθυνσης της σελίδας καθώς και της ελάχιστης σμίκρυνσης. Οι τιμές που μπορεί να δοθούν κυμαίνονται από 0.0 έως 10.0. Επιλογή Stylesheet <link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" /> <link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" /> Σε αυτό το τμήμα κώδικα γίνεται η επιλογή του κατάλληλου stylesheet που καθορίζει την εμφάνιση της σελίδας. Η παράμετρος «link media="» ελέγχει το μέγεθος -47-
της οθόνης ώστε να επιλεγεί το αντίστοιχο stylesheet. Η παράμετρος «href="» ονομάζει πιο από τα css θα χρησιμοποιηθεί και καθορίζει την πηγή λήψης του css. 6.2 Stylesheets Είναι τμήμα κώδικα html που αποθηκεύεται σαν css και αντικατοπτρίζει την εμφάνιση της σελίδας μας. Είτε όσον αφορά το μέγεθος και τους χρωματισμούς των κειμένων είτε όσον αφορά εικόνες και τα μεγέθη τους είτε ποια στοιχεία θέλουμε να εμφανίζονται και ποια όχι. Mobile Css Θέλοντας να προσαρμόσουμε την πλήρη ιστοσελίδα για χρήση σε φορητές συσκευές με μικρότερες οθόνες από ένα σταθερό ηλεκτρονικό υπολογιστή χρειάζεται να αποκρύψουμε κάποια στοιχεία. Έτσι στο παρακάτω τμήμα κώδικα έχουμε πάρει τα στοιχεία όπως ονομάζονται στο css της πλήρους ιστοσελίδας και έχουμε θέση στην παράμετρο «display» την τιμή «none» ώστε να μην προβάλονται. #actionbar { display: none; } #breadcrumbs { display: none; } #helppagetitle { display:none; } -48-
#journalnav { display:none; } Στο παρακάτω τμήμα κώδικα καθορίζεται η εμφάνιση της σελίδας που δημιουργήσαμε για χρήση σε φορητές συσκευές. Η παράμετρος «margin» θέτει το περίγραμμα του σώματος της σελίδας σε «0» ώστε να μην υπάρχει περίγραμμα. Το «font-family» καθορίζει το ποια γραμματοσειρά θα χρησιμοποιηθεί. Το «font-size» ρυθμίζει το μέγεθος του κειμένου. body { margin:0; padding:0; font-family:arial; font-size:12px; } #maincontent { width:95%; background-color:transparent; padding:2.5%; } #contentareablock0 { width:130%; } -49-
6.3 Το τμήμα body της html Το τμήμα body είναι αυτό που ορίζει το περιεχόμενο της σελίδας μας. Σε αυτό δημιουργούμε τα κουμπιά με χρήση του button tag. <p><button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/bb-wiki- BBLEARN/wikiView?course_id=_1616_1&wiki_id=_66_1'"><b>Προφίλ Φοιτητή</b></button> <button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/bb-wiki- BBLEARN/wikiView?course_id=_1616_1&wiki_id=_70_1'"><b>Βιογραφικό</b></b utton> <button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/gradebook/do/stude nt/viewgrades?course_id=_1616_1&callback=course&mode=cpview'"><b>βαθμολό γιο</b></button> <button style="width: 100%; height: 100px; font-size: 24px;" onclick="window.location='https://blackboard.lib.auth.gr/webapps/blackboard/content /listcontenteditable.jsp?content_id=_61231_1&course_id=_1616_1&mode=reset'">< b>εργασίες</b></button></p> -50-