Topic outline

  • General

    Collapse all Expand all
    Ορολογία και σκοποί του μαθήματος:

    Με τον όρο Σχεδιασμός Web (Web Design) αναφερόμαστε στις τεχνολογίες HTML (δομή), CSS (εμφάνιση), JavaScript(διάδραση) που χρησιμοποιούνται στην επικοινωνία φυλλομετρητή (browser) -Web Server με αποτέλεσμα την εμφάνιση των ιστοσελίδων στον τελικό χρήστη.


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

  • Module 16: WEB - Wordpress II

    Δημοσιεύματα και Σελίδες. Σχόλια και Widgets. Χάρτες Google και Φόρμα επικοινωνίας

  • Module 15: WEB - Wordpress I

    Το WordPress. Δημιουργία και Λειτουργίες. Θέμα - Νέα σελίδα. Υποσελίδες

    Το WordPress . Το WordPress ξεκίνησε ως σύστημα blogging (μια προσωπική ιστοσελίδα ή μια ιστοσελίδα στην οποία κάποιος καταγράφει απόψεις, συνδέσμους σε άλλους ιστότοπους κ.λπ. σε τακτική βάση), αλλά έχει εξελιχθεί και χρησιμοποιείται ως πλήρες σύστημα διαχείρισης περιεχομένου υποστηριζόμενο από χιλιάδες πρόσθετα (plugins), widgets και θέματα (themes).
    Το WordPress είναι πλήρως προσαρμόσιμο και μπορεί να χρησιμοποιηθεί σχεδόν για οτιδήποτε.

  • Module 14: Video - OpenShot

    Το OpenShot.Τι είναι ένα βίντεο; Λειτουργίες OpenShot. Δημιουργία βίντεο

    Το OpenShot. Το OpenShot είναι ένας επεξεργαστής βίντεο ανοιχτού κώδικα, διαθέσιμος σε Linux, Mac και Windows. Το OpenShot μπορεί να δημιουργήσει εντυπωσιακά βίντεο, ταινίες και κινούμενα σχέδια διαθέτει εύχρηστη διεπαφή και είναι εφοδιασμένο με πλούσιες λειτουργίες.

  • Module 13: Ήχος- Audacity

    Το Audacity. Η Φυσική του Ήχου. Η φωνή. Μουσική υπόκρουση - Το αρχείο mp3

    Το Audacity. Το Audacity® είναι ελεύθερο λογισμικό ανοιχτού κώδικα, διαθέσιμο σε Linux, Mac και Windows. Είναι κατάλληλο για τη δημιουργία και επεξεργασία ηχητικών ντοκουμέντων.

  • Module 12: Εικόνα- GIMP II

    Gimp για το WEB. Λειτουργίες ανάμιξης. Κείμενο στο Gimp

    Gimp για το WEB. Σε αυτήν την υποενότηταθα δημιουργήσουμε έναν χάρτη εικόνων - image map (είναι μια διαδικασία με την οποία μπορούμε να δημιουργήσουμε πεδία σε μια εικόνα με δυνατότητα κλικ και να τις συνδέσουμε σε διαφορετικούς προορισμούς).
    Θα μάθουμε επίσης να δημιουργούμε ένα κινούμενο gif - animated gif (είναι ένα σύνολο εικόνων που έχουν τις ίδιες διαστάσεις και εμφανίζονται με συγκεκριμένη σειρά).

  • Module 11: Εικόνα - GIMP I

    Το Gimp. Αρχείο Gimp - Εργαλεία επιλογής. Το χρώμα στο Gimp. Στρώματα και εξαγωγή εικόνων.

    Το Gimp. Το GIMP είναι ένας επεξεργαστής εικόνας διαθέσιμος για GNU / Linux, OS X, Windows και άλλα λειτουργικά συστήματα. Είναι ελεύθερο λογισμικό, μπορείτε να αλλάξετε τον πηγαίο κώδικα και να διανείμετε τις αλλαγές σας.

  • Module 10: Εικόνα - Στοιχείο HTML Canvas

    Στοιχείο HTML Canvas. Τα RGBA της εικόνας. Επεξεργασία εικόνας.

    Στοιχείο HTML Canvas.Το στοιχείο (element) HTML5 Canvas είναι ένας χώρος εργασίας στον οποίο σχεδιάζετε (και χειρίζεστε) εικόνες και κείμενο.
    Σε αυτήν την υποενότητα, θα μάθουμε πώς να δημιουργούμε στοιχεία Canvas.
    Θα μάθουμε επίσης μεθόδους για τη δημιουργία, την πρόσβαση και την τροποποίηση κειμένου, σχημάτων και εικόνων μέσω JavaScript.

  • Module 9: Φόρμες

    Το HTML των φορμών. Το CSS των φορμών. Επικύρωση φόρμας

    Το HTML των φορμών. Οι φόρμες χρησιμοποιούνται συνήθως για τη συλλογή εισόδων (inputs) των χρηστών και την αποστολή τους στον WEB Server.
    Σε αυτήν την υποενότητα, θα μάθουμε να δημιουργούμε καλά δομημένες και προσβάσιμες φόρμες χρησιμοποιώντας HTML.

  • Module 8: JavaScript III

    Λίστες JavaScript. Απλοί βρόχοι. Μετρητής λέξεων.

    Λίστες JavaScript. Οι λίστες - στοιχειοσειρές (arrays) JavaScript χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών σε μία μόνο μεταβλητή.
    Σε αυτήν την υποενότητα, θα μάθουμε να δημιουργούμε λίστες JavaScript και μεθόδους για την πρόσβαση και την τροποποίηση των λιστών.

  • Module 7: JavaScript II

    JavaScript με HTML και CSS. Λαμβάνοντας αποφάσεις. Εφαρμογές των δομών επιλογής

    JavaScript με HTML και CSS. Σε αυτήν την υποενότητα θα χρησιμοποιήσουμε μεταβλητές (variables) JavaScript, μια απλή συνάρτηση (function) και απλό συμβάν (event onclick) για να συνδυάσουμε κώδικες HTML και CSS με κώδικα JavaScript.
    Σε αυτό το μοντέλο προγραμματισμού που καθοδηγείται από συμβάντα (event-driven programming), ο κώδικάς σας «ακούει» κάποια ενέργεια στην HTML σελίδα και στη συνέχεια εκτελεί κάποια συνάρτηση για απόκριση.

  • Module 6: JavaScript I

    Εισαγωγή στη JavaScript. Απλό αρχείο javaScript. Τύποι δεδομένων

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

  • Module 5: Πίνακες, div - span

    Πίνακας-HTML. Πίνακας-CSS. Στοιχεία div - span

    Πίνακας-HTML. Οι πίνακες (tables) χρησιμοποιούνται πολύ συχνά για να εμφανίσουμε δεδομένα οπτικά οργανωμένα σε γραμμές (rows) και στήλες (columns).
    Σε αυτήν την υποενότητα θα μάθουμε πώς να χρησιμοποιούμε HTML για την κατασκευή ενός πίνακα.

  • Module 4: CSS II

    Επιλογείς. Ψευδο-κλάσεις. Ιδιότητες εμφάνισης. Γραμμή πλοήγησης

    Επιλογείς. Σε αυτήν την υποενότητα θα μάθουμε πώς να χρησιμοποιούμε τους επιλογείς (selectors) CSS για να "βρίσκουμε" και να επιλέγουμε στοιχεία HTML βάσει του ονόματος, του id και της κλάσης τους (class).
    Επίσης, θα μάθουμε να εφαρμόζουμε κανόνες CSS σε πολλαπλές κλάσεις και σε συγκεκριμένο περιεχόμενο.

  • Module 3: CSS I

    Τι είναι το CSS. Εισαγωγή και Εφαρμογή CSS

    Τι είναι το CSS. Η γλώσσα του στυλ είναι το CSS που σημαίνει Cascading Style Sheets.
    Γενικά, η εμφάνιση της ιστοσελίδας είναι ο συνδυασμός HTML (δομή) και CSS (εμφάνιση, στυλ).
    Σε αυτήν την υποενότητα θα μάθουμε τον βασικό κανόνα σύνταξης, Selector {Property: Value;}

  • Module 2: HTML II

    Σχόλια. Λίστες κειμένου. Πολυμέσα. Σύνδεσμοι

    Σχόλια. Θα δούμε πώς γράφουμε σχόλια (comments) σε ένα αρχείο HTML. Τα σχόλια είναι σημαντικά. Μας βοηθούν να οργανώσουμε τον κώδικα μας περιγράφοντας τη λειτουργία του ή τις σκέψεις μας για αυτόν. Βοηθούν επίσης σε κάθε άλλο προγραμματιστή που μπορεί να χρειαστεί να εργαστεί σε αυτόν τον κώδικα.

  • Module 1: HTML I

    Εισαγωγή στο WEB. HTML - CSS - JavaScript. Απλό αρχείο HTML

    Εισαγωγή στο WEB. Είναι το εισαγωγικό μάθημα, θα μάθουμε τι είναι το Διαδίκτυο και το WWW και θα δηλώσουμε τη διαφορά τους.

  • Topic 17

  • Topic 18

  • Topic 19