Μεγάλες προσθήκες JQuery για φρέσκους ιστότοπους
Κάποιος μπορεί μόνο να φανταστεί πόσο δύσκολο ήταν να ασκήσει το σχεδιασμό του web πίσω όταν όλα φάνηκαν τόσο καινούργια - κατά τη διάρκεια των ημερών του Netscape Navigator και του Microsoft FrontPage. Κοιτάζοντας πίσω, φαίνεται σαν μια τέτοια αρχαϊκή στιγμή στην ιστορία του web design. Ήταν σχεδόν αδύνατο να σχεδιάσουμε κάτι υπέρτατης και ευφυούς δημιουργικότητας. Τότε, θεωρήσατε δημιουργική αν είχατε ένα φοβερό υπόβαθρο που αναβοσβήνει ή έγχρωμες κύλινδροι κύλισης.
Δεν υπήρχε κανένας τόνος ευελιξίας πραγματικά όταν κατέληξε στο νιτρινοκόκκινο του σχεδιασμού. Πολλές από τις διατάξεις ήταν οι ίδιες και μιμούνται ό, τι φαίνεται στα περιοδικά και τις εφημερίδες. Σκέφτομαι μόνο να το σκεφτώ: δεν ήταν πολύ καιρό πριν μπορούσαμε να καταλάβουμε τελικά έναν τρόπο να χρησιμοποιήσουμε διακοσμητικές γραμματοσειρές στο διαδίκτυο. Προηγουμένως, ήταν όλα τα Arial, όλα τα Verdana και όλα τα Times New Roman - το 2012, μπορείτε να φανταστείτε ότι ζείτε αυτή τη ζωή;
Οι πίνακες ήταν ο κανόνας και αυτοί δεν ήταν πολύ ευέλικτοι. Μιλώντας για ευελιξία, πώς ζούσαμε ποτέ χωρίς ανταπόκριση; Εάν ήθελε να σχεδιάσει έναν ιστοχώρο πριν από λίγο καιρό, θα ήταν λίγο πολύ κουτί για να δουλέψετε με αυτό που είχατε. Κανείς δεν παραπονέθηκε τότε, αλλά ευχαριστώ την καλοσύνη για προοδευτική τεχνολογία.
Τώρα…
Γρήγορα προς τα εμπρός μέχρι τώρα, και μπορούμε λίγο πολύ να σχεδιάσουμε οτιδήποτε θέλουμε, σε ό, τι θέλουμε. Αυτά τα είδη των πραγμάτων δεν πρέπει να θεωρηθούν δεδομένες, αλλά καθώς νέες γενιές σχεδιαστές και προγραμματιστές εισέρχονται σ 'αυτό το βασίλειο, είναι λίγο πολύ. Θέλω να πω, μόλις πριν από λίγους μήνες, ήμασταν τελικά σε θέση να χρησιμοποιήσουμε φύλλα στυλ για να δημιουργήσουμε στρογγυλεμένες γωνίες - πόσο γρήγορα ξεχνάμε;
Οι προόδους στον σχεδιασμό ιστοσελίδων μπορούν να συμβάλουν στη συνεχή εξέλιξη διαφορετικών γλωσσών κωδικοποίησης. Δεν μπορείτε να έχετε ένα μεγάλο web design χωρίς κάποια μεγάλη ανάπτυξη ιστοσελίδων (και αντίστροφα). Και θα σκεφτόσαστε ότι τα πράγματα μπορεί να έχουν γίνει πιο περίπλοκα όσον αφορά την εξέλιξη, αλλά είναι αρκετά προφανές ότι τα πράγματα έχουν καταστεί ευκολότερα. Ρίξτε μια ματιά, για παράδειγμα, σε HTML4 έναντι HTML5.
Μία από τις μεγαλύτερες εξελίξεις στην ανάπτυξη και το σχεδιασμό ήταν η χρήση του jQuery. Είναι πιθανώς μια από τις πιο εύκολες βιβλιοθήκες JavaScript για να μάθουν και να κωδικοποιήσουν, καθώς και μερικά αρκετά τακτοποιημένα πράγματα με. Αν σχεδιάζετε ελεύθερα και / ή επιθυμείτε κάποιες πραγματικά εκπληκτικές αλληλεπιδράσεις μεταξύ του σχεδίου και του κοινού σας, πιθανότατα θα χρησιμοποιήσετε το jQuery.
Τα plugins
Το jQuery δεν κάνει μόνο το ante του πραγματικού σχεδιασμού σας, αλλά κάνει για πιο ομαλές εμπειρίες χρήστη. Όταν οι ιστοτόποι πρέπει να γίνουν για να καλωσορίσουν το ακροατήριό σας και να το διευκολύνουν να κινηθούν, αυτό είναι σημαντικό. Ο σχεδιασμός είναι επίσης σημαντικός αν χρησιμοποιείτε ένα μεγάλο ποσό δημιουργικότητας με το σχέδιό σας. Βασικά, δεν πρέπει να υπάρχουν όρια όταν πρόκειται για τη δημιουργία ιστοσελίδων, και το jQuery είναι εξαιρετικά χρήσιμο για να βεβαιωθείτε ότι δεν είστε παγιδευμένοι σε κουτιά. Τι μπορεί να κάνει η jQuery για εσάς; Παρακάτω είναι μερικές μεγάλες προσθήκες που σας επιτρέπουν να είστε τόσο δημιουργικοί και φρέσκοι στην ανάπτυξη ιστοσελίδων όσο το δυνατόν.
jQuery δίκτυο κινητό
Μερικοί σχεδιαστές επιθυμούν να ανοίξουν το πρόγραμμα της επιλογής τους και να σχεδιάσουν ό, τι θέλουν χωρίς απορίες. Υπάρχουν άλλοι που τους αρέσει να έχουν μια μέθοδο για την τρέλα τους. Τα πρότυπα σχεδιασμού ιστοσελίδων υποδεικνύουν ότι πρέπει να χρησιμοποιήσουμε πλέγματα για να μας βοηθήσετε να σχεδιάσουμε εξαιρετικές και αποτελεσματικές ιστοσελίδες, ειδικά αν σχεδιάζετε ένα blog ή ένα site ειδήσεων. Ένα δεύτερο μέρος αυτής της ιδέας είναι ότι το δίκτυο πρέπει να είναι ευέλικτο και ευαίσθητο. Αυτό το πρόσθετο σάς επιτρέπει να δημιουργείτε πολλές στήλες με (και χωρίς) απόκριση.
ArcText.js
Μόλις πριν από μερικά χρόνια, αν θέλετε να έχετε μερικές πολύ ωραίες γραμματοσειρές και τυπογραφικά εφέ στον ιστότοπό σας, θα έπρεπε να ανοίξετε το επιθυμητό πρόγραμμα σχεδίασης και να δημιουργήσετε ένα γραφικό με ό, τι θέλατε σε αυτό. Ήταν μια τεχνική ok έως ότου οι άνθρωποι συνειδητοποίησαν ότι δεν ήταν το πιο ευέλικτο, ούτε και το φαγητό με τη βελτιστοποίηση μηχανών αναζήτησης. Με την πρόοδο και την τεχνολογία, όμως, έχουμε τη δυνατότητα να χρησιμοποιήσουμε διακοσμητικές γραμματοσειρές στο διαδίκτυο. Όχι μόνο αυτό, αλλά με αυτό το plug in, είμαστε σε θέση να προσθέσουμε κάποιο στυλ σε αυτούς που διαφορετικά δεν θα ήταν διαθέσιμα εκτός του Photoshop.
Fancy κινήσεις
Μια κοινή τάση στο σύγχρονο webdesign είναι η δυνατότητα να κάνουν τα πράγματα να κινούνται. Είναι σχεδόν αδύνατο να επισκεφτείτε έναν ιστότοπο και να δείτε μάρτυρες στατικών εικόνων - σχεδόν όλοι χρησιμοποιούν ένα ρυθμιστικό εικόνας με κάποια μορφή ή μόδα. Πολλά από αυτά τα ρυθμιστικά είναι αυτόματα και αλλάζουν τις εικόνες που δίνουν ένα συγκεκριμένο χρονικό πλαίσιο. Δεν υπάρχει τίποτα κακό με αυτό, αλλά πώς μπορείτε να πάρετε μια τέτοια ιδέα και να το καταστήσετε μεγαλύτερο για την εμπειρία του χρήστη; Αυτό το plugin Fancy Movies φαίνεται να το έχει καταλάβει αφήνοντας τους θεατές να ελέγχουν τη διαφάνεια, όχι μόνο κάνοντας κλικ στο επόμενο βέλος αλλά πλησιάζοντας άνετα τα πλήκτρα βέλους στα πληκτρολόγιά τους.
FitText
Η τυπογραφία στο σχεδιασμό είναι εξαιρετικά σημαντική. Οι σχεδιαστές ιστοσελίδων χρειάζονται τη δυνατότητα να χρησιμοποιούν οποιεσδήποτε γραμματοσειρές θέλουν και στη συνέχεια να τις ενώσουν με οποιονδήποτε τρόπο επιθυμούν. Μέσα από τα πράγματα όπως το Cufon και το CSS, αυτό είναι δυνατό, αλλά με μεγάλη σημασία πρόσφατα είναι η ανταπόκριση ενός δικτυακού τόπου. Εάν το σχέδιό σας δεν μπορεί να είναι ευέλικτο, είναι σχεδόν άχρηστο και μία από τις κύριες μερίδες ιστοτόπων που πρέπει να ανταποκρίνεται είναι η τυπογραφία. Το FitText επιτρέπει στις κεφαλίδες και το κείμενο πλήρωσης να είναι τέλεια, ανεξάρτητα από το μέγεθος του παραθύρου ή τη συσκευή που χρησιμοποιείται για τον έλεγχο της ιστοσελίδας σας.
Τοποθετήστε το δείκτη του ποντικιού
Ο τρόπος με τον οποίο ορισμένα στοιχεία αντιδρούν στις αλληλεπιδράσεις ενός ιστότοπου μπορεί να επηρεάσει (αρνητικά και θετικά) τον τρόπο με τον οποίο αντιλαμβάνονται οι θεατές. Μια απλή αλληλεπίδραση που αναπαράγεται πάντα είναι το χαρακτηριστικό του hover. Όταν βάζετε το ποντίκι πάνω από μια εικόνα ή ακόμα και έναν σύνδεσμο, είναι σχεδόν κοινό για αυτό το στοιχείο να κάνει κάτι. και όσο καλύτερη είναι η αντίδραση, τόσο καλύτερα θα απαντήσει ο κόσμος. Αυτό το πρόσθετο είναι για εικόνες που όταν μετακινούνται, μεγεθύνουν ή απομακρύνονται και παρέχουν επιπλέον πληροφορίες. Εάν χρησιμοποιηθεί σωστά αυτό μπορεί να είναι εξαιρετικά αποτελεσματικό. Για να μην αναφέρουμε, ο σχεδιασμός θα τακτοποιήσει καλά.
jRumble
Αυτό που οι σχεδιαστές πρέπει να συνειδητοποιήσουν είναι, όταν φτιάχνουμε ιστοσελίδες, έχουμε πολλή δύναμη. Μπορούμε να κάνουμε τους ανθρώπους να δουν τι θέλουμε να δουν και να μην δουν τα πράγματα που δεν θέλουμε να δουν. Οι βασικές αρχές σχεδιασμού, όπως η ισορροπία και η ιεραρχία, μπορούν να βοηθήσουν να επηρεάσουν την εστίαση και το ενδιαφέρον των θεατών. Υπάρχουν λεπτές μέθοδοι για να γίνει αυτό. Το jRumble είναι πιο παθιασμένο για να πάρει κάποιον για να δει και να παρατηρήσει τα πράγματα με πιο σθεναρό, καταφανή τρόπο. Είναι ένα διασκεδαστικό plugin και όταν χρησιμοποιείται με φειδώ μπορεί να είναι αποτελεσματικό για οποιοδήποτε σκοπό. Απλά θυμηθείτε να μην το πετύχετε.
jQSlickWrap
Η δημιουργία σχεδίων για το κείμενό σας μπορεί να είναι ένα δύσκολο πράγμα. Δεν πρόκειται μόνο για τις γραμματοσειρές που επιλέγετε, αλλά και για τον τρόπο με τον οποίο το παρουσιάζετε και το καθιστά αποτελεσματικό. Αν σχεδιάζετε έναν ιστότοπο που σχεδιάζει να έχει μεγάλα τεμάχια κειμένου, η τοποθέτησή του σε εσφαλμένο τρόπο μπορεί να αναγκάσει τους αναγνώστες σας να μην ενδιαφέρονται εντελώς για ό, τι λέτε. Πολλοί σχεδιαστές έχουν προβλήματα όταν προσπαθούν να κάνουν τις εικόνες και το κείμενο αλληλεπιδρούν καλά μεταξύ τους. Εάν δεν είστε εξαιρετικά σε μπλοκ κειμένου ή διαπιστώνετε ότι θέλετε το κείμενο και οι εικόνες σας να αλληλεπιδρούν περισσότερο, αυτό μπορεί να είναι το plugin για εσάς. Δεν υπάρχουν πλέον εφημερίδες, αλλά πιο δημιουργική ελευθερία.
jQuery Offset Animation
Όπως αναφέρθηκε προηγουμένως, οι στατικοί ιστότοποι δεν είναι τόσο συνηθισμένοι σήμερα όσο μπορεί να έχουν τα προηγούμενα χρόνια. Πολλά πράγματα έχουν συμβάλει στη δημιουργία δυναμικών ιστότοπων που κινούνται και αλληλεπιδρούν καλά με τους θεατές τους. Ένα πράγμα που είχε προσθέσει η jQuery σε αυτή τη συζήτηση είναι η δυνατότητα δημιουργίας μεγάλων κινούμενων εικόνων και μεταβάσεων από στοιχείο σε στοιχείο. Αυτό το πρόσθετο δημιουργεί μια ομαλή μετάβαση ή μετατόπιση για να μετακινηθεί από το ένα στοιχείο στο επόμενο. Κάνει για μια πολύ ευχάριστη ιστοσελίδα.
Scroll-O-Rama
Με ένα όνομα όπως το "Scroll-O-Rama", μπορεί να περάσετε αυτό το plugin, αλλά θα σας συμβούλευα να μην το κάνετε. Όπως διασκεδαστικό και μεγάλο όπως αυτό το plugin είναι, πιστεύω ότι μπορεί να γίνει δημοφιλή σας στο μοντέρνο εξειδικευμένες ιστοσελίδες μιας σελίδας. Καθώς μετακινηθείτε σε ιστοσελίδες μίας σελίδας, περιμένετε κάτι να συμβεί. Αυτό το plugin προσφέρεται λίγο για να μπορείτε να χορέψετε με τίτλους και κείμενο, καθώς περνάτε από αυτό. Είναι ένα άλλο plugin που χρησιμοποιείται κυρίως για διακοσμητικούς σκοπούς, αλλά αν μπορείτε να το πασπαλίζετε για τον ιστότοπό σας και να το χρησιμοποιήσετε στα σωστά σημεία, θα μπορούσατε να παίξετε αυτό το plugin για μια δύναμη.
jQuery Shadow Plugin
Για να προσθέσετε μερικές φορές ένα βάθος σε εικόνες ή στοιχεία, οι σχεδιαστές προτιμούν να χρησιμοποιούν σκιά σταγόνες. Υπάρχουν δύο δημοφιλείς τρόποι με τους οποίους οι σχεδιαστές δημιουργούν σκιές και αυτό είναι μέσω του CSS ή δημιουργώντας τη σκιά στο σχεδιαστικό τους πρόγραμμα και τυπικά το αποθηκεύουν ως κάποιο διαφανές αρχείο. Τις περισσότερες φορές αυτό λειτουργεί και μερικές φορές μπορεί να υπάρχουν κάποια προβλήματα, αλλά αυτό που είναι πολύ ωραίο για αυτό το plugin είναι ότι σας επιτρέπει να προσθέσετε διαφορετικούς τύπους σκιάς σε ο, τιδήποτε στοιχεία θέλετε χωρίς να χρειάζεται να τα σχεδιάσετε και λειτουργεί cross-browser.
Slitslide
Οι καλές μεταβάσεις σε ιστότοπους κάνουν μια διασκεδαστική και συναρπαστική εμπειρία. Σας έχουμε ήδη δώσει μια μεγάλη προσθήκη για μεταβάσεις στοιχείων σε στοιχεία, αλλά αυτό το plugin είναι εξαιρετικό για μεταβάσεις σελίδων σε σελίδες. Με αυτό το plugin Slitslide, η σελίδα χωρίζει, διαφάνει και εισάγει νέες σελίδες ακριβώς πίσω από αυτό. Αυτό είναι ένα εξαιρετικά δυναμικό εργαλείο που προσθέτει έναν ενθουσιασμό και γεύση σε ιστότοπους που μπορεί να χρειάζονται αυτό το επιπλέον επίπεδο.
Φόρτωσε
Τα εργαλεία είναι ένα στοιχείο που χρησιμοποιείται για πολλούς λόγους. για να επιστήσετε την προσοχή, να προσθέσετε πληροφορίες ή ο, τιδήποτε μπορείτε να χωρέσετε σε αυτό. Λειτουργεί σαν ένα φαινόμενο αιωρισμού, όπου εάν χρησιμοποιείται σωστά μπορεί να είναι εξαιρετικά αποτελεσματικό. Υπάρχει ένας τόνος jQuery plugins που εξυπηρετούν την ανάπτυξη και τη χρήση εργαλείων. Το Tipped είναι ένα plugin που λειτουργεί και διαθέτει πολλά χαρακτηριστικά, τα περισσότερα από τα οποία είναι προσαρμόσιμα με HTML5 και CSS, γεγονός που καθιστά εύκολη και ομαλή κατασκευή.
Σωληνοειδής
Μπορούμε όλοι να συμφωνήσουμε ότι ένα φόντο που αναβοσβήνει δεν είναι όπου η δημιουργικότητα βρίσκεται. Ωστόσο, υπάρχουν και άλλα πράγματα που μπορούν να προστεθούν στο παρασκήνιο σας για να δώσετε στον ιστοχώρο σας λίγο σπινθήρα. Μπορεί να είστε απλώς σχεδιασμός και θέλετε ένα σωστό μοτίβο, αλλά ίσως θέλετε κάτι πιο δυναμικό. Το Tubular είναι ένα plugin το οποίο σας επιτρέπει να χρησιμοποιείτε βίντεο του YouTube για να χρησιμεύσετε ως φόντο. Σκεφτείτε τις διασκεδαστικές και δημιουργικές δυνατότητες που θα μπορούσατε να επιτύχετε με αυτό.
jmpress
jQuery Knob
3d Thumbnail Hover
Έχουμε ήδη μιλήσει για την επίδραση της επίδρασης εικόνας και πώς μπορεί να είναι πολύ αποτελεσματική για ιστοσελίδες. Λοιπόν, τι γίνεται αν θέλετε λίγο περισσότερο pizzazz για τις εικόνες σας; Αυτό το plugin σας δίνει ένα φαινόμενο που αιχμαλωτίζει την εικόνα που αποκαλύπτει πληροφορίες με ένα κομμάτι 3D περιστροφής.
blur.js
Ο καλός σχεδιασμός μπορεί πραγματικά να είναι η διαφορά μεταξύ ενός καλού και ενός κακού δικτυακού τόπου. Πολλές φορές, η απόφαση δεν αφορά το σχέδιο ως σύνολο αλλά τις μικρές λεπτομέρειες. γι 'αυτό χρησιμοποιούμε εργαλεία και μεγάλα κείμενα. Αυτό το πρόσθετο προσθέτει περισσότερες λεπτομέρειες στον ιστότοπό σας, αν το επιθυμείτε. Αυτό το plugin δημιουργεί psuedo-διαφανή θολή στοιχεία πάνω από άλλα στοιχεία. Αυτό είναι ένα διακοσμητικό plugin, αλλά μπορεί να χρησιμοποιηθεί προς όφελος.
συμπέρασμα
Υπάρχουν πολλοί τρόποι για να βελτιώσετε τον σχεδιασμό του ιστότοπού σας για να το κάνετε φρέσκο και ελκυστικό για τους επισκέπτες σας. Λάβετε υπόψη ότι θέλετε να κάνετε κάτι που δεν είναι μόνο δημιουργικό, αλλά δημιουργικό και αποτελεσματικό. Τα εργαλεία που έχουμε τώρα είναι εξαιρετικά και τι είναι ακόμα καλύτερο είναι η τεχνολογία είναι ακόμα αυξανόμενη και καλύτερα πράγματα για τη δημιουργία ιστοσελίδων μας περιμένουν.