Bouton Retour dans le code source. Créer un bouton "retour"

Dans cet article, nous verrons comment créer un bouton « Retour » à n'importe quel endroit dont vous avez besoin. Je pense que d'après le nom du bouton, ce qui se passera lorsque vous cliquerez dessus est déjà clair. Un tel bouton peut être inséré à la fois dans une catégorie et dans le matériau lui-même. Tout se fait assez simplement.

Il existe plusieurs options pour ajouter un bouton, mais personnellement, je n'ai utilisé qu'une seule méthode. À savoir la troisième option sur les trois que j’ai proposées. Un peu plus loin, je vais vous dire pourquoi.

Quelles options avons-nous:

Modifiez les fichiers de modèle Jooml.

Collez simplement le code du bouton au bon endroit.

Créez un module "Code HTML", insérez-y le code du bouton, puis affichez ce module au bon endroit.

L'avantage de la troisième option est que si vous devez modifier le texte d'un bouton ou modifier/ajouter une classe de style, il vous suffira de réparer le module lui-même, et non de réparer le bouton à tous les endroits où il se trouve.

Ainsi, sur un de mes sites j'ai utilisé la troisième option :

Le module « Code HTML » a été créé et le code du bouton y a été inséré à l'aide de l'extension « Sourcerer », qui permet d'ajouter n'importe quel code au matériel.

Mon code de bouton de travail :

revenir

Le texte est légèrement décoré d'une flèche utilisant des composants de Bootstrap 3, et le bouton lui-même est stylisé via CSS.

Dans ce didacticiel vidéo, nous examinerons 3 options pour créer un bouton RETOUR pour vous déplacer sur le site vers les pages précédentes dans l'ordre inverse. Le bouton RETOUR est également nécessaire lorsque des liens de plusieurs pages du site (A1, A2...An) mènent à la même page (B), et à partir de cette page (B) il faut revenir à la page précédente (An) du site à partir duquel vous êtes arrivé à la page (B).

Regardez le nouveau didacticiel vidéo :

Code du bouton « revenir en arrière » pour le placement sur le site :

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Dos" / > < / a >

Bouton Retour. Pourquoi est-ce?

Dans ce tutoriel vidéo nous allons créer un bouton pour revenir aux pages précédentes du site dans Programme Adobe Muse. Ce bouton reviendra par le même chemin que nous avons suivi sur le site.

Bouton Retour. Projet de cours.

Afin de réaliser cette leçon, j'ai préparé un petit projet, ou plutôt on ne peut pas l'appeler petit, ici il se compose de pages de niveau supérieur, de pages de premier niveau, et aussi pour la page « page-2 » il y a plusieurs autres pages enfants pages. Et pour plus de variété, j'ai créé deux modèles. J'ai appliqué le premier modèle aux trois premières pages. Et j'ai appliqué le deuxième modèle à tout le monde.

Commençons. Nous allons créer un bouton Retour dans le « Modèle C » afin qu'il apparaisse immédiatement sur les pages auxquelles ce modèle est appliqué. Je vais éditer ce modèle, et c'est ici que nous insérerons notre bouton de retour.

Bouton Retour. 3 façons.

Nous pouvons insérer un bouton « Retour » de trois manières. J'ai un fichier spécial que j'ai déjà préparé dans le bloc-notes. Et il existe trois manières, trois codes, à l'aide desquels nous pouvons insérer un tel bouton sur le site.

Bouton Retour. Méthode n°1 - texte simple.

La première option est juste du texte. Le bouton sera sous forme de texte. Je copie ce code :

< input type = "button" onclick = "history.back();" value = "Dos" / >

