4 τρόποι για να δημιουργήσετε πλουσιότερες εμπειρίες στο Web
Ο ιστός έχει εξελιχθεί πολύ από το γεγονός ότι είναι απλός χώρος αποθήκευσης εγγράφων και τώρα έχουμε προγράμματα περιήγησης ικανά για πλούσιες οπτικές αλληλεπιδράσεις τόσο στην επιφάνεια εργασίας όσο και στο κινητό.
Επειδή θα ήθελα να μιλήσω για το πού κατευθύνεται ο ιστός σε αυτό το άρθρο, πολλά από τα χαρακτηριστικά που θα καλύψω ενδέχεται να έχουν περιορισμένη υποστήριξη, γι 'αυτό είναι σημαντικό να χρησιμοποιήσετε πόρους όπως caniuse.com το οποίο διαθέτει μια ισχυρή λίστα χαρακτηριστικών και διαγραμμάτων που καθορίζουν το πού υποστηρίζονται.
Ας κάνουμε μια βουτιά στους τέσσερις τρόπους που μπορείτε να βελτιώσετε τον ιστότοπό σας UX:
1. CSS
Το CSS είναι η γλώσσα styling για τα έγγραφά μας, τείνουμε να το σκεφτόμαστε με απλούς όρους όπως αλλαγή μεγέθους γραμματοσειράς ή χρώματος, αλλά γίνεται όλο και πιο ισχυρό με χαρακτηριστικά όπως μετατροπές και κινούμενα σχέδια. Παίρνουμε επίσης νέες λειτουργίες για να την κάνουμε ακόμα πιο ισχυρή.
Εάν έχετε χρησιμοποιήσει Vector Masks σε εργαλεία όπως το Photoshop, θα πρέπει να είστε εξοικειωμένοι με την ιδέα πίσω CSS Clip Paths. Αυτή η λειτουργία σας επιτρέπει να ορίσετε ένα σχήμα στο CSS που καθορίζει τα διαφανή και αδιαφανή μέρη του περιεχομένου HTML. Αυτά λειτουργούν εξαιρετικά με Μεταβάσεις CSS για την απόκρυψη και την αποκάλυψη στοιχείων UI. Ομοίως, οι μάσκες CSS κάνουν τον τρόπο τους στον Ιστό, που σας επιτρέπουν να ορίσετε τα διαφανή μέρη του περιεχομένου σας χρησιμοποιώντας μια εικόνα. Αυτό σας επιτρέπει να χρησιμοποιείτε τη διαφάνεια πιο αποτελεσματικά στα σχέδιά σας για οπτικό ενδιαφέρον ή υφή.
2. SVG
Οι περισσότερες από τις εικόνες που βρίσκουμε στο Web σήμερα είναι εικόνες ράστερ, αποτελούμενες από εικονοστοιχεία. Αυτό σημαίνει ότι καθώς τα χρησιμοποιούμε σε κλίμακα ή τα βλέπουμε σε συσκευές υψηλότερης ανάλυσης, λαμβάνουν pixelated.
Τα διανυσματικά γραφικά είναι φοβερά, επειδή αποτελούνται από γεωμετρικά πρωτόγονα που διατηρούν τις τραγανές άκρες τους σε οποιοδήποτε μέγεθος.
Το SVG είναι η διανυσματική μορφή του Ιστού. Μπορούμε να το χρησιμοποιήσουμε για την εμφάνιση γραφικών και ακόμη και να χειριστούμε και να ζωντανέψουμε τις ιδιότητές του με το CSS. Όπου το SVG γίνεται πολύ ισχυρό είναι όταν το συνδυάζουμε με scripting. Θραύση είναι μια βιβλιοθήκη JavaScript που σας διευκολύνει να χειριστείτε και να ζωντανέψετε το περιεχόμενο SVG. Έχει επικεντρωθεί σε σύγχρονα προγράμματα περιήγησης, έτσι υποστηρίζει τις νεότερες λειτουργίες SVG όπως ομάδες και διαδρομές κλιπ. Το Snap είναι ανοιχτό και προέρχεται από το GitHub και το χρησιμοποιήσαμε ακόμη και για να δημιουργήσουμε μια πλούσια διαφήμιση με κινούμενα σχέδια, μπορείτε να διαβάσετε περισσότερα γι 'αυτό σετο blog μου.
Και εδώ είναι ένα δείγμα ενός και το κάναμε χρησιμοποιώντας το SVG.
3. 2Δ καμβά
Το 2D Canvas είναι ένα άλλο ισχυρό χαρακτηριστικό του Ιστού που βελτιστοποιείται για να σχεδιάζει σχήματα και εικόνες. Παρέχει ένα API JavaScript που σας δίνει λεπτομερή έλεγχο πάνω στο στοιχείο του καμβά σας. Σας δίνει επίσης την ελευθερία να ενσωματώσετε άλλες μορφές μέσων, όπως το βίντεο, δημιουργώντας τη δυνατότητα για πλούσια διαδραστικά κουμπιά που παίζουν, παίζουν ή τρίβουν βίντεο. Το 2D Canvas υποστηρίζει πλέον τις μεθόδους συνδυασμού, οι οποίες σας επιτρέπουν να αναμίξετε τα χρώματα των στρώσεων με οπτικά ενδιαφέροντα τρόπους, οι οποίοι μπορείτε να διαβάσετε περισσότερα για εδώ.
Αρχίζουμε επίσης να λαμβάνουμε υποστήριξη για το βίντεο alpha, το οποίο μας επιτρέπει να ενσωματώσουμε πιο ομαλά το βίντεο στο περιεχόμενό μας. Υπάρχει ένα διασκεδαστικό παράδειγμα του βίντεο alpha Το μουσικό βίντεο του ΟΚ Go 'WTF' .
Το OK Go είναι γνωστό για περίτεχνα μουσικά βίντεο, και σε αυτό το συγκεκριμένο βίντεο shot χορογραφία μπροστά από μια πράσινη οθόνη. Στη συνέχεια, η χρήση της μετα-επεξεργασίας συνέχισε να καταστήσει το πλάνο πάνω από το ίδιο δημιουργώντας ένα δροσερό ηχητικό αποτέλεσμα όπου η διαφάνεια ήταν. Μπορούμε να αναπαράγουμε αυτό το αποτέλεσμα χρησιμοποιώντας το 2D Canvas, αλλά μπορούμε να το κάνουμε ένα βήμα παραπέρα και να το κάνουμε διαδραστικό χρησιμοποιώντας λειτουργίες όπως οι μέθοδοι συνδυασμού καμβά για να δημιουργήσουμε νέα οπτικά εφέ σε πραγματικό χρόνο.
4. WebGL
Το WebGL παρέχει ένα API χαμηλού επιπέδου για τη σχεδίαση γραφικών 2D και 3D με επιτάχυνση υλικού. Οι δυνατότητες εδώ είναι παιχνίδια με κονσόλα, όπως το Grand Theft Auto 5 που τρέχει δεξιά μέσα στο πρόγραμμα περιήγησης. Όπως μπορείτε να φανταστείτε WebGL παίρνει κάπως περίπλοκη, ευτυχώς ανοιχτές βιβλιοθήκες όπως Three.js προσφέρει ένα μεγάλο σημείο εισόδου με εξαιρετικά παραδείγματα για να ξεκινήσετε.
GitHub έχει γίνει μια μεγάλη πηγή για την κοινότητα ανοιχτού κώδικα. Μπορείτε να βρείτε το Three.js και το Snap στο GitHub καθώς και άλλες μεγάλες βιβλιοθήκες που διευκολύνουν την εκπληκτική εργασία στο Web. Συχνά βάζω πειράματα και εργαλεία που δίνω στο GitHub, όπως π.χ. εργαλείο spline κάμερας Συνήθιζα να δημιουργώ μονοπάτια κάμερας για το Three.js για να πετάξω μέσα σε 3D κόσμους.
Όπως μπορούμε να δούμε ότι ο Παγκόσμιος Ιστός γίνεται ολοένα και πιο ποικίλος και ισχυρός, είναι μια συναρπαστική στιγμή να γίνουμε προγραμματιστές Ιστού. Η ποικιλία των τεχνολογιών και των πόρων στους οποίους έχουμε πρόσβαση αυξάνεται διαρκώς και είναι διασκεδαστικό να δούμε τις πλούσιες εμπειρίες που οι άνθρωποι δημιουργούν μαζί τους.