Πληροφορίες

Create GrCode Club

Η ιστοσελίδα μας έχει δημιουργηθεί με γνώμονα την επεκτασιμότητα και τη συντηρησιμότητα. Χρησιμοποιούμε HTML για τη δομή της σελίδας, CSS για τη διαμόρφωση και την εμφάνιση, και JavaScript για την προσθήκη δυναμικών στοιχείων.
Για τον σχεδιασμό της σελίδας, αξιοποιούμε τη βιβλιοθήκη Bootstrap, η οποία μας παρέχει έναν ευέλικτο και responsive σχεδιασμό. Κάθε σελίδα είναι οργανωμένη με ένα καθαρό και δομημένο τρόπο, διευκολύνοντας την προσβασιμότητα και τη βελτιστοποίηση για τις μηχανές αναζήτησης (SEO).
Για την προσθήκη δυναμικών στοιχείων, χρησιμοποιούμε JavaScript. Με την ανάπτυξη λειτουργιών που φορτώνουν δυναμικά CSS και JavaScript αρχεία, μειώσαμε τον όγκο των επαναλαμβανόμενων στοιχείων σε κάθε αρχείο HTML. Αυτή η προσέγγιση μας επιτρέπει να ανανεώνουμε κοινά στοιχεία, όπως το header, το menu και το footer, με ένα μόνο αρχείο.

GitHub Page

Χρησιμοποιούμε το GitHub Pages για την ανάπτυξη και φιλοξενία της ιστοσελίδας μας, το οποίο μας επιτρέπει να διαχειριζόμαστε εύκολα τις ενημερώσεις και τις αλλαγές στον κώδικα. Με τη βοήθεια του GitHub, μπορούμε να παρακολουθούμε τις εκδόσεις του project μας και να συνεργαζόμαστε πιο αποδοτικά.

Βασική δομή

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

<!DOCTYPE html>
<html lang="el">
    <head>
        <meta charset="UTF-8">
        <meta property="og:image" content="https://grcodeclub.gr/files-page/img/preview/main.jpg"/>
        <meta property="og:title" content="GrCode Club">
        <script src="https://grcodeclub.github.io/files-page/js/data.js">
    </head>
    <body>
        <!-- Header -->
        <div id="addHeader"></div>

        <div class="container">
            <!-- Data -->
        </div>

        <!-- Footer -->
        <div id="addFooter"></div>
    </body>
</html>

Βιβλιοθήκες και Frameworks

Εισαγωγή Font Awesome

Font Awesome είναι μια δημοφιλής βιβλιοθήκη εικονιδίων που παρέχει μια ευρεία γκάμα εικονιδίων vector για χρήση σε ιστοσελίδες και εφαρμογές. Προσφέρει προσαρμοσμένα εικονίδια, τα οποία μπορούν να ενσωματωθούν εύκολα σε HTML, CSS και JavaScript.

Bootstrap

Το Bootstrap είναι ένα δημοφιλές front-end framework που διευκολύνει την ανάπτυξη responsive και mobile-first ιστοσελίδων.

Select2

Select2 είναι μια jQuery plugin που παρέχει μια βελτιωμένη και πιο ευέλικτη εμπειρία χρήστη για τη χρήση στοιχείων <select> σε φόρμες. Αυτή η βιβλιοθήκη προσφέρει πολλές δυνατότητες που δεν υπάρχουν στα τυπικά dropdowns του HTML, καθιστώντας τη ιδανική για περιπτώσεις που απαιτούν περισσότερες δυνατότητες επιλογής.

Δυναμική προσθήκη CSS αρχείων

Αυτό το απόσπασμα κώδικα JavaScript είναι σχεδιασμένο για την δυναμική προσθήκη αρχείων CSS στο <head> της HTML σελίδας. Ουσιαστικά, αντί να γίνεται χειροκίνητη εισαγωγή όλων των συνδέσμων CSS μέσα στο HTML αρχείο, χρησιμοποιούμε την JavaScript για να φορτώσει τα αρχεία CSS όταν η σελίδα εκτελείται.

const cssLinks = [
"https://grcodeclub.gr/website/css/grcodeclub/header_and_footer.css",
"https://grcodeclub.gr/website/css/grcodeclub/main.css",
// περισσότερα CSS URLs εδώ...
];
const head = document.head; // Βρίσκουμε το <head> της HTML
// Προσθήκη των αρχείων CSS δυναμικά
cssLinks.forEach(linkUrl => {
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = linkUrl;
head.appendChild(linkElement); // Προσθήκη στο <head>
});

Δυναμική προσθήκη Meta Tags

Δημιουργούμε και προσθέτουμε δυναμικά ένα στοιχείο <meta> στο <head> της HTML σελίδας, το οποίο είναι απαραίτητο για να διαμορφωθεί σωστά η προβολή της σε φορητές συσκευές.

const metaElement = document.createElement('meta');     // Δημιουργία ενός νέου στοιχείου 
metaElement.setAttribute('name', 'viewport');     // Ορίζουμε την ιδιότητα 'name' ως 'viewport'
metaElement.setAttribute('content', 'width=device-width, initial-scale=0.8');     // Ορίζουμε την ιδιότητα 'content' με την τιμή που θέλουμε
document.head.appendChild(metaElement);     // Προσθέτουμε το στοιχείο <meta> στο <head> του HTML εγγράφου

Δυναμική προσθήκη JavaScript

Δημιουργούμε και προσθέτουμε δυναμικά ένα στοιχείο <javascript> στο <head> της HTML σελίδας.

function addScript(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script); //  document.body.appendChild(script); αν θέλουμε να το βάλουμε στο body
}
addScript('https://grcodeclub.gr/js/jquery.js');
addScript('https://grcodeclub.gr/js/prism.js');

Πλεονεκτήματα:

  1. Μπορείτε να φορτώνετε εξωτερικά αρχεία JavaScript δυναμικά, χωρίς να αγγίζετε το HTML.
  2. Βελτιώνει τη διαχείριση μεγάλων projects όπου απαιτείται η φόρτωση πολλών αρχείων JS.
  3. Γρήγορος τρόπος για την ενσωμάτωση επιπλέον λειτουργιές στη σελίδα σας.

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

if (document.getElementById('table_page')) { addScript('https://grcodeclub.gr/js/tables/pages.js');}