background image

 

Νικόλας Ψύλλου, Σχεδίαση και Υλοποίηση διαδικτυακής πλατφόρμας για 
εξυπηρέτηση παιχνιδιών καρτών απομακρυσμένων παικτών
 

 

Πτυχιακή / Διπλωματική Εργασία 

 

10 

2.3.2 CSS 

Η  CSS  [12]  είναι  μια  γλώσσα  προγραμματισμού  που  χρησιμοποιείται  για  την 

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

<

style

>

 

    

#

hero_title

 {

 

        

color

:

 

blue

;

 

}

 

</

style

>

 

  
ο τίτλος «Hello World» θα έχει χρώμα μπλε. Καλύτερη προγραμματιστική λύση θεωρείται 
ο κώδικας της CSS να είναι σε διαφορετικά αρχεία για καλύτερη οργάνωση των αρχείων 
και να γίνεται η κλήση τους από την ετικέτα <head> της HTML για να φορτωθούν έτσι πιο 
γρήγορα τα αρχεία της CSS.  
 

2.3.3 Tailwind CSS 

Υπάρχουν αρκετές βιβλιοθήκες στην CSS που λύνουν τα χέρια του προγραμματιστή 

στο να μην γράφει τεράστια αρχεία κώδικα CSS. Σε αυτή την ΠΕ επιλέχθηκε η Tailwind 
CSS [13] που έχει υλοποιημένους σχεδόν όλους τους επιλογείς για κανόνες της CSS και 
μπορούν  να  χρησιμοποιηθούν  κατευθείαν  στο  HTML  αρχείο.  Δίνεται  η  ευελιξία  στον 
προγραμματιστή να χρησιμοποιήσει τους έτοιμους επιλογείς κατευθείαν με την συγγραφή 
του κειμένου χωρίς να τους υλοποιήσει στα css αρχεία. Στην εγκατάσταση της Tailwind 
CSS δημιουργείται ένα αρχείο tailwind.config.js, με το οποίο δίνεται η δυνατότητα στον 
προγραμματιστή να προσθέσει τις γενικές ρυθμίσεις που θα έχει η Tailwind CSS ως προς 
τα χρώματα της παλέτας του, το μέγεθος των γραμμάτων, το μέγεθος του container, το ύψος 
των περιθωρίων ανάμεσα στις ετικέτες και άλλα πολλά. Για να προκύψει το “Hello World” 
σε χρώμα μπλε, με φόντο πράσινο, χρειάζεται ο εξής κώδικας:  

    

<

h1

 

class

=

”bg-green-900

 

text-blue-900”

>

Hello World

</

h1

>

 

 

2.3.4 JavaScript 

Υπήρχε  η  ανάγκη  να  κατασκευαστεί  μια  πιο  προγραμματιστική  γλώσσα  για  να 

ενισχύσει  το front-end development και να πλαισιώσει τις γλώσσες HTML και CSS.   Η 
JavaScript [14] δεν έχει κάποια σχέση με την Java παρά μόνο ως προς την σύνταξη και το 
κοινό πρόθεμα. Είναι γλώσσα που είναι ανεκτική σε προγραμματιστικά λάθη για αυτό αν 
υπάρξει κάποιο πρόβλημα στο κώδικα,  θα προβληθεί η σελίδα, έστω και άστοχα.  

Η JavaScript είναι η πιο δημοφιλής γλώσσα για το 2022 με βάση τις στατιστικές που 

δημοσιευτήκαν από την Stack Overflow.