Semaine 13 - Fin Wordpress, Ergonomie_et_publication (dans Wordpress)

Télécharger : Pour les taxes au Québec.docx

1- Pour les Taxes au Québec

Taux de taxe pour votre boutique dans Woocommerce.

Finalement, tester votre panier après avoir enregistrer le tout.

Et voila !!!

Ref.: https://www.juriclik.com/blogue/taxes-woocommerce/

5-Webba booking dans Wordpress

Télécharger : 5-Webba booking dans Wordpress.docx

Extension ultime de calendrier de réservation, de planification et de prise de rendez-vous.

1 ère chose : Dans le Tableau de bord, vous avez maintenant "Webba booking".

Noter que seul l'administrateur (le Prof) peut modifier ajouter des extensions.

Pour plus d'option, des modules payants sont à considérer….

2 ème chose :

Vous pouvez suivre le didacticiel, étape par étape, au meilleur de votre connaissance pour débuter le calendrier de réservation.

(Voir le document Word pour suivre toutes les étapes…)

3 ème chose :

Configurer votre "Webba Booking " selon vos évènements qui doivent être réservé.

La section Tableau de bord permet de voir les derniers évènements réservés.

La section Services permet de voir et insérer les services pouvant être réservé sur votre site à l'aide d'un calendrier et d'un formulaire.

Choisir :      L'ordre d'apparition, le nom, une image, le prix, le courriel, La plage horaire à choisir.

La section Réservations permet de voir le "Booking" ou réservations fait, et les gérer.

La section Apparence permet de modifier quelques trucs apparents sur le calendrier et le formulaire.

La section Réglages permet de modifier certaines caractéristique (très peu… ☹).

Par contre la section Libellé/Traduction permet de faire apparaitre des textes anglais qui peuvent être traduit en français pour apparaître dans la réservation en ligne.

4 ème chose :

Créer une nouvelle page pour insérer votre calendrier ou insérer le dans une page existante.

5 ème chose :

Dans votre page, insérer un bloc "Webba Booking Form"

6 ème chose :

Dans la partie droite de la page ou vous avez insérer Le bloc de "Webba Booking Form", sélectionner :

Single è si vous avez seulement un produit

Multiple è si vous avex plusieurs choix de produit

5 ème chose :

Publier …. Et visionnez le résultat…

Pour réserver, cliquez sur les journée à réserver. Remplir le formulaire et envoyer.

6 ème chose :

Pour gérer les réservations. Connecter vous en Administrateur….

Dans le Tableau de bord…..

Sur chacune des réservations, vous pouvez

+ No show

Télécharger : Ergonomie_et_publication.docx

3- Ergonomie_et_publication

L'ergonomie des site web

Ref.: www.commentcamarche.net

       https://www.keacrea.com/blog/les-regles-indispensables-de-l-ergonomie-d-un-bon-site-web

La vie d'un site web possède deux principales facettes, chacune décomposables en phases spécifiques :

• La création, correspondant à la concrétisation d'une idée en un site en ligne, référencé et visité ;
• L'exploitation, correspondant à la gestion quotidienne du site, son évolution et sa mise à jour.

Les principaux critères d'ergonomie d'un site web sont les suivants (liste non exhaustive) :

Des menus accessibles :

Ne vous attendez pas à ce que vos visiteurs passent plus de 10 secondes à tenter de comprendre comment fonctionne votre site. Votre menu doit être clair et accessible au premier coup d’œil. 

Mettre savamment en avant vos contenus :

Afin de capter l’œil de vos visiteurs, il va falloir jouer sur les contrastes des zones les plus importantes de votre site. Mais attention de ne pas en abuser au risque de leur donner le tournis. 

La structure d'un site web doit être le reflet d'une stratégie. Des scénarios de navigation doivent être élaborés afin de pousser l'utilisateur à suivre un chemin dans le site web.

Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller ou de changer de rubrique à tout moment.

Des études ont montré que l'oeil de l'internaute moyen parcourt généralement la page web selon un cheminement global en « zigzag » commençant à l'angle supérieur gauche, jusqu'à l'angle inférieur droit.

La zone centrale supérieure représente ainsi un endroit particulièrement stratégique pour placer des informations.

La structuration du site web consiste à bâtir l'architecture globale du site web en organisant les différentes informations.

Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :

