vendredi, 1 mars 2019

Audit web : points à évaluer

Contenu

→ Information, crédibilité, cohérence
•    L’objectif du site est clairement identifiable
•    Le contenu présent est utile
•    Il ne manque pas d’informations importantes
•    Chaque page a un titre pertinent
•    L'équilibre texte et éléments multimédia est bon
•    L’auteur du site est clairement identifiable
•    Les contenus importants sont mis en avant
•    Les textes longs ont une mise en page qui facilite la lecture (titre, chapeau, intertitres, alinéas et paragraphes, aération, etc.)
•    Le site utilise un mode d’écriture adapté au web (concision, mise en page)
•    Le texte est divisé en morceaux lisibles (titres, chapeau, sous-titres, emphase) pour faciliter la lecture en diagonale
•    Le contenu est hiérarchisé
•    Le contenu est structuré avec des paragraphes plutôt succincts
•    La rédaction est d’un bon niveau
•    Le vocabulaire est adapté à la cible
•    Le contenu est daté
•    Le contenu est à jour / régulièrement actualisé
•    Les images, sons, vidéos sont utiles et de bonne qualité
•    Les informations sont crédibles (références, témoignages, copyright, presse)
•    La grammaire et l’orthographe sont correctes
•    L'utilisation des contenus multimédias est justifiée (vidéos, sons, animations, etc.)
•    Le contenu correspond aux attentes de l’utilisateur
•    Le ton employé est en accord avec le site
•    Le ton employé est adapté aux personas
•    Il n’y a pas de publicité sur le site ou cette dernière ne nuit pas à la compréhension de l’information sur le site
•    Le site ne possède aucun lien mort
•    Une FAQ est présente
•    Le contenu est multilingue
•    L’adresse et la localisation de l’entreprise sont facilement identifiables
•    Le secteur et le concept sont facilement identifiables

Graphisme

→ Présentation, lisibilité, compatibilité…
•    Le site est agréable à l'œil, attrayant
•    Le site est moderne (flat design en 2019)
•    Le texte est lisible sans efforts
•    La mise en page est cohérente sur tout le site
•    L’identité du site est indiquée
•    L’emplacement des menus est bon
•    Les éléments principaux sont visibles sans “scroller”.
•    Le graphisme est adapté à la cible
•    Les typographies sont bien utilisées
•    Les couleurs et les contrastes aident la lisibilité
•    Le logo est de qualité professionnelle
•    Le site n’utilise pas de gadgets (GIFs animés, livre d’or, etc.)
•    Le site est homogène d’une page à l’autre (pas de rupture visuelle)
•    Le nombre de couleurs est limité
•    Les visuels (images, logos, icônes...) apportent de l’information
•    Les visuels aident à la navigation
•    Les visuels s'accordent au design global
•    Le design est fidèle à l’image de la marque / de l’entreprise
•    Le site comporte un logo visible et facile à retenir
•    Le site utilise moins de 3 polices
•    Les polices utilisées sont reconnues par le navigateur
•    Le texte est lisible facilement (taille, soulignement, italiques)
•    Le site est responsive (vue adaptative : le fait d’avoir une taille adaptée à l’écran)
•    Une page inexistante mène à une page personnalisée

Structure

