[PDF] Critères ergonomiques dun site web





Previous PDF Next PDF



IHM cours 8 : ergonomie du Web IHM cours 8 : ergonomie du Web

▷ 12 règles pour optimiser l'ergonomie d'un site web (Amélie Boucher). 7. Page 8. archi – orga visuelle – cohérence – conv. – info. – compréhension – assist 



Lergonomie Web

On distingue quatre phases dans le cycle ergonomique d'un site Web : phase d'analyse phase de conception



Livre blanc ergonomie web

L'ergonomie web. Page 2. L'ergonomie web c'est quoi ? Les 5 composantes de l'ergonomie web. Pourquoi l'ergonomie d'un site web est- elle importante ? Comment 



Charte ergonomique des sites Internet publics

30 juin 2008 On constate une forte progression du canal Web dans la relation entre les usagers et l'administration tant en termes de volumes d'échanges que ...



Evaluation du site Web : une approche par lexpérience de service

L'une d'entre elles le commerce électronique sur l'Internet



bUt métiers du muLtimédiA et de Linternet

application web en lien avec une base de données. Améliorer l'ergonomie d'un site web. Concevoir un site de e-commerce. Activités professionnelles : Concevoir 



Grille danalyse ergonomique dun site web

Grille d'analyse ergonomique d'un site web. Clément Dussarps et Céline 5) Pour un site en Flash : Il existe une version HTML du site. Cocher la dernière ...





Développer un site Internet ou laméliorer : écrire pour le Web

○ Pas besoin d'ergonomie on fait un. ○ Pas besoin d ergonomie on fait un focus group. Page 5. 5. Ligne de flottaison. ○ La ligne de flottaison (« above the 



INTÉGRATEUR WEB

d'accessibilité en optimisant le référencement et l'ergonomie du site web ou mobile et en prévoyant la possibilité de modifications ultérieures.



Ameliorer lergonomie dun site web

Appliquée au domaine du web cette science consiste à rechercher une bonne adéquation entre l'utilité et l'utilisabilité d'un site Internet.



05-Bastien/…preuves 2

développement d'un site web la facilité d'appren- tissage du langage HTML



Critères ergonomiques dun site web

Une analyse ergonomique est une démarche qui se déroule dans l'idéal tout au long de la réalisation d'un site web dans le but de tester sa qualité et de 



Guide pratique de conception et dévaluation ergonomique de sites

3 août 2001 2 L'ERGONOMIE DANS LE CYCLE DE DÉVELOPPEMENT D'UN SITE. WEB. 10. 2.1 La démarche ergonomique. 10. 2.2 La phase d'analyse.



Analyse de lergonomie des sites web de trois bibliothèques de

Sans contenus de qualité le plus ergonomique des sites ne présente en effet que peu d'intérêt. 3.2 Les critères ergonomiques de Bastien et Scapin. Christian 



Lergonomie Web

L'ergonomie web. On distingue quatre phases dans le cycle ergonomique d'un site Web : phase d'analyse phase de conception



Rédaction dun cahier des charges de site Web ou e-business

Design et ergonomie du site. 6. Contenu du site. 6. Description des pages du site. 7. Pages types. 7. Exemple de description d'une page Web.



1 Grille pour lanalyse ergonomique et pédagogique dun site Web

Grille pour l'analyse ergonomique et pédagogique d'un site Web – Projet Learnett – Jeanne-Marie Longrée Valérie Massart



Ergonomie des sites Web et handicap visuel

La news en question disait que d'après une étude de L'Osservatorio su Internet dell'Unione Italiana Ciechi parmi les sites italiens seulement le 65% d'entre eux 



Ergonomie – S. Metz – Master VCIel – 2009/2010 22/09/09 1

Cours d'ergonomie - S. Metz – Master VCIel. 1. I - Ergonomie et Sites Web. ? Un site web comme un document

Critères

ergonomiques d'un site web éléments d'ergonomie web rassemblés et mis en forme par

TOUVET David

Mars 2002

Critères ergonomiques d'un site web

NTE / ergonomie document final 2/49

Table des matières

1. SITE 6

1.1. A

NALYSE ETHNOGRAPHIQUE 6

1.1.1. C

ARACTÉRISTIQUES DES GROUPES D'UTILISATEURS 6

1.1.2. C

ARACTÉRISTIQUES DU FUTUR SITE 6

1.2. P

OINTS FRAGILES D'UN SITE 7

