Προγραμματισμός σε HTML / CSS / JavaScript

Γιατί να παρακολουθήσω το πρόγραμμα

Στις μέρες μας, η δυνατότητα σύνδεσης συσκευών σε ετερογενή δίκτυα (όπως οικιακά δίκτυα και δίκτυα κινητής τηλεφωνίας), η ευελιξία γρήγορης σύνδεσης συσκευών μέσω διαφορετικών διεπαφών και η δυνατότητα παροχής υψηλού ρυθμού δεδομένων ακόμα και σε δίκτυα οικιακής χρήσης προσφέρουν πλέον στο χρήστη αδιάκοπη συνδεσιμότητα υψηλής ποιότητας. Προς αυτή την κατεύθυνση συνεισφέρει και η ταυτόχρονη πρόοδος στη σχεδίαση ολοκληρωμένων κυκλωμάτων που διευκολύνουν την υλοποίηση τερματικών συσκευών μικρού μεγέθους, αλλά με εξαιρετικά αυξημένες υπολογιστικές δυνατότητες. Αναπόφευκτα, ο συνδυασμός των ολοένα και πιο ευέλικτων δικτύων υψηλής χωρητικότητας, με κινητά τερματικά τελευταίας τεχνολογίας έχει επηρεάσει την αρχιτεκτονική των σύγχρονων συστημάτων πληροφορικής. Παραδοσιακά, η σχεδίαση των συστημάτων πληροφορικής γίνεται με κριτήριο τη βέλτιστη εκμετάλλευση των δυνατοτήτων του υπάρχοντος υλικού (hardware). Όπως γίνεται κατανοητό, η έλευση νέων δυνατοτήτων σε επίπεδο διαδικτύου σε συνδυασμό με την εμφάνιση μικρών τερματικών συσκευών, έχει ως αποτέλεσμα τη δικτυοκεντρική σχεδίαση συστημάτων λογισμικού. Με απλά λόγια, αντί της σχεδίασης μίας παραδοσιακής desktop εφαρμογής, προτιμάται η αντικατάστασή της με μία διαδικτυακή εφαρμογή, όπου ο χρήστης θα έχει πρόσβαση απλά μέσω ενός φυλλομετρητή (browser). Αυτό σημαίνει ότι ο χρήστης θα μπορεί να χρησιμοποιεί ακόμα και απαιτητικές εφαρμογές από ένα κινητό τηλέφωνο, αφού το μόνο που θα χρειάζεται είναι η εφαρμογή ενός φυλλομετρητή και σύνδεση στο ιντερνετ. Όλη η πολυπλοκότητα του λογισμικού θα είναι στη μεριά του εξυπηρετητή (server). Ενδεικτικό προς αυτή την κατεύθυνση, είναι ότι ακόμα και παραδοσιακές γλώσσες προγραμματισμού που παρείχαν τη δυνατότητα υλοποίησης desktop εφαρμογών, πλέον βελτιστοποιούνται στην περιοχή των διαδικτυακών εφαρμογών.

Αναγνωρίζοντας την τάση που περιγράφεται παραπάνω, το συγκεκριμένο πρόγραμμα έχει ως στόχο να εισάγει στους μαθητές την έννοια του δικτύου και τον τρόπο που το δίκτυο μπορεί να χρησιμοποιηθεί για τη σχεδίαση και ανάπτυξη διαδικτυακών εφαρμογών. Οι μαθητές έρχονται σε επαφή με γλώσσες προγραμματισμού και περιβάλλοντα που χρησιμοποιούνται αποκλειστικά για την ανάπτυξη τέτοιων εφαρμογών και εφαρμόσουν στην πράξη αυτές τις δυνατότητες για να υλοποιήσουν τα δικά τους projects. Αρχικά γίνεται μια εισαγωγή στην Html / html5 και στο πρωτόκολλο http. Στη συνέχεια το πρόγραμμα αναφέρεται στη χρήση διαδοχικών φύλλων στυλ (cascading style sheets – CSS), και τέλος οι μαθητές πειραματίζονται με τις δυνατότητες προγραμματισμού του φυλλομετρητή με χρήση της γλώσσας Javascript. Η συνδυαστική χρήση αυτών των τριών τεχνολογιών είναι ικανή για τη δημιουργία αξιόπιστων διαδικυακών εφαρμογών.

Πιο συγκεκριμένα, το προτεινόμενο πρόγραμμα οργανώνεται ως εξής:

Εισαγωγή στα δίκτυα (θεωρία)

• • Έννοια δικτύου υπολογιστών
  • Οικιακά δίκτυα υπολογιστών
  • Ενσύρματα / Ασύρματα δίκτυα μικρής και μεγάλης εμβέλειας: Χαρακτηριστικά, περιπτώσεις χρήσης
  • Μοντέλα επικοινωνίας (συσκευή με συσκευή, συσκευή με δίκτυο cloud)

Πως δουλεύει το Web

