eLearning Ο.Π.Α. - Ανάπτυξη Web εφαρμογών με HTML/CSS/JavaScript/jQuery/ AJAX και Bootstrap - Πρόγραμμα elearning ΟΠΑ

eLearning Οικονομικού Πανεπιστημίου Αθηνών

Παράταση εγγραφών του νέου κύκλου elearning προγραμμάτων έως τις 16 Μαΐου 2021.

Πατήστε για να ενημερώνεστε για το πρόγραμμα

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

Έναρξη Μαθημάτων: 19 Μαΐου 2021 Λήξη Εγγραφών: 9 Μαΐου 2021

Ανάπτυξη Web εφαρμογών με HTML/CSS/JavaScript/jQuery/AJAX και Bootstrap

Το πρόγραμμα «Ανάπτυξη Web εφαρμογών με HTML/CSS/JavaScript/jQuery/AJAX και Bootstrap» παρουσιάζει με συστηματικό τρόπο όλες τις σύγχρονες τεχνολογίες και τα εργαλεία που απαιτούνται για την ανάπτυξη Web Σελίδων και Εφαρμογών. Έχει σχεδιαστεί για εκπαιδευόμενους που δεν έχουν καμία γνώση ή έχουν μικρή γνώση προγραμματισμού στο Web με σκοπό να τους προσδώσει τις απαραίτητες γνώσεις και δεξιότητες ώστε να εξελιχθούν προσωπικά και επαγγελματικά και να γίνουν ανταγωνιστικοί στην αγορά εργασίας. Οι εκπαιδευόμενοι θα μάθουν να αναπτύσσουν ολοκληρωμένες Web σελίδες και εφαρμογές με τη χρήση του περιβάλλοντος ανάπτυξης Visual Studio Code μέσα από πρακτικά παραδείγματα βασισμένα σε βιντεοδιαλέξεις, παρουσιάσεις και εργασίες. Ο συνδυασμός αναλυτικών εκπαιδευτικών βιντεο που περιλαμβάνουν πρακτική ανάπτυξη Web σελίδων και εφαρμογών, αναλυτικών παρουσιάσεων σε μορφή PowerPoint και εργασιών βασισμένων σε εφαρμογές του πραγματικού κόσμου αποδίδει τα μέγιστα μαθησιακά και εκπαιδευτικά αποτελέσματα.

Το πρόγραμμα ξεκινάει παρουσιάζοντας τεχνικές σχεδιασμού και ανάπτυξης σελίδων και εφαρμογών στο Web με τις γλώσσες HTML/CSS/JavaScript. Η γλώσσα JavaScript θα παρουσιαστεί αναλυτικά μιας και αποτελεί τη βάση για πιο προηγμένα θέματα που θα παρουσιαστούν στη συνέχεια όπως jQuery/AJAX/JSON/XML και Bootstrap. Θα παρουσιαστούν επίσης θέματα Web Servers όπου οι εκπαιδευόμενοι θα εγκαταστήσουν και θα χρησιμοποιήσουν τον Apache Tomcat αλλά και θέματα Web Hosting και μεταφοράς και διαχείρισης αρχείων με τη χρήση εργαλείων όπως ο FileZilla. Περιλαμβάνεται επίσης η παρουσίαση τεχνικών σχεδιασμού UX/UI ώστε οι εκπαιδευόμενοι να είναι σε θέση να κατανοήσουν τεχνικές οπτικοποίησης των πληροφοριών μίας web σελίδας, καθώς και η παρουσίαση των GitHub και Git, με σκοπό οι εκπαιδευόμενοι να δημιουργήσουν σταδιακά ένα portfolio για την προσωπική και επαγγελματική τους εξέλιξη στην αγορά εργασίας. Με τη χρήση των παραπάνω τεχνολογιών οι εκπαιδευόμενοι θα αναπτύξουν διάφορες εφαρμογές όπως σελίδες προβολής μίας επιχείρησης, σελίδες Login, εφαρμογές με JavaScript όπως To-Do List, γραφικές απεικονίσεις καθώς και μία ολοκληρωμένη εφαρμογή με τη χρήση Open APIs μαθαίνοντας έτσι και τεχνικές επικοινωνίας με Web Services που βασίζονται στην αρχιτεκτονική REST (RESTful Web Services) αλλά και τη λογική των Single Page Applications (SPAs).

Οι Web τεχνολογίες αποτελούν αναπόσπαστο κομμάτι της κοινωνικής και οικονομικής ανάπτυξης στον 21ο αιώνα με αποτέλεσμα τη μεγάλη ζήτηση ανθρώπινου δυναμικού με τις παραπάνω γνώσεις και δεξιότητες. Για το λόγο αυτό το παρόν πρόγραμμα προτείνεται σε όλους όσους θέλουν να εξελιχθούν προσωπικά και επαγγελματικά και να επαυξήσουν τις δυνατότητες και προοπτικές απασχολησιμότητάς τους στο σύγχρονο οικονομικό περιβάλλον.

Σε ποιους απευθύνεται

  • Εκπαιδευόμενοι χωρίς πρότερη εμπειρία και γνώση στον προγραμματισμό Web που επιθυμούν να αναπτύξουν τις προσωπικές ή επαγγελματικές τους δεξιότητες
  • Εκπαιδευόμενοι με γνώσεις στον προγραμματισμό που επιθυμούν να αναπτύξουν τις προσωπικές ή επαγγελματικές τους δεξιότητες

 