Les onglets sont des outils de navigation utiles permettant de distinguer des rubriques dans un site web et de passer facilement de l'une à l'autre. Des codes couleurs peuvent également être utilisés afin de renforcer la différenciation entre les rubriques.

https://nicepage.com/fr/c/onglets-modeles-site

Un plan du site (ou carte du site, en anglais site map) permet aux internautes d'appréhender le site dans sa globalité en un seul coup d'oeil. Un item « vous êtes ici » peut de plus permettre à l'internaute de se situer dans le site.

Le terme « webdesign » désigne la discipline consistant à structurer les éléments graphiques d'un site web afin de traduire, à travers une dimension esthétique, l'identité visuelle de la société ou de l'organisation. Il s'agit ainsi d'une étape de conception visuelle, par opposition à la conception fonctionnelle (ergonomie, navigation).

L'objet du webdesign est de valoriser l'image de l'entreprise ou de l'organisation par le biais d'éléments graphiques afin de renforcer son identité visuelle et de procurer un sentiment de confiance à l'utilisateur. Néanmoins, en vertu des critères d'ergonomie, un site web doit avant tout répondre aux attentes des utilisateurs et lui permettre de trouver facilement l'information qu'il cherche.

Le webdesign est ainsi un compromis entre une présentation possédant un graphisme époustouflant, permettant de donner une crédibilité et une image de marque à l'entreprise et une navigation sobre (voire dépouillée) permettant à l'utilisateur de trouver facilement ce qu'il cherche.

Par extension le terme webdesigner désigne le métier consistant à concevoir le design d'un site web.

Le design d'une page web est avant tout un acte artistique mettant en oeuvre l'inventivité et la création. Le but de ce guide est de donner quelques éléments clés permettant d'obtenir un design efficace, néanmoins une bonne source d'inspiration peut consister à visiter des sites de référence, notamment des sites professionnels. Il est notamment intéressant d'étudier comment chacun d'entre-eux dispose l'information, comment les menus et les blocs d'information sont mis en avant et d'une manière générale de déterminer ce qui fait qu'un site paraît pro.

Une maquette est un site web factice et sommaire (prototype) présentant le graphisme du site et sa navigation. La maquette permet de formaliser la conception du site et constitue généralement l'étape de validation de cette phase, pour passer à la phase de réalisation.

La maquette représente les pages principales du site (sans contenu) à l'aide de pages statiques et permet de simuler la navigation. Ainsi, les éléments dynamiques tels que le moteur de recherche pourront par exemple conduire à une page présentant des résultats factices.

La taille de la page web dépend essentiellement de la définition d'affichage (le terme résolution est utilisée à tort) des internautes.

En terme de largeur, l'idéal est d'opter pour une valeur inférieure à la définition horizontale de la majorité des visiteurs, afin de ne pas les contraindre à faire défiler l'écran avec l'ascenceur horizontal. Une page courte permet en effet au visiteur de survoler facilement l'information pour repérer les éléments qui l'intéressent.

Concernant la longueur, il est souhaitable de ne pas dépasser trois à cinq hauteurs d'écran. En effet, les pages trop longues risquent de ne pas être lues en entier et sont plus longues à charger.

Pour garantir un affichage optimal pour la majeure partie des visiteurs il existe plusieurs stratégies :

Lors de la création des pages, la position des information a son importance. Etant donné le sens de lecture des informations (en diagonale du coin supérieur gauche au coin inférieur droit), l'information située en haut de page aura plus de chances d'être lue par les internautes. 

Il est fortement contre-indiqué d'utiliser plus de deux polices sur un site web. Les polices stylisées doivent être utilisées avec parcimonie (pour le titre par exemple) et l'essentiel de la page web devra être réalisée avec une police classique (Arial, Verdana, Helvetica, etc.).

Pour une utilisation imprimée traditionnelle, les polices à empattement (serif) facilitent généralement la lecture car les empattements permettent d'accompagner le regard du lecteur.

Sur le web, l'utilisation de telles polices est déconseillée car selon la définition de l'écran du visiteur, les empattements peuvent très vite devenir des pattes de mouche gênantes pour la lecture. Ainsi, il est souhaitable d'opter pour des polices sans empattement (sans serif), plus rondes.

Enfin, sachez que les textes utilisant des polices non standard risquent de ne pas apparaître correctement sur les écrans des internautes. Pour créer des titres avec de telles polices, il est néanmoins possible de contourner cette limitation en créant des images transparentes comportant le texte.

