Περιγραφή του μαθήματος
To μάθημα αυτό απευθύνεται στο ευρύ κοινό και έχει στόχο την εισαγωγή στις βασικές τεχνολογίες του διαδικτύου, αυτού του μέσου που καλύπτει σήμερα κάθε πτυχή της ζωής όλων μας. Το μάθημα αφορά ιδιαίτερα τις τεχνολογίες με τις οποίες κατασκευάζονται οι ιστοσελίδες και δεν προϋποθέτει προηγούμενη γνώση προγραμματισμού.
Στο πλαίσιο του μαθήματος, θα δούμε την αρχιτεκτονική και τα βασικά πρωτόκολλα του διαδικτύου, τα κύρια στοιχεία της γλώσσας HTML5, με την οποία περιγράφουμε το περιεχόμενο και τη δομή μιας ιστοσελίδας, της γλώσσας CSS3, με την οποία ορίζουμε πώς το περιεχόμενο θα παρουσιαστεί στον χρήστη, και της γλώσσας προγραμματισμού JavaScript, που προσδίδει στην ιστοσελίδα διαδραστικότητα. Με την ολοκλήρωση του μαθήματος, οι συμμετέχοντες θα είναι σε θέση να δημιουργήσουν τις δικές τους ιστοσελίδες που θα περιέχουν βίντεο, εικόνες, φόρμες εισαγωγής πληροφορίας, κ.λπ.
Εβδομάδα 1: Εισαγωγή στην HTML
1.1 Εισαγωγή στο μάθημα
1.1.1 Η αρχιτεκτονική του διαδικτύου
1.1.2 Το πρωτόκολλο HTTP (Hyper Text Transfer Protocol)
1.1.3 Διευθύνσεις URL (Universal Resource Locator)
1.1.4 Εισαγωγή στην HTML
1.1.5 Τα εργαλεία που θα χρησιμοποιήσουμε - vs code και browser
1.1.6 Τα εργαλεία που θα χρησιμοποιήσουμε - codepen.io
1.2 Εισαγωγή στην HTML
1.2.1 Η πρώτη μας ιστοσελίδα
1.2.2 Σύνταξη της HTML
1.2.3 Document Object Model (DOM)
1.2.4 Τα στοιχεία του <head>
1.2.5 Τα στοιχεία του <body>
1.2.6 Στοιχεία <sup> και <sub>
1.2.7 Λίστες
1.2.8 Υπερσύνδεσμοι
1.3 Σύνθετα στοιχεία HTML
1.3.1 Πολυμέσα
1.3.2 Βίντεο και ήχος <video>, <audio>
1.3.3 Ενσωμάτωση στοιχείων με <iframe> και <object>
1.3.4 Πίνακες <table>
1.3.5 Δομικά στοιχεία HTML
1.3.6 Φόρμες <form>
1.3.7 Παράδειγμα φόρμας
1.3.8 Άσκηση: μια ιστοσελίδα για τη σελήνη
Εβδομάδα 2: Eισαγωγή στη CSS3
2.1 Εισαγωγή στη CSS3
2.1.1 Εισαγωγή στη CSS
2.1.2 Σύνταξη κανόνων CSS
2.1.3 Επιλογείς
2.1.4 Επιλογείς γνωρισμάτων
2.1.5 Ψευδο-κλάσεις
2.2 To μοντέλο εγκιβωτισμού
2.2.1 Το μοντέλο box
2.2.2 Διαχείριση περιθωρίων margin/padding
2.2.3 Διαχείριση περιεχομένου: overflow
2.2.4 Υπόβαθρο: background
2.2.5 Σκιές box-shadow
2.2.6 Στρογγυλεύοντας τις γωνίες: border-radius
2.2.7 Display: inline ή block
2.2.8 Μονάδες μέτρησης της CSS
2.2.9 Χρώματα
2.3 Εμφάνιση στοιχείων
2.3.1 Εμφάνιση κειμένου
2.3.2 Διάταξη κειμένου
2.3.3 Εμφάνιση λιστών
2.3.4 Εμφάνιση υπερσυνδέσμων
2.3.5 Εμφάνιση πλαισίων
2.3.6 Άσκηση: Διαμόρφωση πίνακα
2.4 Θέση στοιχείων-αόρατα στοιχεία
2.4.1 Εμφάνιση-απόκρυψη αντικειμένων
2.4.2 Θέση στοιχείων εκτός ροής
2.4.3 Επαλληλία κανόνων/ κληρονομικότητα
Εβδομάδα 3: 1η Εργασία (προαιρετική)
3.1 1η εργασία: Παρουσίαση
3.1.1 Μεταβλητές στη CSS
3.1.2 Διάταξη περιεχομένου με float
3.1.3 Παράδειγμα: Η ιστοσελίδα του ποιητή
Εβδομάδα 4: Εισαγωγή στην Javascript
4.1 Εισαγωγή στην JS
4.1.1 Εισαγωγή, ιστορικά στοιχεία
4.1.2 Ενσωμάτωση JS σε κώδικα HTML
4.1.3 Διασύνδεση JS με το DOM
4.1.4 Διασύνδεση JS με τον χρήστη
4.2 Δεδομένα στην JS
4.2.1 Σύνταξη JS: Τύποι δεδομένων
4.2.2 Τύποι δεδομένων undefined και null
4.2.3 Τελεστές - εκφράσεις
4.2.4 Δήλωση μεταβλητών let, var, const
4.2.5 Συμβολοσειρές
4.2.6 Πίνακες - arrays
4.2.7 Μέθοδοι πινάκων
4.3 Δομικά στοιχεία της JS
4.3.1 Υπό συνθήκη εκτέλεση κώδικα
4.3.2 Δομές επανάληψης for
4.3.3 Δομές επανάληψης while
4.4 Συναρτήσεις
4.4.1 Συναρτήσεις JS
4.4.2 Συναρτήσεις - μέρος 2
4.4.3 Εμβέλεια μεταβλητών
4.4.4 Προαιρετικά ορίσματα συναρτήσεων
4.4.5 Συναρτήσεις αριθμών
4.4.6 Μέθοδοι διαπέρασης πινάκων
Εβδομάδα 5: JavaScript και Tελική εργασία
5.1 Συμβάντα και αντικείμενα
5.1.1 Διαχείριση συμβάντων / events
5.1.2 Διαχείριση συμβάντων: παράδειγμα
5.1.3 Αντικείμενα στην JS
5.1.4 Το αντικείμενο Math
5.1.5 Το αντικείμενο Date
5.1.6 Closures
5.1.7 Άσκηση: φόρμα βαθμολογίας
5.1.8 Άσκηση: Διόρθωση της φόρμας
5.2 Άσκηση
5.2.1 Άσκηση: Η λίστα με τα ψώνια
5.2.2 Άσκηση: Η λίστα με τα ψώνια, το αρχείο CSS
Τελική Εργαία
5.2.3 Τελική εργασία: μάντεψε τον αριθμό
5.2.4 Επίλογος: Από δω και πέρα τι;
Το μάθημα αυτό μπορείτε να το παρακολουθήσετε στον δικό σας ρυθμό. Αυτό σημαίνει πως όλα τα βίντεο και τα βαθμολογούμενα τεστ είναι ήδη διαθέσιμα. Συνεπώς, έχετε τη δυνατότητα να παρακολουθήσετε τις διαλέξεις και να υποβάλετε τα τεστ σε όποιον χρόνο εσείς επιλέξετε από την επίσημη ημερομηνία έναρξης του μαθήματος έως και την ημερομηνία λήξης του, στις 30 Σεπτεμβρίου.
Το μάθημα απευθύνεται σε κάθε ενδιαφερόμενο πολίτη, μπορείτε δηλαδή να εγγραφείτε χωρίς να υπάρχει κάποιο προαπαιτούμενο.
Επίσης, είναι βιντεοσκοπημένο και ασύγχρονο. Μπορείτε, συνεπώς, να το παρακολουθήσετε στην πλατφόρμα μας τις ημέρες και ώρες που επιθυμείτε. Έχει διάρκεια πέντε εβδομάδων, τις οποίες μπορείτε να δείτε στο πρόγραμμά σας.
Πέρα από το διδακτικό υλικό, το μάθημα περιλαμβάνει εβδομαδιαία τεστ, μία τελική εξέταση και μία τελική εργασία. Η συμπλήρωση των τεστ γίνεται και αυτή στο δικό σας πρόγραμμα και είναι βεβαίως στη δική σας ευχέρεια. Αν όμως επιθυμείτε την έκδοση βεβαίωσης επιτυχούς παρακολούθησης, θα χρειαστεί να συμμετάσχετε στην τελική εξέταση/εργασία και στα περισσότερα τουλάχιστον τεστ.
Τα μαθήματα του Mathesis προσφέρονται δωρεάν και έτσι θα συνεχίσουν. Μπορείτε να τα παρακολουθήσετε μέχρι τέλους και να συμμετάσχετε στα εβδομαδιαία τεστ και την τελική εξέταση. Εάν επιθυμείτε τη βεβαίωση επιτυχούς παρακολούθησης, θα σας ζητείται όμως ένα μικρό αντίτιμο –της τάξης των 30€– για την έκδοσή της, μετά την υποβολή της τελικής σας εξέτασης. Εάν δεν υποβάλετε την τελική σας εξέταση –ή, αν την υποβάλετε, αλλά δεν περάσετε το μάθημα– δεν υπάρχει κάποια υποχρέωση πληρωμής.
Αν έχετε ήδη λογαριασμό στο Mathesis, αρκεί να συνδεθείτε στο Mathesis με το email που έχετε ήδη δηλώσει και, στη συνέχεια, να εγγραφείτε στο μάθημα. Αν δεν έχετε λογαριασμό στο Mathesis, θα χρειαστεί προηγουμένως να δημιουργήσετε έναν. Αν τυχόν χρειαστείτε βοήθεια για την εγγραφή σας στο μάθημα ή στην πλατφόρμα του Mathesis, μπορείτε να δείτε εδώ τις σχετικές οδηγίες.
Έγραψαν για το μάθημα
Πολύ καλά δοσμένη θεωρία, πολύ καλά παραδείγματα και πολύ καλή υποστήριξη. Να συνεχίσετε την υπέροχη δουλειά που κάνετε.
-Xρήστος Σ.
Ευχαριστώ πολύ για την πολύ ωραία σειρά μαθημάτων, είναι αξιέπαινη η προσπάθεια όλων να προσφέρουν ουσιαστικές και χρήσιμες γνώσεις.
-Βασίλης Κ.
Θα ήθελα κι εγώ με τη σειρά μου να εκφράσω τις ευχαριστίες μου στον κύριο Νικόλαο Αβούρη για την συνετή, κατανοητή και κλιμακωτή παρουσίαση της ύλης.
-Δημήτρης Κ.
Αν και είναι αρκετά τα χρόνια που παρακολουθούσα μαθήματα στο αμφιθέατρο του ΕΜΠ, ξανάνιωσα φοιτήτρια και αναζωογονήθηκα! Το συστήνω ανεπιφύλακτα.
-Καλλιόπη Κ.