→ Navigation, ergonomie, recherche
•    La navigation est facile à comprendre
•    Le menu est tout de suite identifiable sur le site
•    Le menu est toujours visible à l’écran
•    Un lien de retour à l’accueil est visible.
•    La navigation indique où le visiteur se trouve (fil d’Ariane)
•    La navigation offre des moyens de ne jamais recourir au bouton « page précédente » du navigateur
•    Les éléments de navigation figurent tous au même endroit sur la page, quelle que soit la page visitée
•    Les libellés des liens sont pertinents
•    Les liens sont actifs (absence de liens morts)
•    Les rubriques du site sont facilement identifiables et explicites
•    Le nombre de rubriques principales dans le menu est bien choisi
•    Les liens dans le contenu sont identifiables (couleurs, polices)
•    Les liens ne gênent pas la visibilité (longueur, soulignage...)
•    Seul les liens sont soulignés
•    La hiérarchie des menus et boutons est bonne
•    Les boutons d’action sont identifiables.
•    Un état survolé est visible
•    Les liens visités sont identifiables
•    Des instruments de recherche sont disponibles
o    Moteur de recherche interne
o    Plan du site
o    Index alphabétique
•    Les instruments de recherche sont efficaces
•    La profondeur va jusqu’à maximum 3 niveaux (règle des 3 clics pour atteindre l’info)
•    Un appel à l’action est présent sur chaque page, il n’y a pas d’impasse
•    Le site est disponible avec et sans les www
•    La page d’accueil encourage le visiteur à aller plus loin dans la découverte du site
•    Le bouton d’accueil est accessible quelle que soit la page visitée

Interactivité

→ Formulaires, espaces collaboratifs, newsletters, …
•    Le destinataire est identifiable
•    Les champs sont tous utiles
•    L’aspect visuel aide à la saisie
•    Des cases à cochés ne sont pas cochées par défaut
•    Le destinataire est identifiable
•    L’étiquette des champs aide le visiteur.
•    La longueur des formulaires est raisonnable
•    Des blocs de champs sont visibles si nécessaire
•    Une aide est fournie en cas d’erreur
•    La réussite/échec de l’envoi est indiquée
•    L’éditeur/webmaster peut être contacté facilement
•    Si pertinent : Le site possède des espaces interactifs (extranet, forums, chat, etc...)
•    Les formulaires sont faciles d’utilisation
•    Est-il possible de rentrer en contact facilement avec l’entreprise ?
•    Des éléments destinés à la viralité sont présents sur le site
o    Partage via les réseaux sociaux
o    Inscription à une newsletter
o    Flux RSS
o    Concours ponctuels
o    Formulaire de contact

Performance

→  Réactivité
•    Le chargement est suffisamment rapide (moins de 10 secondes)
•    La réactivité après chaque clic est quasi immédiate
•    Les images sont optimisées et non redimensionnées (~35 Ko max)

Sécurité

→ Protection, défense contre les vulnérabilités et failles sur le web
•    Le site n’utilise pas de “frames”
•    Le site est mis régulièrement à jour
•    Les extensions sont mises régulièrement à jour
•    Les extensions utilisées ont été mises à jour il y a moins d’un an
•    Les vérifications de formulaire sont effectuées en client-serveur (pas de vérification en js)
•    Les formulaires résistent aux commandes script et caractères spéciaux
•    Les contenus des répertoires sont protégés via le fichier .htaccess
•    Si le site embarque des données sensibles, les bases de données sont protégées contre les accès externes
•    Le site est exempt d’erreurs côté serveur
•    Le fichier robots.txt est correctement configuré
•    Le site est sécurisé en SSL (https)
•    Le site utilise une version de PHP actuelle
•    Le CHMOD des dossiers n’implique aucune faille de sécurité
•    Les URL pour accéder au formulaire d’authentification de la console (panneau d’administration) des sites sont imprévisibles
•    Les authentifiants pour se connecter sont spécifiques (admin, administrateur, webmaster)
•    Les mots de passe utilisés sont sécurisés
•    L’administrateur n’a pas l’ID 1
•    Les mots de passe sont hashés et salés
•    Les formulaires sont validés côté serveur
•    Les données des champs sont typées, échappées, limitées en nombre de caractères
•    Les adresses ne sont pas écrites en clair (mailto)
•    Il existe des captchas pour l’envoi des formulaires
•    Les tentatives d’inscription/d’écriture sont dénombrées et les connexions suspectes contrées

Accessibilité

