Ασκήσεις κατασκευής ιστοσελίδων με html, css και JavaScript. Σεμινάρια html για τη δημιουργία front-end web εφαρμογών. Μαθήματα δημιουργίας ιστοσελίδων.
Δημιουργήσαμε τις ασκήσεις front-end με σκοπό να βοηθήσουμε στην εξάσκηση όσων ολοκληρώνουν τα μαθήματα html και css. Κάθε εκπαιδευόμενος που παρακολουθεί μαθήματα html είναι αναγκαίο να κάνει ασκήσεις θα τον βοηθήσουν να κατανοήσει καλύτερα τη θεωρία και να μπορέσεις να χρησιμοποιήσεις στην πράξη αυτά που έμαθε. Σε γενικές γραμμές η γλώσσα html είναι πολύ εύκολη και μπορεί κάποιος να ολοκληρώσει την εκμάθηση μέσα σε πολύ λίγα μαθήματα. Τα σεμινάρια html διαρκούν πολύ λίγες ώρες. Είναι όμως απαραίτητο μετά τα σεμινάρια html να ακολουθήσει εξάσκηση. Το ίδιο ισχύει για τη γλώσσα css. Είναι αρκετά εύκολο να παρακολουθήσετε σεμινάρια css τα οποία διαρκώς πολύ λίγες ώρες και να μάθετε πολύ καλά τους κανόνες σύνταξης. Αυτό όμως δεν φτάνει για να προχωρήσετε στην κατασκευή ιστοσελίδων. Εάν δεν εφαρμόζεται στην πράξη αυτά που μάθατε τότε είναι σαν να μην μάθατε τίποτα. Ακόμα και μία απλή κατασκευή ιστοσελίδας απαιτεί να γνωρίζετε πολύ καλά το HTML και το css. Αφού ολοκληρώσετε τις ασκήσεις που ακολουθούν τότε θα μπορείτε να είστε σίγουροι ότι γνωρίζετε πως γίνεται η κατασκευή ιστοσελίδων με αυτές τις τεχνολογίες.
Σε καθεμία από τις ασκήσεις που ακολουθούν να φροντίσετε ώστε να ικανοποιούνται οι παρακάτω απαιτήσεις. Αποτελούν τα σημαντικότερα κριτήρια αξιολόγησης ιστοσελίδων που είναι σημαντικά τόσο γιατους επισκέπτες όσο και για τις μηχανές αναζήτησης:
Να δημιουργηθεί ιστοσελίδα με συνταγές μαγειρικής:
Η ιστοσελίδα περιλαμβάνει 5 σελίδες html, καθεμία εκ των οποίων παρουσιάζει μια συνταγή. Σε κάθε σελίδα:
Να δημιουργηθεί ιστοσελίδα με πληροφορίες για ποδοσφαιρικές ομάδες:
Η ιστοσελίδα περιλαμβάνει 10 σελίδες html, καθεμία εκ των οποίων παρουσιάζει μια ομάδα. Σε κάθε σελίδα:
Να δημιουργηθεί σελίδα εταιρείας κουφωματων αλουμινίου:
Να δημιργηθουν πέντε σελίδες με κατηγορίες προϊόντων (σήτες, κουφώματα αλουμινίου, κουφώματα pvc, συρόμενες πόρτες, εσωτερικές πόρτες)
Να δημιουργηθεί σελίδα με image gallery.
Να δημιουργηθεί σελίδα με ερωτήσεις και απαντήσεις. Τέτοιου είδους σελίδες χρησιμοποιούνται συνήθως στις ιστσελίδες για τη δημιουργία "Συχνές Ερωτήσεις".
Να δημιουργηθεί σελίδα με 10 ερωτήσεις πολλαπλής επιλογής.
Όταν ο χρήστης πατήσει το button "ΥΠΟΒΟΛΗ" τότε:
Αύξηση δυσκολίας:
Να εφαρμόσετε τον κώδικα που δημιουργήσατε για να φτιάξετε δυο τεστ, για παράδειγμα:
Να δημιουργηθεί σελίδα html στην οποία να παρουσιάζονται 10 ενότητες.
Οταν η σελίδα εμφανίζεται σε οθόνη υπολογιστή τότε οι ενότητες μπαίνουν απλά η μία κάτω από την άλλη.
Όταν η σελίδα εμφανίζεται σε tablet η σε κινητό τηλέφωνο τότε:
Ο πιο εύκολος δρόμος για τη δημιουργία απλης ιστοσελίδας είναι να χρησιμοποιήσουμε τη γλώσσα html. Απλά τοποθετουμε εικόνες, κειμενα, συνδέσμους και άλλα html elements. Με αυτό τον τρόπο κατασκευάζονται ιστοσελίδας όταν πρωτοβγήκε το διαδίκτυο στις αρχές της δεκαετίας του 1990. Για να δημιουργήσετε μία τόσο απλή ιστοσελίδα μας αρκεί η γλώσσα html. Αυτή η ιστοσελίδα θα έχει υπερβολικά απλή μορφοποίηση. Δυστυχώς η γλώσσα html δεν έχει πολλές δυνατότητες μορφοποίησης. Μην παραλείψετε να ρίξετε μια ματιά στις ασκήσεις html οι οποίες μπορούν να σας βοηθήσουν πολύ στα πρώτα σας βήματα στη δημιουργία ιστοσελίδας.
Η γλώσσα html δεν προσφέρει πολλές δυνατότητες μορφοποίησης. Η λύση έρχεται από το css το οποίο μας επιτρέπει να κάνουμε κάθε είδους μορφοποίησης σε όλα τα html elements. Επίσης το css μας επιτρέπει να χρησιμοποιήσουμε το ίδιο αρχείο μορφοποίησης για όλες τις σελίδες του ιστότοπου επιτυγχάνοντας ομοιομορφία μεταξύ όλων των σελίδων. Στα μαθήματα css έχετε τη δυνατότητα να μάθετε όλες τις επιλογές μορφοποίησης για όλα τα στοιχεία html. Ο συνδυασμός html και css μας επιτρέπει να δημιουργήσουμε πολύ εντυπωσιακές ιστοσελίδες. Όμως είναι δύσκολο να βάλουμε κίνηση ως απάντηση ενεργειών του χρήστη.
Η JavaScript μας επιτρέπει να δημιουργήσετε μία πλήρως διαδραστική ιστοσελίδα. Μαζεύει δυνατότητα να ανιχνεύσουμε το κλικ η το mouseover για οποιαδήποτε άλλη ενέργεια πάνω σε οποιοδήποτε html element. Επίσης η γλώσσα JavaScript μας δίνει τη δυνατότητα να μορφοποιεί σου με οποιοδήποτε html element χρησιμοποιώντας το DOM model. Στα μαθήματα javascript μαθαίνετε πώς να κάνετε όλες αυτές τις ενέργειες. Στην ολοκλήρωση ενός σεμιναρίου JavaScript είναι σημαντικό με ακολουθήσει εξάσκηση χρησιμοποιώντας συνδυασμένα όλες τις τεχνολογίες κατασκευής ιστοσελίδων. Αυτή ακριβώς η εξάσκηση γίνεται με τις παραπάνω ασκήσεις.
Για να μεγιστοποιήσουμε την ταχύτητα μιας ιστοσελίδας θα πρέπει να χρησιμοποιήσουμε όσο το δυνατόν λιγότερα αρχεία, ελαφρύτερα αρχεία και λιγότερο κώδικα. Όταν γνωρίζουμε το html css και την JavaScript μπορούμε να πετύχουμε ταχύτητα ιστοσελίδας που προσεγγίζει το 100. η ομάδα μας δημιουργεί ιστότοπος με εξαιρετικά υψηλή ταχύτητα ιστοσελίδας που ανεβαίνουν πολύ εύκολα στην πρώτη σελίδα της Google. Η καλή γνώση των βασικών τεχνολογιών διαδικτύου μας επιτρέπει επίσης να πάρουμε μία αργή ιστοσελίδα και να την επιταχύνουμε όσο μπορούμε. Εάν έχουμε πρόσβαση στα αρχεία css και JavaScript του content management System καθώς και στα αρχαία εικόνων τότε μπορούμε να βελτιώσουμε πολύ την ταχύτητα της ιστοσελίδας.
Η ευρεία χρήση της JavaScript οδήγησε στη δημιουργία framewoorks που αυτοματοποιουν κάποιες διαδικασίες και επιταχύνουν την ανάπτυξη εφαρμογών λογισμικού καθώς και τη σύνδεση με το back-office και τη βάση δεδομένων. Δηλαδή με τα javascript frameworks επιτυγχάνουμε καλύτερο αποτέλεσμα σε λιγότερο χρόνο. Αυτός είναι και ο λόγος για τον οποίο στην αγορά δεν ζητείται απευθείας γνώσεις JavaScript αλλά ζητείται γνώση των JavaScript frameworks. Δηλαδή εάν κοιτάξετε τις μικρές αγγελίες για εύρεση εργασίας περισσότερες είναι οι αγγελίες που ζητάνε γνώσεις React JS. Vue JS ή Angular παρά εκείνες που ζητάνε γνώσεις JavaScript. Για να καταφέρετε όμως να κατανοήσετε σε βάθος τα JavaScript frameworks, να τα κάνετε κτήμα σας και να μπορείτε να εργάζεστε άνετα σε αυτά θα πρέπει να έχετε πολύ καλή γνώση της JavaScript.
Ο λόγος για τον οποίο επιλέγουμε τη γλώσσα html είναι ότι μας δίνει ένα πολύ σημαντικό πλεονέκτημα στην προώθηση ιστοσελίδων. Η δημιουργία ενός site έχει ως στόχο να το ανεβάσουμε στην πρώτη σελίδα της google με τις κατάλληλες ενέργειες προώθησης ιστοσελίδων. Ο πιο σημαντικός παράγοντας κατάταξης για την google είναι η ταχύτητα της ιστοσελίδας. Οι σελίδες που κατασκευάζονται με τη γλώσσα html έχουν πάρα πολύ μικρό μέγεθος και κατά συνέπεια εξαιρετικά γρήγορη ταχύτητα. Με τη γλώσσα html μπορούμε εύκολα να βελτιστοποιήσουμε όλες τις παραμέτρους που είναι σημαντικές για την προώθηση ιστοσελίδων.
Η JavaScript χρησιμοποιείται κατά κόρον στην κατασκευή e-shop. Είναι η γλώσσα προγραμματισμού με την οποία δημιουργούμε το καλάθι αγορών. Συνήθως στην πράξη αυτό δεν φαίνεται διότι παίρνουμε ολόκληρο το content management System κατασκευές e-shop. Εάν επιλέξετε να κάνετε δημιουργία e-shop με το magento, με το opencart ή με το woocommence τότε δεν είναι απαραίτητο να γνωρίζει τη JavaScript. Διότι ολόκληρος ο κώδικας έρχεται έτοιμος Με την εγκατάσταση του content management system. Εάν όμως θελήσετε να κατασκευάσετε ένα δικό σας πίσω από την αρχή τότε το front-end θα πρέπει να χτιστεί πάνω στην JavaScript. Δεν είναι λίγες οι περιπτώσεις στις οποίες είναι προτιμότερο να δημιουργήσουμε το e-shop από την αρχή παρά να το χτίσουμε πάνω σε κάποια έτοιμη πλατφόρμα. Αυτό ισχύει κυρίως στις περιπτώσεις που είναι αυξημένες οι απαιτήσεις για το business logic. Εάν για παράδειγμα θέλετε να δημιουργήσετε ένα e-shop το οποίο να έχει περίπλοκους κανόνες τιμολόγησης, περίπλοκους κανόνες μεταφορικών καθώς και ιδιαίτερες απαιτήσεις b2b, τότε το κόστος κατασκευής e-shop με κάποια έτοιμη πλατφόρμα θα είναι ιδιαίτερα αυξημένο. Σε αυτή την περίπτωση πιθανώς είναι προτιμότερο με το δημιουργήσετε μόνοι σας Ιδανική γλώσσα για το back office είναι η Java. Όσον αφορά το front-end το καλύτερο είναι να χρησιμοποιήσετε html css και JavaScript για την κατασκευή του e-shop.
Οι τεχνολογίες html css και JavaScript αποτελούν το front-end κομμάτι μιας web εφαρμογής. Στα μαθήματα προγραμματισμού που αναλαμβάνει ομάδα μας έχετε τη δυνατότητα να μάθετε τώρα το front-end κομμάτι όσο και τη backhand λειτουργία μία web εφαρμογής. Ουσιαστικά στα μαθήματα προγραμματισμού για το backhand κομμάτι μαθαίνουμε πώς να δημιουργούμε βάσεις δεδομένων καθώς και τις τεχνολογίες πρόσβασης σε αυτές. Η σημαντικότερη βάση δεδομένων στο διαδίκτυο είναι η mysql. Μπορείτε να παρακολουθήσετε μαθήματα mysql ανεξάρτητα από το αν γνωρίζετε ή όχι τις front-end τεχνολογίες. Όσον αφορά την εκπαίδευση στις γλώσσες προγραμματισμού για το backend κομμάτι κυρίως περιλαμβάνουν μαθήματα php και μαθήματα java.
Το σημαντικότερο κομμάτι της εκπαιδευτικής διαδικασίας είναι η εξάσκηση. Στην ιστοσελίδα μας έχουμε ασκήσεις για πολλές θεματικές ενότητες. Για παράδειγμα εδώ θα βρείτε ασκήσεις excel ώστε να μπορέσετε να εφαρμόσετε όσα μάθατε στα μαθήματα excel. Εδώ βλέπετε την εκφώνηση της άσκησης. Στο κανάλι μας στο YouTube θα βρείτε τη λύση σε όλες τις ασκήσεις excel. Επίσης έχουμε ασκήσεις για όσους θέλουν να κάνουν εξάσκηση στο πληκτρολόγιο. Οι ασκήσεις δημιουργήθηκαν με τη JavaScript. Είναι διαδραστικές ασκήσεις που μπορείτε να χρησιμοποιήσετε τόσο μέσω υπολογιστή όσο και μέσω κινητού. Όταν δώσετε σωστή απάντηση τότε ανάβει ένα πράσινο button που σας επιτρέπει να προχωρήσετε στην επόμενη άσκηση. Εχουμε ασκήσεις για να κάνουν εξάσκηση τα παιδιά ώστε να μάθουν πως να βάζουν τόνο, πως να βάζουν διαλυτικά αλλά και πως να βάζουν τόνο και διαλυτικά μαζί.
Πολύ χρήσιμο βοήθημα για τα σεμινάρια επεξεργασίας κειμένου είναι οι ασκήσεις Word που έχουμε δημοσιεύσει στην ιστοσελίδα μας. Ξεκινούν από βασικές γνώσεις και καλύπτουν άτομα και πιο προηγμένες απαιτήσεις επεξεργασίας κειμένου. Εδώ θα βρείτε συγκεντρωμένες όλες τις ασκήσεις Word.
Εάν παρακολουθείτε μαθήματα photoshop σίγουρα θα θέλετε να εκτελέσετε πολύ περισσότερες ασκήσεις. Για αυτή ακριβώς την ανάγκη που προκύπτει στα σεμινάρια ενηλίκων έχουμε δημιουργήσει ασκήσεις photoshop με μία ευρεία γκάμα εργαλείων και διαβαθμισμένη δυσκολία. Μπορείτε να ξεκινήσετε από απλές ασκήσεις photoshop και κατά την εξέλιξή του σεμιναρίου να προχωρήσετε σε δυσκολότερες ασκήσεις.