1.2.1. P

OLYVALENCE MULTI-PLATEFORMES 7

1.2.2. P

OLYVALENCE MULTI-RÉSOLUTIONS 7

1.2.3. A

CCESSIBILITÉ 8

1.2.4. C

RÉDIBILITÉ 8

1.2.5. I

MPRESSION 9

1.2.6. V

ITESSE D'AFFICHAGE 9

1.2.7. S

AUVEGARDE 9

1.2.8. H

ÉBERGEMENT 10

1.3. A

NALYSE ERGONOMIQUE 10

1.3.1. U

SABILITY TESTING 10

2. NAVIGATION 10

2.1. M

ODES DE NAVIGATION 11

2.1.1. N

OMBRE DE MODES DE NAVIGATION 11

2.1.2. M

ODE DE NAVIGATION PRIMAIRE 11

2.1.3. H

IÉRARCHIE VERSUS SECTION 12

2.1.4. C

HERCHER VERSUS EXPLORER 12

2.1.5. V

ISITES GUIDÉES 13

2.1.6. S

ITES MULTILINGUES 13

2.2. Z

ONES DE NAVIGATION 13

2.2.1. O

Ù SUIS-JE? SUR QUEL SITE SUIS-JE? (SITE ID) 13

2.2.2. S

UR QUELLE PAGE SUIS-JE? (PAGE NAME) 14

2.2.3. Q

UELLES SONT LES OPTIONS À CE NIVEAU ? (LOCAL NAVIGATION) 15

2.2.4. Q

UELLES SONT LES PRINCIPALES SECTION DE CE SITE? (SECTIONS) 15

2.2.5. P

UIS-JE RECHERCHER? (SEARCH) 15

2.3. M

ENUS 15

2.3.1. O

RGANISATION DES ITEMS DE MENU 16

2.3.2. N

IVEAUX HIÉRARCHIQUES 17

2.3.3. H

OMOGÉNÉITÉ 18

2.3.4. G

RAPHIQUE VERSUS TEXTUEL 18

2.4. L

IENS 19

2.4.1. T

YPES DE LIENS 19

2.4.2. P

ERTINENCES DES LIENS 20

2.4.3. T

ITRE DES LIENS 21

2.4.4. M

ISE EN VALEUR DES LIENS 21

2.4.5. A

TTRIBUT "_BLANK" 21

2.4.6. B

OUTON RETOUR 22

2.5. O

UTILS DE NAVIGATION 22

Critères ergonomiques d'un site web

NTE / ergonomie document final 3/49

2.5.1. GLOSSAIRE 22

2.5.2. I

NDEX 23

2.5.3. S

OMMAIRE, TABLE DES MATIÈRES 23

2.5.4. M

OTEUR DE RECHERCHE 24

2.5.5. P

LAN DU SITE 25

2.6. R

ÔLE DU SYSTÈME 25

2.6.1. G

UIDAGE / INCITATION 25

2.6.2. F

EEDBACK 26

2.6.3. C

ONTRÔLE DE L'UTILISATEUR / RESPECT DES CHOIX DE L'UTILISATEUR 26

3. STRUCTURE 26

3.1. S

ITE 26

3.1.1. S

TRUCTURE VIRTUELLE 26

3.1.2. F

RAMES 27

3.1.3. S

OUS-SITE 28

3.2. E

CRANS D'INTRODUCTION 28

3.2.1. E

LÉMENTS CONSTANTS 28

3.3. H

OMEPAGE 28

3.3.1. E

LÉMENTS CONSTANTS 29

3.4. P

AGE TYPE 29

3.4.1. E

LÉMENTS CONSTANTS 29

3.4.2. T

