Aujourd'hui, nous allons voir comment ajouter la navigation au clavier à un site Web à l'aide de quelques lignes simples de JavaScript. Nous allons d’abord créer un thème de site simple dans Photoshop, puis le transformer en un site Web opérationnel utilisant des fonctions de clavier pour changer de page.
Voici une capture d'écran de ce que nous allons construire. Cliquez sur l'image pour voir l'exemple en direct:
Photoshop Work
Pour commencer, ouvrez Photoshop et créez un nouveau document de 800 x 600 pixels à 72 dpi.
Gradient Radial
Ensuite, saisissez l'outil de dégradé et étendez un dégradé radial sur l'arrière-plan. Votre couleur de premier plan doit être définie sur # 343636 et votre couleur d'arrière-plan sur # 121414. Assurez-vous que la couleur plus claire ne se retrouve pas dans les bords du document ou vous obtiendrez un bord net lorsque nous l'insérerons dans notre CSS.
Type
Maintenant, prenez l'outil texte et choisissez une police. J'ai choisi Helvetica Neue. Tapez du texte pour votre page d'accueil comme ci-dessus, puis copiez ce calque et modifiez le type pour le lire. À propos de moi. Répétez cette étape pour? Mon portefeuille ,? et? Contactez-moi.?
Ombre intérieure
Maintenant, placez une ombre interne sur tous les calques de texte que vous venez de créer en utilisant les paramètres ci-dessus. Vous pouvez appliquer l'effet à un calque, puis cliquer avec le bouton droit de la souris et aller à "copier le style du calque". puis faites un clic droit sur les autres calques et collez le style de calque.
Touche de navigation
Créez maintenant une clé pour indiquer aux utilisateurs comment utiliser la fonction de navigation du clavier. En utilisant la même police, tapez le texte en bleu et appliquez une lueur extérieure pour lui donner un bel effet rayonnant. Regardez les captures d'écran ci-dessus pour les paramètres spécifiques. Assurez-vous de laisser un peu d'espace entre les parenthèses pour les flèches à l'étape suivante.
Flèches
Saisissez l'outil Forme personnalisée (situé dans le menu déroulant de l'outil Rectangle) et sélectionnez une flèche comme forme. Dessinez quatre flèches (haut, bas, gauche et droite) et appliquez la même couleur et la même lueur externe que le type. Maintenant, placez les flèches dans les parenthèses de l'étape précédente.
Enregistrez les quatre versions
Maintenant, allez à? Enregistrer pour le Web et les périphériques? dans le menu Fichier. Enregistrez chaque version (Accueil, À propos, etc.) au format jpg dans un dossier nommé? Images.? Maintenant, nous en avons tous terminé avec Photoshop, fermez-la et passez à votre éditeur de texte ou votre suite de développement Web préférés. J'utilise la fantastique application Mac Espresso.
Le HTML
Créez un fichier index.html dans le même répertoire que le dossier images créé précédemment. Ajoutez une structure HTML de base qui relie à un fichier CSS et JavaScript.
Ajout d'un menu de navigation
Nous ne voulons pas que notre site fonctionne uniquement sur la navigation au clavier, nous allons donc ajouter un menu de navigation visuel comme méthode principale de déplacement. Pour ce faire, nous allons créer un? Nav? div à l'intérieur d'un? conteneur? div dans la partie body de notre code HTML. Dans la division de navigation, placez une liste non ordonnée de liens comme ci-dessous.
Créer les autres pages
Comme je l'ai déjà dit, nous voulons que le code HTML de ce tutoriel reste simple afin que nous nous arrêtions là pour la page d'accueil. Dupliquez ce code dans trois autres fichiers HTML: about.html, portfolio.html et contact.html. Dans chacun de ces fichiers, modifiez uniquement le nom du conteneur div. Dans le fichier about, remplacez-le par "aboutContainer". Suivre avec? PortfolioContainer? et? contactContainer? dans les deux autres.
Ajout du CSS
Vous devriez maintenant avoir quatre pages Web essentiellement vierges contenant uniquement une liste de liens non stylés. Créez un fichier style.css et démarrez-le avec le style de base suivant.
Ici, nous avons essentiellement défini une couleur d’arrière-plan (correspondant à la couleur d’arrière-plan de notre PSD) et défini la famille de polices de manière à ce qu’elle soit une belle et fine Helvetica. Margin auto s'assurera que notre contenu reste centré.
Ajout des images d'arrière-plan
Voici où tout commence à bien paraître. Attribuez à chacun des quatre divs de conteneur les quatre fonds que nous avons configurés dans Photoshop.
À ce stade, vos pages devraient prendre forme et ressembler à l’image ci-dessous:
Styliser le menu de navigation
Un dernier morceau de CSS termine le menu de navigation.
Comme vous pouvez le constater, j'ai appliqué des marges de remplissage à la division de navigation principale et supprimé toute décoration de texte du texte du lien. Ensuite, j'ai défini la couleur du texte sur blanc et ajouté un effet de survol correspondant à la couleur du texte bleu dans la touche de navigation? au bas de la page. Enfin, j'ai ajouté quelques lignes pour cibler spécifiquement les éléments de la liste et les répartir un peu.
Si vous avez suivi, votre page doit correspondre à la capture d'écran suivante:
JavaScript
Vous devriez maintenant avoir un site de base de quatre pages qui fonctionne! Les liens dans le menu de navigation devraient vous permettre de basculer d'une page à l'autre relativement facilement.Nous allons maintenant entrer dans le coeur du projet: ajouter la navigation au clavier. C'est en fait un processus assez simple et ne devrait vous prendre que quelques minutes au plus. Notre JavaScript sera inspiré par ce tutoriel mais pris dans une direction différente.
Mise en place du script
Créez un fichier script.js et insérez le code suivant:
Comme vous pouvez le constater, ce code est assez bref et très basique. Pour l’essentiel, nous demandons à JavaScript d’exécuter la fonction? KeyCheck? lorsque l'utilisateur appuie sur une touche. La fonction KeyCheck est alors liée à la variable? KeyID.? Ceci surveillera ce qu'un utilisateur appuie et définira la valeur sur KeyID. Nous allons maintenant ajouter une ligne de code lui indiquant quoi faire si le KeyID correspond à un certain critère.
Ce code est un peu déroutant. Comme indiqué sur notre touche de navigation, nous voulons programmer les numéros 1-4 et les touches fléchées pour accéder à des pages spécifiques. Ici, nous avons configuré un cas qui dit: si le code? 49? est renvoyé, passez à la page index.html (via window.location). Vous avez probablement remarqué que le code 49 n'est pas une manière intuitive de faire référence à la pression du chiffre un. Pour découvrir les codes de clé d’une clé donnée, allez à cette page et faites défiler jusqu’à la section 3.3. Nous voyons que les chiffres 0 à 9 sont désignés par les codes 48 à 57. Faites défiler davantage et voyez que les codes des touches fléchées sont les suivants: 37 (flèche gauche), 38 (flèche haut), 39 (flèche droite), 40 (flèche basse). En utilisant cet ensemble de codes comme guide, nous pouvons programmer chaque pression de touche pour correspondre à une page.
Ailette!
C'est tout ce qu'on peut en dire! Vous devriez maintenant pouvoir naviguer sur votre site en utilisant uniquement les touches fléchées et numériques, comme dans l'exemple d'ouverture. Utilisez les commentaires ci-dessous pour nous indiquer si vous pensez que c'est une bonne idée et si vous ajouterez ou non la navigation au clavier à votre site. Il y a certainement plus d'une façon de s'y prendre, alors communiquez-nous également vos idées sur une autre méthode permettant de mettre en œuvre les raccourcis clavier.