Et je le colle dans le modèle. Cela ressemble à ceci. Nous avons juste du texte et il est surligné en blanc. Je vais le poster ici. Afin de comprendre comment tout cela fonctionne, nous appuyons sur les touches ctrl+alt+E pour afficher l'intégralité du site avec toutes ses pages dans le navigateur. Voici à quoi ressemble la page principale du site. On peut surfer sur le menu, sélectionner des pages. Ici, nous avons des menus déroulants. Et, par exemple, depuis la page principale, nous sommes immédiatement passés à la page « page-3 ». Et ici, nous avons un bouton de retour.

Ce bouton est actif, mais lorsque vous passez la souris dessus, une main avec un doigt n'apparaît pas. Nous pouvons cliquer en toute sécurité sur ce bouton et nous serons redirigés vers la page principale. De la même manière, on peut cliquer sur la page « page-3 », puis aller à la page « page-4 » et cliquer sur le bouton « Retour », cela nous amènera à la page « page-3 », et si on clique sur le bouton « Retour » à nouveau", puis cela nous amène à la page principale. C'est ainsi que fonctionne le bouton de retour.

Mais il est difficile d'appeler ce bouton un bouton, puisqu'il s'agit précisément d'une telle inscription, surlignée en blanc. Si nous voulons l'éditer dans Muse, nous pouvons uniquement changer la taille du texte, par exemple, je mettrai ici "36" pour que vous puissiez mieux le voir. À mon avis, on ne peut pas changer la couleur du texte. Maintenant je vais essayer de mettre du rouge. J'ai choisi le rouge, mais cela n'a en rien affecté notre lettrage, nous ne pouvons donc pas changer la couleur. Nous pouvons changer la taille. Essayons de le mettre en gras et de le centrer. Tout ce que nous pouvons faire, c'est éditer comme ça. Si nous voulons remplir ce bloc, par exemple, le rendre orange, alors notre texte sera toujours surligné en blanc et, en principe, il n'aura pas l'air très joli.

Bouton Retour. Méthode n°2 – Texte du lien.

< a href = "#" onclick = "history.back();return false;" >Dos< / a >

Maintenant, nous allons le copier. J'appuie sur ctrl+C et je vais au programme, puis j'appuie sur ctrl+V pour le coller sur le site. Cela ressemble à ce lien. Notre lien est bleu. Maintenant, elle n'est plus très visible. Créons également une 36ème police pour l'agrandir et la voir de plus près. Ici, nous avons juste un lien bleu. Si nous appuyons maintenant sur ctrl+alt+E, nous verrons que lorsque nous le visualisons, il ressemble à ce lien bleu normal. Reprenons-le encore quelques fois pour voir, cliquez une fois, deux fois, revenez. Ce lien a la même apparence qu’un lien classique.

Nous pouvons lui appliquer des styles de lien dans Adobe Muse. Recherchez les styles de lien dans la section « Hyperliens », sélectionnez « Modifier les styles de lien ». J'ai déjà une version préparée. Maintenant, j'ai déjà une version préparée. Vous pouvez voir qu’un style lui est appliqué. À l'état standard et au survol du curseur de la souris, la couleur est bleue et à l'état actif - rouge. Vous l'avez vu en regardant. Le deuxième style que j’ai créé était simplement composé uniquement d’États noirs. Nous pouvons appliquer ce style à ce bouton. Par exemple, je vais sélectionner et appliquer ce style personnalisé à ce bouton. Et vous verrez que notre inscription est devenue noire.

Ici on peut aussi faire un remplissage, par exemple, je le ferai avec la même couleur orange. Ici, vous pouvez déjà modifier le texte. Mettons-le au milieu et mettons-le en gras. Et, en principe, cette option ressemble déjà davantage à un bouton. Il n'y a plus de surbrillance blanche et, en principe, cette option est déjà tout à fait appropriée. Pendant la navigation (ctrl+alt+E), allons à la page "page-3", à la page "page-4" et cliquons à nouveau. Ce bouton fonctionne exactement de la même manière que le premier, sauf qu'il offre plus d'options pour modifier le design.

Bouton Retour. Méthode n°3 – bouton – image.

Et la troisième option sur la façon dont nous pouvons placer un bouton est que le bouton sera une image. Je copie ce code :

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Image" / > < / a >

Je vais sur Muse et clique sur « Insérer ». Et cette troisième option est une image. Pour que nous ayons une sorte d'image ici, nous devons télécharger un fichier image sur Internet ou le créer nous-mêmes. Nous ajoutons l'image via la fonction "Fichier" du programme, sélectionnez "Ajouter des fichiers à transférer". J'ai déjà téléchargé quelques photos sur Internet. Nous pouvons en choisir un. Sélectionnons celui-ci avec le bouton retour. Maintenant, si nous regardons dans la section « Ressources », nous avons ajouté un bouton « back2.png » - « Transmettre ». Nous avons ce fichier à transférer.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Dos" / > < / a >

Voilà, cliquez sur "OK". Nous ne verrons aucun changement dans Muse lui-même. Nous verrons tous les changements uniquement lors de la visualisation du site dans un navigateur. Appuyons à nouveau sur ctrl+alt+E pour afficher le site dans le navigateur et essayons de surfer sur nos pages.

Bouton Retour. Visualisez le résultat.

Allons à la page, par exemple, "page 2-1", maintenant allons à la page "page-2", allons maintenant à la page "page 3", puis à la page "page-4". Et maintenant, si nous appuyons sur le bouton retour, nous reviendrons séquentiellement dans l'ordre inverse pour page d'accueil site. Cliquez sur « Retour », passez à la page « page-3 », à la page « page-2 ». Et là, nous n'avons plus de bouton. Si nous le placions dans un modèle appliqué à la page « page-2 », nous aurions également un bouton « Retour » ici. Comme nous n'en avons pas, nous devons accéder à la page principale uniquement en cliquant sur le bouton "Accueil" dans le menu. Passons par exemple à la page « page 2-2-2 », puis à la page « page 2-2-1 », puis aux pages « page-3 » et « page-4 ». Et maintenant dans l'ordre inverse : page « page-3 », page « page 2-2-1 », page « page 2-2-2 » et vers la page principale.

Bien entendu, vous n’êtes pas obligé de placer ce bouton sur votre site Web, mais utilisez les flèches habituelles dans votre navigateur. Mais si vous souhaitez qu'un tel bouton soit sur votre site Web, vous pouvez le créer de ces manières... Et le lien vers l'article se trouvera sous cette vidéo. C'est tout. Dmitry Shapovalov était avec vous. Aimez cette vidéo, abonnez-vous à la chaîne, écrivez des commentaires ci-dessous, et je vous dis au revoir jusqu'aux prochaines leçons vidéo.

Parfois, sur les pages Web, il est nécessaire d'accéder temporairement à une autre page (appelons-la auxiliaire), puis de revenir en arrière et de continuer à travailler avec elle. Par exemple, il peut s'agir d'une page d'aide, d'une page d'inscription.

Dans ce cas, évidemment, l’adresse de retour peut être très différente. Comment mettre en œuvre une telle transition inversée sur un site internet ? Le HTML/CSS pur ne suffit pas ici ; vous devrez utiliser du javascript.

Le plus simple est par exemple d'utiliser cette ligne dans le script de la page auxiliaire :

La méthode history mémorise l'historique de navigation sur une page et, en fait, son utilisation est similaire à l'utilisation des boutons Suivant et Précédent du navigateur, seulement un peu plus fonctionnels. C'est le moyen le plus simple et le plus pratique, mais à une seule condition : si la nouvelle page (auxiliaire) n'est pas ouverte dans une nouvelle fenêtre. Sinon, la page auxiliaire s'ouvrira pour la première fois (plus précisément, ce sera la première session pour celle-ci, il n'y a pas encore eu de transitions dessus). Et cela signifie qu’en fait, il n’y a nulle part où revenir en arrière. Par conséquent, cette méthode ne peut pas être qualifiée d’universelle. Cela ne fonctionnera pas si l'utilisateur est obligé d'ouvrir la page dans un nouvel onglet ou si le navigateur le fait pour lui - conformément aux paramètres. Dans ce cas, l'attribut de lien target=”_self” n'aidera pas : il sera impossible de revenir en arrière depuis une page auxiliaire ouverte (à moins bien sûr de saisir manuellement l'URL de la page source dans la barre d'adresse du navigateur).

Une manière plus universelle

Pour l'implémenter, vous aurez besoin de scripts sur les pages source et auxiliaires. L'idée peut varier. L'un d'eux repose sur le fait que l'adresse (URL) de la page source est stockée dans la barre d'adresse du navigateur sous la forme d'une requête GET. Ainsi. La page d'assistance, lorsqu'elle reçoit une telle demande, connaît sa source. Sur cette base, il devient possible de revenir en arrière, c'est-à-dire vers la page à partir de laquelle la transition a été effectuée.

Schématiquement, cela peut être représenté comme suit :

Script activé page originale

Sur la page SUR LAQUELLE la transition doit être effectuée, il y a le script suivant, qui est une fonction - un gestionnaire de clic de souris (onclick) :

fonction save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

Pour que la fonction du script fonctionne, vous devez installer son gestionnaire sur un élément de l'une des manières suivantes, par exemple comme ceci :

Cliquez pour accéder à la page d'assistance

Notez que l'attribut href de ce lien a une adresse correspondante, qui est spécifiée dans la fonction de gestionnaire d'événements onclick. Ceci est fait pour que les robots de recherche comprennent à quelle page le lien mènera lorsque vous cliquez sur le lien. Si cela n'est pas nécessaire, vous devez créer un attribut href vide, comme

Le principe de ce script est que lorsque la fonction save_back(url) est appelée, une page (auxiliaire) avec l'adresse url est ouverte. Pour ce faire, le protocole de la page (par exemple http ou https) est déterminé, ainsi que le reste de l'URL de la page Web d'origine, y compris éventuellement les données de la requête GET (c'est ce qui se trouve dans l'URL après le "?" signe). Les données reçues sont ajoutées à l'URL de la page en cours d'ouverture - et une transition vers celle-ci se produit.

Script sur la page d'aide

Il devrait avoir un script comme celui-ci :

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

varquestion = "";
si(numéro_questions > 1)(
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

Ce script sera également lancé lorsque la souris cliquera sur n'importe quel élément sur lequel le gestionnaire correspondant est installé :

Retour

Cette ligne annule l'action par défaut lorsque la souris clique sur un lien. Le fait est que par défaut le lien est suivi. Dans ce cas, la transition se produira exactement vers l'adresse spécifiée dans l'attribut href. Cette adresse (notamment sur une page auxiliaire) ne peut pas contenir l'adresse de retour de la page à partir de laquelle le passage a été effectué (si le passage à la page auxiliaire est possible non pas à partir d'une page spécifique, mais à partir de plusieurs pages sources).

Ainsi, le script de la page d'assistance lit le contenu de la barre d'adresse, puis le divise en un tableau d'éléments « ? ». Veuillez noter qu'une URL peut contenir deux de ces caractères. La première apparaîtra, comme déjà mentionné, du fait que l'adresse (moins le protocole) de la page source a été ajoutée à l'adresse de la page auxiliaire. Et le second pourrait être présent du fait de la présence de paramètres de requête GET lors du chargement de la page source. En d’autres termes, il peut y avoir un ou deux points d’interrogation dans la barre d’adresse de la page d’aide. Pour passer d'une page secondaire à la page originale lorsque vous cliquez sur un lien

Retour

La demande est lue à partir de la barre d'adresse et convertie sous la même forme que celle qu'elle avait sur la page d'origine, après quoi la page est chargée à cette adresse.

Remarques

De plus, il convient de noter que l'article ne consiste en fait pas à revenir à la page d'origine, mais à la recharger. Ceci, bien entendu, n’est qu’une imitation d’un retour. En particulier, les données saisies sur cette page et ses paramètres ne peuvent pas être enregistrés. De plus, contrairement à RETURN, lors du chargement de la page, celle-ci sera ouverte dès le début du site (c'est-à-dire que sa partie supérieure sera située en haut de l'écran). Alors qu’un « vrai » retour en arrière ramène la page (originale) à l’endroit exact à partir duquel le saut a été effectué. Essayons donc de combiner les deux méthodes.

Méthode combinée

Alors, définissons la tâche :

si la page auxiliaire s'ouvre dans le même onglet (fenêtre), alors laissez la méthode history.back() être disponible ;

mais si la page auxiliaire s'ouvre dans une nouvelle fenêtre, alors la méthode décrite ci-dessus devrait fonctionner (car dans ce cas history.back() ne fonctionnera pas).

Le script sur la page auxiliaire va légèrement changer (la ligne mentionnée ci-dessus sera ajoutée) :

fonction return_to_initial_page() (
histoire.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = document_location ;
varquestion = "";
si (numéro_questions > 1) (
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get ;
}

Nous essayons d’abord de revenir en arrière. Si cela fonctionne, le reste du script ne fonctionnera pas et vous reviendrez à la page d'origine au même endroit à partir duquel la transition a été effectuée. Sinon, comme auparavant, nous extrayons l'adresse de la page source des paramètres de la requête GET et y accédons.

Conclusion

Bien entendu, cet article ne présente qu'une des options technologiques permettant de « retourner » : à la page d'origine. A cet effet, en plus de la requête GET, d'autres technologies pourraient être utilisées, par exemple le stockage local localStorage. De plus, pour simuler pleinement un retour BACK, il serait bien de transmettre le montant de défilement de la page d'origine via une requête GET - afin que plus tard, même lors de l'ouverture de la page auxiliaire dans une nouvelle fenêtre, vous puissiez revenir au même endroit sur la page d'origine à partir de laquelle la transition a été effectuée précédemment.

De nombreuses études d'utilisabilité montrent que les utilisateurs (nouveaux et expérimentés) utilisent souvent le bouton « retour » du navigateur. Malheureusement, les concepteurs front-end et les spécialistes du marketing réfléchissent rarement aux implications que cela pourrait avoir sur la convivialité, étant donné les modèles de conception Web modernes qui utilisent des applications, des animations, des vidéos, etc. Souvent, la structure technique de ces mises en page ne répond pas correctement à la fonction « retour en arrière », brisant le schéma mental de l’utilisateur et dégradant son expérience.

Les conséquences peuvent être désastreuses : lors des expériences, la réponse inadéquate du site à l’appui sur le bouton « retour » a été la raison du départ de nombreux utilisateurs, avec des abus et des critiques peu flatteuses. Dans la plupart des cas, même les vénérables sujets aux cheveux gris se sont terriblement mis en colère.

À partir de cet article, vous apprendrez :

• ce que les utilisateurs attendent du bouton « revenir en arrière » ;
• quelles sont les 5 erreurs les plus courantes ;
• une solution simple à ces problèmes.

La solution est en réalité très simple, mais elle est souvent négligée même par les plus grandes marques. Devons-nous corriger cette erreur ?

Attentes des utilisateurs

En bref : les utilisateurs attendent un bouton « retour en arrière » pour leur montrer ce qu'ils perçoivent comme la page précédente. Le mot « percevoir » est très important, car il y a une énorme différence entre ce qui semble être la page précédente et ce qu'elle est techniquement.

La question se pose : qu’est-ce que les utilisateurs interprètent exactement comme une nouvelle page ? Dans la plupart des cas, si une page est visuellement très différente, mais est conceptuellement liée au site, elle est alors perçue comme nouvelle. Il est donc très important de surveiller la manière dont le site traite les différents éléments interactifs : lightbox, formulaires, filtres, etc.

La plupart des visiteurs ne comprennent pas les aspects techniques, mais s'appuient uniquement sur des idées intuitives sur la façon dont la ressource devrait fonctionner. Ainsi, lorsqu’ils cliquent sur le bouton « retour », ils s’attendent à une page où ils ont déjà vécu une expérience importante, mais ils reçoivent une page avec une interface légèrement modifiée.

Vous trouverez ci-dessous les éléments interactifs les plus populaires et des recommandations pour les utiliser afin d'optimiser l'expérience utilisateur et la convivialité.

Le but de l'implémentation de superpositions et de lightbox est de montrer à l'utilisateur un élément qui apparaît en haut de la page. Par conséquent, les utilisateurs perçoivent ces éléments comme de nouvelles pages et appuient sur le bouton « retour » pour revenir à leur position d'origine - mais ils se retrouvent dans un endroit complètement différent de celui auquel ils s'attendaient. C'est particulièrement regrettable, car l'utilisation de lightbox ne fait que multiplier la perception négative de la page Web - la plupart des utilisateurs n'aiment pas ces éléments sur les sites d'achats en ligne.

L'utilisation de filtres transforme souvent une page et offre à une personne une nouvelle expérience. Ainsi, après tri, la page est perçue comme neuve, même si rien n'y a été chargé. Cela se produit car après chaque interaction du visiteur avec la page de la boutique en ligne, un nouveau résultat est généré.

Cet exemple montre que les gens n'entrent pas dans les aspects techniques lorsqu'ils déterminent nouvelle page, mais utilisez uniquement l'intuition et la perception formée.

3. Formulaire d'inscription/paiement

Les pages de paiement sont perçues comme de nouvelles pages, et pire encore, comme un processus en plusieurs étapes, dont chaque étape peut être annulée à l'aide d'un bouton « revenir en arrière ».

Cette approche peut poser des problèmes ; un exemple simple est qu'une personne souhaite revenir en arrière dans le remplissage d'un formulaire afin de modifier les informations saisies. Appuyer sur le bouton « retour » le renvoie à la poubelle et supprime toutes (!) les données saisies. L'irritation et la sortie du site sont un effet naturel.

La technologie AJAX peut ne pas répondre aux attentes des utilisateurs : chaque page AJAX se trouve techniquement sous la même URL, mais il semble que de nouvelles pages s'ouvrent.

Dans le cadre commerce électronique Les utilisateurs ont clairement la perception que la page 3 et la page 4 sont distinctes et peuvent être parcourues de la page 4 à la page 3 à l'aide du bouton de retour.

Les utilisateurs ne sont pas prêts à abandonner le bouton retour

Compte tenu de l'ampleur de l'utilisation de cette fonctionnalité du navigateur Internet, la question de l'inadéquation entre les attentes des utilisateurs et la vision des développeurs devient critique et ne doit pas être prise à la légère.

Les utilisateurs ont particulièrement apprécié le bouton « retour » Applications mobiles et des sites Web. Comme l’a montré l’étude versions mobiles sites, la majorité des utilisateurs ont utilisé cette fonction sur toutes les ressources proposées. De plus, l'utilisation du bouton ne se limite pas à revenir en arrière d'une page : certains sujets ont appuyé dessus jusqu'à 15 (!) fois de suite.

Les utilisateurs de PC appuient également souvent sur le bouton - mais pas autant que les propriétaires de téléphones portables, car les utilisateurs ordinateurs de bureau Une navigation pratique sur le site est disponible.

Solution

La bonne nouvelle est que HTML5 propose une solution relativement simple au problème, appelée API d'historique HTML5. Plus précisément, la fonction history.pushState() permet de modifier l'URL sans recharger la page. En conséquence, le site se comportera conformément aux attentes de l'utilisateur ayant cliqué sur le bouton « retour ».