TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα

Transcript

1 TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο

2 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Ιόνιο Πανεπιστήμιο» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 1

3 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

4 Περιγραφή Μαθήματος Παρουσιάζονται οι βασικές τεχνολογίες που χρησιμοποιούνται για τη δημιουργία δικτυακών τόπων και εφαρμογών στον Παγκόσμιο Ιστό, ενώ σε πρακτικό επίπεδο δίνεται έμφαση στην εκμάθηση της γλώσσας σήμανσης υπερκειμένων (έκδοση HTML5) και των συνοδευτικών τεχνολογιών όπως τα φύλλα στυλ και οι γλώσσες σεναρίου στην πλευρά του πελάτη. Ιδιαίτερη προσοχή δίνεται σε θέματα ευχρηστίας και προσβασιμότητας, μέσω της προσέγγισης Σχεδιασμός-για-Όλους, καθώς και στα πρότυπα του Ιστού (Web Standards). Αναλύονται ο σχεδιασμός, η δομική οργάνωση και η υλοποίηση στατικών δικτυακών τόπων. Επίσης, παρουσιάζονται θέματα σχετικά με την πρόβλεψη των αναγκών, καθώς και τον σχεδιασμό και τη δημιουργία της υποδομής για την ανάπτυξη και δημοσίευση δικτυακών τόπων. 2

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

6 Εισαγωγικό Μάθημα 1 η ενότητα Επισημάνσεις σχετικά με την παράδοση του μαθήματος και τις απαιτήσεις του. Εισαγωγικές έννοιες σχετικές με το περιεχόμενο του μαθήματος. 4

7 Βασικά Στοιχεία HTML 2 η ενότητα Το Internet ως μέσο διάδοσης πληροφορίας Ανατομία ενός δικτυακού τόπου Εφαρμογές Web Browser Αρχικός σχεδιασμός Δημιουργία της δομής & Οργάνωση περιεχομένου Εύρεση καλύτερου συντάκτη HTML Εντολή View Source 5

8 Βασική Δομή Σελίδων 3 η ενότητα Δημιουργία ενός HTML αρχείου Περιγραφή & εφαρμογή βασικών προδιαγραφών μορφοποίησης σε HTML Έγγραφα Tags Προσθήκη σχολίων σε ένα HTML αρχείο. 6

9 Φύλλα Στυλ & Χρώμα 4 η ενότητα Ορισμός φύλλων στυλ σ ένα HTML αρχείο Δημιουργία πρώτης σελίδας ενός δικτυακού τόπου Τρόποι με τους οποίους αναφέρεται το χρώμα στην ανάπτυξη περιεχομένου για το Web Χρώματα «ασφαλή για το Web» 7

10 Ανάπτυξη Περιεχομένου για το Web 5 η ενότητα Οργάνωση ενοτήτων κειμένου Προσθήκη επικεφαλίδων Μορφοποίηση ενοτήτων κειμένου με διαφορετικά χαρακτηριστικά γραμματοσειράς Διασφάλιση της αναγνωσιμότητας του κειμένου στην οθόνη Διαμόρφωση σελίδων για σωστή εκτύπωση Βελτιστοποίηση κειμένου 8

11 Συνδέσεις 6 η ενότητα Προσθήκη συνδέσεων απόλυτες και σχετικές συνδέσεις Μορφοποίηση συνδέσεων Προσαρμογή συνδέσεων 9

12 Εικόνες, Πολυμέσα, Γραφικά 7 η ενότητα Χρήση εικόνων και μορφοποίησή τους Χρήση πρόσθετων και στοιχείων ελέγχου Προσθήκη πολυμέσων Εξοικείωση με λογισμικό γραφικών Μορφές αρχείων γραφικών για Web JIF - JPEG PNG Αποθήκευση γραφικών για Web 10

13 Λίστες, Πινάκες 8 η ενότητα Χρήση αριθμημένων και μη-αριθμημένων λιστών και μορφοποίησή τους Δημιουργία μιας απλής δομής πινάκα και μορφοποίησή του 11

14 Φόρμες 9 η ενότητα Σημασία και χρήσεις φορμών σε μια ιστοσελίδα Δημιουργία απλής φόρμας Καθορισμός τρόπου επεξεργασίας δεδομένων μιας φόρμας Μορφοποίηση φορμών με φύλλα στυλ Μορφοποίηση φόρμας 12

15 Τοποθέτηση Στοιχείων στη Σελίδα 10 η ενότητα Σημασία και χρήσεις των φύλλων στυλ για τη διάταξη σελίδων Δημιουργία μονόστηλης και πολύστηλης ρευστής διάταξης σελίδας Διαστρωμάτωση περιεχομένου σε επίπεδα Χρήση εξωτερικών φύλλων στυλ Χρήση φύλλων στυλ CSS 13

16 Ενσωμάτωση Σεναρίων 11 η ενότητα Σημασία και χρήσεις της Javascript, Δείγματα σεναρίων στην πλευρά του πελάτη Χρήση κώδικα Javascript για το άνοιγμα νέου παραθύρου της εφαρμογής browser 14

17 Δημοσίευση στον Ιστό 12 η ενότητα Επιλογή ονόματος domain για δικτυακό τόπο Υπηρεσίες φιλοξενίας Μηχανές και κατάλογοι αναζήτησης Προσθήκη meta tags Αποστολή αρχείων δικτυακού τόπου σε κεντρικό υπολογιστή Δόκιμες- Δημοσίευση 15

18 Ανασκόπηση Ενοτήτων 13 η ενότητα Επαναλήψεις ανασκόπηση ενοτήτων Παρουσιάσεις εργασιών-δικτυακών τόπων 16

19 E-class Tο μάθημα είναι διαθέσιμο στο e-class, όπου θα δημοσιεύονται όλες οι σχετικές ανακοινώσεις και το συμπληρωματικό υλικό. Η εγγραφή στο μάθημα μέσω e-class είναι απαραίτητη. 17

20 Διδακτικά εγχειρίδια: Βοηθήματα μαθήματος: Castro, E., Hyslop, B. (2013), HTML 5 και CSS 3 με εικόνες, (Έβδομη Έκδοση). Αθήνα: Κλειδάριθμος Lemay, L., Colburn, R. (2011), Πλήρες εγχειρίδιο της HTML και CSS. Αθήνα: Γκιούρδας 18

21 Βοηθήματα μαθήματος: Διαφάνειες παρουσιάσεων Πρόσθετο ηλεκτρονικό υλικό σε e-class 19

22 Τρόποι αξιολόγησης / εξέτασης: Βαθμολογία: 65% Τελικές γραπτές εξετάσεις 35% Ατομική εργασία Θέμα εργασίας: Ανάπτυξη δικτυακού τόπου. Το προτεινόμενο αντικείμενο για τον δικτυακό τόπο της εργασίας είναι η προσωπική ιστοσελίδα, αλλά θα γίνουν δεκτές, κατόπιν συνεννόησης, και εργασίες με δικτυακούς τόπους για άλλα αντικείμενα. 20

23 Επικοινωνία: Ανδρέας Γιαννακουλόπουλος Τηλ. γραφείου: