Δημιουργήστε έναν αποκριτικό ιστότοπο σε μια εβδομάδα: εικόνες και βίντεο (μέρος 3)

Περιεχόμενο

• Κλιμάκωση εικόνων σε ρευστή διάταξη
• Αποκριτικές εικόνες
• Ανεξάρτητες εικόνες ανάλυσης
• Αναλογία ga ga

• Απαιτείται γνώση: Ενδιάμεσο CSS και HTML
• Απαιτεί: Πρόγραμμα επεξεργασίας κειμένου, σύγχρονο πρόγραμμα περιήγησης, λογισμικό γραφικών
• Ώρα έργου: 1 ώρα (σύνολο 5 ωρών) Λήψη αρχείων προέλευσης

Χθες περιέγραψα πώς μπορούμε να κατασκευάσουμε διατάξεις ρευστών και πρότεινα ότι για να γίνει αυτό, πρέπει να απομακρυνθούμε από τα pixel και αντί να αγκαλιάσουμε αναλογικές μονάδες όπως ems και ποσοστά.

Όλα αυτά είναι καλά και καλά όταν ασχολούμαστε με τμήματα κειμένου. αν μια στήλη γίνει πολύ στενή, τότε το κείμενο μπορεί εύκολα να τυλιχτεί σε μια νέα γραμμή. Ωστόσο, τα στοιχεία πολυμέσων όπως εικόνες και βίντεο έχουν καθορισμένες διαστάσεις σε pixel. Μπορούμε να τα μειώσουμε φυσικά, αλλά αυτό σημαίνει τη λήψη μεγαλύτερων αρχείων από ό, τι είναι απαραίτητο και το εύρος ζώνης μπορεί να είναι ακριβό.

Οι οθόνες υψηλής ευκρίνειας (ή αμφιβληστροειδείς) αποτελούν μια άλλη πρόκληση. Αυτές οι οθόνες τοποθετούν σημαντικό αριθμό εικονοστοιχείων σε μια μικρή περιοχή, επιτρέποντας την εμφάνιση περισσότερων λεπτομερειών. Αυτό μπορεί να είναι ένα πρόβλημα για εικόνες υψηλής αντίθεσης και εικονογραφία, οι οποίες εάν δεν έχουν σχεδιαστεί για να ταιριάζουν με αυτές τις εγγενείς αναλύσεις, μπορεί να εμφανίζονται ασαφείς και να μην έχουν ορισμό.

Σήμερα, θα εξετάσω αυτά τα ζητήματα και θα δώσω πληροφορίες σχετικά με το πώς θα μπορούσαμε να τα αντιμετωπίσουμε. Ωστόσο, αξίζει να σημειωθεί ότι πρόκειται για μια ταχέως αναπτυσσόμενη περιοχή, με νέες προσεγγίσεις να εμφανίζονται σχεδόν καθημερινά. Αυτό μπορεί να είναι δύσκολο - αλλά και συναρπαστικό!

Κλιμάκωση εικόνων σε ρευστή διάταξη

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

Ευτυχώς, υπάρχει ένας εύκολος τρόπος για να το διορθώσετε. Ανακαλύφθηκε για πρώτη φορά από τον Richard Rutter (πρώην πρωτοπόρος των διατάξεων υγρών), περιλαμβάνει την προσθήκη του ακόλουθου κανόνα σε εικόνες που θέλετε να κλιμακώσετε με τη διάταξη:

1. img {
2. μέγιστο πλάτος: 100%;
3. }

Αυτός ο κανόνας λέει στα προγράμματα περιήγησης ότι μια εικόνα πρέπει να γεμίζει το πλάτος του περιέχοντος στοιχείου, μέχρι το σημείο που φτάνει το 100% του μεγέθους της. Απλός!

