Front-end Web Developer

I am a Mid Front-end Web Developer and IT Trainer

Κάρτα καναλιού

Categories
Δεξιότητες CSS, HTML
Εργαλείο Ανάπτυξης Brackets

Κάρτα καναλιού αναλογικού σήματος

Σχετικά με την κάρτα καναλιού

Κάρτα καναλιού ερτ

Η ιδέα για την κάρτα καναλιού ήρθε μια τυχαία αναζήτηση για την ΕΡΤ. Στα αποτελέσματα αναζήτησης κάποια από τις εικόνες ήταν η εικόνα αυτή.

Για την ιστορία, η κάρτα αυτή εμφανιζόταν όταν έπεφτε το σήμα του καναλιού όπως αυτό της ΕΡΤ. Την τότε εποχή το τηλεοπτικό σήμα δεν μεταδιδόταν 24 ώρες την ημέρα. Τις ώρες της μη μετάδοσης, εμφανιζόταν αυτή η κάρτα. Αυτό βέβαια ίσχυε όσο υπήρχε το αναλογικό σήμα.

 

Πως υλοποιήθηκε

Για την σχεδίαση χρησιμοποιήθηκαν οι τεχνολογίες HTML και CSS ενώ για την εμφάνιση της ώρας, η front-end γλώσσα προγραμματισμού JavaScript.

Το σχέδιο πίσω από τον κύκλο είναι ένα κουτί με καμπύλο περίγραμμα δίνοντας την ψευδαίσθηση της τηλεόρασης, όσο γίνεται. Το γέμισμα, κουτάκια, είναι μια οριζόντια και κάθετη ακολουθία διαβαθμισμένων χρωμάτων ορισμένων με τέτοιο τρόπο ώστε να δίνουν την ψευδαίσθηση των κουτιών. Η ιδιότητα των CSS, background-image, χρησιμοποιήθηκε ως επί των πλείστων για την απόδοση αυτών των εφέ.

Ο κύκλος με το σήμα της κάρτας του καναλιού είναι ένα κουτί με καμπύλωση των πλευρών του έτσι ώστε να δίνει την αίσθηση του κύκλου. Μέσα σε αυτό το κουτί υπάρχουν 10 σειρές από κουτιά. Σε κάποια από αυτά υπάρχουν εσωτερικά οριζόντια κουτιά. Ποιο συγκεκριμένα στην γραμμή:

  • Με το σήμα της Ε.Ρ.Τ. ώστε να μπει το σχετικό κείμενο,
  • Με το κουτί κάτω από το σήμα της ΕΡΤ.
  • Με την εμφάνιση της ώρας η οποία εμφανίζεται με χρήση της τεχνολογίας JavaScript, αλλά και το μακρύτερο σε ύψος κουτί στο κέντρο του οριζόντιου κουτιού,
  • Με το κουτί στην προ-τελευταία γραμμή του κύκλου.

Στα υπόλοιπα κουτιά του κύκλου χρησιμοποιήθηκε η παραπάνω αναφερόμενη ιδιότητα των css προκειμένου να αποδοθεί διαβαθμισμένο χρώμα παρασκηνίου σε κάθε κουτί.

 

Τι γίνεται με τα χρώματα της κάρτας

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

  • RGB από το Red (Κόκκινο), Green (πράσινο), Blue (μπλε)
  • CMYK από Cyan (γαλάζιο), Magenta (ροζ), Yellow(κίτρινο), Key (μαύρο)

Παρατηρώντας λοιπόν την 5η γραμμή του κύκλου με τις 6 χρωματικές διαβαθμίσεις βλέπουμε τόσο τα RGB όσο και τα CMY(K) χρώματα. Το τελευταίο, μαύρο, το βλέπουμε σε άλλα σημεία του κύκλου καθώς και τις αναμείξεις με το άσπρο.

 

Αντί επιλόγου

Η κάρτα παύσης σήματος του καναλιού ήταν μια καλή έμπνευση σχεδίασης η οποία φέρνει αναμνήσεις για όσους έζησαν αυτές τις στιγμές της τηλεόρασης παλιά. Μπορείτε να δείτε το σχέδιο στο codepen.