Découvrez le pays enchanté de la

L 11206

- 157 - F

: 5,90 €

- RD

Qu’est-ce que c’est? Comment ça fonctionne? Les services que ces applications vont vous rendre!

APPLE OFFRE AUXIPAD UN SYSTÈMEDÉDIÉ ET MUSCLÉ!

Réalité Augmentée

macOS 10.15

Coup d’œil surla nouvelle version de macOS

Sublimez vos photos avec une application dopée à

l’Intelligence Artificielle

!Limitez les risquesNotre sélection de huit navigateurs web alternatifsqui jouent la carte Sécurité

!Confidentialité et vie privée

Les astuces et les outils pour contrer les sites quivous pistent sur Internet

!Pilotez tous vos appareils connectés

Vos premiers pas avec l’application Maison sur Mac et iOS

!Dans le Finder…Des stratégies pour mieux organiser la gestion de tous vos fichiers

Vous

et Vo

treM

ac

N° 157 • Juillet-Août 2019 100 % Mac en pratique

COUV 157.qxp_Mise en page 1 06/06/2019 12:28 Page1

Personne n’ignore plus le pistage publicitaire sur Internet. Les sites commerciaux redoublent d’ingéniosité pour identifier, établir le profil des internautes et les suivre dans le seul but de leur proposer des publicités ciblées, censées être plus efficaces pour provoquer l’acte d’achat. Le point clé, c’est l’identification formelle, même si elle se fait généralementde façon anonyme, par le biais d’un identifiant numérique stocké dans un cookie. Vous avez sans doute pris des mesures de protection, paramétré finement votre navigateur, ou installé un des nombreux utilitaires qui effacent les cookies, interdisent lescookies-tiers, vident les caches et le stockage Local (Local Storage)… L’utilisation des cookies, trop connue du grand public, est en passe d’être remplacée. Il estde plus en plus courant d’identifier les utilisateurs par «l’empreinte digitale» numérique de chaque navigateur; chacun possède en effet une « empreinte digitale » numérique qui, à l’instar des empreintes biométriques, s’avère souvent unique.

POURQUOI PARLE-T-ON « D’EMPREINTE DIGITALE »?C'est la traduction «largement acceptée» de l’expression anglo-saxonne Browser Fingerprinting. Cette méthode, de plus en plus utilisée, est l’exploitation de l’ensembledes données venant du navigateur, qui permettent de vous identifier, si possible de manière unique. Lorsque vous vous connectez à un site Internet, votre matériel et votre environnement, quels qu’ils soient – appareils mobiles inclus –, transmet au serveur une requête HTTP. Cette dernière contient, dans son en-tête, l’agent utilisateur (User-Agent)qui expose de nombreuses informations sur votre environnement, telles que le nom et laversion du navigateur, le système d’exploitation, la langue, le matériel… Voici un exemple de User-Agent avec Safari:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15L’agent utilisateur est utile aux webmestres pour délivrer une page web adaptée à l’environnement de l’utilisateur. Il fournit une partie des informations utiles pour constituer l’empreinte digitale de