Υπάρχει όμως μια μικρή προειδοποίηση. Για να λειτουργήσει αυτή η δήλωση CSS, δεν μπορείτε να προσθέσετε ένα χαρακτηριστικό ύψους στις εικόνες σας. Από την άποψη της απόδοσης, αυτό δεν είναι ιδανικό (όσο πιο γρήγορα το πρόγραμμα περιήγησης ξέρει τι μέγεθος να αποδώσει μια εικόνα, τόσο λιγότερο χρόνο ξοδεύει την αναδιατύπωση της σελίδας). Συνεχίστε να συμπεριλαμβάνετε χαρακτηριστικά πλάτους και ύψους για εικόνες που δεν χρειάζεται ωστόσο να κλιμακώνονται.

Αποκριτικές εικόνες

Θα σημειώσετε ότι για αυτές τις μικρογραφίες, χρησιμοποιώ εικόνες που αντικατοπτρίζουν τη σχεδίαση της διάταξης που είναι προσανατολισμένη στην επιφάνεια εργασίας και τις χαμηλώνω για στενότερα σημεία προβολής. Αυτό φαίνεται αντίθετο με όλα όσα έχουμε περιγράψει προηγουμένως - δεν είναι πρώτα για κινητά!

Όπως με όλα, είναι θέμα κρίσης. Πρέπει να εξισορροπήσουμε την απόδοση με τη συντήρηση - και τη δική μας λογική! Για αυτές τις μικρογραφίες, η διαφορά μεγέθους είναι αρκετά μικρή (138 εικονοστοιχεία> 240 εικονοστοιχεία) ώστε να αντισταθμίσουμε το μέγεθος του αρχείου με άλλους τρόπους. Θα χρησιμοποιήσουμε τη σωστή μορφή αρχείου (το JPEG μπορεί συνήθως να δημιουργήσει το μικρότερο μέγεθος αρχείου για φωτογραφίες) και θα εφαρμόσουμε ένα κατάλληλο ποσό συμπίεσης. Θα καλύψουμε τη βελτιστοποίηση εικόνας με περισσότερες λεπτομέρειες στο τελευταίο μέρος αυτού του σεμιναρίου.

Ωστόσο, στη σελίδα του στοιχείου πολυμέσων, μια φωτογραφία μπορεί να έχει πλάτος μεταξύ 288 και 800 pixel. Ανεξάρτητα από τη μορφή αρχείου και άλλες βελτιστοποιήσεις, η μεγαλύτερη εικόνα μας θα μπορούσε να έχει μέγεθος έως και 300kb, απαιτώντας αρκετά δευτερόλεπτα (αν όχι περισσότερο) για λήψη μέσω σύνδεσης 3G. Αυτό είναι πρόβλημα.

Στην ιδανική περίπτωση, το πρόγραμμα περιήγησης θα ανέφερε το μέγεθος της εικόνας που χρειάζεται να εμφανίσει και το μέσο όρο του διαθέσιμου εύρους ζώνης και θα μπορούσαμε να εξυπηρετήσουμε μια εικόνα κατάλληλου μεγέθους που ταιριάζει καλύτερα με αυτούς τους περιορισμούς. Δυστυχώς, κανένα πρόγραμμα περιήγησης δεν το κάνει αυτό, και δεν υπάρχει τίποτα που να υποδηλώνει πώς μπορεί να λειτουργήσει αυτό (καλά, όχι ακόμη ούτως ή άλλως).

Αυτή είναι η έκταση αυτού του προβλήματος, μερικοί έξυπνοι και ταλαντούχοι προγραμματιστές έχουν προτείνει κάποιες λύσεις. Πολλά περιλαμβάνουν JavaScript, άλλοι χρησιμοποιούν ανίχνευση από την πλευρά του διακομιστή. όλα έχουν τα πλεονεκτήματά τους και τις αντισταθμίσεις:

