Ας το παραδεχτούμε, η ανάπτυξη ιστοσελίδων μπορεί εύκολα να γίνει ένα χάος. Η HTML, η CSS και η JavaScript έχουν εξελιχθεί τα τελευταία χρόνια και είναι σε μεγάλο βαθμό διφορούμενες ως προς τον τρόπο χρήσης τους. Ως αποτέλεσμα, είναι πολύ εύκολο να δημιουργηθεί χάος. Η τήρηση των προτύπων και η αξιοποίηση των τελευταίων βελτιώσεων στις προδιαγραφές δεν εγγυάται καλό κώδικα, αλλά σίγουρα μπορεί να βοηθήσει. Ως εκ τούτου, θα πρέπει να παρακολουθείτε προσεκτικά τα Web Components. Η υποστήριξη του προγράμματος περιήγησης δεν είναι σπουδαία, αλλά αν αποκτήσετε μερικά polyfills, μπορείτε να προηγηθείτε της καμπύλης και να αρχίσετε να εκμεταλλεύεστε τα προσαρμοσμένα στοιχεία για να δομήσετε τον κώδικά σας αμέσως. Αυτό το στυλ ανάπτυξης – κατασκευής ιστοσελίδων είναι το μέλλον, οπότε αξίζει να εξοικειωθείτε με αυτό από τώρα.

1. Αναγνώριση και σύνθεση της ομιλίας

Κάποτε αυτές οι λειτουργίες ήταν πολύπλοκες και απαιτούσαν εξειδικευμένο λογισμικό, αλλά τώρα ενσωματώνονται απευθείας στα προγράμματα περιήγησης. Το Web Speech API διαθέτει στοιχεία που υποστηρίζουν τη μετατροπή κειμένου σε ομιλία και ομιλία σε κείμενο. Η τελευταία από αυτές θα χρησιμοποιεί είτε μια διαδικτυακή υπηρεσία (το Chrome χρησιμοποιεί το Google Cloud Speech API) είτε την εγγενή υπηρεσία αναγνώρισης ομιλίας της συσκευής. 

2. Εμφάνιση ενός επιλογέα χρωμάτων

Όσο τετριμμένο και αν ακούγεται, αυτό είναι ένα εξαιρετικό παράδειγμα του πώς η HTML5 απλοποιεί κοινές εργασίες που προηγουμένως θα απαιτούσαν προσαρμοσμένη κωδικοποίηση ενός αρκετά σύνθετου στοιχείου UI. <input type=”color”> θα εμφανίζει έναν οπτικό επιλογέα χρωμάτων όταν πατηθεί, χρησιμοποιώντας έναν επιλογέα χρωμάτων που είναι εγγενής στη συσκευή. Αυτό θα μπορούσε να είναι ιδιαίτερα χρήσιμο με τον καμβά HTML. Υποστηρίζεται ευρέως, με εξαίρεση τον Safari στα κινητά.

3. Επαναχρωματίστε το UI του προγράμματος περιήγησης

Αυτό μπορεί να προσφέρει μια ωραία αισθητική πινελιά σε πλατφόρμες κινητών τηλεφώνων. <meta name=”theme-color” content=”#FFFFFF” /> έχει σχεδιαστεί για να δίνει εντολή στο πρόγραμμα περιήγησης να επαναχρωματίσει τη γραμμή εργαλείων κατά την προβολή του ιστότοπού σας. Δυστυχώς, είναι λίγο μη τυποποιημένο, οπότε ενώ το “theme-color” λειτουργεί με τους Chrome, Firefox και Opera, στο iOS θα χρειαστείτε το “apple-mobile-web-app-status-bar-style” (λειτουργεί μόνο σε λειτουργία πλήρους οθόνης).

4. Διαφορετικές εικόνες για διαφορετικές οθόνες

Ελπίζουμε ότι εφαρμόζετε ήδη responsive design, οπότε οι εικόνες σας θα αλλάζουν μέγεθος ανάλογα με το παράθυρο προβολής. Αυτό δεν είναι τέλειο, καθώς θα αναγκάσετε τον χρήστη να κατεβάσει τη μεγαλύτερη έκδοση της εικόνας και στη συνέχεια να την υποβαθμίσει. Εισάγετε το στοιχείο HTML5 <picture>, το οποίο σας επιτρέπει να καθορίσετε διαφορετικές εικόνες που θα εμφανίζονται ανάλογα με την ανάλυση της οθόνης στην οποία προβάλλεται ο ιστότοπος.