votre navigateur, mais ce n’est pas suffisant, car des millions d’utilisateurs utilisent Safari 12.0.3 sous macOS Mojave! Ces informations sont donc complétées avec les données récupérées par le biais dupuissant langage JavaScript. De quoi connaître la liste des extensions installées, la langue, le fuseau horaire, la liste des polices de caractères, la résolution de l’écran, lataille de la fenêtre du navigateur, la vitesse de frappe, l’utilisation ou non d’un bloqueur de publicité (AdBlock)… Du croisement de tous ces éléments, et bien d’autres, résulte une signature souventunique tout comme l’est l’empreinte de nos doigts. C’est donc la diversité logicielle etmatérielle de nos plateformes qui est exploitée pour nous tracer.Vous pouvez déterminer le niveau de protection de votre navigateur vis-à-vis des différentstraqueurs, dont la protection contre la prise d’empreinte digitale, en vous rendant sur lesite PanoptiClick [1] (https://panopticlick. eff.org) de l’EFF (Electronic Frontier Foundation).Et vous pouvez aussi vérifier l’unicité de l’empreinte digitale de votre navigateur en allantsur le site open source amiunique (https://amiunique.org/) [2]. Celui-ci m’apprend que mon empreinte est unique parmi les 1 131 430 empreintes enregistrées! En cliquant Voir plus de détail, on a accès à l’ensemble des données constituant l’empreinte digitale numérique.

DES TECHNIQUES EN CONSTANTE ÉVOLUTIONEn 2014, une nouvelle technique d’identification de l’internaute est apparue, le CanvasFingerprinting (que je traduis par «empreinte digitale sur canevas»). Les sites utilisant le langage HTML 5 peuvent utiliser une API (appelée Canvas) qui permetde dessiner des graphiques et des animations sur une page web et qui est « détournée » pour servir à la prise d’empreinte des navigateurs. Il s’agit de « dessiner » surle canevas du navigateur (le fond d’écran invisible pour l’utilisateur) mais sans rien afficher, un texte avec une police et une taille définie par le script ainsi qu’un graphiqueen 3D. Leur représentation en pixels est unique, dépendant étroitement de l’environne-ment (carte graphique, pilotes, polices…). Celle-ci est convertie en jeton numérique quipeut être stocké sur le site web visité et éventuellement partagé avec des partenaires

34 | Vous et Votre Mac 157 | Juillet-Août 2019

Pour vous pister et vous servir de la publicité toujours plus ciblée, les cookies sont passés de mode. Aujourd’hui, des programmes sont capables de déterminer votre «empreinte digitale» numérique. De quois’agit-il et comment peut-on les contrer? DENIS DUBOIS

Maîtriser l’empreinte digitale de

SOL-157 [DD] Emprinete digitale numérique (2P).qxp_Mise en page 1 31/05/2019 15:27 Page34

marketing. Aucune donnée n’étant stockée sur l’appareil, il est impossible d’effacer l’empreinte. Le site Unique Machine (http://uniquemachine.org) [3]permet de visualiser en temps réel le Canvas Fingerprinting, habituellement invisible. Le site Browserleaks (https://browserleaks.com/canvas), plus complet, indique si la technique du « canevas » est prise en charge par votre navigateur et vérifie si elle peut permettre de vous suivre. Il affiche l’image du canevas, sa signature numérique (jeton) et son taux d’unicité.

COMMENT CONTRER CES TECHNOLOGIES?À ce stade, vous vous demandez sans doute, quelles sont les contre-mesures possibles?Voici quelques solutions simples envisageables… D’abord, on peut envisager de désactiver JavaScript et Flash, c’est très efficace. Cela bloquera le recueil de nombreuses informations censées compléter celles de l’agent utilisateur; hélas, le fonctionnement de nombreux sites risque d’en être fortement altéré. Le mode navigation privée de votre navigateur, par l’utilisation de profilssimilaires, réduit également de manière considérable le risque d’avoir une empreinte digitale unique. Certaines extensions de navigateurs dédiées comme Privacy Badger de l’EFF, DoNotTrackMe (Firefox) ou le puissant Disconnect (https://disconnect.me), sont capables de bloquer les tentatives de suivi par les sites tiers – mais pas par le site visité. Toutefois, le paradoxe est que plus vous installez d’extensions et plus vous devenez identifiable comme le démontre une expérience de l’INRIA (https://extensions.inrialpes.fr).Il est possible de modifier l’agent utilisateur du navigateur qui est utilisé, en partie, pour générer l’empreinte digitale; il s’agit ici de tromper les sites avec de fausses informations. Mais cette solution peut poser quelques inconvénients: la mise en page etcertaines fonctions des sites web consultés risquent d’en souffrir. De plus, s’il y a des incohérences dans les informations récoltées, cela risque de vous rendre immédiatement identifiable. Safari propose nativement cette possibilité dans

son menu Développement [4] (à activer dans les Préférences Avancées). Pour les autres navigateurs, il suffit de saisir le terme « User-Agent Switcher » dans la fenêtre de recherche des extensions.Si vous êtes prêt à changer vos habitudes de navigation, adoptez un navigateur sécurisécomme Brave ou UR Browser (lire VVMac n°156) qui tous les deux intègrent un outilAnti-Fingerprinting – mais d’après mes tests, seul Brave a été en mesure de bloquer efficacement le Canvas Fingerprinting. Le navigateur Tor Browser (https://www.torproject.org/fr) avertit l’utilisateur lors d’une tentative de prise d’empreinte [5]et peut retournerl’empreinte d’une page blanche pour la déjouer. C’est une solution efficace à utiliser maisponctuellement car la navigation s’en trouve très ralentie. Le prochain Firefox 67 intégreraun procédé anti-fingerprinting, emprunté à Tor Browser et connu sous le nom deLetterboxing; il consiste à masquer la taille réelle de la fenêtre de navigation en affichant artificiellement des bandes grises de chaque côté de cette dernière, de façon à ce que les dimensions soient identiques pour tous les utilisateurs.

35 | Vous et Votre Mac 157 | Juillet-Août 2019

votre navigateur web

SOL-157 [DD] Emprinete digitale numérique (2P).qxp_Mise en page 1 05/06/2019 13:56 Page35

4213033092588534414740487527565255111

J’AIMEL’interface simple et intuitive; la totale liberté de mise en page tout en bénéficiant de l’adaptivité quasiautomatique des pages; la gestion desgabarits; pas d’abonnement.

J’AIME MOINSPas d’intégration de vidéos hors hébergement externe (YouTube…);quelques (rares) instabilités liées à lanouveauté du produit; le prix d’entréeest trop élevé, par rapport à d’autres solutions comme Wix ou un éditeur autonome comme Everweb.

FRANÇAISPrix: 99€ (139€ licence familiale, Business 199€)Config.: OS X 10.9+Éditeur: Intuispherehttps://www.webacappella.com/fr/

Vous avez un ou plusieurs projets sérieux de sites internet, mais vous ne connaissez pas les langagesdu web, ni le HTML, le CSS, le JavaScript, PHP ni Bootstrap? Passer par un professionnel peut coûtertrès cher. Tournez-vous vers un éditeur 100 % visuel. Par exemple, le tout nouveau WebAcappella Fx.Sans avoir à coder, vous vous concentrez sur la mise en page de vos contenus, tandis que le logiciels’occupera de générer le code et de publier les pages en ligne.

62 | Vous et Votre Mac 157 | Juillet-Août 2019

WebAcappella Fx

Intuisphere est une société françaisequi développe l’application decréation de site WebAcappelladepuis 2005. Disponible pour Mac et Windows, il fait partie de cettenouvelle génération d’éditeurs «sans

codage», mais conforme aux standards duWeb et offrant un niveau de performancesans concession.Pour la petite histoire, WebAcappella 4,sorti en 2010, apprécié pour sa souplesse,sa richesse fonctionnelle et sa facilitéd’utilisation, reste jusqu’à ce jour, le grandsuccès de l’éditeur. En 2016, son successeurWebAcappella Responsive s’adapte auxnouveaux usages du web, pour l’affichagesur les smartphones et tablettes avec uneversion dite responsive, qui s’adapteautomatiquement au format de l’écrangrâce à un système de grille. Cette fonction,dorénavant indispensable, s’appuie sur laboîte à outils Bootstrap et consiste à afficherles éléments de mise en page sur unegrille. La mise en page est pluscontraignante et plus complexe d’autantque l’absence de compatibilité oblige lesclients historiques à « rééditer » leurs pages.De fait, peu de clients de la version 4migrent sur cette nouvelle version pourtantde qualité. Rétropédalage pour Intuispherequi, deux ans plus tard, nous présente

WebAcappella Fx, avec un système de miseen page similaire à la version 4,notamment la grande liberté de placementdes éléments « au pixel près », en gommantla (relative) complexité de Bootstrap, maistout en restant Responsive. Surtout, lesclients de la version 4 peuvent importerleur site en contrepartie de petitesadaptations nécessaires. Dans la foulée,pour éviter toute confusion, WebAcappellaResponsive est renommé WebAcappellaGrid en référence aux grilles de Bootstrap.Les deux produits vont évoluer dorénavantchacun de leur côté –avant deprobablement s’unifier dans le futur.

UNE BELLE PANOPLIE DE MODULESD’une grande sobriété, qui peut étonner deprime abord, l’interface de l’application estclaire et très bien conçue [1]. Au premierlancement, on est invité à créer un nouveauprojet, à partir d‘une page d’accueil viergeou en s’inspirant d’un des cinq modèles de sites proposés tous très soignés [2] –d’autres devraient suivre. Ensuite, on ajoute

Un éditeur web français modernelibre et responsive à la fois

PEM-157 [DD] Webacappella Fx (2P).qxp_Mise en page 1 31/05/2019 15:54 Page62

63 | Vous et Votre Mac 157 | Juillet-Août 2019

des éléments à sa guise sur la page enconstruction; il s’agit de composants visuelsà glisser et positionner librement sur lapage, au pixel près. WebAcappella Fx,contrairement à la version WebAcappellaGrid, autorise la plus complète libertécréative.Il y a une vingtaine de «modules», classéspar thématique [3]: pour le web (texte,image, boîte de remplissage), pour lanavigation (menu, ancre, boutons…), pourles formulaires (bouton radio, case à cocher,liste déroulante, etc.) et pour les contenusmultimédias (carrousel de photos avecboutons de défilement, galerie de photosavec miniatures, audio, vidéos). On retrouve donc tout ce qu’il faut pourcréer une page web moderne ou unformulaire de contact.Chaque module affiche un certain nombrede paramètres spécifiques dansl’Inspecteur de propriétés, à droite de lafenêtre principale. Ils sont très importantspour personnaliser l’interface,personnaliser leur comportement, définirdes liens (vers une page interne au site, unsite web, une adresse mail ou un fichier àtélécharger), appliquer des effets

d’animations, de rotation, rendre certainséléments flottants, comme un menu parexemple, pour qu’il reste toujours visiblelors du déroulement de la page. Certainsmodules bénéficient d’une fonctiond’habillage de texte qui repousse le textepour qu’il épouse la forme d’une image parexemple. Idéal pour publier un webzine.Les gabarits sont des pages particulières qui fonctionnent à la façon des calquesgraphiques, par juxtaposition. Ellespermettent de répéter les mêmeséléments, comme un logo ou un pied depage, sur plusieurs pages, voire sur toutesles pages du site.On teste le rendu à tout moment encliquant un bouton dédié dans la barred’outils: il lance un navigateur et y affichelocalement une page totalementfonctionnelle. Pour vérifier le rendu d’unepage responsive sur un appareil mobile,comme un smartphone ou une tablette, unbouton spécifique affiche un QR code [4]qu’il suffit de scanner avec la caméra del’appareil pour afficher la page dans leformat adapté!

PROPRIÉTÉS DE PAGEUne fois la page créée, on définit sespropriétés à l’aide d’un dialogue dédié. Cela consiste à lui donner un nom, un titre,une description et une extension (HTML ouPHP). Ces informations sont utiliséescomme balises MÉTA pour leréférencement de la page sur les moteursde recherche. On peut également choisirune couleur ou une image d’arrière-plan et,éventuellement, ajouter du code HTMLpersonnalisé, dans l’en-tête (balise HEAD)ou dans le corps (balise BODY) de la page.Enfin, on peut marquer « en construction »

une page en cours de création ou demodification, afin qu’elle ne soit paspubliée en ligne.

GÉRER L’ADAPTIVITÉ DES PAGESVient le moment de définir les propriétésgénérales du site (bouton Engrenage). C’est dans ce dialogue [5] que l’on activeles caractères responsive et multilingue dusite. En mode responsive, on gère la miseen page pour deux ou pour trois formatsd’écran (bureau, smartphone et tablette).Cette fonction assure une mise à l’échelleautomatique selon le format d’affichage de l’appareil mais dans certains cas, il faudrabien entendu intervenir manuellementafin d’ajuster ou de masquer certainséléments selon le format de l’écran ou la langue.On peut créer un Favicon qui sera affichédans les signets des navigateurs quisupportent cette fonction.Afin de se mettre en conformité avec leRGPD (Règlement Européen sur laProtection des Données), si l’on veut stockerdes informations personnelles, notammentvia des cookies, il faut inclure un bandeaud’information à destination des visiteursqui explicite l’utilisation de leurs données.Avec WebAcappella Fx, la bannière RGPDs’affiche d’un clic! Enfin, toujours dans lespropriétés générales, on a la possibilitéd’injecter du code HTML personnalisé, du JavaScript et du CSS dans les en-têtes etle corps de toutes les pages du site.

PUBLIER SON SITEUne fois les pages réalisées, WebAcappellaFx peut les publier intégralement en un clic,via FTP, sur le serveur d’hébergement. Il faudra donc disposer d’un hébergement

mutualisé chez un prestataire ou d’unespace (généralement gratuit) chez votrefournisseur d’accès Internet, auprès duquelvous récupérez vos codes de connexion FTP.Deux modes sont proposés. Le transfertpeut s’effectuer directement parWebAcappella Fx qui gère le protocole FTP(avec mise à jour globale ou incrémentaledu serveur) ou à partir d’un dossiercontenant l’ensemble des fichiers du site –dans ce dernier cas, il faudra recourir à unlogiciel de transfert FTP externe.WebAcappella Fx évolue vite. Si GoogleMaps est encore absent,les statistiquesfournies par Google Analytics sontdésormais supportées. Il est toujours possible d’ajouter à la main le code HTML/JavaScript correspondant. On trouve d’ailleurs certains scripts dans lesmodèles proposés. L’application estactuellement incompatible avec l’actuelmodule d’e-commerce, WebAcappellaMarket qui est basé sur Bootstrap. Il seracertainement adapté à l’avenir, car lademande des utilisateurs est forte. Même s’il s’appuie sur l’expérienced’Intuisphere, WebAcappella Fx est unproduit jeune; il est très prometteur et a ungros potentiel. C’est un produit idéal pours’investir dans l’espace web sans avoirbesoin de faire l’apprentissage deslangages et des technologies. Maisattention, l’application n’est pas «donnée»et si vous n’avez en tête qu’un petit projetponctuel, la page de votre CV, vous aurezintérêt à vous tourner vers des sitesd’édition tels que Wix –dont la gratuitéprésente bien sûr d’autres contraintes. Par ailleurs, sur le même terrain, libre etresponsive, WebAcappella a un concurrentsérieux avec Everweb. DENISDUBOIS

PEM-157 [DD] Webacappella Fx (2P).qxp_Mise en page 1 31/05/2019 15:54 Page63

4213033092588534414740487527565255111