• Αποκριτικές εικόνες: Αναπτύχθηκε από τον Scott Jehl, αυτή η προσέγγιση (ένας συνδυασμός επανεγγραφής από διακομιστή, cookie και JavaScript) στοχεύει στον εντοπισμό του πλάτους της θύρας προβολής πριν από τη λήψη οποιωνδήποτε εικόνων. Εάν η θύρα προβολής είναι μικρή, τότε ζητείται η προεπιλεγμένη μικρή εικόνα. Ωστόσο, εάν η θύρα προβολής είναι αρκετά μεγάλη, τα αιτήματα θα ξαναγραφούν σε έναν κατάλογο που περιέχει μεγαλύτερες εικόνες και θα ληφθούν αντί αυτού. Δυστυχώς, καθώς τα προγράμματα περιήγησης επικεντρώνονται όλο και περισσότερο στην απόδοση - συνήθως χρησιμοποιούν τεχνικές που περιλαμβάνουν προκατασκευή στοιχείων - αυτή η προσέγγιση έχει γίνει εύθραυστη. Ανιχνεύει επίσης το πλάτος της οθόνης για να αποφασίσει ποιες εικόνες θα φορτώσουν, αλλά δεν είναι πάντα αλήθεια ότι μια μεγαλύτερη οθόνη απαιτεί μεγαλύτερες εικόνες.
• Προσαρμοστικές εικόνες: Μια λύση PHP που αναπτύχθηκε από τον Matt Wilcox και εμπνευσμένη από το έργο του Scott, αυτή η προσέγγιση είναι συμβατή με την υπάρχουσα σήμανση και επιτρέπει τη χρήση πολλαπλών μεγεθών εικόνας. Και πάλι, φορτώνει εικόνες με βάση την ανάλυση της οθόνης, η οποία δεν είναι πάντα μια ακριβής δοκιμή και απαιτεί PHP και τη βιβλιοθήκη GD για να λειτουργήσει.
• Αποκριτική βελτίωση: Ενώ πολλές προσεγγίσεις έχουν επικεντρωθεί στην προσπάθεια επεξεργασίας της εικόνας που θα κατεβάσει πριν από τη φόρτωση μιας σελίδας, ο Josh Emerson έχει υιοθετήσει μια διαφορετική προσέγγιση. Όπως και άλλες λύσεις, περιλαμβάνει την αναφορά της μικρότερης εικόνας στη σήμανση. Αλλά αντί να εντοπίσουμε εάν απαιτείται μεγαλύτερη εικόνα πριν από τη φόρτωση της σελίδας, εδώ λαμβάνεται η μικρότερη εικόνα. Μόνο αφού φορτωθεί (και εάν απαιτείται μεγαλύτερη εικόνα) αντικαθίσταται με μια έκδοση υψηλότερης ανάλυσης. Με πολλούς τρόπους, αυτό είναι ένα σύγχρονο lowsrc χαρακτηριστικό που εξαφανίστηκε μυστηριωδώς από το HTML. Ω, πόσο λαχταρούμε για την επιστροφή του.

Ο Jason Grisby έχει γράψει περισσότερα για αυτό το πρόβλημα και πηγαίνει σε φανταστικές λεπτομέρειες σχετικά με τα πλεονεκτήματα και τα μειονεκτήματα ορισμένων από τις παραπάνω λύσεις. Εν τω μεταξύ, ο Matt Marquis πρότεινε την ανάγκη για ένα νέο στοιχείο HTML και ξεκίνησε μια κοινοτική ομάδα στο W3C για να επεξεργαστεί τις λεπτομέρειες.

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

Πρώτον, πρέπει να συνδεθούμε με το αρχείο JavaScript στο κεφάλι>:

1. κεφάλι>
2. ...
3. script src = "/ _ js / responsive-boost.js"> / script>
4. τίτλος> Άφιξη στο Λας Βέγκας / τίτλος>
5. / κεφάλι>

Τότε στο δικό μας img> στοιχείο πρέπει να προσθέσουμε ένα νέο data-fullsrc χαρακτηριστικό που αναφέρεται στην πηγή της μεγαλύτερης εικόνας:

1. img id = "media-object" src = "http://farm8.staticflickr.com/7131/6998741089_0d87917944_n.webp" data-fullsrc = "http://farm8.staticflickr.com/7131/6998741089_0d87917944_c.webp" alt = "Ηλιοβασίλεμα πάνω από την Αριζόνα" />

Πρέπει επίσης να προσθέσουμε την ακόλουθη γραμμή JavaScript κάτω από την εικόνα:

1. script> responsiveEnhance (document.getElementById («μέσα-αντικείμενο»), 320); / script>