Il est conseillé de faire usage de pictogrammes ou d'icônes afin d'établir une signalisation visuelle. Attention tout de même au choix des symboles car le sens perçu par l'utilisateur peut être différent de celui qu'on lui attribue, notamment si le site web a une vocation internationale. Les pictogrammes suivants sont ainsi communément utilisé :

• Une loupe symbolise habituellement une fonction de recherche ;
• Une enveloppe signale la possibilité de contacter le webmaster par mail ;
• Un point d’interrogation caractérise une aide en ligne ;
• Une maison représente un lien vers la page d'accueil ;
• Un drapeau signale la langue de la page en cours ou bien la possibilité de changer de langue.

Facteurs de retour d’un visiteur sur un site (Forrester Research) :

(1) qualité du contenu : 75% ;
(2) facilité d’utilisation : 66% ;
(3) rapidité de téléchargement : 58% ;
(4) fréquence de mise à jour : 54% ;
(5) promotions et remises : 14% ;
(6) marque :13% ;
(7) technologie : 12% ;
(8) jeux : 11% ;
(9) options d’achat : 11% ;
(10) personnalisation du contenu : 10% ;
(11) autres : 16%.

Publication web ou SEO

Ref.: www.commentcamarche.net

Le SEO (Search Engine Optimization), ou référencement naturel

On désigne habituellement par le terme « référencement » (en anglais web positionning) l'ensemble des techniques permettant d'améliorer la visibilité d'un site web :

Pour autant, toute la difficulté de l'exercice ne réside pas tant dans la promotion du site auprès des moteurs de recherche que dans la structuration du contenu pour être bien positionné dans les résultats sur des mots-clés préalablement choisis.

En effet une majorité d'internautes utilise les moteurs de recherche afin de trouver de l'information et interroge à ce titre un moteur de recherche à l'aide de mots clés (en anglais keywords). Il est donc essentiel avant tout chose de se préoccuper du contenu que l'on propose afin de répondre au mieux aux attentes des internautes, et d'identifier dans un second temps les mots-clés susceptibles d'être saisis par ces derniers !

Il existe quelques techniques de conception de site permettant de donner plus d'efficacité au référencement des pages d'un site :

Les moteurs de recherche cherchent avant tout à fournir un service de qualité à leurs utilisateurs en leur donnant les résultats les plus pertinents en fonction de leur recherche ainsi avant même de songer à améliorer le référencement il est indispensable de s'attacher à créer un contenu consistant et original.

Un contenu original ne signifie pas un contenu qui n'est proposé par aucun autre site, cela serait une mission impossible. En revanche il est possible de traiter un sujet et de lui amener de la plus-value en approfondissant certains points, en l'organisant d'une manière originale ou en mettant en relation différentes informations.

D'autre part, toujours dans l'optique de fournir le meilleur contenu aux visiteurs, les moteurs de recherche accordent de l'importance à la mise à jour des informations. Le fait de mettre à jour les pages du site permet donc d'augmenter l'indice accordé par le moteur au site ou en tout cas la fréquence de passage du robot d'indexation.

Les mots

Utiliser les bons mots, ceux qui définisse bien votre sujet.

Utiliser les bons mots et leurs synonymes à tous les endroits suivants:

Le titre est l'élément de prédilection pour décrire en peu de mots le contenu de la page, c'est notamment le premier élément que le visiteur va lire dans la page de résultat du moteur de recherche, il est donc essentiel de lui accorder une importance particulière. Le titre d'une page web est décrit dans l'en-tête de la page web entre les balises <TITLE> et </TITLE>.

Le titre doit décrire le plus précisément possible, en 6 ou 7 mots maximum, le contenu de la page web et sa longueur totale recommandée ne doit pas dépasser la soixantaine de caractères.

Le titre est d'autant plus important qu'il s'agit de l'information qui s'affichera dans les favoris de l'internaute, ainsi que dans l'historique.

Certains moteurs de recherche accordent une importance capitale aux mots-clés présents dans l'URL, notamment les mots-clés présents dans le nom de domaine. Il est donc conseillé de mettre un nom de fichier adapté, contenant un ou deux mots-clés, pour chacun des fichiers du site plutôt que des noms du genre page1.html, page2.html, etc.