Ενότητες

  1. Εισαγωγή στην HTML
    • Ιστορική εξέλιξη
    • Web Architecture
    • Visual Studio Code
    • HTML Basics (<h1>, <p>, <a>, <img>)
    • Το πρώτο πρόγραμμα – Hello World
    • Πίνακες, Λίστες, HTML Forms
    • Build-in Validators
    • Git και GitHub: Βασικά Στοιχεία 
  1. 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 
  1. 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 
  1. 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 
  1. JavaScript
    • Διερμήνευση (Interpreted) / JIT (Just-In-Time) Compilation
    • <script> element / Το πρώτο πρόγραμμα
    • Τύποι Δεδομένων / Μεταβλητές
    • Αριθμητικοί, Σχεσιακοί τελεστές, Λογικοί Τελεστές
    • Παραστάσεις και εκχωρήσεις
    • Είσοδος / Έξοδος
    • Δομές Ελέγχου: while-do, do-while, for
    • Δομή Ελέγχου if – if/else – nested if
    • Τριαδικός τελεστής / Switch-case
    • Συναρτήσεις (Functions)
    • Δομημένος Προγραμματισμός
    • Γεγονοστρεφής Προγραμματισμός
    • Προγράμματα / Παραδείγματα 
  1. 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 
  1. HTML DOM
    • Document Object Model (DOM)
    • Επιλογή HTML στοιχείων με JavaScript
    • Σχέσεις Κόμβων / Διάσχιση Δένδρου (DOM Tree)
    • Events / Event Listeners / Event Handlers και HTML DOM
    • Εφαρμογή Σημειώσεων
    • JavaScript και CSS / Παραδείγματα
    • Accordion Εφέ 
  1. 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) 
  1. 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) 
  1. 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

Η «αξία» του προγράμματος

Η μεγάλη αξία του προγράμματος έγκειται στο ότι απευθύνεται σε εκπαιδευόμενους χωρίς καμία ή με μικρή γνώση προγραμματισμού στο Web, και τους οδηγεί με συστηματικό τρόπο στην ανάπτυξη υψηλού επιπέδου Web εφαρμογών. Οι εκπαιδευόμενοι θα μάθουν να αναπτύσσουν web σελίδες και εφαρμογές με τη χρήση του ολοκληρωμένου περιβάλλοντος ανάπτυξης εφαρμογών Visual Studio Code. Θα αποκτήσουν βαθιά γνώση των τεχνολογιών HTML/CSS/JavaScript/jQuery/AJAX και Bootstrap καθώς και άλλων τεχνολογιών και εργαλείων, όπως JSON/XML/REST,  Web Servers, Web Hosting, καθώς και εργαλείων επεξεργασίας εικόνων όπως το GIMP. Θα αποκτήσουν επίσης γνώσεις UX Design (User Experience Design) ώστε να δημιουργούν επαγγελματικές Web εφαρμογές προσανατολισμένες στον χρήστη με ταυτόχρονη εξυπηρέτηση των επιχειρηματικών στόχων της σελίδας ή της εφαρμογής. Τέλος, θα μάθουν να χρησιμοποιούν τα Git και GitHub αποκτώντας σύγχρονες προσωπικές και επαγγελματικές δεξιότητες και ταυτόχρονα θα δημιουργήσουν ένα προσωπικό portfolio με τα projects του προγράμματος.

Γιατί να το παρακολουθήσει κάποιος

Το μάθημα αυτό έχει ως στόχο να:

  1. Να παράσχει στους εκπαιδευόμενους γνώσεις και δεξιότητες στο σχεδιασμό και ανάπτυξη Web Εφαρμογών με HTML/CSS/JavaScript/jQuery/AJAX και Bootstrap καθώς και άλλες τεχνολογίες.
  2. Να αποκτήσουν οι εκπαιδευόμενοι πρακτική εμπειρία στην ανάπτυξη Web σελίδων και εφαρμογών μέσα από μια σειρά παραδειγμάτων και εργασιών όσο και μέσα από μια μεγάλη εφαρμογή που θα ενοποιεί τις γνώσεις και δεξιότητες που έχουν αποκτήσει.
  3. Να δημιουργήσουν οι εκπαιδευόμενοι ένα portfolio στο GitHub για την προσωπική και επαγγελματική τους εξέλιξη. 

 

Διδάσκοντες

ΑΘΑΝΑΣΙΟΣ ΑΝΔΡΟΥΤΣΟΣ
Επιστημονικός υπεύθυνος προγράμματος
ΕΔΙΠ Σχολής Επιστημών και Τεχνολογίας της Πληροφορίας, ΟΠΑ
 
ΑΝΝΑ ΓΙΑΝΝΟΥΤΣΟΥ
BSc Informatics, MSc Advanced Informatics and Computing Systems
 

Πιστοποιητικό Παρακολούθησης

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

 

Στοιχεία Επικοινωνίας

  • elearning.aueb.gr
  • Αυτή η διεύθυνση ηλεκτρονικού ταχυδρομείου προστατεύεται από τους αυτοματισμούς αποστολέων ανεπιθύμητων μηνυμάτων. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να μπορέσετε να τη δείτε.
  • 210 8203753 (επικοινωνία μόνο μέσω email)
  • Κεφαλληνίας 46, Αθήνα 11251

Newsletter

  • Τα προγράμματά μας ανανεώνονται συνεχώς. Αφήστε μας το email σας να σας ενημερώνουμε.

Log in

create an account