• • Ιστορικό του world wide web (www)
  • Δημιουργία και παράδοση περιεχομένου για το web
  • Τι είναι ο πάροχος υπηρεσιών φιλοξενίας
  • Πρωτόκολλο μεταφοράς αρχείων (File Transfer Protocol – FTP)

Εισαγωγή στην HTML / HTML5

• • Τι είναι η HTML
  • Δόμηση ενός εγγράφου HTML
  • Οργάνωση σελίδας HTML
  • Επισκόπηση HTML ετικετών (tags) και παραδείγματα χρήσης
  • Από την HTML στην HTML5
  • Ετικέτα <video> της HTML5
  • Ετικέτα <audio> της HTML5
  • Ετικέτα <canvas> της HTML5

Εισαγωγή στα διαδοχικά φύλλα στυλ (cascading style sheets – CSS)

• • Χρησιμότητα του CSS
  • Πως λειτουργούν τα CSS
  • Στυλ CSS
  • Περιθώρια και συμπλήρωση (margins, padding)
  • Όρια (borders)
  • Περίγραμμα (outline)
  • Χρώματα
  • γραμματοσειρά
  • Επιλογή κλάσεων και ID (class and ID selectors)
  • Φόντο (background)
  • Εμφάνιση στοιχείων
  • Πίνακες CSS
  • Δείκτης ποντικιού
  • Εικόνες και CSS
  • Εισαγωγή στο box model
  • Project 1: Image gallery
  • Project 2: Blog

Εισαγωγή στη JavaScript

• • Τύποι μεταβλητών
  • Δομές ελέγχου ροής
  • Βρόχοι επανάληψης
  • Πίνακες
  • Αντικείμενα
  • Συγγραφή συναρτήσεων
  • Κλήση συναρτήσεων
  • Project: Υλοποίηση εφαρμογής calculator σε html, CSS και Javascript

Javascript στο web

• • Πρόσβαση σε ετικέτες html
  • Έλεγχος απόκρισης σε πάτημα κουμπιού
  • Έλεγχος και τροποποίηση περιεχομένου ιστοσελίδας
  • Ελέγχοντας το στυλ
  • Εισαγωγή εξωτερικών αρχείων javascript
  • Εισαγωγή στην τεχνολογία Ajax
  • Project1: Δημιουργία φόρμας υποβολής με λειτουργία επαλήθευσης στοιχείων καταχώρησης
  • Project2: Χρήση javascript και Ajax σε ιστοσελίδα

Η διάρκεια του προγράμματος

Το πρόγραμμα ολοκληρώνεται σε 2 τετράμηνα (ένα έτος).

• • Χειμερινό Τετράμηνο: από 26 Σεπτεμβρίου μέχρι 23 Ιανουαρίου
  • Εαρινό Τετράμηνο: από 6 Φεβρουαρίου μέχρι 29 Μαΐου

Μαθήματα γίνονται μία φορά την εβδομάδα, είτε καθημερινές 18.00-20.00 είτε Σάββατα 16.00-18.00

Δυνατότητα και για Online

Τα μαθήματα, εκτός από την κλασσική διδασκαλία σε πραγματική τάξη, μπορούν να διενεργηθούν και μέσω τηλεδιάσκεψης σε εικονική τάξη, με ζωντανή σύνδεση με τον εκπαιδευτή, ή με συνδυασμό και των δύο. Ο τρόπος διδασκαλίας θα εξαρτηθεί από τις παρούσες συνθήκες, σε συνάρτηση και με τις προτιμήσεις των μαθητών.

Ο εκπαιδευτής μπορεί να παρέχει το διδακτικό υλικό μέσω κοινής χρήσης της οθόνης του, ζωντανής μετάδοσης του ίδιου σε βίντεο ή με το να εργάζεται στο cloud όπου οι μαθητές μπορούν να βλέπουν τα πάντα σε πραγματικό χρόνο. Οι ίδιοι οι μαθητές μπορούν να συμμετάσχουν ενεργά και ανεμπόδιστα, και να θέτουν ερωτήσεις όπως θα έκαναν σε μια κανονική τάξη. Επιπλέον, αναλαμβάνουν επιμορφωτικές εργασίες και projects τα οποία ο εκπαιδευτής μπορεί να δει και να παρέχει τα σχόλια και τις αξιολογήσεις του εύκολα και γρήγορα.

Μαθητές στους οποίους απευθυνόμαστε

• Το πρόγραμμα απευθύνεται σε μαθητές από A’ Γυμνασίου μέχρι και Γ’ Λυκείου.
• Τα μαθήματα πραγματοποιούνται σε ολιγομελή τμήματα.

Προαπαιτούμενες γνώσεις

• Η εκπαίδευση αυτή προσφέρει μια ολοκληρωμένη προσέγγιση στη θεωρία και πρακτική άσκηση στοΔιαδικτυακός Προγραμματισμός με Html, CSS, Javascript και δεν απαιτεί προηγούμενες γνώσεις.