Αυτό λέει στο πρόγραμμα περιήγησης ποια εικόνα θα αντικαταστήσει και σε ποιο πλάτος θύρας προβολής θα την αντικαταστήσει. Όταν το JavaScript είναι απενεργοποιημένο (ή μη διαθέσιμο), οι χρήστες θα λάβουν τη μικρότερη εικόνα. Διαφορετικά, όταν η θύρα προβολής είναι μεγαλύτερη από 320 εικονοστοιχεία, η μεγαλύτερη εικόνα θα εμφανίζεται αφού ολοκληρωθεί η λήψη της μικρότερης.

Τέλος, πρέπει να παρακάμψουμε το προεπιλεγμένο στυλ των εικόνων. Για να λειτουργήσει η ανίχνευση, χρειαζόμαστε την μικρότερη εικόνα για κλίμακα μεγαλύτερη από το εγγενές της μέγεθος. Μπορούμε να το κάνουμε ως εξής:

1. img.media-αντικείμενο {
2. περιθώριο: 0 αυτόματη;
3. πλάτος: 100%;
4. μέγιστο πλάτος: 50em; / * 800 εικονοστοιχεία * /
5. }

Και πάλι, αυτή δεν είναι μια τέλεια λύση (ειδικά επειδή μπορούμε να αναφέρουμε μόνο μία εικόνα με επιπλέον μέγεθος), αλλά είναι πολύ καλύτερη από την προβολή μεγαλύτερων εικόνων ανεξάρτητα.

Ανεξάρτητες εικόνες ανάλυσης

Οι εικόνες δεν υπάρχουν μόνο εντός σήμανσης: μπορούμε επίσης να τις αναφέρουμε από το CSS. Τα πράγματα είναι λίγο πιο εύκολα εδώ, καθώς τα ερωτήματα πολυμέσων σημαίνουν ότι μπορούμε να επιλέξουμε ποιες εικόνες θα εμφανίζονται σε διαφορετικές διατάξεις.

Καθώς πολλές από τις εικόνες φόντου μας στο CSS θα είναι εικονίδια, τώρα είναι η κατάλληλη στιγμή να αγγίξουμε οθόνες υψηλής ανάλυσης και συγκεκριμένα δύο μεθόδους που μας επιτρέπουν να χρησιμοποιούμε εικονίδια ανεξάρτητα από την ανάλυση:

• Σπρέι εικόνας SVG: Σε έναν ολοένα και περισσότερο ιστό χωρίς pixel, το Scalable Vector Graphics (SVG) απολαμβάνει κάτι αναζωογόνησης μετά από χρόνια στην έρημο. Με καλή υποστήριξη στα περισσότερα σύγχρονα προγράμματα περιήγησης - συμπεριλαμβανομένου του IE9 και άνω - μπορούμε να χρησιμοποιήσουμε αυτήν τη μορφή με διάφορους τρόπους. Μπορούμε να το αναφέρουμε από ένα στοιχείο img>, μπορούμε να ενσωματώσουμε τον κώδικα SVG απευθείας στη σήμανση μας και μπορούμε να τον αναφέρουμε μέσα από το CSS. Ο David Bushell έχει τεκμηριώσει μια τεχνική που χρησιμοποιεί εικονογραφήματα με βάση το SVG και αξίζει να το διαβάσετε.
• Γραμματοσειρές εικονιδίων: Ένας άλλος τρόπος συμπερίληψης επεκτάσιμων εικονιδίων είναι με ειδικά σχεδιασμένες γραμματοσειρές ιστού που περιλαμβάνουν εικονίδια αντί για γράμματα και αριθμούς. Αυτό σημαίνει ότι μπορούμε να σχεδιάσουμε εικονίδια με τον ίδιο τρόπο που κάνουμε για το κείμενο και να απολαύσουμε επίσης την εικονογραφία με βάση το διάνυσμα. Ο Jon Hicks έγραψε για τις γραμματοσειρές εικονιδίων με περισσότερες λεπτομέρειες με 24 τρόπους.

Αναλογία ga ga

