Prepare yourself, mobilmageddon is coming !

site responsive compatible mobile

En février 2015, Google a annoncé qu’il allait modifier son algorithme (la manière dont il traite les sites internet et affiche les résultats d’une recherche) pour prendre en compte la compatibilité mobile d’un site internet : cette modification, c’est aujourd’hui, mardi 21 avril 2015.

On en a déjà parlé ici, un site compatible mobile, responsive donc (taille de police adaptée, navigation adaptée aux plus petits écrans…), est aujourd’hui une condition indispensable pour le développement de votre entreprise sur internet. Une majorité du trafic provenant des mobiles et tablettes (dont la vente a explosé ces dernières années) et la décision de Google de prendre en compte cette compatibilité est alors tout à fait normale et même souhaitable.

Le terme mobilemageddon vient du fait que malheureusement de nombreux sites ne sont pas encore compatibles mobiles, du coup de nombreux dirigeants, webmaster et acteurs du monde connecté redoutent un déclassement de leur site dans le moteur de recherche. Si cela peut vous « rassurer » la mise à jour de l’algorithme ne concerne que les versions mobiles de Google (site et application). Ce que vous pouvez redouter est simple : au lieu d’avoir un site moyennement visible sur mobile (car non compatible), vous allez avoir un site encore moins visible sur ces mêmes support…

La solution est simple, demandez à Ornitorinc un audit de votre site ou de le rendre directement compatible mobile et tablette !

Pourquoi et comment avoir un site compatible mobile ?

Parce que :

creation de site mobiles

Plus sérieusement, le web mobile représente plus de 20% des internautes sur le web (source) et dans la pratique, pour des sites web de PME françaises (nous sommes bien placés pour le savoir à Ornitorinc) il s’agit de plus de 25% en moyenne.
Alors pour atteindre ces internautes (qui sont de plus en plus nombreux) et pour éviter un fâcheux incident illustré par l’image ci-dessus, rendez votre site compatible mobiles et tablettes !

Créer une tache CRON chez 1and1

créer tache cron chez hébergeur 1and1

Qu’est ce qu’une tâche CRON ou CRONjob ?

Il s’agit d’une tâche automatisée, appelée à intervalles réguliers et permettant par exemple d’alimenter une base de données, d’envoyer des mails ou de faire ce que vous voulez sur votre site internet.

Concrètement, vous pouvez décider que tous les jours à 3h du matin vous allez appeler un script PHP (ça marche aussi avec d’autres langages :) ) pour, par exemple, insérer dans une base de données MySQL des informations provenant d’un flux XML.

1and1 et les tâches CRON

Si vous avez un hébergement mutualisé chez OVH, le processus est très simple : grâce à l’interface d’administration il vous suffit d’indiquer le chemin du script, la fréquence d’exécution et c’est tout!

Chez 1&1, en mutualisé, il n’est pas possible (il me semble, à confirmer) de créer de tâche CRON, il faut avoir un serveur dédié… et ne pas avoir peur de lignes de commande Linux.

En suivant les étapes ci-dessous vous devriez y arriver sans problème.
Je ne m’intéresserai pour le moment qu’à MacOS (et par extension tous les systèmes Linux), je compléterai l’article avec la procédure Windows lors d’une mise à jour.

Connexion en SSH au serveur 1&1

Cette première étape nécessite:

  • l’identifiant du compte FTP principal, de la forme « u768554814« ,
  • le mot de passe associé,
  • le nom de domaine par défaut du serveur lorsque vous avez ouvert votre compte, ex: « s123456789.onlinehome.fr« 

Ouvrez ensuite l’application Applications > Utilitaires > Terminal et entrez la commande suivante, en prenant soin d’y intégrer vos propres paramètres :
ssh u768554814@s123456789.onlinehome.fr

On vous demande alors votre mot de passe que vous devez entrer : u768554814@s123456789.onlinehome.fr’s password: 

Attention, par mesure de sécurité celui-ci ne s’affiche pas lorsque vous le tapez, c’est normal !

Vous êtes connecté en SSH.

Programmation de la tâche CRON

Je ne parlerai pas de la création de votre script PHP étant donné que cela dépend entièrement de vos besoins, j’aborderai cependant à la fin de l’article des soucis que vous pourriez rencontrer et comment les régler.

Tout d’abord récupérez le chemin exact de votre script php grâce à
<?php echo $_SERVER['DOCUMENT_ROOT'];?>
quelque chose comme ça s’affichera :
/kunden/homepages/25/d424931851/htdocs/
Mettez ça de côté, vous en aurez bientôt besoin.