ITRE DE LA PAGE () 30</h3> <h4>3.4.3. G</h4> <h3>ESTION DE L'ESPACE DISPONIBLE 30</h3> <h4>3.4.4. T</h4> <h3>AILLE 31</h3> <h4>3.5. O</h4> <h3>RGANISATION DE L'INFORMATION 31</h3> <h4>3.5.1. P</h4> <h3>RINCIPE DE LA PYRAMIDE INVERSÉE 32</h3> <h4>3.5.2. S</h4> <h3>ECTIONS ET MODULARITÉ 32</h3> <h4>3.5.3. N</h4> <h3>IVEAUX HIÉRARCHIQUES 33</h3> <h4>3.5.4. L</h4> <h3>ISTES À PUCES 33</h3> <h4>4. CONTENU 33</h4> <h4>4.1. T</h4> <h3>YPE DE CONTENU 33</h3> <h4>4.1.1. T</h4> <h3>EXTE 34</h3> <h4>4.1.2. B</h4> <h3>IBLIOGRAPHIE 34</h3> <h4>4.1.3. T</h4> <h3>AG ALT 35</h3> <h4>4.2. L</h4> <h3>ISIBILITÉ DE L'INFORMATION 35</h3> <h4>4.2.1. D</h4> <h3>ENSITÉ 36</h3> <h4>4.2.2. P</h4> <h3>OLICE 36</h3> <h4>4.2.3. C</h4> <h3>OULEUR 37</h3> <h4>4.2.4. T</h4> <h3>AILLE 37</h3> <h4>4.2.5. S</h4> <h3>TYLE 37</h3> <h4>5. DESIGN 38</h4> <h4>5.1. T</h4> <h3>YPE D'ÉLÉMENTS DE DESIGN 38</h3> <h4>5.1.1. C</h4> <h3>HARTE GRAPHIQUE 38</h3> <h3>Critères ergonomiques d'un site web</h3> <h3>NTE / ergonomie document final 4/49</h3> <h4>5.1.2. LOGO 39</h4> <h4>5.1.3. I</h4> <h3>MAGE FIXE 39</h3> <h4>5.1.4. I</h4> <h3>MAGE MAP 40</h3> <h4>5.1.5. I</h4> <h3>MAGE ANIMÉE 40</h3> <h4>5.1.6. G</h4> <h3>RAPHIQUE - SCHÉMA 41</h3> <h4>5.1.7. T</h4> <h3>HUMBNAILS 41</h3> <h4>5.1.8. P</h4> <h3>HOTO 41</h3> <h4>5.1.9. S</h4> ON 42 <h4>5.1.10. V</h4> <h3>IDÉO 42</h3> <h4>5.1.11. 3D 43</h4> <h4>6. GESTION DES ERREURS 43</h4> <h4>6.1. P</h4> <h3>RÉVENTION 43</h3> <h4>6.1.1. P</h4> <h3>LUG-IN 43</h3> <h4>6.1.2. P</h4> <h3>AGES 404 43</h3> <h4>6.1.3. E</h4> <h3>TAT DE FINITION 44</h3> <h4>6.2. T</h4> <h3>RAITEMENT DES FORMULAIRES 44</h3> <h4>6.2.1. F</h4> <h3>ORMULAIRE 44</h3> <h4>7. SYSTÈMES D'AIDE 45</h4> <h4>7.1. T</h4> <h3>YPE D'AIDE 45</h3> <h4>7.1.1. A</h4> <h3>IDE ON-LINE 45</h3> <h4>7.1.2. F.A.Q. 45</h4> <h4>7.1.3. C</h4> <h3>ONTACT 46</h3> <h4>8. CHARGE DE TRAVAIL 46</h4> <h4>8.1. T</h4> <h3>YPE D'ÉLÉMENTS PERTURBANTS 46</h3> <h4>8.1.1. A</h4> <h3>CCROCHES VISUELLES 46</h3> <h4>8.1.2. N</h4> <h3>OMBRE D'INFORMATION 47</h3> <h4>8.1.3. N</h4> <h3>OMBRE D'ACTIONS POUR TROUVER DE L'INFORMATION 47</h3> <h4>9. ADAPTABILITÉ 47</h4> <h4>9.1. P</h4> <h3>ERSONNALISATION 47</h3> <h4>9.1.1. I</h4> <h3>NTERFACE 48</h3> <h4>9.1.2. R</h4> <h3>ECONNAISSANCE DES LANGUES 48</h3> <h4>9.1.3. P</h4> <h3>RISE EN COMPTE DE L'EXPÉRIENCE 48</h3> <h4>10. EVOLUTION 48</h4> <h4>10.1. M</h4> <h3>AINTENANCE 48</h3> <h4>10.1.1. M</h4> <h3>ISES À JOUR 48</h3> <h4>10.2. N</h4> <h3>OUVEAUTÉS DU SITE 49</h3> <h3>Critères ergonomiques d'un site web</h3> <h3>NTE / ergonomie document final 5/49</h3> <h4>10.2.1. PRÉSENTATION DES NEWS 49</h4> <h3>Critères ergonomiques d'un site web</h3> <h3>NTE / ergonomie document final 6/49</h3> <h4>1. Site</h4> <p>Considérations générales sur l'encadrement de la conception d'un site. On s'intéresse ici à ce</p> <p>qu'il se passe avant et après la conception. Prendre en compte ces étapes et éviter de se lancer</p> <p>tête baissée dans la conception d'un site web permet d'éviter beaucoup d'erreurs difficilement</p> corrigeables par la suite. <h4>1.1. Analyse ethnographique</h4> Une analyse ethnographique est une démarche qui permet de dresser les caractéristiques des <p>groupes d'utilisateurs qui seront amenés à utiliser le site. Connaître finement les utilisateurs</p> permet de concevoir un site à leur convenance. <h4>1.1.1. Caractéristiques des groupes d'utilisateurs</h4> <h4>1.1.1.1. Explications</h4> Prendre en compte le ou les "public-cible" signifie d'une part les déterminer puis les approcher et les observer pour en dresser une représentation la plus fine possible. <p>Quels sont les groupes d'utilisateurs qui vont être amenés à utiliser le site ? Cela revient</p> <p>à se demander quel public vise-t-on ? Eviter de simplifier cette étape et de laisser de côté</p> un certain nombre de personnes qui ne se retrouveraient pas dans le future site. Quelles sont les attentes de ces groupes ? Pourquoi viendraient-il visiter le site ? Quels <p>bénéfices retireront-ils de leur(s) visite(s) ? Quelles actions aimeraient-ils effectuer sur le</p> site et pour obtenir quoi ? Pourquoi reviendront-ils et avec quelle fréquence ? Quel(s) support(s) utilisent les utilisateurs du site? (PDA, navigateur web, etc.). <h4>1.1.1.2. Exemples</h4> <h4>1.1.1.3. Littérature</h4> <h4>1.1.2. Caractéristiques du futur site</h4> <h4>1.1.2.1. Explications</h4> Une fois après avoir pris en compte les caractéristiques des groupes d'utilisateur, il faut commencer à déterminer les caractéristiques du futur site pour qu'il corresponde au maximum aux utilisateurs. Qu'a-t-on à leur proposer comme contenu, et quelle forme leur conviendrait le mieux ? Pourquoi a-t-on besoin d'un site web ? Quelles autres formes de communication utilise-t- on déjà ? En quoi le futur site web peut-il la compléter ou l'enrichir ? Quel message désire-t-on faire passer ? Quelle image veut-on donner ? <p>Le site répond-il à une logique de communication (site "carte de visite", "vitrine") ou à une</p> logique d'information (site mobilisateur) ? <h3>En quel(les) langue(s) sera le site ?</h3> Quelles rubriques devront être mises à jour ? Comment évoluera-t-il ? Que sera-t-il devenu dans quelques années ? <h3>Critères ergonomiques d'un site web</h3> <h3>NTE / ergonomie document final 7/49</h3> Doit-on faire un intranet? un extranet? nielsen page 261 Quel nom lui donner? On n'a le droit d'utiliser que des lettres (non accentuées), des chiffres et le tiret (-). Par conséquent, les autres signes de ponctuation sont interdits ainsi que les espaces blancs. Essayer de trouver un nom facilement mémorisable et pas trop long. <h4>1.1.2.2. Exemples</h4> <h4>1.1.2.3. Littérature</h4> "On appelle un intranet un ensemble de pages contenant des informations à usage <p>interne, [...], réunies dans un répertoire spécial auquel l'accès est restreint, par un mot de</p> passe par exemple." (DEMAZIERE, 2001, p.59) <h4>1.2. Points fragiles d'un site</h4> <p>Un certain nombre d'éléments doivent être pris en compte si l'on désire concevoir un site de</p> bonne qualité. <h4>1.2.1. Polyvalence multi-plateformes</h4> <h4>1.2.1.1. Explications</h4> Un site internet doit être consultable sur n'importe quelle plate-forme informatique. Chaque plateforme possède ses propres browers qui ne détectent pas les mêmes objets. Il faut concevoir des pages multi-plateformes, multi-navigateurs avec un minimum de plugins et de fonctions spécifiques à un navigateur. Il faut donc tester constamment son site sur les différentes plateformes informatiques : Mac, PC, Unix, Linux, etec. <h4>1.2.1.2. Exemples</h4> <h4>1.2.1.3. Littérature</h4> "C'est le navigateur du lecteur qui décide de la retranscription visuelle des balises du code source. En tant que concepteur de la page web, vous n'avez pas un contrôle absolu sur son aspect final, à l'autre bout du réseau." (DEMAZIERE, 2001) Article de Jakob NIELSEN "Suck with old browsers until 2003" <h4>1.2.2. Polyvalence multi-résolutions</h4> <h4>1.2.2.1. Explications</h4> Un site internet doit être consultable à partir de n'importe quel écran. On parle ici de sa qualité, de son nombre de couleurs et de sa résolution. Il faut dépasser le mythe des "800 x 600". En fait, un site doit pouvoir s'adapter à toutes les résolutions. La zone visible du navigateur peut varier grandement: il faut donc créer des pages "liquides", non liées à une taille d'écran ou de fenêtre. Actuellement, les configurations "standard" comprennent un écran 15 ou 17 pouces. Les ordinateurs possèdent des cartes graphique différentes, certaines d'une palette de <h4>256 couleurs.</h4> <h3>Critères ergonomiques d'un site web</h3> <h3>NTE / ergonomie document final 8/49</h3> Les couleurs sont plus claires sur les Mac que sur les PC (sous Windows). Les caractères typographiques sont plus petits sur les Macs que sur les PC sous Windows. <h4>1.2.2.2. Exemples</h4> (1) http://www.coca-cola.com/ - Ici, exemple parfait. Si on réduit la taille de la fenêtre, le site "zoom" son contenu et affiche constamment l'ensemble des informations à l'écran. <h4>1.2.2.3. Littérature</h4> Article de Jakob NIELSEN "Suck with old browsers until 2003" <h4>1.2.3. Accessibilité</h4> <h4>1.2.3.1. Explications</h4> Un site doit être accessible à toute personne. Tout le monde n'a pas accès au web avec une connexion à haut débit. La majorité des internautes accèdent au réseau avec un simple modem. Il est déterminant qu'un site soit visible par tous dans les meilleures conditions. Rendre un site accessible, c'est accepter qu'on ne peut avoir le contrôle sur l'aspect final de chaque page. <h4>1.2.3.2. Exemples</h4> <h4>1.2.3.3. Littérature</h4> "Bref, si vous êtes soucieux, avec votre site web, d'atteindre le plus grand nombre de gens sur notre planète; si vous privililégiez le fond et non la forme; si vous pensez que vos idées se valent pour elles-mêmes et non pour la manière dont vous les mettez en scène: faites du HTML, et faites-le simplement." (DEMAZIERE, 2001) "Ne liez jamais une information ou un niveau d'information important à une technique qui ne soit pas accessible à tous (ou qui sera dépassée dans un an, tout va très vite sur Internet...). Les éléments proposés par les plug-ins ne peuvent être que des enjolivements, et non des informations indispensables." (DEMAZIERE, 2001) <h4>1.2.4. Crédibilité</h4> <h4>1.2.4.1. Explications</h4>quotesdbs_dbs23.pdfusesText_29</div> <style> .ahover:hover{ background:#efefef; } </style> <div style="padding:5px; font-size:22px;"> <a href="https://pdfprof.com/PDFV2/Documents1/21664/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] COURS PGI, ERP, MASTER CCA</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21665/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Dossier escrime 1</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21666/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] espaces préhilbertiens réels - Christophe Bertault</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21667/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Espaces vectoriels</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21668/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Le M1 MEEF 1er degré - Université d Orléans</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21669/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Le M1 MEEF 1er degré - Université d Orléans</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21670/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] CAP Esthetique Cosmetique Parfumerie - Académie de Lyon</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21673/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Support de cours D 'électronique de puissance Les - ISETN</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21674/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Exercices et examens résolus - ENSA de Marrakech</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21675/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Electrochimie - Exercices - élèves -correction -2015</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21676/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Support de cours et TD d 'électronique de puissance - Elearn</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21680/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Exercices Math Sup et Math Spé - Exo7</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21681/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] Théorie de la décision et théorie des jeux</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21682/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] TD 6, Introduction aux distributions, version courte</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/21684/16" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] L 'eau et l 'assainissement - Mairie de Saint-Pierre</a><br/><br/> </div> </div> </div> <div class="left"> <br/> <div style="width:100%;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script> <!-- Responsive1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1570187411384203" data-ad-slot="2836242943" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <br/> <br/> <br/> <div style="background:#efefef;"><br/></div> </div> <div> <style> .exit-intent-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(33, 33, 33, 0.8); transform: translateY(60%) scale(0); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } .exit-intent-popup.visible { transform: translateY(0) scale(1); } .newsletter { position: absolute; top: 20%; left: 20%; transform: translate(-20%, -20%); } /* Popup-specific styles */ .newsletter { background: #FFF; padding: 10px; border-radius: 3px; } .close { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 20px; height: 20px; font-size:18px; } </style> <link rel="stylesheet" href="popup.css" /> <div class="exit-intent-popup"> <div class="newsletter"> <span>Nous vous remercions chaleureusement pour votre soutien et votre générosité.</span><br/> <br/> <img src="https://pdfprof.com/PDFV2/6oB.gif" style="max-width:100%;"/> <div style="width:100%;"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://pdfprof.com/PDFV2/Documents1/21663/16/3" rel="nofollow" target="_blank" style="margin-right: 5px; background: #03A9F4; color: white; padding: 1%; font-size:15px; width:46%; ">Share on Facebook</a> <a href="https://api.whatsapp.com/send?text=L+%27eau+et+l+%27assainissement+-+Mairie+de+Saint-Pierre+Download+From++-+https%3A%2F%2Fpdfprof.com%2FPDFV2%2FDocuments1%2F21663%2F16%2F3" rel="nofollow" target="_blank" style="background: #4CAF50; color: white; padding: 1%; width:48%; font-size:15px;">Share on Whatsapp</a> </div> <br/> <span class="close">x</span> </div> </div> <script> /* const CookieService = { setCookie(name, value, days) { let expires = ''; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 12 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + ';'; }, getCookie(name) { const cookies = document.cookie.split(';'); for (const cookie of cookies) { if (cookie.indexOf(name + '=') > -1) { return cookie.split('=')[1]; } } return null; } }; const exit = e => { const shouldExit = [...e.target.classList].includes('exit-intent-popup') || // user clicks on mask e.target.className === 'close' || // user clicks on the close icon e.keyCode === 27; // user hits escape if (shouldExit) { document.querySelector('.exit-intent-popup').classList.remove('visible'); } }; const mouseEvent = e => { const shouldShowExitIntent = !e.toElement && !e.relatedTarget && e.clientY < 10; if (shouldShowExitIntent) { document.removeEventListener('mouseout', mouseEvent); document.querySelector('.exit-intent-popup').classList.add('visible'); CookieService.setCookie('exitIntentShown', true, 30); } }; if (!CookieService.getCookie('exitIntentShown')) { setTimeout(() => { document.addEventListener('mouseout', mouseEvent); document.addEventListener('keydown', exit); document.querySelector('.exit-intent-popup').addEventListener('click', exit); }, 0); } */ </script> <!-- Trigger/Open The Modal --> <!-- The Modal --> <div> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="closeA">×</span> <style> .downlink{ border:1px solid #aaa;color:white;padding:8px;width:98%;color:white;background:green;display:block; } .downlink:hover{ background:blue; cursor:pointer; } </style> <table style="width:80%;"> <tr style="width:100%;"> <td style="width:50%;"><a href="https://pdfprof.com/PDFV2/ShowLink_1.php?vidt=21663&vt=16&links=http%3A%2F%2Ftecfaetu.unige.ch%2Fstaf%2Fstaf-g%2Ftouvet%2Fstaf24%2Frapport_stage_annexe2.pdf" class="downlink" target="_blank">PDF Download</a> </td> <td style="width:45%;"><a href="https://pdfprof.com/PDFV2/Documents1/21663/16/4" class="bblinkss"> Next PDF </a> </td></tr> </table> <iframe id="ppifa" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=http://tecfaetu.unige.ch/staf/staf-g/touvet/staf24/rapport_stage_annexe2.pdf&idt=21663&t=16&view=3&url=https://pdfprof.com/PDFV2/Documents1/21663/16/3" style="width:100%;height:90vh;" ></iframe> <script> /* var iframe = document.getElementById("ppifa"); var srcv=iframe.src; var loadingStatus = false; function abc(){ iframe.onload = function () { loadingStatus = true; console.log('ok is loaded iframe'); } if(loadingStatus==false) { iframe.src=srcv; } } abc(); */ </script> </div> </div> </div> <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 10px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 5px; border: 1px solid #888; width: 90%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:5px; } .closeA:hover, .closeA:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closeA")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>