Εντάξει, αρκετά για εικόνες - ας μιλήσουμε για βίντεο. Ευτυχώς, το να ανταποκρίνονται τα βίντεο είναι λιγότερο προβληματικό.Αυτό είναι το μέγεθός τους, οι προσεγγίσεις για την προβολή βίντεο με τρόπο φιλικό προς το εύρος ζώνης είναι πιο συνηθισμένες, είτε μέσω ροής ή των πολλών διαφορετικών διαθέσιμων κωδικοποιητών συμπίεσης. Και φυσικά, τα βίντεο θα πρέπει να ξεκινήσουν τη λήψη μόνο όταν πατήσετε το παιχνίδι.

Ωστόσο, θέλουμε τα βίντεό μας να κλιμακώνονται εντός των ορίων της διάταξής μας. Εάν χρησιμοποιούμε εγγενές βίντεο HTML5, μπορούμε να χρησιμοποιήσουμε ξανά το ακόλουθο CSS:

1. βίντεο {
2. μέγιστο πλάτος: 100%;
3. }

Ωστόσο, ενσωματωμένα αντικείμενα (iframe>, αντικείμενο>, ενσωμάτωση>) συμπεριφέρονται διαφορετικά. Εάν προσθέσουμε τον ακόλουθο κανόνα στην ενσωμάτωσή μας:

1. iframe.media-αντικείμενο {
2. μέγιστο πλάτος: 100%;
3. }

το βίντεο μπορεί να μην διατηρεί τη σωστή αναλογία καθώς κλιμακώνεται ή απλώς να αρνείται να κάμψει καθόλου:

Αυτό συμβαίνει επειδή τα ενσωματωμένα αντικείμενα δεν είναι σε θέση να αναφέρουν την αναλογία του βίντεο που περιέχουν. Για να ξεπεράσουμε αυτό το πρόβλημα, πρέπει να τοποθετήσουμε την ενσωμάτωση μέσα σε ένα κοντέινερ που έχει τη σωστή αναλογία και να ορίσουμε την ενσωμάτωση να είναι 100% πλάτος και ψηλή (μια προσέγγιση που ανακαλύφθηκε για πρώτη φορά από τον Thierry Koblentz.

Πρώτον, πρέπει να προσθέσουμε ένα κοντέινερ γύρω από την ενσωμάτωσή μας:

1. div>
2. iframe src = "http://player.vimeo.com/video/40493662" />
3. / div>

Στη συνέχεια μπορούμε να σχεδιάσουμε το περιτύλιγμα ως εξής:

1. .media-object-wrapper {
2. επένδυση-κάτω: 56,25%;
3. πλάτος: 100%;
4. ύψος: 0;
5. θέση: σχετική
6. }

Η τιμή του πάτου-κάτω είναι αυτό που δίνει σε αυτό το περιτύλιγμα την αναλογία του. Καθώς τα ενσωματωμένα βίντεό μας έχουν εγγραφεί χρησιμοποιώντας αναλογία διαστάσεων 16: 9, το ύψος τους είναι 56,25% του πλάτους (9/16 = 0,5625). Θα παρατηρήσετε ότι δώσαμε επίσης αυτό το στοιχείο σχετική θέση. Αυτό είναι έτσι ώστε να μπορούμε να τοποθετήσουμε απόλυτα το κλειστό iframe>και να το αγνοήσει αυτό:

1. .media-object-wrapper iframe.media-object {
2. πλάτος: 100%;
3. ύψος: 100%;
4. θέση: απόλυτη;
5. }

Και εκεί το έχετε. Τα ενσωματωμένα βίντεό μας ανταποκρίνονται τώρα στη διάταξη τόσο όμορφα όσο οι εικόνες μας:

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

Αύριο: Θα εξετάσουμε το τελικό συστατικό του αποκριτικού σχεδιασμού ιστού: ερωτήματα πολυμέσων.

Ο Paul είναι σχεδιαστής αλληλεπίδρασης με έδρα το Μπράιτον της Αγγλίας. Είναι πιο ευτυχισμένος όταν δημιουργεί απλές αλλά ελκυστικές διεπαφές που είναι εγγενείς στον ιστό.