Désactiver l’accélération de scrolling avec une souris sur MacOS

[mise à jour le 4/4/2017] Bien qu’elle marche pour améliorer le comportement de la souris, cette technique a désactivé le scrolling du touchpad intégré.

Lorsqu’on travaille avec un Macbook surélevé pour préserver nous vertèbres cervicales, il faut utiliser une souris Bluetooth.

Avec la Microsoft Wedge Touch, (qui est très mignonne), la vitesse de scrolling était beaucoup trop rapide.

D’abord la page bouge à peine, puis on descend d’un coup. 

Très difficile à contrôler.

Le fait est que sur MacOS, la vitesse est accélérée en fonction du temps écoulé.

Avant de modifier le paramètre, coller le texte suivant dans Terminal pour connaître sa valeur actuelle :

defaults read .GlobalPreferences com.apple.scrollwheel.scaling

Pour désactiver l’effet d’accélération (et rendre la souris « normale »), il suffit de coller le texte suivant dans Terminal :

defaults write .GlobalPreferences com.apple.scrollwheel.scaling -1

Il faut ensuite se déconnecter avant que ça ne marche.

Merci à Dolph Mathews

Documents vierges avec calques par défaut dans Adobe Illustrator

Il est très simple d’ouvrir un nouveau document dans Adobe Illustrator avec toutes les préférences qu’on veut, y compris les calques, contenus de base etc.

MODIFIER LE RACCOURCI POUR UN NOUVEAU DOCUMENT

  1. naviguer dans Edition » Raccourcis Clavier (en dernier)
  2. sous “Commandes Menu”, modifier le raccourci pour “Nouveau d’après un modèle” à cmd-N
  3. cliquer “Oui” pour écraser les préférences précédentes

METTRE VOS MODÈLES DANS LEUR DOSSIER

Mettre les modèles dans [dossier de l’application]/Bonus/fr_FR/Modèles

Créer un “alias” de Modèles dans le dossier de l’application pour y accéder plus facilement.

CRÉATION DE NOUVEAUX MODÈLES

Chaque fois qu’on crée un nouveau document, il nous sera demandé de choisir un modèle.

Au début, il va falloir créer les modèles au besoin. On peut aussi les copier depuis :

~/Library/Application Support/Adobe/Adobe Illustrator 19/fr_FR/New Document Profiles

Une police italique ne s’affiche pas correctement sur la page SVG

Sur la page nous avons utilisé la version normale et aussi la version italique d’une police mais la version italique a été remplacé par la police par défaut.

Cela se passe uniquement dans Safari Mobile.

Le problème vient du fait qu’on a précisé “italic” comme style :

@font-face {
font-family:‘MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:italic;
}

En exportant le SVG depuis Illustrator, la police est listée avec son nom mais pas son style. La solution est de changer le style à “normal” :

@font-face {
font-family:’MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:normal;
}

L’ordre des calques d’un fichier Illustrator et l’ordre d’affichage du fichier SVG

Récemment nous avons fait une page très longue, et en visitant le site nous avons remarqué que la page prenait trop de temps à charger.

Après un peu de réflexion, nous nous sommes rendus compte que l’on s’était trompé en créant le fichier Adobe Illustrator.

Admettons qu’il y a cinq modules d’information sur la page :

  1. Titre
  2. Bloc présentation
  3. Bloc services
  4. Bloc témoignages
  5. Pied de page

Sans réfléchir, nous avons suivi le même système en y dédiant des calques dans Illustrator :

image

Mais en traitant cette page qui chargeait lentement, on s’est rendu compte que le fichier SVG était construit dans le sens contraire :

<svg…
   <g id=pied_de_page…
   <g id=bloc_temoignages…
   <g id=bloc_services…
   <g id=bloc_presentation…
   <g id=titre…
</svg>

Le résultat fait que pour une page lourde en images, l’image du haut de page charge en dernier.

C’est évident quand on y pense, seulement nous n’y avions pas pensé.

La solution, bien entendu, est d’inverser l’ordre des calques dans Illustrator :

  1. Pied de page
  2. Bloc témoignages
  3. Bloc services
  4. Bloc présentation
  5. Titre

Virtual hosts Apache en local ne marchent plus après l’installation de MacOS 10.12.4 public beta 8

Après la mise à jour du système Mac avec le « Public Beta » version 8 de MacOS 10.12.4, tous les sites qu’on a configurés localement ont cessé de fonctionner dans Safari.

Les sites étaient configurés dans le fichier

/etc/apache2/extra/httpd-vhosts.conf

Les symptômes étaient bizarres : parfois la page chargeait mais les images non, parfois les pages non-trouvées.

Les sites marchaient correctement dans Google Chrome mais pas dans Safari.