→ Dispositions pour faciliter la lecture pour les personnes souffrant de handicaps, seniors, etc.
•    Le site est compatible avec tous les navigateurs (a minima Firefox, Chrome, IE)
•    Le site est conforme avec les standards du W3C (validation HTML, CSS) et interopérable
•    Le site offre une feuille de style où les couleurs sont suffisamment contrastées (ratio 4.5 min)
•    Il existe un dispositif pour ajuster la taille du texte
•    La taille du texte est adaptable via le navigateur
•    Les attributs alt sont renseignés sur tous les éléments graphiques (img, area, input type=“image”) et comprennent une description sommaire de ce qui y est représenté ou de ce qu’on y lit (éviter les « photo de » ou « ici vous voyez »)
•    Les attributs alt se limitent 80 caractères
•    Si le site est en plusieurs langues, la valeur de l’attribut alt correspond à la langue idoine
•    Les images contenant de l’information (organigramme, affiches...) ont une alternative textuelle relayant de manière complète l’information présente sur l’image.
•    Pour un site en Flash : il existe une version HTML du site
•    Les images utilisent un descriptif textuel
•    Le site est en responsive design
•    Chaque page est accessible par au moins un lien HTML en dur (pas de Js/Flash)
•    Le site contient des URL canoniques (chaque page est accessible via un permalien unique)
•    Tous les liens sont accessibles via la touche TAB
•    Il existe des focus sur les champs des formulaires ( :focus)
•    Il existe des focus sur les liens ( :hover)
•    L’ordre de tabulation est prévisible
•    Il n’existe aucun faux bouton (div, span, img) sur lesquels on appelle des fonctions JS comme onMouseOver, ou images cliquables côté serveur
•    Aucune popup ne perturbe la navigation
•    Aucun dispositif Javascript n’empêche la navigation une fois activé (ex : Lightbox)
•    En cas de menus déroulants cachés, il existe une sitemap où les liens sont accessibles
•    Les liens sont descriptifs et non injonctifs (« cliquez ici » est à proscrire)
•    Le format du fichier est indiqué dans l’intitulé du lien lors du téléchargement
•    Le DOCTYPE est conforme et les balises correctement imbriquées
•    Les éléments contiennent tous un attribut unique (pas de doublon)
•    Titre dans l’élément title est significatif
•    Le code reflète la structure du contenu (web sémantique) ((hn, ol, ul, p, header, nav,
•    aside, article…)
•    La navigation indique où le visiteur se trouve (fil d’Ariane) avec des séparateurs > plutôt que des ul / li
•    La hiérarchie des titres est respectée
•    Préciser la langue de la page : <html lang=“fr”> (important pour les lecteurs
•    d’écran, qui utilisent la prononciation appropriée)
•    Les images décoratives, qui n’ont pas pour mission d’informer => alt=“” (vide)
Attention, une image qui est un lien n’est jamais considérée comme décorative
•    Dans les tableaux : chaque donnée dispose de sa cellule, et une balise d’entête (th)
•    Placer un mot d’introduction (info utiles) précédant un fichier audio ou vidéo + un titre significatif
•    Une alternative textuelle (retranscription) aux fichiers audio / vidéo est apportée (nom du locuteur + sons tiers aux choses dites : applaudissements, rires, silences...)
•    Les liens sont soulignés (les couleurs franches et contrastées ne suffisent pas)
•    Mouvement : rien ne clignote + de 3x/sec sur une page web
•    Une animation de moins de 5 secondes est autorisée. Si elle fait plus, l’utilisateur doit pouvoir l’interrompre lui-même. Mieux : aucune anim ne démarre sans l’aval de l’usager.
•    Formulaires : les labels sont obligatoires. chaque champ comprend un label spécifique
•    Les couples étiquettes-champs sont indissociables (<label for=“nom”>Nom</label> <input type=“text” id=“nom” name=“nom” />
•    Mentionner le format requis dans les champs (ex : JJ/MM/AAAA)
•    Les champs liés du formulaire sont regroupés par un fieldset + élément legend pour nommer chaque groupe. (Si imbrication de fieldset, se limiter à 2 niveaux)
•    Si menu déroulant très étoffé, regroupement des éléments (TG) à l’aide de l’élément optgroup
•    Les champs obligatoires sont annoncés dans le label (mention : * / (obligatoire))
•    Chaque formulaire est doté d’un bouton d’envoi (submit) visible
•    les erreurs commises lors d’un envoi de formulaire interrompu (champs requis non complétés)
•    Contraintes de temps/Sessions : il n’existe pas de délai ou il est très long
•    Il  formats alternatifs : html, pdf, txt

Fonctionnalités

→ Outils facilitant l’utilisation du site
•    Le site possède des modules d’impression prédéfinis
•    La mise en page de l’impression est satisfaisante
•    Galerie (multimédia photos, vidéos, sons)

Aspects juridiques

→ Législation, RGPD…
•    Les mentions légales et crédits sont présents sur le site (nom de l’éditeur responsable, adresse, numéro de téléphone)
•    La politique de confidentialité est renseignée
•    L’usage des cookies est signalé
•    Le stockage des cookies et/ou la collecte des données peuvent être désactivés

Référencement

→ SEO, SEA…
•    L’adresse url est intuitive et courte
•    Le site apparaît sur la première page de résultats des principaux moteurs de recherche (Google, Yahoo, MSN)
•    Le titre des pages du site informe suffisamment sur le contenu de la page
•    Les adresses des pages sont compréhensibles (permaliens explicites)
•    Les balises utiles aux moteurs sont présentes
•    La balise title est spécifique à chaque page du site
•    Aucune balise meta n’est polluante (fake keywords, revisit-after…)
•    Le code reflète la structure du contenu (web sémantique) ((hn, ol, ul, p, header, nav,
•    aside, article…)
•    La langue est indiquée dans le code
•    Le contenu est hiérarchisé et emphasé pour faciliter l’indexation des pages dans les moteurs de recherche
•    Le fichier robots.txt est correctement configuré
•    Les principales pages du site sont accessibles d’un point de vue moteur (avec un code 200 et non 301, 302)
•    Les mots clés sont mis dans des balises strong

mercredi, 11 juillet 2018

Migrer un site Wordpress

Wordpress

Pour migrer un site Wordpress d'un espace vers un autre, il convient de distinguer l'hébergement 1 (source) et l'hébergement 2 (destination).

  1. Exportez les fichiers depuis l'hébergement 1 vers l'hébergement 2 (votre espace FTP ou local, sous var/www (LAMP/MAMP), wamp/www (WAMP), xampp/htdocs (XAMPP))
  2. Exportez la base de données .sql présente dans votre SGBD 1 (ex : PhpMyAdmin ou Adminer)
  3. Créez une nouvelle base de données ou, si vous n'en avez pas la possibilité, préfixez vos tables avec de nouveaux indices en cherchant/remplaçant les mentions "wp_" au sein de votre fichier .sql par un autre préfixe. Par exemple = "wpnew_"
  4. Importez le fichier .sql(généré à l'étape 2) dans votre SGBD (destination)
  5. Modifiez le fichier wp_config à la racine des fichiers exportés à l'étape 1, changez vos identifiant d'utilisateur, mot de passe, serveur, et le nom de votre base de données si vous en avez changé
  6. Utilisez DB search & replace, placez le fichier décompressé à la racine de votre nouveau dossier Wordpress
  7. Rendez-vous à l'adresse où se situe le dossier DB Search & replace, saisissez vos identifiants de base de données et remplacez l'ancienne adresse URL (source) par la nouvelle (ex : http://monsite.fr par http://localhost/monsite) — pensez à réitérer l'opération une deuxième fois si vous avez saisi des adresses en https:// dans les articles/pages/médias de votre propre domaine
  8. Effectuez un Dry run (changements fictifs), observez si les modifications sont pertinentes et, si c'est le cas, réalisez ensuite un Live run (effectif et réel) qui modifiera toutes les entrées au sein de votre base
  9. Rendez-vous dans votre panneau de contrôle /wp-admin/. Après vous être identifié, rendez-vous dans Paramètres > Permaliens, et revalidez l'option précochée.
Votre déménagement devrait, en principe, être réalisé sans heurts ! ;)

mardi, 5 décembre 2017

RedBeanPHP, un ORM

RedBeanPHPRedBeanPHP est un ORM (Object-Relational Mapping), c'est-à-dire un  type de programme informatique qui se place en interface entre un programme applicatif et une base de données relationnelle pour simuler une base de données orientée objet (définition Wikipédia). RedBeanPHP permet d'interagir avec MySQL, PostgreSQL et SQlite. Parmi les ORM PHP les plus connus, on connaît entre autres Doctrine et Eloquent.

Installation

Pour l'installation de RedBeanPHP, rien de plus simple : il convient de télécharger le dossier compressé le plus récent, qui correspond au SGBDR que vous souhaitez utiliser. Ensuite, déposez le dans votre projet web en cours, et appelez-le dans les fichiers où des interactions avec la base de données sont nécessaires.


// ENTER.PHP

require_once('inc/rb.php');

Ensuite, effectuez la connexion à votre base de données dans un fichier tiers que vous appellerez derrière la ligne de code précitée.

require_once('inc/database.php');

// DATABASE.PHP

// effectuer la connexion
R::setup('mysql:host=localhost;dbname=chat_id','root','');

// vérifier la connexion
$isConnected = R::testConnection();
     if($isConnected !== true) {
       $_SESSION['message'] = "La connexion est inopérante";
       header('location:index.php');
     }

Pensez à installer également l'extension mbstring pour que l'installation fonctionne - à activer sous un Wamp via les paramètres, et à installer sous un Lamp comme suit :


sudo apt install php7.2-mbstring
sudo service apache2 restart

Ceci fait, si votre base de données est déjà créée, le CRUD (create, retrieve, update, delete) peut commencer.


CRUD

Create (INSERT)


// Attention, pour que les insertions passent, l'extension mbstring doit être installée.
$users = R::dispense('users');

$users->login = $user;
$users->password = $password;
$users->email = $email;

$id = R::store($users);

Retrieve (SELECT)

getAll, getRow, getCol génèrent des tableaux ; find, findAll, findMulti des objets.

// Recherche de toutes les données de la table 
$users = R::getAll('SELECT * FROM users');

// Recherche d'une ligne de données spécifique dans la base de données
$user = R::getRow('SELECT * FROM users WHERE login = :login', [':login' => $user]);

// Recherche d'une colonne spécifique
$onoff = R::getCol( 'SELECT onoff FROM onoff WHERE id = :id', [ ':id' => 1 ] );

// Recherche de données correspondant à une requête précise
$questions_user = R::getAll( 'SELECT id,titre FROM questions WHERE user_id = :user_id AND suite = :suite', [ ':user_id' => $user_id, ':suite' => 0 ] );

// Recherche de toutes les données de la table 
$articles = R::findAll('articles', ' ORDER BY date DESC');

// Recherche de données correspondant à une requête précise 
$articles = R::find('articles', 'statut = ?  ORDER BY date DESC', array('1'));

// Compter toutes les valeurs de la table :
$numOfUsers = R::count( 'users' );

// Compter toutes les valeurs répondant à un critère précis
$numOfUsers = R::count( 'users','login = ?', [$user] ); // Compter le nombre de fois qu'est reprise la valeur spécifiée dans la table

// Compter toutes les valeurs répondant à plusieurs critères
$nb_questions_base = R::getCol( 'SELECT count(id) FROM questions WHERE user_id = :user_id AND suite = :suite', [ ':user_id' => $user_id, ':suite' => 0 ] );

// Jouer sur les paramètres descendant, ascendant, et la limite de résultat attendue
$statut_suite = R::getCol( 'SELECT state FROM questions WHERE suite = :suite ORDER BY id DESC LIMIT 1', [ ':suite' => $id_question ] );

Update (UPDATE)


$users = R::load( 'users', $user_id );

$users->mode_reponse = $mode_reponse_set;
R::store($users)

Delete (DELETE)


$table = R::load($_POST['table'], $_POST['id_mot']);
R::trash($table); //for one bean
R::trashAll($table);

Sources

- page 1 de 5