Share
Javascript peut ajouter de nombreux effets spéciaux pouvant réellement améliorer l'expérience de l'utilisateur. Voici 10 techniques Javascript simples et intelligentes qui ajoutent une dose supplémentaire de convivialité à une page Web..
Javascript est généralement utilisé comme langage esthétique dans le développement Web. Cela signifie que les développeurs Web devraient presque toujours utiliser Javascript pour une seule chose: Améliorer l'expérience du visiteur. Il existe de nombreux moyens astucieux et utiles pour améliorer un site du point de vue de l'interface utilisateur. Un développeur peut trouver presque n'importe quel extrait de code Javascript pour réaliser ce qu'il ou elle souhaite accomplir..
Prévisualisation de l'image par miusam-ck.
Javascript est vraiment une langue puissante et facile à apprendre. Il peut être utilisé pour exécuter des fonctions simples et esthétiques, telles que le basculement d'un élément. Il peut être utilisé pour alimenter un client de messagerie dynamique et même pour envoyer des données instantanément. Javascript peut être aussi simple ou avancé que vous le souhaitez.
Un excellent endroit pour trouver des techniques Javascript pouvant améliorer les fonctionnalités de votre site est de parcourir les frameworks Javascript, leurs plugins et leur documentation. Voici quelques frameworks qui ont beaucoup de ressources, plugins et communautés derrière eux:
Les frameworks sont une bénédiction pour tout développeur ou concepteur qui souhaite ajouter rapidement des effets Javascript à leurs mises en page, sans avoir à créer de code brut. La plupart des techniques que nous utilisons ci-dessous fonctionnent sur des frameworks Javascript tels que JQuery ou MooTools..
Il est important de noter que beaucoup de ces fonctionnalités ne sont pas grandes et odieuses, mais plutôt petites et subtiles. Trop souvent, les développeurs s'emballent lorsqu'il s'agit d'ajouter du Javascript. Celles-ci sont petites mais très utile techniques qui peuvent être utilisées par presque tous les développeurs. Vous remarquerez également que la plupart de ces fonctionnalités traitent de la dissimulation habile et de la présentation d'informations importantes de manière non traditionnelle..
Le nuage de sous-tags jQuery hover est un excellent exemple d'un simple morceau de Javascript qui ajoute vraiment une touche subtile et agréable aux tags de nuage. Lorsque l'utilisateur survole une balise spécifique et que des sous-balises lui sont associées, une boîte de dialogue apparaît et affiche les sous-balises. Simple mais efficace.
Opacity Change est un petit tutoriel sur l'utilisation de Scriptaculous pour modifier l'opacité d'un élément..
Les changements d'opacité sont parfaits pour de nombreuses raisons: afficher le contenu survolé, afficher le contenu sur lequel l'utilisateur a cliqué et de nombreuses autres fonctions utiles.
Pouvoir recadrer les photos après les avoir téléchargées est une fonctionnalité que davantage d'applications Web pourraient utiliser. C'est pourquoi le téléchargement et le recadrage des images jQuery est une technique Javascript sous-utilisée. Le rognage des images est une fonction indispensable pour télécharger des images et de nombreuses applications Web pourraient tirer avantage de l'ajout de cette fonctionnalité utile..
Honnêtement, je pense que presque toutes les images téléchargées pourraient utiliser une fonction de rognage de base. Toutefois, le recadrage d’images n’est pas la fonction Javascript la plus facile à ajouter à un formulaire. C'est un processus assez complexe, utilisant des bibliothèques d'images et Javascript. L'utilisation de ce script basé sur le framework jQuery peut ajouter beaucoup à l'expérience de l'utilisateur sans beaucoup de code..
À mesure que les pirates deviennent de plus en plus intelligents et de plus en plus nombreux, il est de plus en plus important pour les utilisateurs du site de choisir des mots de passe forts et faciles à deviner contenant une combinaison de lettres (majuscules et minuscules), de chiffres et de caractères spéciaux. Cependant, cette tâche est plus facile à dire qu'à faire. Les utilisateurs ne lisent généralement pas les instructions s'ils peuvent l'aider.
Montrer visuellement la force du mot de passe dans les formulaires d’inscription est un excellent moyen d’encourager les utilisateurs à rendre les mots de passe plus difficiles. Bien que cela devienne de plus en plus courant, cette technique simple n’est pas utilisée autant qu’elle le devrait..
Le compteur de force de mot de passe fonctionne sur prototype / scriptaculous et est un petit script très pratique qui montre la force du mot de passe avec un compteur de couleur en temps réel. De plus en plus de sites doivent implémenter ce type de script "de sécurité" pour aider les utilisateurs à comprendre les dangers liés à la saisie de mots de passe faibles.
Magic Zoom est un script très utile pour les sites de commerce électronique, ainsi que pour les autres sites contenant des images détaillées. Au lieu de laisser l’utilisateur faire un clic supplémentaire sur une image beaucoup plus grande et utiliser davantage de bande passante, Magic Zoom vous permet essentiellement de regarder à travers une loupe sur chaque image..
Magic Zoom est un script payant, mais vaut bien 47 dollars si vous avez une boutique de commerce électronique ou tout autre site qui a des photographies très détaillées. Vous pouvez télécharger la version d'essai ci-dessous.
Chaque formulaire sur Internet devrait avoir cette fonctionnalité. Cela pourrait bien être le perfectionniste en moi, mais le fait de disposer de plusieurs formulaires de saisie permettant de passer automatiquement à la saisie suivante semble automatiquement banal. C'est un tel soulagement lorsque vous remplissez des éléments tels que les numéros de sécurité sociale lorsque l'entrée passe automatiquement à l'entrée suivante..
Le script jQuery Autotab est explicite et fait ce que son nom implique: ajoute des autotabs aux formulaires avec jQuery..
Parfois, ce sont les petites choses en développement qui peuvent vraiment faire la différence.
Alors que nous n'aimons généralement pas nous plaindre chez NETTUTS, comment pouvons-nous parler de javascripts intelligents et utiles sans ouvrir le formidable tutoriel de Connor Zwick sur la création d'un formulaire de connexion utile?
Le formulaire de connexion Javascript est une combinaison élégante de jQuery et d’une belle mise en page Photoshop qui permet d’afficher un formulaire de connexion sans que la boîte occupe une grande partie de la page. Digg est un autre excellent exemple de site utilisant Javascript pour afficher et masquer le formulaire de connexion..
Les formulaires sont parmi les parties les plus difficiles de la conception Web. Créez un formulaire trop longtemps et vous pourriez effrayer un utilisateur ou un client potentiel. Si la conception d'un formulaire n'est pas attrayante, cela pourrait également effrayer un utilisateur potentiel.. Tout moyen de rendre nos formulaires Web plus attrayants à l’œil produira un taux de conversion supérieur..
Le script de mise en évidence de contexte Web est un excellent attribut à ajouter à un formulaire d'inscription. Il est surprenant que plus de formulaires n'offrent pas cette fonctionnalité. Être capable de voir rapidement les progrès sur un formulaire peut sensiblement améliorer l'expérience utilisateur.
Le script du panneau supérieur coulissant ressemble beaucoup au formulaire de connexion Javascript incroyable. Cacher / Afficher des informations importantes est la clé de superbes conceptions utilisables. Chaque fois que nous pouvons utiliser Javascript pour nous aider à garder des informations inutiles soigneusement rangées, nous devrions nous efforcer de le faire..
Les boutons et liens de promotion du site peuvent rapidement encombrer la mise en page d'un site ou d'un blog. Il semble que si vous souhaitez promouvoir les articles de votre blog et tout autre contenu sur des sites tels que Digg et Delicious, vous devez ajouter une longue liste de boutons à votre modèle afin de ne pas exclure les favoris du bookmarking social ou des sites d'actualités..
L’histoire sociale est pratique car elle exécute un test pour voir où l’utilisateur a été récemment, et charge des images sur ces sites, et seulement ces sites. Essentiellement, il ne fait que montrer au visiteur les boutons qu'il souhaite voir..
Comment SocialHistory.js sait-il? En utilisant une fuite d'informations mignonne introduite par CSS. La couleur du navigateur des liens visités est différente de celle des liens non visités. Tout ce que vous avez à faire est de charger une multitude d'URL pour les sites de bookmarking social les plus populaires dans un iframe et de voir lesquels de ces liens sont violets et lesquels sont bleus..
Glen Stansberry est un développeur et blogueur Web qui a eu beaucoup de difficultés à admettre avec CSS. Vous pouvez lire plus de conseils sur le développement Web sur son blog Web Jackalope.
Accentsconagua