Afin de valoriser au maximum le contenu de chaque page il est nécessaire que celui-ci soit transparent (par opposition aux contenus opaques tels que le flash), c'est-à-dire qu'il comporte un maximum de texte, indexable par les moteurs. Le contenu de la page doit être avant tout un contenu de qualité adressé aux visiteurs, mais il est possible de l'améliorer en veillant à ce que différents mots-clés soient présents.

 Favoriser la création de contenue, maintenir à jour le contenue.

Les cadres (frames) sont fortement déconseillés car ils empêchent parfois l'indexation du site dans de bonnes conditions.

Les META Tags sont des balises non affichées à insérer en début de document HTML afin de décrire finement le document. Parmi ces balises les balises keywords et description permettent respectivement d'ajouter des mots-clés et une description décrivant la page, sans les afficher aux visiteurs (par exemple des termes au pluriel, voire avec des fautes d'orthographe volontaires). Il est conseillé d'utiliser le codage HTML pour les caractères accentués et de ne pas dépasser une vingtaine de mots clés.

Le META robots permet de décrire le comportement du robot vis-à-vis de la page, notamment indiquer si la page doit être indexée ou non et si le robot est autorisé à suivre les liens.

Étant donné l'usage abusif des métas constaté dans un nombre important de sites web, les moteurs utilisent de moins en moins ces informations lors de l'indexation des pages.

Afin de donner le maximum de visibilité à chacune de vos pages, il est conseillé d'établir des liens internes entre vos pages pour permettre au robots indexeurs (appelés crawlers, traduisez chenilles) de parcourir la totalité de votre arborescence. Ainsi il peut être intéressant de créer une page présentant l'architecture de votre site et contenant des pointeurs vers chacune de vos pages.

D'autre part il est important d'avoir des liens externes pointant vers son site web car cela augmente d'une part le trafic et la visibilité de votre site, d'autre part car certains moteurs de recherches prennent en compte le nombre et la qualité des liens pointant vers un site pour caractériser son niveau de pertinence (c'est le cas de Google avec son indice appelé PageRank).  Fin de la divulgation de la valeur du PageRank par Google : 15/04/2016

Les images du site sont opaques pour les moteurs de recherche, c'est-à-dire qu'ils ne sont pas capables d'en indexer le contenu, il est donc conseillé de mettre un attribut ALT sur chacune des images, permettant d'en décrire le contenu. La balise ALT est également primordiale pour les non-voyants, navigant à l'aide de terminaux en braille.

Voici un exemple de balise ALT :

<img src="images/commentcamarche.gif"

                          width="140"

                          height="40"

                          border="0"

                          alt="logo de CommentCaMarche">

L'élément de référence pour les moteurs de recherche est la page web, il faut donc penser, lors de la conception du site web, à structurer les pages en prenant en compte les conseils ci-dessus pour chacune des pages.

En effet la plupart des webmasters pensent à indexer correctement la page d'accueil de leur site mais délaissent les autres pages, or ce sont généralement les autres pages qui contiennent le contenu le plus intéressant. Il est donc impératif de choisir un titre, une URL et des métas (etc.) adaptés pour chacune des pages du site.

https://php.dinf.ca/projet/exemple/

Quelques trucs en vrac…

Pour le commerce électronique

Favoriser :

La dissimulation: (Qu'est-ce que le cloaking ?)

Le cloaking (en français dissimulation) est une technique proscrite par les moteurs de recherche (donc à éviter), consistant à générer un contenu HTML différent selon qu'il s'agit d'un visiteur ou d'un moteur de recherche.

En effet il est possible de repérer les robots des moteurs de recherche par la présence d'un champ User-Agent spécifique dans les requêtes HTTP qu'ils envoient et de leur fournir un contenu différent, comportant des mots clés en surnombre, non affichés aux visiteurs.

Pour autant, si l'utilisation de cette technique est constatée par un moteur de recherche (cela leur est facile), le site risque tout simplement de ne pas être indexé, voire d'être mis en liste noire (bannissement) pendant plusieurs mois.

Le fichier robots.txt est un fichier texte contenant des commandes à destination des robots d'indexation des moteurs de recherche afin de leur préciser les pages qui peuvent ou ne peuvent pas être indexées. Ainsi tout moteur de recherche commence l'exploration d'un site web en cherchant le fichier robots.txt à la racine du site.

Voir:  https://mylittlebigweb.com/blogue/fichier-robot-txt-incontournable-seo/