Dans la fenêtre du terminal entrez la commande crontab -e (éditer les tâches CRON).

Appuyez sur la touche « i », vous serez alors en mode « Insert » ce qui vous permettra d’ajouter une nouvelle ligne et de créer votre tâche CRON.

Positionnez le curseur après les lignes de commentaires (signalées par un caractère #) et entrez ceci, l’explication suit juste après :

59 23 * * * /usr/bin/php5.4 /kunden/homepages/25/d424931851/htdocs/chemin_vers_votre_script > /kunden/homepages/25/d424931851/htdocs/chemin_vers_fichier_log/file.log 2>&1

  • 59 23 * * *  correspond à la fréquence d’exécution du script : minute, heure, jour, mois, jour de la semaine (une notice pour savoir comment paramétrer la fréquence)
  • /usr/bin/php5.4 indique que votre script utilise PHP 5.4 (si vous ne l’indiquez pas vous risquez d’obtenir une erreur)
  • /kunden/homepages/25/d424931851/htdocs/chemin_vers_votre_script le chemin vers votre script php que vous aurez trouvé grâce à $_SERVER['DOCUMENT_ROOT']
  • /kunden/homepages/25/d424931851/htdocs/chemin_vers_fichier_log/file.log 2>&1 indique qu’on va enregistrer dans un fichier file.log toutes les erreurs qui peuvent avoir lieu lors de l’exécution du script

Une fois que vous avez vérifié les différents chemins, appuyez sur la touche « Esc » puis entrez « :x » pour sauvegarder la tâche et quitter le mode édition.

C’est fini, votre tâche CRON va s’exécuter tous les jours à 23h59.

Pour tester votre tâche CRON en « situation réelle » vous pouvez indiquer */10 * * * * ce qui déclenchera l’exécution du script toutes les 10 minutes.

Vérifier la bonne mise en oeuvre de sa tâche CRON

Pour vérifier que le script va s’exécuter sans erreur, dans la même fenêtre du terminal, entrez la commande suivante et patientez :

php5 -f /kunden/homepages/25/d424931851/htdocs/chemin_vers_votre_script > /kunden/homepages/25/d424931851/htdocs/chemin_vers_fichier_log/file.log 2>&1

Le script PHP va être exécuté, les erreurs potentielles s’afficheront dans la fenêtre et s’enregistreront dans le fichier log que vous avez indiqué.

Il se peut qu’en mode CRON, les fonctions PHP d’accès aux fichiers par URL soient désactivées, exemple: get_url_content(), simple_load_xml()…
Pour corriger ce comportement et en autoriser le fonctionnement, créez un fichier nommé « php.ini » à la base de votre serveur, dans lequel vous allez ajouter cette ligne : allow_url_fopen = ON

Pour être sûr d’indiquer la bonne version de PHP (ex : /usr/bin/php5.4), entrez la commande whereis php dans la fenêtre du terminal lorsque vous êtes connecté en SSH, voilà ce qui apparait :tache cron whereis php

Version Windows pour plus tard !

Créer un onglet (tab) sur votre fanpage Facebook

Vous êtes une entreprise, vous avez une fanpage Facebook et vous souhaitez mettre en valeur un produit, une action de communication ou mettre à disposition de vos visiteurs un outil spécifique : la création d’un onglet est la solution !
Suivez le pas-à-pas pour la création de l’onglet sur votre page fan Facebook.

« Attendez, mais où se trouvent donc ces onglets ? » allez-vous me dire! Réponse en image.

onglet-fanpage-facebook

Étape 1 : créez une nouvelle application

Connectez-vous avec vos login habituels à la page developpeurs Facebook.

Cliquez sur le bouton « Créer une application » et remplissez les champs de la popin qui vient de s’afficher : « Nom de l’application » correspond au nom de l’application qui permettra de créer votre nouvel onglet et « Espace de nom de l’application » sera le nom « technique ».
Puis validez en cliquant sur « Continuer ».

Etape 2 : paramétrez l’onglet Facebook

La nouvelle fenêtre qui s’affiche vous permet de donner le nom officiel de votre onglet, d’indiquer l’emplacement sur votre propre serveur de la page qui s’y affichera, de gérer la largeur du contenu de l’onglet (large ou étroit) et de lui ajouter une icône.
N’oubliez pas de remplir « App Domains » avec votre nom de domaine pour indiquer à Facebook que votre domaine est autorisé à « travailler » avec Facebok.
Dernier point important, indiquez une url sécurisée dans la case « Secure Page Tab URL », sans quoi l’internaute qui naviguera sur votre page en mode sécurisé verra un message d’avertissement et pourrait hésiter à continuer.

creation onglet facebook developper

Étape 3 : ajoutez votre onglet à votre fanpage Facebook

Cette étape est assez simple, il suffit de vous rendre sur la page https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&redirect_uri=YOUR_URL en prenant bien soin de remplacer YOUR_APP_ID par le chiffre donné à l’étape précédente et YOUR_URL par l’adresse de votre site internet (http://www.toto.com par exemple).

A vous de classer votre nouvel onglet dans l’ordre que vous souhaitez en cliquant sur la petite flèche qui apparait au survol de la souris !

onglet-fanpage-facebook
Rien de foncièrement compliqué, pour la simple et bonne raison que la difficulté arrivera dans un prochaine article qui concernant l’intégration totale de facebook au sein de votre nouvel onglet : récupération de l’id de l’internaute, de son nom…

Quelques outils pour webmaster et webdesigner

outils-pour-webmaster-creation-site

Quand on crée un site internet, il existe plusieurs outils qui permettent d’être beaucoup plus efficace : plugins Firefox, simulateurs de navigateurs, serveurs javascript…
Voici une liste non exhaustive pour les développeurs et webdesigner qui souhaitent gagner du temps!

Plugins Firefox pour webmaster

L’un des plugins les plus connus est Firebug. Il permet de détecter précisément les erreurs javascript, CSS et Html et de modifier en temps réel les styles et différents noeuds Html qui composent la page. Un must pour tous les développeurs et aussi les webdesigner !

Firebug aurait été parfait si il avait été possible de sauvegarder les modifications CSS effectuées en live : gain de temps impressionnant assuré. Pour combler ce manque, il existe 2 autres plugins, malheureusement à moitié opérationnels.
Il s’agit du plugin Firefox Firefile dont le programme Beta n’est plus ouvert, si quelqu’un arrive à contacter son créateur pour savoir où en est l’évolution de son plugin je suis preneur! Et Firefile c’est par ici : www.firefile.at

L’autre plugin ayant la même fonction mais qui a eu quelques ratés lorsque je l’ai utilisé est  cssUpdater qui fonctionne correctement mais qui a mon avis nécessiterait une petite mise à jour. Ma feuille de style a en quelque sorte été réinitialisée une fois et toutes les modifications ne sont pas sauvegardées… A tester plus en profondeur pour les curieux : www.cssupdater.com.

Tester le rendu d’un site sur tous les navigateurs

Le titre de ce chapitre est plutôt clair : comment s’assurer de la bonne compatibilité d’un site que l’on vient de créer sur tous les navigateurs actuels et passés alors que l’on a un Mac ou un PC ? Voici une liste des outils les plus fiables :

  • www.browserstack.com : le must, mais payant au bout d’un moment, permet de tester son site en situation réelle. Existe aussi en mode capture écran : www.browserstack.com/screenshots
  • netrenderer.com : testez le rendu de votre site sur les différentes versions de IE.
  • IeTester : pour PC uniquement ou Mac équipés de Parallels Desktop ou toute autre solution de virtualisation.

Editeurs javascript / html / css en ligne

Autre solution permettant de gagner du temps : les éditeurs en ligne javascript / html / css.
Il en existe 2 plutôt impressionnants, le premier est jsfiddle.net qui permet de tester des petits scripts JS ou des fonctionnalités CSS et de voir le rendu en direct.

Le second est plus complet et plus ergonomique, comme vous pourrez le voir dans l’exemple, on peut tester une page complète avec les CSS et scripts fonctionnels. Le live editing ça a quand même du bon ! jsbin.com/uteloc/1/edit

CSS 3 Generator

Pour ceux qui ne sont pas encore à l’aise avec les CSS3 ou qui veulent des rendus complexes, une seule solution, les générateurs de CSS. Il en existe un qui regroupe les principales fonctionnalités recherchées lors de l’utilisation de CSS3, il s’agit de css3generator.com.
L’autre solution est de rechercher via Google : « CSS3 generator ».

Entreprises et réseaux sociaux : comment les utiliser ?

utilisation-reseaux-sociaux-entreprise

L’une des choses que j’ai apprises lorsque j’ai réalisé mon mémoire sur les blogs d’entreprises il y a quelques années, c’est qu’il faut absolument rester authentique et proposer un contenu original lorsque l’on parle à ses clients / prospects.
Si aujourd’hui les blogs d’entreprises sont un peu moins en vogue du fait de l’explosion de Facebook, Twitter ou Google +, cette ligne de conduite reste toujours valable.

La question de l’utilité / utilisation de Facebook se pose également pour les autres réseaux sociaux et la réponse peut parfois être simple :

  1. Avez-vous une expérience avérée de ces supports ?
  2. Disposez-vous du temps nécessaire pour alimenter ces réseaux ?
  3. Pouvez-vous proposer un contenu varié et original ?
  4. Votre cible correspond-elle au support utilisé ?
  5. L’utilisation de ces médias sert-elle un objectif particulier? (SEO, assoir son expertise…)

Si vous avez obtenu une majorité de « non » je vous conseille d’y réfléchir à 2 fois avant de vous lancer ! Pourquoi ces questions ? Parce qu’elles ont des réponses bien sûr !

Avez-vous une expérience avérée de ces supports ?

Vous lancer sans connaître le mode de fonctionnement de ces réseaux est risqué : erreurs techniques, création d’un profil au lieu d’une page, mauvaises réponses ou pire pas de réponses aux messages sur votre mur…
Autant d’écueils qu’il faut éviter si l’on souhaite réussir sur les réseaux sociaux.

Disposez-vous du temps nécessaire pour alimenter ces réseaux ?

S’occuper d’une page Facebook prend du temps. Si il existe des community manager ce n’est pas parce que ça fait « hype », c’est parce que c’est utile. Publier de nouveaux statuts, partager des articles, répondre aux fans, ajouter des photos de l’entreprise, organiser des jeux-concours, .etc. sont autant de facettes du métier qui demandent de l’investissement.
En plus de votre activité quotidienne êtes-vous sûr de pouvoir consacrer au moins 2h par semaine minimum à ces réseaux sociaux ?

Pouvez-vous proposer un contenu varié et original ?

Tout comme sur un site internet traditionnel, sur les réseaux sociaux « content is king », le contenu est roi (le crédeau du SEO manager :). L’originalité et la fréquence de publication sont les 2 critères à prendre en compte lorsque vous allez alimenter votre page / profil.
Oubliez les copiers-collers d’articles trouvés sur internet, rédigez vous même vos contenus : cela renforce votre image d’expert et vous proposerez des articles beaucoup plus originaux.
Pour les agences immobilières, ne partagez pas sans arrêt les derniers biens dont vous venez d’obtenir le mandat, variez le plus possible vos publications en essayant de ne pas noyer vos lecteurs : 1 post / jour maximum.

Votre cible correspond-elle au support utilisé ?

La question de la cible peut être de trop je vous l’accorde, mais l’identifier clairement vous permettra de savoir quoi publier et à qui.

Le saviez-vous?
Facebook a mis en place il y a quelques temps une option de ciblage. Lorsque vous publiez un statut, vous pouvez choisir qui le verra, il suffit de cliquer sur l’icône en forme de cible et de sélectionner des critères. De cette manière vous évitez d’importuner tous vos lecteurs et pourrez même multiplier les publications.

L’utilisation de ces médias sert-elle un objectif particulier?

Avant de vous lancer sur les réseaux sociaux avez-vous établi une stratégie précise ou avez-vous tout simplement suivi le mouvement ? Si vous êtes dans le 2ème cas, bon courage !
Si vous avez un contenu intéressant, vos lecteurs le partageront, attirant ainsi de nouveaux internautes vers votre page Facebook ou votre site internet : dans tous les cas votre audience augmentera.
Un bon contenu permettra également à votre page Facebook d’obtenir un meilleur classement, tout comme votre site internet, vous vous positionnez sur des mots clés, l’algorithme de Facebook détecte ces mots clés et classe votre page.
Le nombre de « J’aime », de partages, de publications… détermineront la manière dont votre page apparaîtra dans les résultats des moteurs de recherche.

Globalement l’utilisation des réseaux sociaux par une entreprise répond ces objectifs :

  • développer son audience / sa communauté,
  • prouver son expertise et son savoir-faire,
  • améliorer le référencement,
  • profiter du bouche à oreille de ces réseaux,
  • promouvoir ses actions services (jeux-concours…)

Quel que soit votre domaine d’activité il faut réfléchir à tous ces points afin d’éviter de perdre du temps dans le meilleur des cas ou au pire, de ruiner sa e-réputation !