Après un peu de recherche, on a déterminé que MacOS a parfois du mal quand il est configuré pour utiliser les adresses IPv6 et ne trouve que des adresses IPv4.

LA SOLUTION :

  1. Modifier le fichier /etc/hosts
  2. Ne PAS TOUCHER à la ligne « 127.0.0.1 localhost »
  3. Modifier les adresses IP des autres noms de domaine de 127.0.0.1 à ::1

Il faut en suite redémarrer le serveur :

sudo apachectl restart

Comment remettre une image à rotation 0° dans Adobe Illustrator

Si on a tourné une image dans Illustrator, comment la remettre comme elle était, c’est à dire à 0° de rotation ?

  1. Ouvrir la palette « Liens » (sous fenêtre)
  2. Cliquer sur l’image tournée
  3. Regarder dans « Liens » sous « Echelle » et on voit le dégré de rotation
  4. Ouvrir la palette « Transformation »
  5. Dans la dernière case à gauche (« Rotation »), mettre la valeur négative de ce qu’on a vu dans « Liens ». Si la valeur dans « Liens » était 10,30°, mettre -10,30° par exemple.

Menu hamburger cassé dans thème Weebly “Slick”

En construisant un site e-commerce pour notre client Darla, nous nous sommes rendu compte qu’en utilisant le thème Slick, le menu dynamique avait arrêté de marché.

Après beaucoup de recherches, nous avons trouvé la cause :

  • Il y a un module e-commerce “catégories” sur la page d’accueil
  • Dans les options d’affichage du module, “Nom” a été désélectionné.

En rajoutant le nom au module, les menus ont commencé à fonctionner correctement.

Page trop large dans Edge & Internet Explorer ?

Quand on fait un site à base de pages SVG, parfois on constate que dans les navigateurs Edge ou Internet Explorer (Microsoft), les ascenseurs horizontaux sont trop longs : la page est trop large pour le SVG.

C’est à dire qu’il y a un grand espace blanc à droite de la page.

Ceci arrive quand le SVG principal contient des éléments qui dépassent les bords de la page.

Même si ces éléments ne sont pas visibles, les navigateurs Microsoft laissent de la place pour les accommoder.

Pour régler la situation il suffit d’ajouter à votre CSS :

    svg{
      overflow:hidden;
    }

Comment savoir si le visiteur est sur mobile?

Il est nécessaire d’envoyer un visiteur qui arrive sur un petit écran vers une version adaptée de votre site.

Mais comment savoir si son appareil est un téléphone ou un ordinateur ?

Le moyen que nous utilisons est simple, stable, et nous permet de voir la version “bureau” ou la version “mobile” au choix sur n’importe quel appareil.

Si la fenêtre du visiteur est en format paysage (plus large que haute) nous allons afficher la page en version “bureau”.

Si la fenêtre du visiteur est en format portrait (plus haute que large) nous allons afficher la page en version “mobile”.

<script>

  // point de basculement
  var pb = 0.9;

  var ratio = window.innerWidth / window.innerHeight;

  var l = location.href;
  
  // de bureau à mobile
  if (ratio < pb && !cestMobile(l)) location.href = [version mobile];
		
  // de mobile à bureau
  if (ratio >= pb && cestMobile(l)) location.href = [version bureau];

  function cestMobile(hrf){
    if [déjà mobile] return true;
    else return false;
  }

</script>

Javascript pour re-dessiner la page

Dans l’article précédent nous avons trouvé un moyen d’adapter la page à la taille de la fenêtre.

Le seul problème avec cette technique, c’est que si le visiter modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution, c’est de re-dessiner la page lorsque le visiteur modifie la fenêtre.

Malheureusement, window.onsresize est déclenché, non seulement quand la fenêtre est modifiée, mais aussi quand elle est zoomée.

Pour redessiner la page quand la fenêtre est modifiée mais éviter de le faire quand la fenêtre est zoomée, on regarde les proportions de la page:

  • onresize avec changement de ratio L/H = re-dessiner la page
  • onresize sans changement de ratio L/H = ne rien faire
  <script>

	var delai = 0.5;
	var already = 0;
	var rat = ratio();

	window.onresize = function(event) {
		var hrf = window.location.href;
		if (hrf.substr(-1) == '+') return false;

		if (ratio() == rat) return false;
		if (!already){
		already = 1;
		setTimeout(redraw, delai * 1000);
		}
	};	

	function redraw(){
		already = 0;
		window.location.reload();
	}

	function ratio(){
		var w = window.innerWidth;
		var h = window.innerHeight;
		var r = Math.round(w/h*10);
		return r;
	}

  </script>

Ce script n’a pas d’intérêt pour les pages destinées aux appareils mobiles, car la fenêtre ne peut changer de format.