Το πρόγραμμα «Ανάπτυξη Web εφαρμογών με HTML/CSS/JavaScript/jQuery/AJAX και Bootstrap» έχει σχεδιαστεί για ανθρώπους που δεν έχουν καμία γνώση ή έχουν μικρή γνώση προγραμματισμού στο Web. Ξεκινάει παρουσιάζοντας τεχνικές σχεδιασμού και ανάπτυξης σελίδων και εφαρμογών στο Web με τις γλώσσες HTML/CSS/JavaScript. Η γλώσσα JavaScript θα παρουσιαστεί αναλυτικά μιας και αποτελεί τη βάση για πιο προηγμένα θέματα που θα παρουσιαστούν στη συνέχεια όπως jQuery/AJAX/JSON/XML και Bootstrap. Θα παρουσιαστούν επίσης θέματα Web Servers όπου οι εκπαιδευόμενοι θα εγκαταστήσουν και θα χρησιμοποιήσουν τον Apache Tomcat αλλά και θέματα Web Hosting και μεταφοράς και διαχείρισης αρχείων με τη χρήση εργαλείων όπως ο FileZilla. Περιλαμβάνεται επίσης η παρουσίαση τεχνικών σχεδιασμού UI & UX (User Interface & User Experience Design) ώστε οι εκπαιδευόμενοι να είναι σε θέση να κατανοήσουν τεχνικές οπτικοποίησης των πληροφοριών μίας web σελίδας, καθώς και η παρουσίαση των GitHub και Git, με σκοπό οι εκπαιδευόμενοι να δημιουργήσουν σταδιακά ένα portfolio για την προσωπική ή επαγγελματική τους εξέλιξη στην αγορά εργασίας. Με τη χρήση των παραπάνω τεχνολογιών οι εκπαιδευόμενοι θα αναπτύξουν διάφορες εφαρμογές όπως σελίδες προβολής μίας επιχείρησης, σελίδες Login, εφαρμογές με JavaScript όπως To-Do List, γραφικές απεικονίσεις καθώς και μία ολοκληρωμένη εφαρμογή πρόγνωσης του καιρού με τη χρήση Open APIs μαθαίνοντας έτσι και τεχνικές επικοινωνίας με Web Services που βασίζονται στην αρχιτεκτονική REST αλλά και τη λογική των Single Page Applications (SPAs). Αυτές οι εφαρμογές καθώς και άλλες θα αποτελούν μέρος του portfolio στο GitHub. Οι εκπαιδευόμενοι θα μάθουν να αναπτύσσουν προγράμματα με τη χρήση του ολοκληρωμένου περιβάλλοντος ανάπτυξης εφαρμογών Visual Studio Code μέσα από πρακτικά παραδείγματα βασισμένα σε βιντεοδιαλέξεις, παρουσιάσεις και εργασίες. Το πρόγραμμα περιλαμβάνει επίσης και 12 live τηλεσυνεδρίες μέσω του Microsoft Teams -μία live τηλεσυνεδρία κάθε εβδομάδα διάρκειας 2 ωρών- όπου με αλληλεπιδραστικό τρόπο θα δίνονται παραδείγματα προγραμματισμού καθώς και απαντήσεις σε ερωτήσεις.
Ενότητες
Εισαγωγή στην HTML
Ιστορική εξέλιξη
Web Architecture
Visual Studio Code
HTML Basics (<h1>, <p>, <a>, <img>)
Το πρώτο πρόγραμμα – Hello World
Πίνακες, Λίστες, HTML Forms
Build-in Validators
Git και GitHub: Βασικά Στοιχεία
Cascading Style Sheets (CSS)
CSS και CSS Rules
Inline, Internal, External Styling
id, class attributes
CSS Selectors
Styling κειμένου - Τυπογραφία
Γραμματοσειρές / Web Safe Fonts
Google Fonts
Χρώματα, Περιγράμματα
Ψευδοκλάσεις
Background images
Font Awesome icons
Styling Πίνακα
Git και GitHub: Repositories, workflow
Box Model και Div – Web Site Layout - Design Heuristics
CSS Box Model
Display / inline, block, inline-block, flex
Position / static, relative, fixed, absolute, sticky
Generic Boxes / span / div
Advanced CSS Selectors
Login Form & Validation
Site Layout – Βασική Δομή Σελίδας
Wireframing / Mockups
Επεξεργασία εικόνων με το GIMP
Βασικό Μενού
Επεξεργασία εικόνων με GIMP και Inkscape
CSS Flexbox
Parallax Εφέ
Σχεδιασμός / Βασικά στοιχεία Human-Computer Interaction
Σχεδιαστικά Heuristics / UI & UX Design
Git και GitHub: Ενσωμάτωση στο Visual Studio Code
Git και GitHub: Δημιουργία Portfolio
Fluid και Responsive Design
Responsive & Fluid Design
Pixels και Αναλύσεις Οθονών / Breakpoints
Media Queries
Responsive Grid System Grid system
Mobile First Design
Dropdown Menu
Σχεδιασμός Responsive Web Σελίδας
Responsive Menu / Events
Events & JavaScript
Web Hosting
JavaScript
Διερμήνευση (Interpreted) / JIT (Just-In-Time) Compilation
<script> element / Το πρώτο πρόγραμμα
Τύποι Δεδομένων / Μεταβλητές
Αριθμητικοί, Σχεσιακοί τελεστές, Λογικοί Τελεστές
Παραστάσεις και εκχωρήσεις
Είσοδος / Έξοδος
Δομές Ελέγχου: while-do, do-while, for
Δομή Ελέγχου if – if/else – nested if
Τριαδικός τελεστής / Switch-case
Συναρτήσεις (Functions)
Δομημένος Προγραμματισμός
Γεγονοστρεφής Προγραμματισμός
Προγράμματα / Παραδείγματα
Advanced JavaScript
Πίνακες / Πράξεις σε πίνακες
Αντικείμενα (Objects) / Πίνακες Αντικειμένων
Enhanced for .. in , for .. of
Διαχείριση Μνήμης: Στοίβα (stack) και Σωρός (heap)
Συναρτήσεις – Πέρασμα παραμέτρων κατά τιμή και κατά αναφορά
Immutable (Αμετάβλητοι) τύποι δεδομένων και μεταβλητές
Προηγμένες συναρτήσεις πινάκων: map, filter, reduce
Ανώνυμες Συναρτήσεις (Anonymous functions)
First class functions / Call back functions
Arrow Functions / Lambdas
Event Listeners / Event Handlers
Objects και Functions / Overriding
HTML DOM
Document Object Model (DOM)
Επιλογή HTML στοιχείων με JavaScript
Σχέσεις Κόμβων / Διάσχιση Δένδρου (DOM Tree)
Events / Event Listeners / Event Handlers και HTML DOM
Εφαρμογή Σημειώσεων
JavaScript και CSS / Παραδείγματα
Accordion Εφέ
jQuery / AJAX
jQuery / jQuery Selectors
$(document).ready()
get / set περιεχόμενο στο DOM
Events / CSS
Αρχιτεκτονική Εφαρμογών Web
HTTP / REST
AJAX / AJAX Request / Response
Web Servers / Apache Tomcat
XMLHttpRequest
Open APIs
Text / JSON / XML
XML to HTML Table
JSON to HTML Table
Single Page Applications (SPAs)
Bootstrap
The Grid System / Breakpoints
Page Layout / Containers
Normalize / Reboot / Basic Typography
Lists / Tables
Spacing (margin, padding)
Sizing / Spacing / Colors
Forms
Components (navigation, dropdowns, carousel, modals)
UX Design
User Analysis / User Personas
Journey Maps / Touchpoints
Βασικές Αρχές UX Design
Σχεδιασμός Διεπαφών Ανθρώπου Υπολογιστή
Information Architecture – Cards Sorting
Οπτικοποίηση πληροφοριών / Prototyping
Ευχρηστία (Usability) / Usability Tests
First Click Test / Five Second Test
System Usability Test